Diagrama de temas

• Bienvenidos al curso
  

  Bienvenidos al curso

  Curso Programación de Apps para Android dirigido a facilitadores/as, docentes y formadores/as de los Centros de la Franquicia Social Trust.

  Duración: 18 horas de trabajo autónomo en línea en el Aula Virtual Trust

  
  

  Requerimientos para los/as participantes que realicen el curso: Cuenta de correo electrónico Gmail, Acceso a Computador y Celular, Acceso a internet.
  

  
  

  Conocimientos previos para tomar el curso: Conocimientos en lógica computacional y pensamiento abstracto, funcionamiento de bases de datos, uso de navegadores web, funcionalidades de dispositivo móvil, instalación de APK en celular, funcionalidad de códigos QR, habilidades de ensamblar piezas, secuencias de flujogramas.
  

  
  

  Se entregará un certificado de aprobación del curso previo cumplimiento del 70% de las actividades establecidas.
  

  
  

  • Avisos Foro
• Introducción a desarrollo de Aplicaciones para Android
  

  Introducción a desarrollo de Aplicaciones para Android

  
  

  Su misión
  

  Para nadie es un secreto que la gran revolución del siglo XXI han sido las tecnologías de la información. Pues bien, las aplicaciones móviles hacen parte de este auge TIC, permitiendo que las  funcionalidades de los dispositivos móviles se potencien a su máximo nivel. Sin embargo, lo que no muchos saben es que diseñar y desarrollar una aplicación requiere de escasos conocimientos informáticos. Hoy en día están disponibles en la web, programas de desarrollo de apps, las cuales, con pocos bloques como rompecabezas, permiten a un “Desarrollador” entregar una solución Android en pocos minutos.

  
  Con esta guía buscamos que descubras las herramientas digitales que te permitirán solucionar, con el uso de un smartphone, muchas de las necesidades del mercado.

  Let’s Code!

  
  Conocimientos previos y vocabulario.

  
  Complete las preguntas 1 a 4 de manera individual y luego discútalas con los asistentes.

  
  1.   ¿Cuáles sistemas operativos para smartphones son los más comerciales?
  2.   ¿Qué es una sentencia?
  3.   ¿Qué ha oído de seudocódigo?
  4.   Describa las posibles funciones que usa una aplicación móvil que usted conozca.
  

  
  

  App Inventor: Armando el código

  
  

  
  

  Uno de los grandes temores de las personas que desean desarrollar aplicaciones Android, es que deben conocer un lenguaje de programación como Java, C o código escrito. Pues bien, las largas horas compilando código, declarando variables, encontrando los puntos y coma “;” faltantes en un código se han acabado. El MIT en alianza con Google han desarrollado un programa que reúne todo el código fuente en un único bloque. Tal vez suene un poco extraño, pero la verdad es que la evolución nos debía la simplicidad y el MIT lo ha logrado. Para entender esto veamos lo siguiente. En un programa convencional para el desarrollo de aplicaciones nos podríamos encontrar con un código como estos:

  int a=4; int b=5; if (a<b); label.setText(label.getText()+"Los valores ingresados son inválidos"); end if;

   

  Por otro lado, App Inventor permite que, usando simples piezas de rompecabezas, podamos iniciar tipos de variables, comparar valores y hasta imprimir etiquetas, veamos:

  
  
• Índice
  

  Índice

  
  

  INDICE APP PARA ANDROID CIENCIAS DE LA COMPUTACIÓN

  
  

  1. Lógica computacional
  2. Comparativo Diagrama de flujo, Pseudocódigo, Lenguaje C y Bloques de App Inventor 
  3. Mi primera aplicación en App Inventor
  4. Ingreso de componentes en entorno visual de App Inventor
  5. Insertar componente de traductor Yandex en App Inventor
  6. Programación de bloques en App Inventor
  7. Uso de cajas de texto y botón en bloques de App Inventor
  8. Uso de bloques de Yandex en App Inventor
  9. Simulación de aplicación en App Inventor
  10. Descarga de archivo APK de aplicación en App Inventor
  11. Instalación de APK en celular
  12. Ejercicio de lógica de secuencias
  13. Sensor de Ubicación en App Inventor
  14. Sensor de Giroscopio en App Inventor
  15. Activar cámara de celular con App Inventor
  16. Uso de mensajes de texto con App Inventor
  17. Dibujar en un Lienzo con App Inventor
  18. Actividad de razonamiento lógico
  19. Integración de bases de datos Firebase con App Inventor
  20. Autenticación en bases de datos Firebase
  21. Clave de API web en la base de datos Firebase
  22. Ingreso de FirebaseToken y FirebaseURL
  23. Reto de autoaprendizaje

  
  
