Tutorial Parte 1: Crear una apliación para Android y subirla a Google Playstore

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

1543066406783.png

Se abrirá una pestaña nueva en el browser para acceder a tu cuenta de Google

1543066593272.png
Aceptamos los Términos:

1543066710452.png
Y finalmente, llegamos al Dashboard para empezar a trabajar

1543066809603.png
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.

1543066974502.png
1543067140663.png
Como se puede ver, la interfaz es bastante amigable

1543067278621.png
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

1543068368081.png
Hecho esto, ya tenemos todo lo que necesitamos.

El primer paso será arrastrar el elemento "WebViewer" a nuestro "Lienzo" principal

1543069239811.png
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.

1543069777115.png
En el cuadro de Texto "HomeUrl", colocamos la url de ForoBiz: https://www.forobiz.com/comunidad/index.php

1543069940512.png

Vamos a testear la aplicación en tiempo real para ver cómo va el progreso. Para ello, hacemos click en "Connect"

1543070276046.png
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

1543070572613.png
En el teléfono, al ejecutar la aplicación, tendremos esto:


Screenshot_2018-11-24-11-41-44.png
Escaneamos el código QR o ingresamos manualmente el que aparece en pantalla y tendremos la aplicación corriendo en nuestro teléfono:

Screenshot_2018-11-24-11-46-49.png

Screenshot_2018-11-24-12-11-04.png

Screenshot_2018-11-24-11-47-05.png
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

Screenshot_2018-11-24-11-52-25.png
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

1543072746670.png
Para solucionar esto, vamos a la pestaña "Components" y nos posicionamos en "Screen"

1543072864833.png
Luego, vamos a la propiedad "Sizing" y seleccionamos "Responsive"

1543072973891.png
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)

1543073749559.png

Nuevamente, en la pestaña "Components" nos posicionamos en "Screen"

1543072864833.png
Quitamos el tilde del checkbox "TitleVisible"

1543073948888.png
Y listo


Screenshot_2018-11-24-12-39-56.png
Como segundo detalle decorativo, vamos a agregarle un ícono a la aplicación: dentro de las propiedades de "Screen"
1543075044103.png


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)".

1543074583122.png
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.

 

Adjuntos

  • 1543067063401.png
    1543067063401.png
    41,9 KB · Visitas: 0
  • Screenshot_2018-11-24-10-56-48.png
    Screenshot_2018-11-24-10-56-48.png
    112,5 KB · Visitas: 1
  • Screenshot_2018-11-24-12-08-15.png
    Screenshot_2018-11-24-12-08-15.png
    83,5 KB · Visitas: 1

Gabriel Avellaneda

Usuario VIP
como haces para optimizar en el ASO?

Hola code1800r. Te miento si te digo jaja

Si bien soy programador de video juegos hace unos años (Unity 3D y C#), siempre fue tema aparte del marketing de afiliación (que es mi trabajo). Recién ahora estoy explorando cómo monetizar tus productos propios (juegos y aplicaciones).

Además, este tema del app inventor y el thunkable lo aprendí hace poco también. Siempre usé el engine Unity3D, y hasta pienso en el futuro hacer posts de como crear tus propios juegos (y usar Unity Ads para monetizar).

¡Un saludo!
 
Arriba