Desarrollo de Aplicaciones

Móviles
con App Inventor y ThunKable

3er Bimestre 4to y 5to secundaria

1
MITOS DEL INTERNET
 http://www.jovenesprogramadores.cl/index.asp

https://www.youtube.com/watch?v=1bDK1-U1edE https://www.youtube.com/watch?v=9ULsplktCd4
TIPOS DE APLICACIONES
La Puerta de App
Inventor
http://appinventor.mit.edu/

5
 Formas de Ejecutar una
Aplicación
Con dispositivo Android Con Emulador Sin conexión a Internet (USB)

6
Ejecución Sin Dispositivo
Android  Si no cuenta con un dispositivo
móvil con Android, puede utilizar
un emulador.
 Descargue emulador desde
la siguiente URL
http://appinventor.mit.edu/explore/ai2/windows.html

7
ETAPAS DE DESARROLLO
DE UN APLICATIVO MÓVIL
Muchos desconocen el trabajo que hay detrás de la creación de una aplicación móvil, las
etapas que tiene este tipo de proyectos y el equipo humano necesario para hacerlo realidad.
A continuación, haré un recuento de las principales etapas que tiene el desarrollo de una
aplicación móvil y mencionaré algunos puntos claves a tomar en cuenta en cada etapa.
 1. Definición del alcance
Antes de aventurarse a buscar empresas especializadas auspiciadoras y solicitar cotizaciones,
es recomendable tener una idea clara de lo que se necesita. A partir de ahora, lo
denominaremos requerimientos. Los requerimientos vienen a ser una descripción textual de
las características que deseas tenga tu aplicación móvil.
Cuanto más detalle tengas de lo que deseas, mayor precisión tendrás lo que en las
cotizaciones puedas recibir. Es muy valioso que tengas información complementaria como
aplicaciones de referencia y algunos bosquejos de cómo te gustaría que se vea tu aplicación.
 Consejo #1:
No solicites una cotización con el siguiente mensaje: “Me gustaría saber cuánto me costaría
desarrollar una aplicación como Rappi”. Es un error recurrente en algunas personas que
solo se limitan a pedir cotizaciones indicando la aplicación de referencia. Esto solo
demuestra que no te estás tomando en serio el proyecto o no tienes la más mínima idea de lo
que quieres.
En estos casos, las cotizaciones que recibirás tendrán un costo muy elevado o alejadas de la
realidad porque las aplicaciones que existen en el mercado tienen demasiadas características,
que han sido desarrolladas en períodos largo en diferentes iteraciones y basadas en métricas
del comportamiento de sus usuarios.
2. Planificación
Con el alcance ya podrás solicitar cotizaciones y evaluar dichas
propuestas para dar inicio al desarrollo del proyecto. Una vez
decidido con qué empresa vas a trabajar, el paso inicial será la
planificación del proyecto.
En esta fase se plasma generalmente en un cronograma de
trabajo la lista de actividades a realizar hasta el cierre del
proyecto. Este cronograma tendrá hitos importantes como la
entrega de avances en determinado período de tiempo que te
permitan visualizar el progreso del desarrollo y a su vez dar
feedback al equipo que lo viene desarrollando. También es
importante definir los entregables que tendrá el proyecto, tales Consejo #2:
Al iniciar el proyecto designa a las personas que
como la documentación generada, el archivo de diseño, el
tendrán la función de aprobar el diseño propuesto,
código fuente, entre otros. los entregables y demás. No trates de involucrar a
La agencia o consultora pondrá a disposición del proyecto un muchas personas para la toma de decisiones
equipo con determinados roles a fin de cubrir todas las etapas porque impactará negativamente en la duración del
del desarrollo. De igual forma, tú como empresa cliente o líder proyecto. Por ejemplo, dejar la aprobación del
del proyecto debes asumir un rol de monitoreo y control, que se diseño de la aplicación a 5 personas hará que la
resume en dar la aprobación de los entregables y dar feedback etapa de diseño se extienda de 7 a 15 días más.
oportuno en cada etapa del proyecto.
3. Análisis de requerimientos
Como primera actividad tenemos el análisis de los requerimientos a un nivel súper minucioso, con el
objetivo de definir a detalle los requerimientos y tener claro los flujos principales y secundarios de la
aplicación. De igual forma, se debe tener claro las reglas particulares de la aplicación asociadas al negocio
o al valor diferencial de la aplicación.
En esta etapa es necesario pactar reuniones las veces que sea necesario para que el equipo de la agencia y
tú como cliente o dueño del producto  estén alineados. En DOAPPS utilizamos las historias de
usuario como herramienta. Es decir, se detallan las características de la aplicación, y a raíz de ellas, se
desglosan las actividades que serán realizadas por el equipo.

