App Inventor

Conviertete en desarrollador de apps en poco tiempo

Hola a todos, hoy vamos a aprender como crear aplicaciones de android sin saber java. Para ello vamos a usar una app llamada App Inventor 2 del MIT.

App Inventor

App Inventor es una aplicación web de código libre originalmente creada por Google, y ahora mantenida por el Massachusetts Institute of Technology (MIT).
Esta app permite a los desarrolladores principiantes crear aplicaciones para el sistema operativo Android. Esta herramienta utiliza una interfaz gráfica, muy similar a la interfaz de Scratch, que permite a los usuarios arrastar objectos y bloques para crear una aplicación que puede correr en dispositivos Android.

Cómo usarlo

Para comenzar a crear tus propias aplicaciones, sigue estos simples pasos

Listo.

Como crear tu primera app

Para crear un proyecto nuevo, haz click en Start new project

new project

Escribe un nombre para tu nuevo proyecto.

enter image description here

Espera unos segundos y luego tu nuevo proyecto debería abrir automaticamente (si no lo hace, puedes hacer click en el nombre).

Ten en cuenta que puedes cambiar el lenguaje de la interfaz en la esquina derecha de la pantalla. Cabe aclarar que no debería cambiar el idioma si ya has modificado tu proyecto porque pueden ocurrir varios errores.

La interface

Ahora que tu aplicación ya esta creada, es importante que entiendas como App Inventor 2 funciona. AI está dividido en 2 secciones principales:

  • Designer: donde agregas todos los objetos para tu app (como botones, imagenes, alerta de mensages, mapas, sensores, videos, etc)
  • Blocks donde le dices a cada objecto que hacer cuando interactuas con ellos


enter image description here

En la derecha puedes encontrar el botón para cambiar del modo Designer al modo Blocks.

Designer

enter image description here

El modo designer is muy fácil de usar. Solo debes buscar el objeto que quieras en la lista izquierda llamada palette y arrastrarlo a la pantalla dibujada del telefono.

palette

Cada vez que agregues un item, este se agrega a la lista tipo arbol llamada components.

components

Si seleccionas el objecto botón, deberías ver una lista de propiedades de este. Aquí podrás cambiar el estilo y algunas funcionalidades de cada componente.

Blocks

La sección blockes es un poco mas compleja, pero comparado con aprender java es pan comido.

blocks

Cuando sellecionas un componente, una lista de block se vuelve visible. Para saber que hace cada componente solo mueve el mouse sobre este. Para usarlo, solo arrastralo y sueltalo.

blocks

Ejemplo

Vamos a crear un simple ejemplo para que entiendas mejor como funciona esto. Vas a notar que la idea es muy simple y las limitaciones son mayormente tu imaginación.
Sigue los siguientes pasos:

  • crea un nuevo proyecto y llamalo CopitoSystem
  • in modo designer: arrastra un componente botón
  • arrastra un componente web viewer
  • seleciona el componente botón y en las propiedades (barra derecha) cambiar el texto por Cargar CopitoSystem


example

  • cambia al modo Blocks
  • has click en el elemento botón y arrastra el primer bloque (when Button1.click) en la pantalla

button

  • ahora has click en el componente webviewer y arrastra el bloque go to url dentro del bloque del botón

webviewer

blocks

  • arrastra un bloque de texto vacío

blocks

blocks

  • ve al menu superior, selecciona la option build and elige cualquiera de la dos opciones

blocks

Listo, ahora puedes instalar la aplicación en tu telefono y verificar que funcione. Yo generalmente uso la opcion del código QR, es más rapido que el emulador.

Ten en cuenta que debes permitir instalar aplicaciones externas en la opción de Android para poder instalar la app que acabas de crear

Si todo salió según lo planeado, deberías ver algo así:

appinventor

Eso es todo por ahora, si te gustó esta nota o tienes alguna pregunta, déjanos un comentario!


Deja un comentario