• 1. Lógica computacional
  

  1. Lógica computacional

  ¿Qué es la lógica computacional?

  
  

  La lógica computacional, en términos de programación se define como la lógica matemática aplicada a las ciencias de la computación, donde una serie de combinaciones o pasos me permiten llegarán a un fin, una conclusión o la solución a un problema. El uso de esta lógica computacional se utiliza o tiene los siguientes niveles. La programación lógica y el análisis y optimización de algoritmos

  
  

  ¿Qué es un laberinto y qué relación tiene con la lógica computacional?
  

  
  

  Laberinto. Del latín labyrinthus, es un espacio creado de forma lógica y secuencial con múltiples caminos y puntos ciegos para que la persona que se encuentre dentro de este se sienta perdido y no logre hallar la salida de una forma fácil, solo podrá salir si sigue los pasos exactos, pueden existir uno o varios caminos para llegar al final.

  Los laberintos juegan un papel fundamental en entender la lógica computacional, ya que para realizar un programa de ciencias de la computación debes seguir una secuencia lógica de pasos que te permitan el funcionamiento de la plataforma digital, al igual que los laberintos se debe ir paso a paso por un camino para encontrar la salida.

  
  

  Actividad de lógica computacional

  Tómese un tiempo para describir la forma lógica de entrar y salir de este laberinto:

  
  En la siguiente imagen se presenta la ruta para ir desde el inicio del laberinto hasta el final de este. El reto es describir el recorrido paso a paso usando instrucciones en orden. 

  
  

  ¿Cuál es la diferencia entre estos dos pasos ordenados?

  
  

  Origen	Sentido	Destino	Recorrido
  A	-	-	0
  A	Bajar	A3	3
  A3	Derecha	C3	2
  C3	Bajar	C4	1
  C4	Izquierda	B4	1
  B4	Bajar	B7	3
  B7	Derecha	D7	2
  D7	Subir	D4	3
  D4	Derecha	4	1
  -	-	4	0

  
  
  

  Origen	Sentido	Destino	Recorrido
  -	-	A	0
  A3	Subir	A	3
  C3	Izquierda	A3	2
  C4	Subir	C3	1
  B4	Derecha	C4	1
  B7	Subir	B4	3
  D7	Izquierda	B7	2
  D4	Bajar	D7	3
  4	Izquierda	D4	1
  4	-	-	0

  
• 2. Comparativo Diagrama de flujo, Pseudocódigo, Lenguaje C y Bloques de App Inventor
  

  2. Comparativo Diagrama de flujo, Pseudocódigo, Lenguaje C y Bloques de App Inventor

  A continuación, una comparación entre un diagrama de flujo, pseudocódigo, lenguaje C y bloques de App Inventor:

  
  

  

  
  

  Lo que existe en las tiendas de aplicaciones: Casos de éxito

  
  

  
  

  ¿Cuáles de las anteriores aplicaciones ha usado? ¿Sabe cómo funcionan? Pues muchas de ellas son de las más descargadas y usadas por muchas personas en el mundo.
  
  

  Por ejemplo, Whatsapp utiliza un esquema muy similar a una base de datos con notificación de cambios en tiempo real, usa un lienzo (Canvas) en el que se imprimen burbujas de comentarios, almacenadas en un árbol que se condiciona por un número de celular, que activa un sonido al recibir un nuevo mensaje, y permite asignar una imagen de foto de perfil y fondo de pantalla.
  
  

  Whatsapp es un excelente ejemplo de una aplicación que se puede desarrollar usando un entorno de programación basado en bloques. Imagínese cualquier aplicación que desee crear en la que pueda tener un módulo de “Hable con nosotros” y que tenga su propia base de datos.
  
  

  Como sugerencia, es importante leer el material de apoyo que le permitirá conocer el alcance que tiene la plataforma para el desarrollo de diferentes aplicaciones móviles.
  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 3. Mi primera aplicación en App Inventor
  

  3. Mi primera aplicación en App Inventor

  Mi primera aplicación

  
  

  Desarrollar una aplicación en tiempo récord

  Nada de esto sería útil, si no puede diseñar y desarrollar una aplicación de la forma más sencilla posible.
  En este apartado, le mostraremos los pasos para hacer realidad el reto de crear una aplicación en el menor tiempo posible.

  
  ·   Lo primero que debemos hacer es asegurarnos de tener una cuenta en Gmail.
  ·   Luego debe ingresar a la página del MIT, en el enlace http://appinventor.mit.edu/explore/
  ·   ¡En la parte super izquierda debe dar clic en el botón Create apps!

  
  

  
  

  ·  Para acceder a la cuenta de App Inventor, MIT solicita que ingrese su correo de Gmail y la contraseña que tiene asignada a la misma. Esto se hace con el fin de vincular la cuenta a la plataforma de desarrollo y así no tener que crear un usuario diferente al que ya usa por defecto en su cuenta de correo electrónico.

  
  

  ·   Una vez ha iniciado sesión, encontrará en la parte superior izquierda un botón con llamado “Comenzar un proyecto nuevo”.

  
  

  ·   Si el lenguaje del entorno de desarrollo está en Ingles, puede escoger español desplegando la lista de idiomas ubicada en la parte superior derecha:

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  
  
