Está en la página 1de 15

Ingeniería de Sistemas y Computación

Pregrado
ISIS- 1001: Introducción ISyC
Semestre: 2022-10

Taller Kodular – GUI – Lógica básica


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.

15

También podría gustarte