guia de trabajo. programacion para app movil 1€¦ · guia de trabajo. programacion para app movil...

COLEGIO DE BOYACÁ SE-GU—11

SISTEMA DE GESTIÓN DE LA CALIDAD VERSIÓN 1.0

GUIA DE TRABAJO. PROGRAMACION PARA APP MOVIL

1.2 31/03/2020

Página 1 de 11

Taller de iniciación de contenido de estructura de programación para App Móvil

GRADO: Undécimo

Tiempo. 2 horas

NOMBRE DEL DOCENTE:

Angie Misley López López

Rosa Elena Arévalo TÓPICO GENERATIVO

¿Por qué es importante conocer elementos que se usan en la programación para el desarrollo de aplicaciones

móviles?

HILOS CONDUCTORES:

¿Cómo diseñar y desarrollar aplicaciones móviles dirigidas al apoyo de la enseñanza aprendizaje?

EXPLORACIÓN DEL TEMA:

Estructura de programación (APP MOVILES) De los lenguajes de programación más usados encontramos

el sistema operativo Android, En la actualidad tiene en sus filas el Lenguaje de Programación más popular, esto

puede cambiar uno nunca sabe, hablamos de Java y otro más moderno que puede llegar a reemplazarlo si es que

deciden no usar más Java por algún motivo particular hablamos de App inventor.

APRENDIZAJES EVIDENCIAS

Solución de problemas con tecnología

Aplicación de la programación en el

programa app inventor y en este desarrollar

prototipos de aplicaciones móviles.

Utiliza software de simulación para realizar, programar y crear

prototipos de aplicaciones móviles.

MATERIAL DE APOYO

Guía, videos, blog con información idónea al

tema, correo electrónico, entre otros.

META:

Los estudiantes desarrollarán comprensión acerca de qué tipo de

software de simulación y elementos de programación que se usan para el desarrollo de aplicaciones móviles.

Ampliar la información sobre el desarrollo de aplicaciones móviles, revisando el siguiente link: https://blog.nubecolectiva.com/lenguajes-de-programacion-para-desarrollar-aplicaciones-moviles/

Estructura de programación para aplicaciones móviles.

Cuando se inicia como desarrollador de aplicaciones móviles

debe elegir el Lenguaje adecuado, uno que cumpla las

expectativas y requerimientos del proyecto que quieres

desarrollar, existen los lenguajes más conocidos como Java

(Android) y Swift (iOS) pero existen lenguajes más allá de estos

conocidos, que son usados por las grandes empresas, pero para

iniciar a comprender el desarrollo de aplicaciones móviles App

inventor es uno de los mejores programas para el desarrollo de

app móviles.

https://blog.nubecolectiva.com/lenguajes-de-programacion-para-desarrollar-aplicaciones-moviles/




1.2 31/03/2020

Página 2 de 11

Desarrollo de la práctica Virtual en app inventor.

Creación de primera aplicación en app inventor primera parte.

1. Ingrese a la página: https://appinventor.mit.edu/

Es un software en línea completamente gratuito. Hacer clic en créate apps.

2. Regístrese con un correo electrónico. O ingrese en iniciar sesión, si ya tiene cuenta

3. Se iniciará en página principal de app inventor. Dirá que se debe realizar una encuesta y se debe oprimir en más tarde.

INGRESAR

https://appinventor.mit.edu/




1.2 31/03/2020

Página 3 de 11

1. Lo primero que se hará es crear un proyecto el cual se denominara Primera Aplicación. Para

crear el nuevo proyecto hay que hacer clic en Start new proyect. En este nuevo proyecto crearemos un lector utilizando posiciones, botones y diferentes screem insertando diferentes componentes de la interface de usuario.

INICIEMOS.

2. Automática mente ya aparecerá creado. Una vez hecho esto se verá en el visor, la pantalla vacía, a la que se le va a colocar un logotipo a modo de pantalla de presentación. Para esto se ira a

MEDIA>SUBIR ARCHIVO.




1.2 31/03/2020

Página 4 de 11

3. Saldrá una ventana emergente a la que se le hará clic en el botón SELECCIONAR ARCHIVO.

4. Cuando se haya esto se abrirá el explorador y se debe seleccionar las imágenes que se subirán .

FOTO.PNG y ESCUDO.PNG (debe aparecer su foto y un logo que le agrade, preferiblmente

el del colegio) una vez seleccionado se hará clic en abrir en la ventana emergente para que se suba uno a uno. Ahora en media se visualizará los archivos subidos.

5. Una vez subidas la imágenes se ira a la PALETA y se hará clic en LAYOUT seguido arrastraremos el componente VERTICALARRANGEMENT dentro de Screen1.

6. Se mostrara inmediatamente un cuadro gris en la esquina superior izquierda del Screen1 del

visor.




1.2 31/03/2020

Página 5 de 11

7. En la parte derecha se encuentra PROPIEDADES hay una serie de opciones, se debe modificar el ancho y el alto y se le pondrá ajustar al contenedor.

8. Ahora se colocará la imagen que se descargó dentro del componente VERTICALARRANGEMENT para colocarla hay que ir PALETA>INTERFAZDE USUARIO arrastrar el componente imagen a VERTICALARRANGEMENT, al hacerlo se verá como en el árbol jerárquico de COMPONENTES la imagen está dentro de VERTICALARRANGEMENT.

9. Luego de hacer lo anterior de le ajustara el height a 300 pixeles y el width a 250 pixeles de la

imagen a la pantalla y de seleccionar la imagen que se va a mostrar en este caso será FOTO como se muestra en la siguiente imagen.




1.2 31/03/2020