• 4. Ingreso de componentes en entorno visual de App Inventor
  

  4. Ingreso de componentes en entorno visual de App Inventor

  “Bloques a la obra”: Entorno visual

  
  

  Sabemos que, al llegar a este punto, ya ha leído el material de apoyo referenciado en esta guía, de tal forma que ubicar los bloques en la pantalla de desarrollo será muy sencillo.
  
  

  Siendo así, vamos a crear una aplicación que traduzca del español al inglés un texto introducido. Esta aplicación debe incluir una Caja de texto en la que se va a introducir el párrafo a traducir, un botón que será el encargado de ejecutar el procedo de traducción, una etiqueta que será la encargada de mostrar el texto traducido al inglés.
  
  

  Es un buen hábito de todo programador iniciar su desarrollo con un diseño preliminar de la aplicación, en el que pueda visualizar el entorno gráfico de la aplicación y estimar el código que permite la funcionalidad de lo que se ve en pantalla.
  
  

  Por eso vamos a empezar por llevar los elementos mencionados en el reto al módulo de diseñador. Arrastrando los componentes (en rojo en la parte inferior) al centro de la pantalla, podrá ubicar los mismos en el lugar que más le agrade:

   

  Cambiar las etiquetas de los elementos gráfico, hará que la aplicación sea mucho más amigable con el usuario. Por ejemplo, puede cambiar el nombre del botón “Texto para Botón 1” por “Traducir”, así:

  
  

  El resultado:

  
  

  La etiqueta (Texto para Etiqueta1) puede estar vacía hasta que se realice la traducción, o si así lo desea, puede indicar que allí se relacionará el resultado de la traducción. Seleccione la etiqueta y explore las propiedades del componentes a la derecha de la pantalla. 
  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 5. Insertar componente de traductor Yandex en App Inventor
  

  5. Insertar componente de traductor Yandex en App Inventor

  Bueno, hasta este punto ya tenemos un entorno gráfico básico que cumple con los requisitos del reto. Sin embargo, a pesar de que podríamos agregar imágenes y colores, vamos a mantenerlo simple para que puedas explorar más adelante las otras funciones del entorno de desarrollo. Solo nos falta incluir el medio de traducción que se encuentra en la paleta de la izquierda pestaña medios:

  
  

  Al arrastrarlo al visor, verás que en no lo puedes identificar como un elemento gráfico de la aplicación. Esto se da porque el componente es invisible para el usuario:

  
  

  Si usted quisiera incluir una imagen en su aplicación, solo debe arrastrar el icono de la paleta, así:

  
  

  El visor de la aplicación le mostrará que ya se incluyó el formato de imagen. Se ha ampliado el tamaño del contenedor de texto, esto lo podrá hacer seleccionando el componente y cambiando las propiedades a la deracha de la página:

  
  

  Ahora solo deberá cargar la imagen que desea ver en el bloque incluido.

  
  

  Una vez subido el archivo y ajustado el tamaño de la imagen que dese visualizar, observará algo así:

  
  

  Si desea eliminar la imagen o cualquier bloque en el visor de diseño, solo deberá seleccionarlo en el menú componentes y pulsar el botón borrar, así:

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 6. Programación de bloques en App Inventor
  

  6. Programación de bloques en App Inventor

  ¡Perfecto! Ya tenemos todos los componentes necesarios para “armar” los bloques de código. Ahora, desde la parte superior derecha vamos a dar clic en el botón Bloques. A continuación, entramos al entorno de programación que se ve así:

  
  

  A partir de este memento, ya podemos volver a leer el reto y definir la función de cada propiedad ingresada en el visor de diseño.
  
  

  Para empezar, la instrucción más relevante del reto dice que “al dar clic en un botón, este deberá traducir al inglés el párrafo introducido”. Veamos cómo se hace este simple paso:

  
  

  Verás que al dar clic en el objeto “Botón1” se despliega una pequeña ventana que contiene unos bloques en café. El primero de ellos dice “cuando Boton1.Clic” y en la parte inferior trae un espacio para incluir una instrucción. Pues bien, este es el bloque que cumple con el requisito del reto, que “al dar clic a un botón” este haga algo. Lo arrastramos a la mitad de la pantalla de desarrollo y verá algo como esto:

  
  

    

   

  
  
  
