Haz clic para llenar formulario (Todos los Grupos)
Conoce los Acuerdos de Académia
👨💻 Desarrollo de nuestra primer App en Kodular
📘 Guía Semanal: Introducción al Desarrollo en Kodular
En esta semana exploraremos Kodular como el entorno de desarrollo principal para nuestra primera aplicación móvil. Es fundamental que el estudiante dedique tiempo a familiarizarse con la dualidad del sistema: la Vista de Diseñador, donde se gestiona la Interfaz Gráfica de Usuario (GUI), y el Editor de Bloques, donde se programa la lógica funcional.
Para lograr un prototipo exitoso, será clave identificar correctamente la ubicación de los componentes (visibles y no visibles), la configuración de sus propiedades individuales y la correcta gestión de Assets (recursos multimedia). El dominio de estos elementos permitirá una construcción precisa del proyecto, asegurando que la interfaz visual responda correctamente a los eventos y comportamientos programados en el aplicativo."
🚀 ¿Qué es Kodular?
Kodular es una plataforma de desarrollo de aplicaciones móviles basada en la nube que utiliza un paradigma de programación visual por bloques. Evolucionada a partir del proyecto original App Inventor del MIT.
Kodular permite a estudiantes, entusiastas y profesionales crear aplicaciones nativas para el sistema operativo Android sin necesidad de escribir código en lenguajes complejos como Java o Kotlin.
A diferencia de otras herramientas similares, Kodular se posiciona como una solución de nivel intermedio-avanzado (conocida como Low-Code), ya que ofrece una libertad de diseño estética superior y una integración profunda con servicios modernos (bases de datos, anuncios, sensores y APIs), permitiendo transformar una idea simple en un producto tecnológico funcional y profesional.
🌟 Características Sobresalientes del Sitio Web que vamos a trabajar...
El entorno de desarrollo de Kodular (Kodular Creator) se distingue por varias funciones clave que lo hacen la opción preferida en el ámbito educativo y de prototipado:
1. Interfaz de Diseño Avanzada (Designer) 🎨
A diferencia de sus competidores, el sitio web de Kodular ofrece una personalización estética detallada. Permite trabajar con:
📎Google Material Design: Acceso nativo a iconos, tipografías y sombras que hacen que la app parezca hecha por una agencia profesional.
📎Layouts Responsivos: Herramientas de organización (arreglos horizontales y verticales) para que la app se adapte a distintos tamaños de pantalla.
2. Programación Lógica por Bloques (Blocks Editor) 🧠
El núcleo de la "inteligencia" de la app. Utiliza piezas de rompecabezas lógicas que representan conceptos de programación real:
📎Variables, Bucles y Condicionales: Enseñan el pensamiento computacional de forma visual.
📎Eventos en tiempo real: Programación basada en "Cuando el botón se presiona, haz esto", lo que facilita la comprensión del flujo de datos.
3. Kodular Companion: Pruebas en Vivo 📲
El sitio web se sincroniza mediante un código QR con una aplicación en el celular del estudiante.
📎Impacto inmediato: Cualquier cambio que hagas en el navegador (cambiar un color o mover un bloque) se refleja al instante en el teléfono, permitiendo una depuración (debugging) rápida y efectiva.
4. Gran Catálogo de Componentes (Visibles y No Visibles) ⚙️
Kodular ofrece cientos de herramientas listas para arrastrar y soltar:
📎Sensores: Acelerómetro, GPS, Huella digital y NFC.
📎Conectividad: Bluetooth, Wi-Fi y clientes Web para consumir datos de internet.
📎Media: Reproductores de audio (ideal para tu app de "Los Colores"), video y grabadoras.
5. Monetización e Integración de Datos 💰
📊Es de las pocas plataformas gratuitas que permiten:
📎Bases de Datos: Conexión fácil con Google Firebase,Airtable o TinyDB para guardar información de los usuarios.
📎Publicidad: Integración con AdMob y otras redes para
que los estudiantes entiendan cómo se genera dinero con una app.
6. Exportación y Publicación 📤
El sitio permite generar archivos .APK (para instalación directa en el celular) y archivos .AAB (Android App Bundle), que es el formato estándar actual requerido para subir aplicaciones a la Google Play Store.
💡 En Conclusión: Kodular no es solo un sitio web para "hacer una tarea", es un laboratorio de ingeniería de software accesible. Para los alumnos, dominar Kodular significa entender cómo funciona la tecnología que usan diario en sus manos, preparándolos para retos de programación más complejos en el futuro.
A continuación se presenta un cuadro con tres pestaña de las cuales se diversifica la información relacionada a la práctica, entrega de producto y retroalimentación que realizaras en esta semana, considera que para desplazarte de manera correcta solo basta con dar clic en cada una de ellas para ver el contenido que el profesor te facilita para desarrollar el material electrónico solicitado.
El estudiante realizará la transición del diseño conceptual maquetado en Moqups hacia el desarrollo técnico en la plataforma Kodular, con el fin de crear la aplicación funcional "Los Colores en Inglés". La práctica consiste en la configuración precisa de objetos, atributos y espaciado, así como en la programación de la lógica mediante bloques de código, concluyendo con la exportación y prueba del aplicativo en un dispositivo móvil para validar la integridad y operatividad de cada componente integrado.
Instrucciones I. Iniciaremos la etapa de diseño técnico, donde el estudiante integrará los componentes necesarios mediante la metodología de 'arrastrar y soltar' (drag and drop). Asimismo, se vinculará el dispositivo móvil mediante un código QR para previsualizar en tiempo real la disposición espacial de cada objeto en la pantalla. Este proceso permitirá validar constantemente atributos como el alto, ancho y la composición estética final de la interfaz de la aplicación.
1. Comenzaremos con entrar al sitio de Kodular con la dirección de: https://www.kodular.io/ recordandote que la propuesta inicial es acceder con nuestra cuenta de correo institucional del colegio, de no lograrlo la opción de trabajo seria con una cuenta de correo personal. Tal como se observa en la ilustración de la parte inferior.
Al hacer clic, la pantalla cambiará automáticamente y te solicitará vincular tu cuenta de correo institucional. Este paso es indispensable para acceder a la plataforma y almacenar los proyectos que desarrollaremos durante el semestre. Para realizar este proceso correctamente, por favor observa y lee detenidamente la ilustración que aparece en la parte inferior.
Inicio del proyecto: Comenzaremos el desarrollo de la aplicación "Colores en Inglés" haciendo clic en el botón "Create Project". Al ingresar, accederás al entorno de diseño, donde encontrarás diversos paneles, menús y el editor de propiedades de objetos. Es indispensable que te familiarices a la brevedad con el manejo de la GUI (Interfaz Gráfica de Usuario); esto te permitirá gestionar eficientemente la configuración, los atributos y la localización de los componentes. En la siguiente ilustración se detallan los elementos principales de la plataforma.
A) En esta 1er. ilustración del lado izquierdo observaras algunos de los cambios que pudes realiar como usuario final, en función al establecimiento del nombre del proyecto, paquete tipo de tema (brillante y obscuro), color primaro y color primario obscuro. Al terminar los ajustes convenintes solo da clic en el boton finish, para acceder a la plataforma de desarrollo.
1. Barra de Herramientas Superior (Top Bar) 🛠️
Es el centro de control global de tu proyecto, encontraras elementos como:
🔖Project: Para guardar, importar, exportar archivos .aia (fuente) o crear nuevos proyectos.
🔖Test: Aquí se genera el código para el Kodular Companion (pruebas en vivo) o el emulador.
🔖Export: Vital para generar la APK (instalador) o el AAB (para la Play Store).
🔖 Help: Ayuda del sitio web basada en tutoriales de aprendizaje.
2. Barrra de Admon (Screen) 📱
Es el lienzo central donde observas el nombr y administras las Screen´s
🔖Selector de Pantallas: Permite cambiar entre la Screen1 y otras pantallas creadas.
🔖Copiar Screen: Puedes copiar el Screen actual añadiendolo con un nombre diferente.
🔖Añadir Screen: Creas un nuevo Screen con el nombre que el usuario decida sin espacios.
3. Visor (Viewer) 📱
Es el lienzo central donde arrastras los componentes.
🔖Simulación Visual: Te da una idea de cómo se verá la app en el dispositivo.
🔖Modo de Vista: Puedes cambiar la previsualización entre distintos tamaños de teléfono o tablet.
4. Barra de Acceso Rápido 📱
Es el lugra donde encontramos iconos que ayudan a la administración y aprendizaje del sitio .
🔖Tipo de Cuenta: Aparece con nombre free cuando la cuenta que se usa es de tipo gratuito entre otros.
🔖Carpeta de Proyectos: En este punto el usuario podra ver y administrar el total de los proyectos ralizados en el portal.
🔖Comunidad: En Kodular existe una enorme comunidad de aprendizaje en linea donde los programadores y personal interesado en el mundo del desarrollo de aplicacones intercambian experiencias.
🔖Documentos: Kodular cuenta con un tutorial que lleva de la mano al usuario principiante para concocer su metodologia de programación e interfaz.
Tipo de Tema: El usuario final decide si desea trabajar con un tipo de interfaz obscura o con luz.
🔖Cuenta de Usuario: En este lugar el usuario administra el tipo de cuenta, preferencias y configuración global del sitio web.
5. Selector de Modo (Designer / Blocks) 🔄
Ubicado en la esquina superior derecha. Es el "switch" maestro.
🔖Configuración de la App: El usuario puede añadir icono, nombre de la App, Tamaño, documentación, entre otros, en general establecer atributos a la aplicación de desarrollo incluso conexión a datos externos como bases de datos.
🔖Assets: El almacén donde subes tus imágenes, audios de colores y fuentes personalizadas.
🔖Designer: Para todo lo visual que estamos listando aquí.
🔖Blocks: Para programar la "inteligencia" de la app mediante el sistema de rompecabezas lógico.
6. Panel de Propiedades (Properties) ⚙️
A la extrema derecha. Cambia según el componente que selecciones en el árbol.
🔖Atributos Visuales: Color de fondo, tamaño de letra, alineación, ancho (Width) y alto (Height).
🔖 Funcionalidad: Aquí vinculas la imagen o el audio inicial de un componente.
7. Busqueda de Componentes⚙️
Busqueda de objetos visibles y no visibles en todo la interfaz, util cuando no se sabe la localización o categoria de los mismos.
🔖Herramienta Busqueda: El usuario solo captura el nombre del componenete preferentemente en ingles para su localización.
8. Nombre del Proyecto ⚙️
Lugar de edición rápida para el nombre del proyecto que se esta desarrollando
🔖Casilla de Nombre: Edición rápida del nombre de la App o proyecto elaborado.
9 y 10 Categoria de Componenetes (paleta de objetos) ⚙️
A la derecha encontras una delgada barra de herramientas destinada a la categoria del nombre de los objetos que se pueden arrastrar y soltar en el área de trabajo, algunos son gratuitos otro son de paga para su uso.
🔖Categorias de objetos: Interfaz de Usuario, Capas, Media, Dibujo y Animación, entre otros.
🔖Lista de componentes por categoria: Al seleccionar un tipo de categoria se desprenden los objetos que puedes incororar al área de trabajo de esa misma categoria.
10. Panel de Componentes (Components Tree) 🌲
A la derecha del visor, muestra una lista jerárquica de todo lo que has añadido.
🔖 Orden Lógico: Aquí ves qué botones están dentro de qué Arrangements.
🔖Renombrar: Como experto, te sugiero siempre renombrar (ej. Btn_Rojo en lugar de Button1) para no confundirte en los bloques.
3. Desarrollo del Diseño, manos a la obra...
Una vez que ya conociste o te familiarizaste con la posción de menus, propiedades y objetos, ahora es el momento de comenzar a crear el diseño, realiza los siguientes pasos:
A) Selecciona un tipo de carcasa en el visor, la idea es de que sea lo más parecido a la apariencia de la marca y modelo de tu móvil, esto ayudara a posicionar los objetos en el Screen lo mejor posible.
B) En la sección de la Palette ve a la categoria Loyout e ingresa un contenedor de nombre "Horizontal Scroll Arrangement"
C) Dentro de este componente ingresaras 4 objetos:
🟠 Imagen_1
🟡 Label_1 (etiqueta)
🟢 Label_2 (etiqueta)
🟣Imagen_2
En la sección de Assets (elementos externos), deberas subir 2 imagenes que debes descargar previamente del internet que es la ilustración del colegio de bachilleres y el logotipo del sitio web de Kodular para incorporarlas al área de trabajo, observa la siguiente ilustración.
En la imagen anterior se detalla la ventana emergente que permite incorporar recursos externos al proyecto, tales como imágenes, sonidos y GIFs animados. Es fundamental que identifiques este apartado de 'Assets', ya que más adelante deberás cargar tus archivos aquí para luego integrarlos a los contenedores. A continuación, selecciona los componentes desde la 'Paleta' y ajusta sus 'Propiedades' en la sección superior de tu diseño. Para realizar estos cambios de manera correcta, consulta el documento guía en la parte inferior, el cual te orientará en la configuración técnica del Encabezado..
NOTA. Considera que los atributos de Height y Width (alto y ancho) y posición de los objetos, funcionaron y/o se adaptaron exclusivamente para un telefono Honor 90 pro., por lo que tu deberas adaptar estos eleemntos según las dimensiones de tu móvil.
continuando con el desarrollo del diseño...
D) Ahora tu deberas insertar otro contenedor del mismo nombre en la parte inferior del anterior, y agregar los siguientes objetos, recuerda arrastralos desde la columna Palette y arrojarlos dentro del contenedor, estos se acomodaran automátiamente en los extremos:
🟡 Label_3 (etiqueta)
🟢 Label_4 (etiqueta)
Los anteriores objetos deberan tener los datos de Plantel 16 (lado izquierdo) y Con Kodular (lado derecho), respectivamente, no olvides considerar los cambios a las propiedades en el documentos PDF, para ajustar estos nuvos datos.
4. Momento de hacer Testing y de manera constantemente...
Para hacer esto sera importante que descargues la App desde la tienda virtual de PlayStore llamada: Companion, esta te permitira hacer testing y pasar tu aplicativo a tu móvil, puedes dar un clic en el siguiente enlace para descargar e instala la App:
A) Ejecución en el dispositivo móvil: Abre la aplicación Kodular Companion en tu teléfono; ahí encontrarás el botón o el campo para ingresar el código de enlace con la PC. En caso de que la pantalla de tu móvil se apague o la conexión se interrumpa, deberás presionar el botón de reconexión (color magenta) para visualizar nuevamente el contenido y sincronizar los cambios en tiempo real
🚨Importante..! Este proceso sera constante para que puedas controlar la parte visual de los objetos al momento de acomodarlos en tu móvil, para hacer este proceso haz un clic en la opción "Test" de la barra de menú, para acceder a la opción "conect companion".
Diseño en la App
Nota sobre el diseño responsivo: Al manipular directamente los objetos en el entorno de diseño, notarás que el espaciado y las proporciones pueden no visualizarse de forma óptima en la pantalla del monitor. No te preocupes; es fundamental realizar un testing constante en tu dispositivo móvil para ajustar los elementos según su tamaño real. Debido a las variaciones de densidad de píxeles en distintas pantallas, es necesario calibrar manualmente el ancho (width) y alto (height) de los contenedores y objetos para garantizar un diseño verdaderamente responsivo.
Diseño Móvil
B) Manteniendo la dinámica del material previo en formato PDF, te comparto nuevamente la configuración de los componentes para el título, la imagen central y los botones. Utiliza esta guía para visualizar los objetos y sus atributos correspondientes durante el desarrollo de tu aplicación, considera que los que estamos realizando es la caratula de nuestra App como Screen 1.
Nota_2: Recuerda verificar constantemente la distribución de los objetos mediante el menú 'Test', seleccionando la opción 'Connect to Companion'. Es fundamental validar el ajuste espacial de los componentes directamente en tu dispositivo móvil para asegurar un diseño responsivo y organizado.
Si hasta este punto las cosas se han realizado correctamente, tú diseño se vera parecido a la ilustración de la parte inferior.
C) Ahora añadiremos el Pie de Página por debajo de todos los objetos, básicamente es realizar algo similar al encabezado incluyendo un contenedor de tipo vertical para arrojar una imágen y dos etiquetas con formato de color y fuente a gusto del usuario, para realizar este último procedimeinto realiza lo siguiente:
D) Continuaremos con la parte final del diseño conceptual deberemos de copiar el Screen creado para ahorrarnos los pasos del Encabezado y Pie de Página, cambiando solo la parte central eliminando los componentes para añadir los botones de colores y el objeto que permitira conectar un gif aniado dependiendo del color del boton que el usuario seleccione.
Comenzaremos copiando el Screen dando clic en el menu esto provocara que asignes un nuevo nombre para evitar un error de almacenamiento al tener dos nombres, al hacer este proceso colocaras el nombre de "Screen2_Colores" en la siguiente ventana que apareera en la parte inferior.
E) Depuración y personalización de la interfaz: Al visualizar el duplicado de la pantalla (Screen), deberás eliminar los objetos centrales, específicamente la imagen del Colegio de Bachilleres y los botones predeterminados. No obstante, tienes la opción de conservar los botones y ajustar sus propiedades de tamaño (Width, Height), nombre y atributos de color. Posteriormente, integra los nuevos componentes mostrados en la parte inferior, gestionando de forma autónoma la paleta de colores y la alineación según las dimensiones de tu dispositivo móvil. Como apoyo, consulta la ilustración adjunta y el formato PDF, donde se detallan los objetos exactos que deben incorporarse.
Para concluir la fase de diseño de la interfaz, adjunto el último documento PDF con las especificaciones técnicas para configurar las propiedades de los objetos en la pantalla 'Screen2_Colores'. Te solicito identificar los componentes necesarios y realizar los ajustes correspondientes basándote en las pruebas en tiempo real (testing) desde tu dispositivo móvil.
Con estos pasos hemos concluido la fase de diseño. Es momento de validar tu proyecto comparándolo con las ilustraciones de esta guía y verificando la visualización en tu dispositivo móvil. Asegúrate de revisar detenidamente el espaciado, la alineación y las proporciones de cada componente para garantizar una interfaz funcional y estética.
4. Elaboración de la lógica o funcionalidad de nuestra App... Bloques para Screen_1(Caratula)
A) Para comenzar sera necesario que agreges algunos componetes no visibles al área de trabajo de la sección de diseño de la ventana del Screen 1(caratula), considera que estos no se veran en el área de trabajo, se veran solamente en el Panel de Componentes (Components Tree) 🌲En la siguiente tabla se ilustran:
B) Ahora como siguiente paso, antes de pasar al tema de la codificación por bloques, sera importante renombrar cada uno de los componentes expuestos en el Panel de Componentes (Components Tree) 🌲, con la finalidad de ubicarlos con un nombre apropiado para saber que objeto seleccionamos y poder realizar los ajustes convenidos más adelante en tema de lógica para el funcionamiento de nuestra aplicación, las ilustraciones de la parte inferior te muestran detalles de como debieran de quedar los nombres, aúnque los puedes renombrarlos a tu gusto solo fijate como lo haces.
C) Para consolidar la operatividad de tu programación, es fundamental cargar y conectar a la plataforma de kodular, algunos archivos multimedia denominados (assets), que se consultaran y se descargaran de sitios web de forma externa, y se almacenaran en tu PC (Computadora Personal), lo anterior podrá asegurar que los recursos estén disponibles para proyectarse o reproducirse en tres momentos críticos: al inicializar la aplicación, cuando un botón sea seleccionado (reciba el foco) o al ejecutar la transición hacia un nuevo screen_1 (caratula), pon atención a la siguiente tabla de especificaciones para que sepas como proceder a la descarga de dichos archivos.
D) Subida y Conectividad de Assets:
Cuando se hayan descargado ambos audios al PC, regresa a la interfaz de Kodular y selecciona el icono de:
Como se observa en la ilustración de la izquierda, al subir ambos archivos a Kodular se abrirá una ventana emergente. Es importante que verifiques el nombre exacto con el que se cargan para que puedas identificarlos correctamente en la programación por bloques. En la parte inferior, haz clic en el botón “Upload Asset” para abrir el cuadro de dialogo correspondiente para seleccionar cada archivo por separado y poderlos incorporar al área de trabajo.
Consecuentemente aparecera la ventan que se muestra en la parte de la inferior donde tú como usuario podras subir los archivos que deses incorporar, solo considera que como estamos trabajando una cuenta gratuita ten mucho cuidado en subirlos para nos saturar el limitey aprovechar las bondades de la GUI (Interfaz Gráfica de Usuario), de Kodular al máximo.
Luego entonces como siguiente paso, podrás establecer ciertos criterios en el manejo de las propiedades de estos objetos externos, en algunos de los componentes que se encuentran en el árbol de objetos a los que les cambiaste el nombre de manera anticipada, con la finalidad de que puedas configurarlos de manera exitosa, procede realizando los siguientes pasos:
🔊 Sonido_Inicio
1.Selecciona el objeto de la columna de componentes que lleva por nombre: Sonido_Inicio
2. En la columna de propiedades en el atributo Source, selecciona el audio que requerirás al momento de que se inicialice el Screen_1 (Caratula), cuando se abra la App.
3. Establece un Minimo de Intervalo (ms) de 500
🔊 Sonido_Clic
1. Selecciona el objeto de la columna de componentes que lleva por nombre: Sonido_Clic
2. En la columna de propiedades en el atributo Source, selecciona el audio que requerirás al momento de que se presione el botón, al querer pasar del Screen_1 (Caratula) al Screen_2 (Colores y Audios).
3. Establece un Mínimo de Intervalo (ms) de 50
🔊Sonido_Salir
1. Selecciona el objeto de la columna de componentes que lleva por nombre: Sonido_Salir
2. En la columna de propiedades en el atributo Source, selecciona el audio que requerirás al momento de que se cierre de manera directa la App.
3. Establece un Minimo de Intervalo (ms) de 500
E) Ahora accede al apartado de Bloques presionando el boton: desde la parte superior derecha de la GUI (Interfaz Grafica de Usuario), tal como se observa en la siguiente ilustración.
con ella podras observar que será muy parecida tambien, cuando se trabajo en pasados semestres a MIT App Inventor, es decir, que los bloques de estan cotenidos dentro de categorias expuestas por colores, en la ilustración de la parte inferior se muestra el cambio de interfaz de "Diseño" a "Bloques"
Considera que la clasificación de los bloques de código en Kodular se extienden en base a lo a las siguientes categorias:
Bloques por Función (La "Lógica") Esta es la forma más común de agruparlos según el papel que juegan en tu aplicación:
🧩Bloques de Eventos (Mostaza/Oro): 🔔Son los que inician una acción. Responden a la pregunta: "¿Cuándo sucede algo?".Ejemplo: "Cuando se haga clic en el botón 1".
🧩Bloques de Control (Azul Marino): 🚦Dirigen el flujo de la aplicación. Aquí entran los condicionales (si... entonces) y los bucles (repetir x veces).
🧩Bloques de Métodos o Acciones (Púrpura): ⚙️Son órdenes directas que le das a un componente para que haga una tarea específica.Ejemplo: "Llamar al reproductor para que inicie la música".
🧩Bloques de Propiedades (Verdes): 🎨Sirven para consultar o cambiar las características de un objeto (color, tamaño, texto, visibilidad).
🧩Bloques de Datos (Variables y Listas): 📦Son los contenedores de información. Guardan nombres, puntajes o listas de elementos que la app usará después.
F) Una vez en la interfaz de Bloques, deberás localizar aquellos que coincidan con la ilustración inferior para construir la lógica de tu aplicación. No olvides realizar los ajustes de atributos en la pestaña de Diseño e integrar correctamente tus archivos de audio y GIFs para finalizar el proyecto con éxito.
Te sugiero explorar en pricipio las diversas categorías para que tú mismo(a) identifiques las que necesitar. Recuerda que, gracias a tu experiencia de semestres pasados, ya dominas el manejo de estos objetos. A continuación, se presenta la lógica para el Screen 'Carátula', que representa la primera fase de funcionalidad del proyecto.
5. Elaboración de la lógica o funcionalidad de nuestra App... Bloques para Screen_2 (Colores y Audios)
A) Para comenzar este último procedimeinto se debera regresar a la interfaz de "Diseñador" y cambia al Screen_2 Colores_y_Audios, al observar que ya estás posicionado en la segunda pantalla creada de manera anticipda, haras el vaciado de los siguientes objetos no visibles al área de trabajo.
B) Graba los audios correspondientes en inglés usando tu propia voz. Utiliza el sitio web gratuito recomendado en la tabla adjunta para generarlos y descargarlos a tu computadora. El objetivo es integrarlos en Kodular y vincularlos mediante los componentes Audio y Clock, ajustando sus propiedades según las configuraciones preestablecidas..
C) Configura cada uno de los objetos no visibles que agregaste hace un momento al Screen_2 aplicando los siguientes cambios:
1. Todos los objetos Clock que se modificaron añadiendo el nombre del color en ingles, mismos que seleccionaras uno a uno del árbol de componenetes, deberan de coincidir con la siguiente pantalla que se encuentra del lado izquierdo al momento de modificar sus atributos desde la columna de propiedades.
2. Todos los objetos sound que tambien se les modifico el nombre de acuerdo al color que se les grabo previamente en ingles se deberan de establecer cambios uno a uno relativo a la siguiente ilustración del lado izquierdo, observa bien el ejemplo, para establecer bien las modificaciones en la columna de propiedades.
D) Ahora solo resta establecer la relación directa de la logica de cada uno de los eventos al momento de que el usuario final presione cada boton y aparezca un gif animado de ese color y se escuche el audio corresponidente en ingles, te pido que observes de manera muy detenida la ilustración que se encuentra en la parte inferior para que busques y coloques los bloques correspondientes uno a uno según le corresponda.
NOTA. No olvides que en los bloques de cada uno de los botones tendras que buscar de manera anticipada en internet el gif animado de cada color para copiar la URL del mismo y pegarlo en el área marcada, en la siguiente ilustración se aprecian la lógica de los valores de los botones.
5. Pase de nuestra App a Móvil Android
¡Todo listo! Tras completar la revisión exhaustiva de los pasos anteriores, ya puedes transferir a tu móvil Android la aplicación que diseñaste. Para comenzar, solo presiona el botón que lleva por nombre "Export", en ese punto encontrars la opción "Android App (*.APK)", el cual servira para realizar el procedimento de empaquetado de nuestra App, observa la siguiente ilustración de la parte inferior:
Posteriormente aparecera la pantalla que te pedira acercar tu móvil android con la finalidad de scannear el código QR que se genero desde tu PC (Computadora Personal), considera que necesitas haber instalado en tu móvil previmente la App de nombre "Companion" de Kodular, para poder abrir dicha App desde tu móvil y realizar el proceso, observa la siguiente panatalla.
Cuando abras la aplicación, acerca el móvil a la pantalla del PC para que se escanne el código y procedas a descargar la App al móvil, recordando lo que se hacia en semestres anteriores con MIT App Inventor para asegurar su correcta instalación.
Finalmente cuando abras la Aplicación "Colores en Ingles", mostrara la siguiente interactividad, revisa a conciecia tu aplicación a traves del siguiente video.
