1. AppInventor - Introducción y Recursos

Para programar apps en Android de forma rápida y sencilla usaremos App Inventor!

App Inventor es un programa web que permite diseñar y programar una aplicación Android que más adelante se podrá compartir e instalar desde la Playstore como una app más!

Usaremos la versión 2 de App Inventor.

1) Pre-requisitos

Para utilizar App Inventor necesitaremos únicamente una cuenta de Google (gmail).

Entrando a la web de App Inventor nos pedirá autenticarnos con nuestra cuenta y ya estaremos dentro!
http://ai2.appinventor.mit.edu/?locale=es_ES

# Idioma

Podemos elegir el idioma en el que queramos trabajar en la barra de arriba a la derecha. En mi caso lo tengo puesto en "Español".

# Creando un Proyecto

Si no tenemos todavía ningún proyecto, le daremos al botón de "Comenzar un proyecto nuevo..."

Nos pedirá que elijamos un nombre (por ejemplo: Prueba) y ya le podemos dar a aceptar.

No os preocupéis por el nombre del proyecto. Aunque no se podrá cambiar, el nombre de la app sí que lo podremos modificar más adelante.

2) Interfaz

Ya tenemos nuestro primer proyecto creado! Vamos a abrirlo y veremos la siguiente pantalla.

# Diseñador

A la izquierda tenemos la Paleta. Estos son todos los elementos que podemos usar en nuestra aplicación, como botones, textos, listas, etc. así como elementos más complejos como bases de datos o google maps. Iremos viendo algunos de ellos a lo largo del curso.

En el centro está el Visor. Esta será la pantalla donde iremos arrastrando los elementos que queramos y viendo como va quedando nuestra pantalla.

Siguiendo por la derecha nos encontramos el apartado de Componentes. Aquí irán saliendo los elementos que añadamos a nuestra pantalla (imágenes, botones, etc.).

Finalmente, para cada Componente que tengamos seleccionado, podremos modificarlo en el último apartado de Propiedades. Por ejemplo si seleccionamos un texto en Componentes, aquí le podremos poner el texto, cambiar el color, tamaño, etc.

Con estas 4 secciones diseñaremos los componentes de la app. Falta ahora ver dónde ponemos el código para cambiar de pantalla, mostrar un mapa, o hacer login de un usuario.

Si os fijáis arriba a la derecha tenemos seleccionado el "Diseñador", vamos a hacer click ahora en "Bloques".

# Bloques

Aquí es donde pondremos toda la "lógica" de la aplicación, es decir, qué ocurre cuando se aprieta un botón, o cómo abro la cámara para hacer una foto, etc.

A la izquierda tenemos las distintas categorías con todas las órdenes que podemos ejecutar. Esto se conoce como "programación por bloques", donde vamos conectando los bloques que queremos para obtener un resultado.

Por ejemplo (para mandar un whatsapp): Cuando se apriete el botón de Enviar Mensaje > Leer el mensaje escrito > Enviar el texto a la otra persona > Añadirlo a la lista > Poner el ✓ al lado del nuevo texto.

A la práctica será un poco más complejo que el ejemplo anterior, pero lo iremos viendo poco a poco. Hay muchos bloques que aprender así que no estresarse y poco a poco veremos los más típicos, dónde están y cuándo usarlos! :)

# Probando la app

En los menús de arriba a la izquierda tenemos las opciones globales del proyecto.

Para probar nuestra app en un móvil real, haremos click en Conectar.

Nos saldrán 3 opciones:

- AI Companion: es una app para Android que podemos descargar desde la Playstore y si estamos en el mismo Wi-Fi que el ordenador, nos conectará el móvil al proyecto e iremos viendo los cambios.

- Emulador: para probar la app en un "móvil virtual" que aparecerá dentro del ordenador. Funcionará solo si tenemos App Inventor instalado i el aiStarter ejecutándose en el ordenador.

- USB: para probar la app en nuestro móvil si lo tenemos conectado al ordenador por USB. Funcionará solo si tenemos App Inventor instalado i el aiStarter ejecutándose en el ordenador.

Recomiendo probar las 3 y usar la que más nos guste o mejor funcione.

3) Recursos

Ya visto lo más básico, vamos a crear ya nuestra app, saliendo de los "Bloques" volviendo al "Diseñador".

# Theme

En el visor vemos que la app queda un poco fea, con la barra gris arriba como si fuera un móvil antiguo. Para modificarlo, con el "Screen1" (el nombre de la primera pantalla no se puede cambiar) seleccionado en Componentes, vamos a Propiedades y hacia abajo buscamos "Theme".
Si desplegamos el menú veremos distintas opciones. Elegiremos el Device Default (que será el Claro / Light) o el Dark si nuestro diseño es oscuro.

Con ello vemos que ahora tenemos ya la nueva barra más moderna de Android y que nos sale de color azul. Vamos a cambiar el color para que corresponda al diseño de nuestra aplicación.

En el mismo apartado de Propiedades, más arriba, vemos que hay 3 campos que son PrimaryColor, PrimaryColorDark y ColorAccent. Estos son los colores principales de la aplicación.
- Primary: El color principal de la app, se usará para títulos, botones, secciones, etc.
- PrimaryDark: Una versión más oscura del color principal, para dar contraste.
- Accent: Un color distinto del primary para llamar la atención del usuario a elementos importantes.

En caso que aún no tengamos los colores (el tema) de la app decidido, podemos usar la siguiente web: https://materialpalette.com para inspirarnos.
Esta página nos generará los 3 colores que necesitamos según los que elijamos y nos dará el "código hex" (ej: #03A9F4) que pondremos en AppInventor en los 3 campos de Color, seleccionando "Custom".

# Iconos

Toda buena aplicación necesita un logo.
Para añadirlo buscamos el campo de "Icono" (seguimos en Propiedades) y hacemos click en "Subir archivo..." para poner el icono que queramos para la aplicación.
El icono quedará guardado pero por ahora no podremos verlo hasta que la instalemos "oficialmente" en el móvil como veremos más adelante.

Para futuros iconos que necesitemos en la app, como por ejemplo flechas, estrellas, personas, etc. podemos usar esta colección gratuita de iconos:
https://material.io/tools/icons/?style=baseline

Para iconos más complejos y de más estilos y temáticas, podemos usar también esta otra web:
https://www.flaticon.com/

# Imágenes

Para obtener gráficos e ilustraciones chulas os recomiendo usar https://undraw.co/illustrations que tiene un montón de ilustraciones de uso gratuito.
Para imágenes podéis probar también https://pixabay.com/.

#Diseño

Podemos inspirarnos en el diseño de nuestra aplicación buscando diseños parecidos hechos por diseñadores profesionales en https://dribbble.com.

Una vez lo tengamos claro, podemos dibujarlo en papel, o crear esquema básico de la estructura en https://wireframe.cc

# Nombre de la App

Por último en "AppName" podremos elegir y modificar el nombre final que tendrá nuestra aplicación.


Esto es todo para la Intro de App Inventor! Vamos ahora a ver cómo poner elementos en la pantalla para crear nuestra propia aplicación!

Siguiente Apartado >