• 7. Uso de cajas de texto y botón en bloques de App Inventor
  

  7. Uso de cajas de texto y botón en bloques de App Inventor

  Ahora, el reto dice que se debe traducir un texto. Vale la pena que nos preguntemos donde está el texto. La respuesta es muy sencilla, el usuario debe escribir el párrafo en la “Caja de texto”, por lo que debemos es tomar el contenido de esa caja y traducirlo. Veamos cómo se hace:

  
  

  Dar clic en el bloque de Traductor Yandex1, el mostrará una función en color morado que dice “llamar TraductorYandex1.Solicitar traducción”. Vamos a ingresarla dentro de la función “cuando Boton1.Clic”:

  
  

  Puede notar como ambos bloques se adaptan de forma perfecta, este es un indicador de que está ensamblando bloques de manera coherente. De todas formas, si los bloques no tienen correlación, el sistema jamás lo dejará ensamblarlos.
  Ahora vamos a pegar el texto a traducir que se encuentra en la caja de texto:

  
  

  Una vez arrastrado al visor de desarrollo, verás algo así:

  
  

  Ahora solo debemos seleccionar el lenguaje al cual queremos traducir. Para más información sobre la opción Traductor Yandex puede pararse con el mouse sobre la propiedad, la cual le dará más información sobre el contenido:

  
  

  Este texto lo que nos quiere decir es que si queremos traducir al inglés debemos escribir una cadena de texto que diga “en”, así:

   

  Al incluirla al código debemos ver algo como esto:

  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  

  
  
• 8. Uso de bloques de Yandex en App Inventor
  

  8. Uso de bloques de Yandex en App Inventor

  Con estas sentencias declaradas solo nos falta indicar que función va a cumplir el Yandex. Para eso podemos observar en bloques la próxima sentencia a utilizar:

  
  

  Al arrastrarla a la pantalla de diseño deberá verse así:

  
  

  Ahora, el reto nos dice que la traducción deberá ser incluida en una etiqueta. Para esto, nos vamos al módulo de bloques y buscamos la característica “poner Etiqueta1.Texto”:

  
  

  Para extraerlo solo deberá pasar el cursor del ratón sobre la pieza que quiere extraer. Al agregarlo se debe ver así:

  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

    

    
  

  
  

  • Actividad de Evaluación: El bloque correcto (Cuestionario)
  • Foro aclaración inquietudes sobre "El bloque correcto"
• 9. Simulación de aplicación en App Inventor
  

  9. Simulación de aplicación en App Inventor

  ¡Y esto es todo!

  
  Ahora vamos a ver cómo funciona.

  
  Lo primero que vamos a hacer es buscar en la parte superior la opción conectar AI Companion

  
  

  Para poder utilizar nuestro dispositivo como banco de pruebas tenemos que descargarnos de Google Play Store una aplicación que se llama “AI2 Companion”. Buscarla en Google Play Store con ese nombre y descargarla ahora. Ocupa poco, y sólo hará falta descargarla una vez.
  
  

  Buscamos en el celular la aplicación Play Store.

  
  

  En el buscador del Play Store ingresamos la palabra MIT donde se despliegan las aplicaciones relacionadas.

   

  Seleccionamos la primera opción MIT AI2 Companion y le indicamos instalar.

   

  Al finalizar la instalación procedemos a abrir MIT AI2 Companion donde nos pedirá permisos de cámara (PERMITIR) para poder escanear los códigos QR.

  Aplicación instalada correctamente para poder descargar las aplicaciones desarrolladas.
  

  Con la aplicación de AI Companion instalada en su celular, vamos a abrirla y a dar clic en el botón "scan QR code"

  

  Un código QR será generado de forma automática. Tenga en cuenta que para visualizar la emulación de la aplicación, el PC donde está haciendo el desarrollo y su celular, deberán estar logueados en el mismo wifi.

  Al ejecutar la aplicación incluyendo un parrafo en el campo de texto y dando clic en traducir, podrá observar el funcionamiento de la misma:

  
  

  Les invitamos a revisar los siguientes videos que servirán para ampliar sus conocimientos.

   

   
   

   
  
