Como exponer tu app Xojo Web local a Internet con ngrok

A continuación encontrarás traducido al castellano el artículo escrito por Gabriel Ludosanu y publicado originalmente en el Blog oficiala de Xojo.

¿Has creado alguna vez una aplicación Xojo web publicada localmente en tu equipo y que hubieses querido compartirla en Internet con un cliente, probarla sobre un dispositivo real fuera de tu área local, o bien integrarla con un servicio web como Stripe o Twilio? Si es así, entonces ya conocerás lo laborioso que resulta hacer que el URL sea público para la app que se está ejecutando localmente.

Es aquí donde entra en juego ngrok: una herramienta fantástica que crea túneles seguros en tu equipo local, de modo que la app Xojo Web que se esté ejecutando localmente sea accesible para cualquiera. Resulta diferencial a la hora de probar apps y hacer demostraciones y el desarrollo rápido.

¿Qué es ngrok y por qué deberías de utilizarla?

Básicamente ngrok es una herramienta ejecutable desde la línea de comandos que crea un URL público y seguro para un servicio o app web que se esté ejecutando en tu equipo local. Piensa en ello como en un puente temporal desde Internet hacia tu ordenador, superando los firewalls y las configuraciones NAT.

En el caso de los desarrolladores Xojo Web, ngrok ofrece las siguientes ventajas:

Pruebas sobre dispositivos reales. Prueba la velocidad de respuesta y funcionalidad de tus apps Xojo Web sobre dispositivos móviles reales, tabletas y otros ordenadores; incluso si no están conectados vía Wi-Fi a tu área local.
Demostraciones inmediatas. Comparte el desarrollo en progreso con tus clientes, colegas o bien amigos sin la necesidad de desplegar sobre un servidor remoto. Estos sólo necesitarán el URL proporcionado por ngrok.
Desarrollo de APIs. Los servicios web de terceros (procesadores de pagos, plataformas de mensajería, etc.) utilizan puntos de acceso para notificar a tus aplicaciones sobre determinados eventos. Estos puntos de acceso requieren el uso de una URL pública a la cual enviar los datos. En este caso, ngrok proporciona justamente eso, haciendo así que el desarrollo sea coser y cantar.
Depuración de problemas. En ocasiones, algunos de los fallos sólo son evidentes cuando la app es accesible de forma pública; ngrok te permite depurar dichos escenarios sin tener que pasar por un despliegue completo de la app web.

¡Se trata de una herramienta fundamental en tu kit de desarrollo con Xojo Web!

Primeros pasos con ngrok

Antes de conectarte a tu app Xojo, hemos de configurar ngrok.

Paso 1: Descargar ngrok

Dirígete al sitio web oficial de ngrok: https://ngrok.com/download.

Descarga la versión apropiada para tu sistema operativo (macOS, Linux, Windows).

Paso 2: Unzip y Copiado

Una vez descargado obtendrás un ejecutable (por ejemplo, ngrok.exe en Windows, ngrok en macOS/Linux). Descomprime el archivo y cópialo en una carpeta adecuada. Personalmente te recomiendo crear una carpeta dedicada para esta herramienta, o bien copia la utilidad en alguna ubicación que sea accesible de forma sencilla desde el Terminal o línea de comandos.

Preparar tu app Xojo Web

Las aplicaciones Xojo Web actúan como servidores autocontenidos. Cuando ejecutas una app Xojo Web en modo de depuración o la compilas para su despliegue, esta escucha a todas las conexiones entrantes a través de un puerto concreto. Por omisión, las apps Xojo Web escuchan en el puerto 8080.

Vamos a asegurarnos de que tu app Xojo Web esté lista:

Abre tu proyecto Xojo Web. Abre cualquiera de tus proyectos Xojo Web o bien crea uno nuevo para realizar estas pruebas.
Ejecutar en modo de depuración. Haz clic sobre el botón “Run” en el IDE de Xojo. Tu app web se ejecutará en el navegador por omisión en http://localhost:8080.

Crear el túnel hacia tu app Xojo con ngrok

¡Es el momento de la magia! Con tu app Xojo Web ejecutándose de forma local, abriremos un túnel usando ngrok.

Paso 1: Abre el Terminal / Línea de Comandos

Abre el terminal de tu sistema (macOS/Linux) o bien una línea de comandos / PowerShell (Windows).

Paso 2: Navega al Directorio ngrok (si es necesario)

Si no has copiado el ejecutable de ngrok en el PATH del sistema, navega hasta el directorio en el hayas copiado ngrok usando el comando cd. Por ejemplo:

cd /path/to/your/ngrok/folder

Paso 3: Ejecuta el comando ngrok

Ejecuta ahora el comando ngrok para crear el túnel. Dado que tus apps Xojo Web se ejecutan normalmente en el puerto 8080, el comando será:

ngrok http 8080

http: Indica que estamos creando un túnel a un servicio HTTP.
8080: Este es el puerto en el que está escuchando tu app web por conexiones entrantes. Si has configurado tu app Xojo para que escuche en un puerto distinto (mediante los Ajustes de Compilación -Build Settings-), asegúrate de usar el número de dicho puerto.

Tras ejecutar el comando, ngrok mostrará información sobre el túnel creado. La salida será similar a la siguiente:

ngrok                                                                            (Ctrl+C to quit)
 
Session Status                online
Account                       Account Name (Free)
Version                       3.x.x
Region                        United States (us)
Forwarding                    https://a52b-20-40-100-120.ngrok-free.app -> http://localhost:8080
 
Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

La línea más importante es la correspondiente a Forwarding. En ella se muestra tanto la URL pública como la URL local a la cual apunta (tu app Xojo Web).

Probando tu app Xojo desde el lado público

Con el túnel de ngrok activo, tu app Xojo Web estará disponible ahora para todos.

Copia el URL HTTPS. Copia el URL https:// proporcionado por ngrok.

Pruébalo:

Pega este URL en cualquier navegador Web de cualquier dispositivo que tenga conexión a Internet (preferiblemente no conectado a tu red local).

Envía el URL a cualquier cliente para que te envíen sus comentarios sobre el funcionamiento de la app.

Prueba la app desde el navegador de un dispositivo móvil que esté utilizando la conexión por datos (no la correspondiente a Wi-Fi en tu área local), de modo que se pruebe así una conexión externa real.

En todos los supuestos anteriores verás como tu app Xojo Web se carga como si estuviese alojada en un servidor web externo.

Conclusión

La herramienta ngrok puede resultar indispensable para cualquier desarrollador Xojo Web. Con ella se simplifica la siempre tediosa tarea de probar las apps web que se estén ejecutando de forma local desde cualquier lugar en Internet; todo ello con la simple ejecución de un comando. Tanto si estás interesado en ver como reacciona la app web en diferentes tipos de dispositivos, para mostrar el progreso a tus clientes o integrar la app con servicios externos, ngrok simplifica sobremanera el fujo de trabajo y te permite centrarte en lo que realmente quieres: crear aplicaciones asombrosas con Xojo.

Prueba ngrok en tu próximo proyecto Xojo Web y te sorprenderás de lo conveniente que resulta.

¿Y que tal si creas un script mediante Build Step para ejecutar ngrok automáticamente cuando sea necesario? ¡Comparte tu experiencia y consejos en los Foros de Xojo!