4. Diseño de la aplicación
Una vez definido el alcance y detallado los requerimientos, el equipo de diseño UI/UX procede a realizar
una propuesta visual de las pantallas principales de la aplicación y crear un flujo con las mismas. Esto con
el fin de presentarlo al dueño del producto y recibir su aprobación o feedback para aplicar las mejoras
necesarias.
Una vez recibida la aprobación, se procede a diseñar los flujos secundarios y pantallas complementarias. Al
final se tendrá un diseño completo de todos los flujos que tendrá la aplicación; esto será un insumo principal
para el equipo de desarrollo de software.
5. Desarrollo del software
Los requerimientos definidos en el alcance del proyecto y el flujo gráfico de toda la aplicación servirán para definir
una conjunto de tareas que el equipo de programación irá desarrollando.
El equipo de gestión del proyecto junto con el equipo de programación definirán los entregables para tener avances
progresivos. Estos serán mostrados al cliente a medida que se construye la aplicación hasta tener la versión final.

6. Pruebas o testing
Una vez completada la etapa de programación, se realizarán una serie de pruebas funcionales para revisar el
correcto funcionamiento de la aplicación y detectar posibles issues que serán revisados antes de realizar la
publicación.
Luego, se procede a realizar una demostración de la aplicación al cliente. Además, se realizan pruebas conjuntas
para tener su feedback final antes de realizar la publicación de la aplicación.

Realizaremos un ejemplo de elaboración y diseño de un

software o app en inventor
 Requerimientos
 Se necesita crear una App la cual muestre la
imagen de una película de la cual se escuchará su
tema principal (audio).
 La interfaz tendrá dos (2) botones las cuales
permitirán escuchar el tema (play) y otro botón
detener (stop) la melodía.

13
 Recursos
Multimediales
 La imagen del film  archivo jpg, png, bmp
 El audio  archivo mp3, odd u otro.

14
Diseño Lógico

Imagen

Play Stop

15
Creando el
Proyecto en App
Inventor

16
17
 Fase 1
Diseño de
Interfaz
18
 Diseño Esperado

Imagen

Botón Botón

Recurso Multimedia
19
Interfaz Diseño

Asociar el objeto con

la imagen de la 3
película
1

Arrastrar el Objeto
Imagen a la
Pantalla

Subir el archivo
de la imagen de
película
la
2

20
 Disposición Horizontal
(Contenedor)

Contenedor que
albergará a los
dos botones.

21
Agregar los Botones al Contenedor

22
Especificación de Nombres

23
¿Cómo reproducir el tema principal?
¿Cuál es el archivo
mp3 de la música?
24
Reproductor de Sonido

25
Archivo mp3

26
Asociando el Reproductor con el Archivo mp3.

27
 Fase 2
Programación de losBloques

28
Programación de Bloques

 En esta área se colocarán los bloques de código, es decir, las

“instrucciones” las cuales permitirán controlar las acciones de la App.

29
¿Qué pasa cuando se acciona el Botón Play?

30
 Código de los Botones

Play : Escuchar el Tema Stop: Detener la reproducción

Si agregamos nuevas funcionalidades

Pausa : Detener el Tema Salir: Finalizar la ejecución de la App

31
 Ejecución
Opción N°1- La más
Rápida Fast Run
Seleccione esta opción.
Luego Ejecute en su
Smartphone la aplicación
Mit App Inventor 2

Digite el código que apareceré

en su pantalla, en la zona
indicada en la flecha
(imagen), en su Smartphone.

¿Qué sucedió?.
 Ejecución
Opción N°2-
Emulador
35
 Emulador
Ejecutar emulador instalado en el
PC
Desde App Inventor, una
vez que haya iniciado
aiStarter, inicie el emulador
de manera que pueda
apreciar cómo se ejecuta la
App en un aparato móvil
virtual. 36
 Utilizando el
Emulador
Iniciando el emulador….

Vista
Preliminar

37
 Utilizando el Emulador

1
3

38
 Ejecución
Opción N°3- Smartphone

39
Generando un Código QR
Esta opción generará un
código QR el cual podrá
capturar desde el
teléfono móvil, siempre
que haya instalado el
MIT Ai2 (diapositiva 10
de esta presentación).

40
 Ejecución
Opción N°4- Sin Conexión
a Internet (Archivo apk)

41
Generando Archivo
apk

Este archivo podrá traspasarlo (copiarlo) a través de

un cable USB o tarjeta SD a su dispositivo móvil,
en donde posteriormente lo podrá instalar.

42
Segundo
ejemplo
App_CalculoN
otas 43
 Cálculo de
Notas

 PC : Puntaje de Corte (Mínimo para un 4.0).

 PM: Puntaje Máximo.

Fuente: Ricardo Lillo G.  Puntaje: cantidad de puntos obtenidos en la prueba.

44
 Fase 1
Diseño de
Interfaz
45
46
 Fase 2
Programación de losBloques

47
48
Código: Botón Calcular Nota

49
Código: Botón Borrar Datos

50
Ejecución

51
ACTIVIDAD DE EXTENCION PARA
ESTUDIANTES SIN DISPOSITIVOS
1.Realizar una investigación sobre
- ¿Qué es thunkable?
- ¿Cuales son los componentes que contiene?
- ¿Como se puede acceder al programa?
- De que manera se puede realizar las
aplicaciones en dicho programa
2. Elabora una lista de aplicaciones más utilizadas
por la juventud en el 2021 y proyectos para 2022