• 10. Descarga de archivo APK de aplicación en App Inventor
  

  10. Descarga de archivo APK de aplicación en App Inventor

  Descargar el archivo APK para compartir el desarrollo de la aplicación

  
  

  Una vez simulada con éxito la aplicación, es hora de descargar el archivo que se ejecutará en cualquier dispositivo móvil Android. De esta forma, usted puede tomar cualquiera de los siguientes dos caminos:

  
  

  Descargar una aplicación e instalarla en un Smartphone

  Si usted quiere instalar una aplicación en su dispositivo móvil, debe tener en cuenta que debe habilitar ciertos permisos. Esto se debe a que Android ha bloqueado todas las aplicaciones que no son descargadas de PlayStore, con el fin de evitar que Malware, virus y hackers puedan acceder y controlar la información y funciones de su equipo. Esta protección se conoce como orígenes desconocidos o habilitar orígenes desconocidos.

  
  Ahora, para descargar la aplicación en su celular o Tablet debe dirigirse al menú de la parte superior y dar clic en el botón generar. Posteriormente, debe seleccionar la opción App (generar código QR para el archivo .apk), así:

  

  Se generará un código QR el cual estará habilitado por las siguientes dos (2) horas. Utilizando el AI Companion del MIT podrá descargar la aplicación para que funcione permanentemente en su dispositivo móvil. La ventana emergente con el código QR se verá así:

  

  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 11. Instalación de APK en celular
  

  11. Instalación de APK en celular

  Si su Smartphone no permite la instalación de aplicaciones no descargadas en PlayStore, es posible que un mensaje como estos aparezca en la pantalla de su celular. Para continuar solo debe seleccionar la opción “Instalar de todas formas”.

  

  Una vez aceptada la recomendación de Play Protect, usted podrá acceder a la aplicación desarrollada desde su dispositivo móvil en cualquier momento.

  
  

  Descargar una aplicación para subir a PlayStore

  
  

  Otra opción para usar la aplicación desarrollada es descargar el archivo .apk para usarlo como insumo base en la tienda virtual. Para este fin, debe seleccionar la opción Generar-App (guardar archivo .apk en mi ordenador), así:

  

  Al seleccionar la opción, el archivo se descargará automáticamente en su carpeta de descargas. Este será el archivo que deberá usar para poner a su disposición de todo el mundo la aplicación desarrollada.

  Tenga en cuenta que los pasos para cargar una app en PlayStore están definidos por la tienda virtual, por lo que el detalle de estos podrá seguirse en los documentos de referencia al final de esta guía.

  
  

  ¡FELICITACIONES! Acaba de crear su primera aplicación para android. Lo invitamos a seguir explorando la plataforma de desarrollo para que pueda dar rienda suelta a su creatividad.

  
  

  
  
• 12. Ejercicio de lógica de secuencias
  

  12. Ejercicio de lógica de secuencias

  
  

  Una lógica de secuencias es representada por una serie de condiciones que se suceden unas a otras y que tienen una relación entre sí. Encontrar esta relación ayuda a desarrollar habilidad para comprender las secuencias.

  
  

  De esta forma, una secuencia es una concatenación de elementos obtenidos a partir de una sucesión. En este ejemplo se observa que la primera secuencia presenta una concatenación de instrucciones que ejecutadas en orden podría decirse que son lógicas. A la izquierda se ha indicado el mismo ejemplo pero en inversa; para el segundo caso el orden de los elementos no permite inferir una secuencia lógica. 

  
  

  Lo bueno de la lógica es que se puede aplicar en escenarios abstractos e incluso reales como las matemáticas, veamos:

  1, 3, 5, 7, 11...

  En esta secuencia lo primero que se podría observar es que todos los números son impares, pero al ir mas lejos podríamos deducir que el siguiente número es el 13 si se mantiene la lógica de que la secuencia representa los números primos.

  9, 16, 23, 30, 37...

  Esta otra secuencia combina pares e impares, por lo que se podría concluir que ser par o impar no es una condición de la secuencia. Por otro lado. si se resta el segundo número al primero se obtiene 7. Si se resta el tercer número al segundo se obtiene 7 y lo mismo pasa con los siguientes dos números. Para este caso, una expresión lógica que podría aplicar sería 7*n+2 donde n es un número entero. Para dar continuidad a la secuencia debemos indicar el número correspondiente para la posición número 6; 7*(6)+2=44 por lo que el siguiente número en la secuencia es 44 y se puede aplicar la lógica 7*n+2 para deducir cualquier posición en la secuencia. 

  Desarrolle la actividad al final de este bloque para obtener 10 puntos en la calificación del curso

  
  

  • Actividad de Evaluación: Lógica secuencial (Cuestionario)
  • Foro aclaración inquietudes sobre actividad "Lógica Secuencial"
