Objetivos Desarrollar habilidades lógicas y algorítmicas básicas a través de la interacción con bloques de instrucciones. Ofrecer una primera aproximación al desarrollo de aplicaciones móviles haciendo uso de la herramienta Kodular.
Enunciado La empresa Vivero de los Alpes se ha enterado del talento de los estudiantes del curso Introducción a la Ingeniería de Sistemas y Computación, en especial su inclinación por trabajar sin remuneración monetaria alguna, y lo ha contactado a usted para que desarrolle una aplicación móvil que permita digitalizar el proceso de venta y adquisición de plantas del invernadero. La aplicación debe proveer un inventario de las plantas que están a disposición para la venta y permitir las transacciones involucrando cada tipo de planta. La aplicación debe llevar también un registro del flujo de caja del invernadero y permitir aprovisionar nuevas plantas.
Parte I. Puesta en marcha de la app
Etapa 1: Creación del proyecto Diríjase a la página web: https://www.kodular.io/ Posteriormente, debe hacer clic en el botón Create apps! Debe crear una cuenta e iniciar sesión. Puede autenticarse con Google o Facebook si lo desea. Luego seleccione la opción de crear un nuevo proyecto y nómbrelo como ViveroAlpes.
1 Puede jugar con la configuración del proyecto. Se recomienda dejar el tema y el SDK mínimo con los valores por defecto. Para futuros proyectos, es posible que desee aumentar el SDK mjínimo si necesita usar alguna tecnolo´gia móvil que sea muy nueva. El nombre del paquete no es tan importante, aunque el nombre que ve en la imagen es el esquema típico que se usa para aplicaciones Android.
Siéntase Libre de jugar con los colores base de la aplicación
Etapa 2: Subir archivos y configuraciones iniciales
2 Una vez haya creado el proyecto, le aparecerá una pantalla como la siguiente: ROJO: panel de componentes para agregar a la aplicación AMARILLO: vista previa de cómo está quedando la aplicación AZUL: panel de parámetros y configuraciones de los componentes gráficos Cuando se encuentre en esta pantalla proceda a realizar lo siguiente: Descargue el archivo multimedia.zip de BrightSpace el cual contiene todas las imágenes y recursos para la aplicación Luego seleccione el botón Assets y proceda a subir las imágenes que descargó, haciendo click en la opción Upload File o arrastrando la imagen a la ventana que emerge.
Etapa 3: Construcción de la interfaz principal
En esta etapa usted va a desarrollar la pantalla principal de la aplicación, desde donde el usuario va a poder acceder a las funcionalidades.
3 Ilustración 1 resultado pantalla principal
El único componente actualmente es Screen1 en el panel Components.
Debería aparecer en el panel Properties las configuraciones de este elemento. Diríjase al parámetro Background Image y seleccione la imagen Fondo.jpg. En este punto le debería aparecer la imagen de fondo. De la misma forma configure la alineación del componente cambiando el valor del parámetro Align Horizontal por Center: 3. Esto le va a permitir centrar los componentes que se agreguen a Screen1. Busque entre las últimas opciones y deseleccione la opción Title Visible. El título del componente debería desaparecer.
Luego agregue desde el panel Palette un componente Image, arrastrándolo
al panel Viewer Configure la imagen seleccionando el parámetro Picture y seleccionando el archivo LOGO_IGISyC.PNG. De tamaño coloque 100 x 300 pixeles, o como mejor sienta que se ajuste la imagen a la pantalla.
4 Agregue un Label al de la misma manera y modifique los parámetros como se muestra a continuación (BackgroundColor: #800000):
Ahora agregue un Button que tenga como parámetro Image el archivo
BotonAlertas.PNG. También elimine el valor por defecto del campo Text. De la misma forma, agregue otro Button que tenga como parámetro Image el archivo BotonPlantas.PNG. También elimine el valor por defecto del campo Text. De aquí en adelante usted se debe asegurar de ponerle nombres a cada uno de los componentes que agregue. Esto es una buena práctica de programación y le facilita el trabajo de identificar algún componente en el futuro. Para cambiar el nombre puede seleccionar la opción del lápiz que aparece cuando selecciona el componente. Hasta este momento debe tener algo así:
5 Etapa 4: Agregar pantallas Es momento de que usted añada dos pantallas a la aplicación, una para mostrar las alertas que se generen de las plantas (PantallaAlertas) y otra pantalla para visualizar los detalles de las plantas (PantallaPlantas). En primer lugar, seleccione la opción Add Screen y cree dos pantallas: PantallaAlertas y PantallaPlantas
Una vez haya realizado esto, las pantallas deberán aparecer
NOTA: El nombre de la pantalla principal es “Screen1” por defecto, este no puede
ser cambiado. Ahora, usted debe conectar las pantallas de tal forma que cuando se toque el botón indicado para las alertas, se abra la pantalla de las alertas y de la misma forma con el botón de las plantas. Para ello haga lo siguiente: En Screen1, seleccione la opción Blocks que se encuentra en la parte superior derecha de la pantalla.
6 Los bloques de código los puede encontrar en la parte izquierda de la pantalla y se encuentran divididos por categorías o por componentes presentes en la pantalla. En este caso, los bloques se encuentran al seleccionar los botones que desea programar. Otros bloques se encuentran en la sección correspondiente a su categoría (como Control y Text)
Los bloques que se desean agregar son los siguientes:
El código está pidiéndole a Kodular que cambie la pantalla de la aplicación cuando
detecta que alguno de los botones ha sido presionado. Tenga en cuenta que: La instrucción “open another screen” se encuentra en la categoría Control. Para escribir cualquier tipo de cadena de texto, el bloque se encuentra en la sección Text.
7 Notará que los bloques se dividen en tres: Bloques que acomodan otros bloques por dentro. Instrucciones que ejecutan alguna acción y parámetros para las instrucciones. Para probar el progreso hasta el momento, es necesario conectar un celular como prueba. Puede conectarse usando la app compañera, la cual debe instalar en su celular, o conectándose por medio de un cable usb, habiendo corrido previamente en su computador el software Kodular Starter: https://github.com/Kodular/Starter/releases/tag/v2.0
Otra opción es compilar el .apk e instalarlo en su celular. Corra la app y verifique
que se puede mover entre pantallas.
Etapa 4: Agregar componentes a la pantalla plantas
Ahora usted va a desarrollar la pantalla que le va a permitir a los operarios ver la información relevante de las plantas que se tienen en inventario.
Agregar información para las rosas:
En primer lugar, seleccione la pantalla plantas en la parte superior izquierda de su pantalla y vuelva a la vista Designer. Posteriormente, busque en la sección Properties de la pantalla y seleccione el parámetro Scrollable. Esto le permitirá agregar muchos componentes a la pantalla y deslizarse entre los elementos.
8 Ahora hay que agregar la secuencia de componentes que se muestra en el árbol de componentes en la imagen.
Cambie la imagen del fondo de la pantalla
Banner es una imagen del logo. Para posicionar los elementos correctamente puede jugar con la opción “Fill parent” de los atributos Height y Width y con la opción “Scale Picure to Fit” Los componentes Horizontal y VerticalArrangement se encuentran en la sección Layout de la paleta.
Todos los elementos de esta sección permiten posicionar varios
componentes en la misma columna o fila, y combinarlos para crear interfaces más complejas. Es necesario arrastrar los componentes dentro del arrangement para que funcione, y esto se ve reflejado en el árbol de componentes de la pantalla. El proceso puede ser algo impreciso, no se estrese. Si lo hace, tenga a la mano algo suave para arrojar o gritarle. Es más fácil agregar elementos a un Arragement si son grandes y cubren toda la pantalla (la opción Fill Parent) Para el btnRosa configure la imagen de fondo con el archivo Rosa.jpg. (no olvide dejar el parámetro Text vacío) Para las etiquetas lblPlantaRosa, lblCantidadRosa y lblPrecio seleccione la opción Font Bold. Adicionalmente cambie los textos acordes a los valores presentados en la ilustración.
9 Para las etiquetas lblRosa, canidadtRosa y recRosa, configure el valor del FontSize en 12.0 y cambie los valores del campo Text por los que se muestran en la ilustración. Para los botones btnVenderRosa y btnAgregarRosa, cambie el parámetro BackgroundColor de tal forma que tengan los colores gris y azul respectivamente. Nuevamente no olvide cambiar el campo Text con el texto correspondiente, indicado en la ilustración.
Agregar información para los tulipanes:
Para agregar la información de los tulipanes, repita el proceso que usted realizó para las rosas y no olvide cambiar los valores y las imágenes que se muestran en la ilustración.
Etapa 5: Agregar funcionalidad a los componentes visuales
En esta sección usted le va a agregar la funcionalidad a las opciones de vender y agregar, de las diferentes plantas y también va a mostrar el valor actual del inventario. Inventario de las rosas En primer lugar, desarrolle la funcionalidad para vender una rosa reduciendo el valor de la variable en 1 (tenga en cuenta que es necesario revisar que la cantidad de rosas sea mayor a 0, ya que no se puede tener una cantidad negativa). Para lograr esto realice lo siguiente: Diríjase a la vista de bloques de la PantallaPlantas. Luego cree una variable que contenga el valor del inventario que se tiene para las rosas. Este bloque lo puede encontrar en la pestaña Variables del panel de bloques. El número lo puede encontrar en la pestaña Math.
El segundo bloque lo encuentra en las secciones correspondientes a la
PantallaPlantas y el label lblCantidadRosas. Su propósito es iniciar el label de la cantidad con el valor actual de rosas que se inicia en el sistema, no con 0 como está por defecto. Para vender rosas agregue el siguiente conjunto de bloques (si tiene problemas encontrando los bloques, recuerde buscar en las pestañas correspondientes a los botones específicos, en la sección Math y en la sección Control):
Asimismo, usted debe desarrollar el conjunto de bloques que hace posible agregar una planta al stock mediante el incremento de la cantidad en la variable. A continuación, se muestra un ejemplo de lo anteriormente descrito para el caso de las rosas: 10 Considere que es posible seleccionar un bloque cualquiera (o conjunto de ellos) y elegir la opción Duplicar al hacer clic derecho, para agilizar el proceso.
Inventario de los tulipanes
Para hacer el inventario de tulipanes, repita el proceso anteriormente descrito. Tenga cuidado en asignar las acciones a los botones correspondientes a agregar y vender tulipanes. También tenga en cuenta que para cualquier bloque usted puede seleccionar las variables que utiliza una vez se ha puesto en la zona de bloques.
Etapa 6: Ubicación de las plantas
Este desarrollo le va a permitir al usuario ver en dónde se encuentran las plantas que el seleccione. Ubicación de rosas: Agregue un componente ‘ActivityStarter’ a su PantallaPlantas. Dicho componente no visual le va a permitir abrir una nueva vista con la ubicación en el mapa de la planta que ha seleccionado el usuario.
Ahora desarrolle el código para lanzar el mapa desde la sección de bloques de la
PantallaPlantas. Para lograrlo, debe definir la acción que se desea lanzar en el móvil: android.intent.action.VIEW. La actividad necesita un parámetro para su funcionamiento, que se trasmite mediante una dirección URI: geo:4.6017816,- 74.0711358?q=4.6017816,-74.0711358. Los números representan las coordenadas de los viveros. Cada sección de bloques se debe ver de esta manera:
11 Ubicación de tulipanes: Repita el proceso realizado anteriormente, pero esta vez haga las modificaciones para los botones de los tulipanes (no es necesario agregar otro ActivityStarter). Ahora, al oprimir en su celular cualquier foto de cualquier planta, obtendrá en su teléfono móvil un resultado similar* al siguiente:
Es posible conseguir un resultado similar (incluso mejor) si se usa el componente
de mapas de Kodular, pero no es parte de este taller y es su responsabilidad revisar el funcionamiento de estos componentes.
*Depende de la aplicación con la que use los mapas por defecto.
Etapa 7: Ejecución del proyecto
Si no ha hecho las configuraciones necesarias para probar la app, este es el momento de hacerlo. Test En la pestaña test puede intentar conectarse a Kodular usando la app compañera instalada en su celular o un cable usb. En cualquier caso, Kodular intnetará correr una versión de prueba en su celular. Dependiendo de su celular y de su conexión a internet, puede o no tener éxito esta forma de probar su código.
Build Compilar su app puede tomar más tiempo, pero le permite probar su código de forma más segura. Al construir un .apk de su proyecto puede descargarlo a su computador y luego instalarlo en su dispositivo o descargarlo e instalarlo en su
12 dispositivo de una vez leyendo un código QR. Recuerde que las aplicaciones .apk solo funcionan en dispositivos Android.
Parte II. Extensión
Actividad 1: Preguntas En un documento aparte, conteste brevemente las isguientes preguntas. Use lo que ha aprendido e intuido del taller y complemete con busqueda en google o en al documentación de Kodular. ¿Cuál es el propósito del componente ActivityStarter? ¿Se puede lograr el mismo comportamiento de alguna otra manera? Si usted quisiera cambiar las coordenadas de los viveros por la latitud 37.399107 y longitud -122.058983 ¿Cómo quedaría la URI que se le pasa al ActivityStarter? ¿Qué es una URI?
Actividad 2: Pantalla de Alertas
El propósito de la pantalla de alertas es dejar una constancia de diferentes mensajes de advertencia sobre el estado de las plantas. El usuario puede dejar un mensaje y este queda listado en la pantalla, el cual se puede consultar en el futuro:
13 El usuario puede escribir una alerta en el cuadro de texto y esta alerta queda registrada en la lista de la parte superior al seleccionar el botón Agregar. En la lista se puede revisar todas las alertas escritas durante la sesión (no es necesario que la lista cargue alertas cuando se inicializa la pantalla). El botón de limpiar elimina todas las alertas en la lista, pero debe pedir confirmación primero al usuario antes de hacerlo. Pista: Para conseguir los comportamientos deseados, explore los componentes y los bloques en la categoría Lists y también el componente Notifier. Recuerde que puede explorar la documentación de Kodular y cualquier otro tutorial o material en la red.
Entrega Usted puede descargar el proyecto de Kodular como tal pidiéndole al sistema que exporte a su computador un archivo .aia que después puede importar nuevamente en otra cuenta para continuar el trabajo:
14 Cree un archivo comprimido .zip que contenga el archivo .aia de su proyecto desarrollado y un archivo de texto con las respuestas a las preguntas solicitadas. Haga la entrega por medio de la actividad correspondiente en Bloque Neón.