Página 6 de 11

10. Ahora se agregará un componente no visible, que será un reloj, que controlará el tiempo en el que permanecerá la pantalla de presentación abierta, para ello se ira a PALETA>SENSORES y arrastrar el componente reloj dentro del SCREEN1.

11. Inmediatamente de vera que el componente no aparece dentro del mismo cuadro si no abajo, esto es porque es un componente que no es visto por el usuario, pero que si tendrá interacción con el mismo.




1.2 31/03/2020

Página 7 de 11

12. En sus propiedades se desmarcara temporizador habilitado y pondremos en intervalo del

temporizador 5000.

Con esto ya tendrá la pantalla de presentación, ahora hay que crear la pantalla donde el usuario, haciendo clic en los botones, interactúe con la aplicación.

13. Crear una nueva pantalla, para ello se hará clic en la barra superior Añadir ventana.

14. Se abrirá una ventana emergente en la que pedirá que introduzca el nombre, se le pondrá

PRINCIPAL.




1.2 31/03/2020

Página 8 de 11

15. Luego se ira a la paleta, disposición y se arrastra el componente DISPOSICIONVERTICAL dentro de la nueva pantalla que se ha creado. En las propiedades el alto se le dará el 50% y el ancho se

le ajustara al contenedor, esto hará que independientemente del tamaño de la pantalla del dispositivo, siempre ocupe la mitad del alto, y el ancho el total de la pantalla.

16. Ahora ir de nuevo a PALETA>DISPOSICION y arrastrar el componente

DISPOSICIONHORIZONTAL a la pantalla del visor, justo debajo de la disposición vertical que se colocó anteriormente, en sus propiedades se le pondrá el alto en automático, esto es para que se ajuste automáticamente al alto de lo se ponga dentro y en ancho le pondremos ajustar al contenedor.

17. Ahora se arrastra del panel PALETA>INTERFAZ DE USUARIO una ETIQUETA dentro de la DISPOSICIONVERTICAL y en las propiedades seleccionar el cuadro de la opción negrita, el tamaño de letra 30, el tipo de letra sans serif, marcar el cuadro de HasMagirns, el alto se pone como automático, ancho seleccionar ajustar al contenedor, el texto se le cambia el nombre por

prototipo y se le pone la posición del texto en el centro con el color negro.




1.2 31/03/2020

Página 9 de 11

18. Luego se arrastra el componente CAJAS DE TEXTO situado en la PALETA>INTERFACE DE

USUARIO a la DISPOSICION VERTICAL justo debajo de la etiqueta. En sus propiedades tanto alto como ancho se seleccionara ajustar al contenedor y en sugerencia se pondrá un texto que describa al usuario la acción que tiene que hacer, por ejemplo INTRODUZCA UN TEXTO.

19. Ahora en la DISPOSICIONHORIZONTAL que anteriormente se colocó en la segunda pantalla,

ir a la PALETA>INTERFACE DE USUARIO y arrastrar tres botones a esta DISPOSICIONHORIZONTAL, a un lado del otro quedando como se muestra a continuación.




1.2 31/03/2020

Página 10 de 11

20. En propiedades de cada uno de los botones se colocara el alto automático y el ancho ajustar al contenedor, al poner la propiedad ancho ajustar al contenedor todos se redimensionan quedando del ancho de la DISPOSICIONHORIZONTAL. En el botón situado a la izquierda, en el campo

texto se le pondrá ESCRIBIR en el del centro VOZ y en el que está a la derecha LEER, y en los tres el tamaño de letra será 10.

21. Ahora se agregara dos componentes no visibles, que será, TEXTOAVOZ y RECONOCIMIENTODEVOZ, que controlara dos aspectos importantes como son la escritura por voz y convertir el texto en audio, y permanecerá en la pantalla de Principal, para ello, hay que

ir a la PALETA>MEDIOS y arrastrar el componente TEXTOAVOZ y RECONOCIMIENTODEVOZ dentro de la pantalla con nombre PRINCIPAL. Inmediatamente se verá que los componentes aparecen abajo.




1.2 31/03/2020

Página 11 de 11

22. Ahora que ya están todos los elementos dentro de la pantalla se pasara a hacer la comprobación en el dispositivo móvil para ello se ira a la pestaña conectar y se seleccionara la opción que más

se ajuste a la necesidad, ya sabe que con tres las opciones de conexión al COMPANION O USB.

Para ver el diseño en el dispositivo móvil es necesario descargar en el teléfono desde la play Store una aplicación que se LLAMA MIT AL2 COMPANION se descarga y lego se le da clic en código Qr y se escanea el código Qr que genera la aplicación en el computador, cuando se escanee la

aplicación aparecerá en el teléfono móvil. Hasta acá se ha terminado el diseño de la aplicación pero a un falta el diseño lógico(Programación) que se verá en la próxima guía el diseño lógico nos ayudara para que al

hacer clic en los botones del dispositivo haga la acción que se quiere. NOTA: Para el desarrollo de la guía es necesario descargar dos imágenes que van en la carpeta adjuntas con la guía, por favor seguir el paso a paso para poder desarrollar el ejercicio.

23. EJERCICIO: El estudiante deberá realizar una app de prueba poniendo en práctica lo que la docente explica en la guía, con diferentes imágenes y que trate de un tema, se puede escoger el

tema que el estudiante desee pero que este coherente con las imágenes que se utilizan. El estudiante deberá ajuntar algunos pantallazos del desarrollo de la aplicación y del resultado final hasta donde la docente explica en la guía.

guia de trabajo. programacion para app movil 1€¦ · guia de trabajo. programacion para app movil...

Documents