• 13. Sensor de Ubicación en App Inventor
  

  13. Sensor de Ubicación en App Inventor

  Otras funciones disponibles en app inventor

  
  

  App Inventor tiene disponibilidad de muchas funciones extras, que de seguro usted quiera explorar por si mismo. Dentro de estas opciones puede usar bloques de Giroscopio, GPS, Acelerómetro y hasta lector de códigos QR. Cada una de ellas representa en si misma, funcionalidades que pueden ser muy útiles de acuerdo con el desarrollo que usted tenga en mente. A continuación, mostramos los sensores que App Inventor ha dispuesto para que mediante bloques se desarrolle código funcional:

  
  

  

  Para usar la función debe arrastrar el componente al visor de la aplicación. Paralelamente debe introducir una etiqueta donde pueda visualizar el resultado que entrega el sensor. Usted podrá visualizar algo así:

  
  

  

  Ahora, abriendo la opción de bloques podrá desarrollar un código que le permita obtener la ubicación usando el sensor de GPS visualizando en una etiqueta los valores asociados a latitud y longitud:

  

  Una vez sumulados estos bloques, usted podrá observar algo como esto:

  

  
  

  Al agregar un botón para centrar nuestro mapa debemos obtener algo como esto:
  

  
  

  
  

  Estas variables incluidas en un mapa pueden usar los valores recibidos por el GPS del celular, veamos:

  
  

  Nota: Antes de hacer la simulación con el AI Companion debemos activar el GPS de nuestro celular. Es importante que hagamos las pruebas cerca de una ventana, una puerta o al aire libre, porque el GPS de la mayoría de los celulares no funciona detectan muy bien las señales satelitales en interiores.

  
  

  
• 14. Sensor de Giroscopio en App Inventor
  

  14. Sensor de Giroscopio en App Inventor

  Giroscopio
  

  
  

  Algunas aplicaciones pueden usar el sensor del giroscopio del celular. Por ejemplo puede conocer si el dispositivo móvil está en posicion vertical, horizontal, boca arriba o boca abajo. Usar este bloque es muy sencillo, solo debe incluir el sensor en el visor de desarrollo y cargar los valores en una etiqueta:

  

  Una vez simulado el desarrollo, usted podrá visualizar un resultado como éste el cual, por supuesto, puede ser modificado según sus necesidades

  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

    

   
  

  
  
• 15. Activar cámara de celular con App Inventor
  

  15. Activar cámara de celular con App Inventor

  Activar la cámara del celular

  
  

  Puede ser el caso que usted necesite activar la cámara de su dispositivo móvil de forma automática. Esta función solo requiere cargar el bloque en el visor de desarrollo y luego programar el código de acuerdo a sus necesidades. El módulo de cámara está disponible en la paleta en la opción Medios. Como podrá observar es un componente oculto, por lo que para poder observar correctamente el resultado de la activación, debemos ingresar un botón y un visor de imágenes.

  
  

  

  Una vez agregados los comandos gráficos, es hora de incluir los bloques de código que le dan vida al desarrollo:

  
  

  Luego de simular la aplicación, puede activar el botón 1 dando clic sobre el. Esta acción abrirá la cámara habilitando la opción para tomar una fotografía. Dependiendo de lo que usted enfoque con su dispositivo móvil, observará en la pantalla de este la confirmación de si es correcta la fotografía que ha tomado.

  

  Al aceptar la imagen, esta se cargará en el visor de la pantalla.

  
  

  No se preocupe si la imagen queda en una posición diferente a la que usted tomó, mas adelante podrá mover la imagen a su deseo solo incluyendo una sentencia de código mas, así:

  
  

  El resultado es que la imagen se girará 90° en relación con la posición inicial:

  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  

  
  
• 16. Uso de mensajes de texto con App Inventor
  

  16. Uso de mensajes de texto con App Inventor

  Uso de mensajes

  
  

  Si su aplicación requiere enviar un mensaje de texto, usar el módulo de “Enviar texto” puede ser una excelente alternativa. Lo único que debe hacer es agregar el módulo al Screen, indicar un número telefónico y un texto de mensaje que quiere enviar.

  
  

  

  Nos valemos de los bloques de programación para incluir el contenido del código.

  
  

  Recientemente, App Inventor ha actualizado sus políticas de seguridad y es posible que el uso de este bloque (SendMessage.Direct) agregará permisos peligrosos que requerirán aprobación adicional si su aplicación se envía a Google Play Store. 
  Para mitigar esta falla sugerimos usar el bloque (EnviarMensaje):

  
  

  Una vez da clic en el botón enviar, un mensaje como este podrá verse en su pantalla.
  

  
  

  Al permitir esta acción, su mensaje se habrá enviado de forma automática. Podrá confirmar dicha acción al dirigirse al menú de salida de mensajes:

  
  

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 17. Dibujar en un Lienzo con App Inventor
  

  17. Dibujar en un Lienzo con App Inventor

  Dibujar en un lienzo (Canvas)

  
  

  Son muchas las ocasiones en las que necesitamos dibujar sobre la pantalla del celular, incluso podemos desear mover una imagen dentro de un espacio determinado. Pues bien, para esto App Inventor ha diseñado un módulo llamado Canvas o Lienzo. En este apartado vamos a mover una pelota dentro de un espacio en blanco y dejaremos un rastro gráfico del movimiento que hace la misma. Para esto debemos ingresar en el visor de la aplicación el módulo de Lienzo y la pelota en la opción Dibujo y Animación:

  
  

  

  La pelota tiene unos componentes usados para generar el movimiento a través del lienzo. Los campos X y Y son los que definen la posición de la pelota. Por ejemplo, si queremos ubicar la pelota en la parte superior izquierda ponemos en X el valor de cero (0) y en Y el mismo valor. Haciendo una asociación con cordenadas cartesianas podríamos decir que la pelota ubicada en la parte superior izquierda se encuentra en (0,0).

  
  

  

  Con el fin de generar un movimiento de la pelota según la posición del dedo en la pantalla, podemos incluir los siguientes bloques al lienzo:

  
  

  

  Con la información incluida en el apartado anterior, usted podrá realizar gráficas dinámicas, figuras, trayectos y un sin número de trazos que de seguro mejorarán su aplicación.
  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

    

  • Actividad de Evaluación: ¿Qué hace este bloque? (Cuestionario)
  • Foro aclaración inquietudes sobre actividad "¿Qué hace este bloque?"
