Gabriel Avellaneda
Usuario VIP
Lo que vamos a hacer en este post es una sencillísima aplicación para Android sin programar un sóla línea de código usando "MIT APP INVENTOR"
El primer paso será ir a: http://appinventor.mit.edu
Luego, hacemos click en "Create apps!" como muestra el screenshot
Se abrirá una pestaña nueva en el browser para acceder a tu cuenta de Google
Aceptamos los Términos:
Y finalmente, llegamos al Dashboard para empezar a trabajar
Para este sencillo tutorial, vamos a crear la aplicación de ForoBiz. Hacemos click en el botón "Start New Project" e introducimos el nombre de la App.
Como se puede ver, la interfaz es bastante amigable
Antes de comenzar a colocar los elementos, vamos a descargar del Playstore la aplicación "MIT Companion". Esto nos va a servir para poder ir testeando la aplicación en modo de desarrollo vía Wifi sin tener que compilar a cada rato.
Entonces, buscamos en Playstore "MIT Companion" y la instalamos en el teléfono
Hecho esto, ya tenemos todo lo que necesitamos.
El primer paso será arrastrar el elemento "WebViewer" a nuestro "Lienzo" principal
Este elemento cumple la misma función que la de un browser.
Lo siguiente será posicionarse en el elemento "WebViewer" dentro de la pestaña "Components" para poder manipular sus propiedades.
En el cuadro de Texto "HomeUrl", colocamos la url de ForoBiz: https://www.forobiz.com/comunidad/index.php
Vamos a testear la aplicación en tiempo real para ver cómo va el progreso. Para ello, hacemos click en "Connect"
Una opción para hacerlo es directamente conectando el teléfono a la computadora vía el cable USB, pero a mi criterio es más cómodo vía Wifi con la aplicación que descargarmos (de la misma forma que lo hacemos con WhatsApp Web). Entonces, seleccionamos la primera opción "AI Companion".
Nos aparecerá este pop para conectarnos ya sea mediante el scan del código QR o ingresando el código provisto
En el teléfono, al ejecutar la aplicación, tendremos esto:
Escaneamos el código QR o ingresamos manualmente el que aparece en pantalla y tendremos la aplicación corriendo en nuestro teléfono:
Así ya podemos ir viendo el avance del desarrollo de nuestra app en tiempo real mientras seguimos trabajando.
NOTA: Puede ocurrir el caso de que al visualizar el sitio, se vea todo un poco más grande de los normal
Y además, al hacer scroll down/scroll up, notarás que tenés la opción de disminuir el zoom, pero la herramienta no funciona
Para solucionar esto, vamos a la pestaña "Components" y nos posicionamos en "Screen"
Luego, vamos a la propiedad "Sizing" y seleccionamos "Responsive"
Con eso el WebViewer se adaptará al tamaño de la pantalla del teléfono y también se podrá manipular a gusto el zoom.
Como detalle decorativo, vamos a quitar la barra horizontal superior (Screen1)
Nuevamente, en la pestaña "Components" nos posicionamos en "Screen"
Quitamos el tilde del checkbox "TitleVisible"
Y listo
Como segundo detalle decorativo, vamos a agregarle un ícono a la aplicación: dentro de las propiedades de "Screen"
Lo único que nos queda ahora es exportar el apk a nuestra disco duro para luego subirla en Google Playstore. Para esto, vamos a hacer click en "Build" y luego seleccionaremos la opción "App for Google Play (save .apk to my computer)".
NOTA: las aplicaciones creadas con MIT App Inventor no funcionan para versiones de Android inferiores a la 4.0
En la segunda parte de este tutorial vamos a subir la aplicación a Google Playstore.
El primer paso será ir a: http://appinventor.mit.edu
Luego, hacemos click en "Create apps!" como muestra el screenshot
Se abrirá una pestaña nueva en el browser para acceder a tu cuenta de Google
Aceptamos los Términos:
Y finalmente, llegamos al Dashboard para empezar a trabajar
Para este sencillo tutorial, vamos a crear la aplicación de ForoBiz. Hacemos click en el botón "Start New Project" e introducimos el nombre de la App.
Como se puede ver, la interfaz es bastante amigable
Antes de comenzar a colocar los elementos, vamos a descargar del Playstore la aplicación "MIT Companion". Esto nos va a servir para poder ir testeando la aplicación en modo de desarrollo vía Wifi sin tener que compilar a cada rato.
Entonces, buscamos en Playstore "MIT Companion" y la instalamos en el teléfono
Hecho esto, ya tenemos todo lo que necesitamos.
El primer paso será arrastrar el elemento "WebViewer" a nuestro "Lienzo" principal
Este elemento cumple la misma función que la de un browser.
Lo siguiente será posicionarse en el elemento "WebViewer" dentro de la pestaña "Components" para poder manipular sus propiedades.
En el cuadro de Texto "HomeUrl", colocamos la url de ForoBiz: https://www.forobiz.com/comunidad/index.php
Vamos a testear la aplicación en tiempo real para ver cómo va el progreso. Para ello, hacemos click en "Connect"
Una opción para hacerlo es directamente conectando el teléfono a la computadora vía el cable USB, pero a mi criterio es más cómodo vía Wifi con la aplicación que descargarmos (de la misma forma que lo hacemos con WhatsApp Web). Entonces, seleccionamos la primera opción "AI Companion".
Nos aparecerá este pop para conectarnos ya sea mediante el scan del código QR o ingresando el código provisto
En el teléfono, al ejecutar la aplicación, tendremos esto:
Escaneamos el código QR o ingresamos manualmente el que aparece en pantalla y tendremos la aplicación corriendo en nuestro teléfono:
Así ya podemos ir viendo el avance del desarrollo de nuestra app en tiempo real mientras seguimos trabajando.
NOTA: Puede ocurrir el caso de que al visualizar el sitio, se vea todo un poco más grande de los normal
Y además, al hacer scroll down/scroll up, notarás que tenés la opción de disminuir el zoom, pero la herramienta no funciona
Para solucionar esto, vamos a la pestaña "Components" y nos posicionamos en "Screen"
Luego, vamos a la propiedad "Sizing" y seleccionamos "Responsive"
Con eso el WebViewer se adaptará al tamaño de la pantalla del teléfono y también se podrá manipular a gusto el zoom.
Como detalle decorativo, vamos a quitar la barra horizontal superior (Screen1)
Nuevamente, en la pestaña "Components" nos posicionamos en "Screen"
Quitamos el tilde del checkbox "TitleVisible"
Y listo
Como segundo detalle decorativo, vamos a agregarle un ícono a la aplicación: dentro de las propiedades de "Screen"
Lo único que nos queda ahora es exportar el apk a nuestra disco duro para luego subirla en Google Playstore. Para esto, vamos a hacer click en "Build" y luego seleccionaremos la opción "App for Google Play (save .apk to my computer)".
NOTA: las aplicaciones creadas con MIT App Inventor no funcionan para versiones de Android inferiores a la 4.0
En la segunda parte de este tutorial vamos a subir la aplicación a Google Playstore.