• 18. Actividad de razonamiento lógico
  

  18. Actividad de razonamiento lógico

  El razonamiento lógico es útil en muchas situaciones de la vida cotidiana. Representa una base para el pensamiento ordenado que facilita llegar a conclusiones elaboradas. 

  
  

  De hecho, no solo es una rama de las matemáticas, sino que las matemáticas se sustentan en ella. Es decir, realmente cuando trabajamos cualquier contenido matemático estamos trabajando el razonamiento lógico. 

  Realice la actividad al final de este bloque para sumar 10 puntos a su calificación final.
  

  

  • Actividad de evaluación: Razonamiento lógico (Cuestionario)
  • Foro aclaración inquietudes sobre actividad "Razonamiento lógico"
• 19. Integración de bases de datos Firebase con App Inventor
  

  19. Integración de bases de datos Firebase con App Inventor

  ¿Y dónde incluimos las bases de datos?

  
  

  Hasta ahora hemos logrado usar muchos de los bloques de desarrollo de App Inventor, sin embargo, aún hay mucho que descubrir, especialmente cuando lo aprendido nos permite potencializar un Smartphone, pero aún no interactuamos con otros usuarios. Es hora de usar las bases de dato, especialmente las que nos permiten interactuar en tiempo real con la información en línea.
  
  

  Para este fin usamos FirebaseRealtime, un lugar donde no solo almacenamos datos y archivos sino que también podemos proteger el acceso a la aplicación mediante el uso de tokens y claves secretas. La autenticación forma una parte fundamental en el control de la información, por eso damos inicio con este importante paso.

  

  Dando clic a este enlace, Firebase le va a pedir que se autentique con una cuenta de correo electrónico y contraseña. Posterior a esto debe seleccionar “Ir a la consola”

  
  

  

  Una vez abierta la consola, podrá añadir un nuevo proyecto donde se almacenarán sus datos. Esta es la información que debe ingresar para continuar.

  
  

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 20. Autenticación en bases de datos Firebase
  

  20. Autenticación en bases de datos Firebase

  Con el proyecto creado, veamos los aspectos claves para comprender los apartados mas importantes de Firebase. Es hora de inscribir una cuenta de correo electrónico con la que la autenticación sea posible. Para esto, nos dirigimos a la izquierda de Firebase al menú Autenticación:

  

  Al seleccionar la pestaña Método de inicio de sesión, damos clic en “Correo electrónico/contraseña” para habilitar el método.

  
  

  
  

  Al dar clic en habilitar y guardar, se podrá garantizar que los usuarios se autentiquen con un usuario y contraseña, previamente ingresados.

  
  

  
  

  Al volver a la pestaña “Usuarios” ya estamos listos para “Añadir usuario” y que éste pueda iniciar sesión con correo y contraseña.

  
  

  

  La nueva contraseña debe incluir mas de 8 caracteres, y el proceso de creación está listo:

  
  

  

  Una pantalla como esta le indicará que su correo y contraseña han sido creados para autorizar su acceso a la base de datos. Recuerde que en estos campos deben ir sus propios correo electrónico, el anterior es solo un ejemplo.

  
  

  

  Ahora, una vez inscrita una cuenta de correo y contraseña puede activar Realtime Database creando una base de datos:

  
  

  
  

  Le recomendamos que empiece con el modo de prueba mientras conoce mejor la base de datos, posteriormente puede configurar el modo bloqueo, cuando se sienta seguro de que ha realizado las autenticaciones como lo sugiere Firebase

  
  

  La URL que le entrega el sistema será vital para la integarción con la aplicación móvil. Por favor guarde este dato que será usado mas adelante.

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
• 21. Clave de API web en la base de datos Firebase
  

  21. Clave de API web en la base de datos Firebase

  Nos falta un dato muy importante, necesitamos una autorización de Firebase de la API que nos permita acceder a la base de datos. Al dirigirnos al Project Overview en la configuración del proyecto encontramos:

  

  Tenga en cuenta la clave de la API web, esta será el parámetro de entrada de la autorización que el sistema le pedirá para efectos de autenticación.

  

  Con esta información ya estamos listos para incluir los datos en la aplicación de App Inventor. Para esto, hemos diseñado un programa que queremos que usted use para optimizar el tiempo de desarrollo. Lo invitamos a descargar este archivo e importarlo como un proyecto nuevo. Por favor de clic acá y busque Descargar AIA código contenido ciencias de la computación para descargar el proyecto e importarlo en App Inventor.

  

  Ubique el lugar donde guardó el archivo, y selecciónelo para abrirlo en los proyectos de App Inventor

  

  

  En el Screen1 debe seleccionar FirebaseAuth1 y escribir la clave de la API que estaba disponible en la base de datos de Firebase

  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   
  

  
  
• 22. Ingreso de FirebaseToken y FirebaseURL
  

  22. Ingreso de FirebaseToken y FirebaseURL

  Recordemos:

  

  Con estos cortos pasos ya tenemos un módulo para garantizar que a nuestra aplicación solo accedan quienes estén autenticados en la base de datos. Al dar clic en el avión de papel, la aplicación lo enviará al Screen “Empezar”:

  

  Una vez abierto el Screen “Empezar” se verá algo como esto:

  

  En esta página solo nos falta incluir el Firebase Token también llamado como “El secreto de la base de datos”. Esta información la encontramos en Firebase, así:

  
  

  

  En la pestaña “Cuentas de servicio” en la opción “Secretos de la base de datos” copiamos el secreto que está indicado en la parte inferior. Este será el valor que se debe incluir en la aplicación de App Inventor en el campo “Firebase Token”:

  
  

  

  Usted va a obtener algo como esto:

  

  Ahora, en la opción de bloques, solo necesitamos usar un único bloque para agregar información desde la aplicación a la base de datos.

  

  Una vez descargada la aplicación, podrá validar como cualquier palabra incluida en el campo de texto, es agregada a la base de datos con solo dar clic en el botón subir y vemos los cambios en Firebase.
  
  

  Les invitamos a revisar el siguiente video que servirá para ampliar sus conocimientos.

   

   

  Excelente recorrido, hemos entregado todas las todas las herramientas básicas necesarias para seguir innovando. Recuerde que el autoaprendizaje es vital para fomentar los procesos de innovación. Lo invitamos a explorar otros contenidos, ver videos y tutoriales que le permitan incrementar el conocimiento asociado a las Ciencias de la Computación

   
  

  Documentos de referencia

  
  Guía de iniciación en App Inventor
  Cómo subir una App a PlayStore
  Descargar AIA código contenido ciencias de la computación

  
  

  Créditos
  

  
  Esta lección fue escrita por Carlos Noreña socio fundador de IOTIC. Se desarrolla este plan con el acompañamiento y aval de Pierina Nepote Project Manger Trust for the Americas.
  
  

  La base metodológica de este plan de lección es de Microsoft Education y el contenido está inspirado en “Yo puedo programar mi página web” de Microsoft

  
  
• 23. Reto de autoaprendizaje
  

  23. Reto de autoaprendizaje

  
  

  Ya está en capacidad de crear su propia aplicación. Use el contenido de este módulo y una necesidad en su comunidad o el mercado que pueda solución con una App Android. Combine diferentes bloques y funciones para obtener un producto mínimo viable que pueda ser piloteado con familiares y amigos:

  
  La aplicación debe contener, por lo menos, los siguientes componentes:

  
  

  • Una imagen

  • Un botón

  • Una etiqueta

  • Un sensor (Opcional)

  • Ejecutar una instrucción lógica

  
  

  • Actividad de Evaluación: Reto de aprendizaje Tarea
  • Foro aclaración inquietudes sobre el reto de autoaprendizaje
• Videoconferencias
  

  Videoconferencias

  Videoconferencia Sesión #3 - Viernes 21 de Mayo 2021

   

   
  

  
  

  
  

  
  

  Videoconferencia Sesión #2 - Martes 18 de Mayo 2021

   
  

  
  

  
  

  
  

  Videoconferencia Sesión #1 - Miércoles 12 de Mayo 2021

   

   
  
• Certificado
  

  Certificado

  Muchas felicidades por llegar hasta aquí.

  Recuerda que para acceder a tu certificado de participación deberás concluir al menos el 70% de nuestro curso.