Eneste tutorial, aprenderás:- a mostrar un mensaje en un paso- a introducir un mensaje personalizado- a crear un recuento de mensajes- a documentar la fecha y hora de la visualización del mensaje más reciente.
En este tutorial, aprenderá los conceptos básicos de las aplicaciones mediante la creación de varios componentes funcionales.
Al final de los ejercicios, tendrás una aplicación Hello World con el siguiente aspecto:
Ejercicio 1: Crear una aplicación Hola Mundo
En este ejercicio, crearás una aplicación simple que muestra un mensaje desde un botón disparador.
Crear una aplicación
- En la pestaña Apps, haga clic en Apps.
- Haz clic en + Crear App en la esquina superior derecha.
- Nombre la aplicación "Hola Mundo - Ejemplo". Opcionalmente, puedes añadir una descripción para que otros usuarios sepan para qué sirve esta app.
- Haz clic en + Crear.En la página de detalles de la aplicación, puedes hacer clic en Editar en la esquina superior derecha o en el nombre Paso sin título para acceder al Editor de aplicaciones.Antes de crear nada, vamos a añadir algunos elementos de diseño básicos al diseño base.
Diseñar un diseño base
- En la pestaña Pasos de la izquierda, selecciona Diseño base.
- Haz clic en Iconos y selecciona un rectángulo. Ajusta la anchura del rectángulo para que abarque toda la pantalla de la aplicación y, a continuación, haz clic en él y arrástralo hasta la parte superior de la pantalla. Para cambiar el color del rectángulo, haz clic en el cuadrado Relleno de la pestaña Widget y selecciona el color gris tenue.
- Selecciona la forma y pulsa CTRL/CMD + C para copiar. Arrastra el segundo rectángulo a la parte inferior de la pantalla.
- Haz clic en Entrada y selecciona Variable. En la pestaña Widget, haz clic en el campo Seleccionar una fuente de datos. Haz clic en la flecha situada junto a Información de la aplicación y selecciona Nombre de la aplicación.
- Haga clic y arrastre la variable a la esquina superior izquierda, encima del rectángulo.
- Añade dos variables más:
- Selecciona Step name de la lista de fuentes de datos de app info. Coloca esta variable en la esquina superior derecha.
- Seleccione Usuario conectado de la lista de fuentes de datos de información de la aplicación. Coloque esta variable en la esquina inferior izquierda.
- Por último, haz clic en Botones y selecciona Menú. Haz clic y arrastra el botón a la parte inferior de la pantalla.
Tu diseño base tendrá este aspecto:
A continuación, vamos a construir la funcionalidad en un paso.
Añadir botón hola mundo
- En la pestaña Pasos, selecciona Paso sin título. Haz doble clic sobre él para renombrarlo y escribe "Mostrar mensaje".
- Haz clic en Botones y selecciona el Botón. Redimensiona el botón para que sea más grande usando los cuadrados alrededor del botón. Sitúe el botón en el centro de la pantalla.
- Añada el siguiente estilo al botón:
- Texto - "Hola Mundo"
- Color del botón - Verde
- Icono - Herramienta Pan
El botón tendrá el siguiente aspecto:
A continuación, vamos a añadir un disparador a este botón para que sea funcional.
Añadir un disparador al botón
- Selecciona el botón Hola Mundo y navega hasta la sección Activadores en la pestaña Widget. Haga clic en + para añadir un nuevo activador.
- Nombre el disparador "Hola mundo".
- En la sentencia Then, añada la siguiente lógica**:Mostrar mensaje** → Valor estático → Texto → "Hola mundo".
Su disparador debe coincidir con el siguiente:
- Haz clic en Guardar.
Cuando pruebes la aplicación, funcionará así:
Ejercicio 2: Almacenar datos de entrada
En este ejercicio, construirás la lógica que almacena el texto de entrada en una variable.
- Añada un nuevo paso y nómbrelo "Almacenar mensaje".
- Haga clic en Entrada y seleccione Texto.
- En la pestaña Widget, haga clic en la casilla datasource. Seleccione + Añadir variable.
- Nombra la variable "mensaje" y haz clic en + Crear.
Cuando pruebes la aplicación, el texto introducido se guardará en la variable "mensaje". Puedes ver el valor guardado en el panel de Variables en la parte izquierda de la ventana del Modo Desarrollador.
Ejercicio 3: Contar el número de saludos
En este ejercicio, creará un análisis que cuente cuántas veces se ha pulsado el botón Hola mundo.
- En el paso Mostrar mensaje, haga clic en Incrustar y seleccione Análisis. Haga clic y arrastre el widget a la izquierda del botón Hola mundo.
- Haga clic en Seleccionar un análisis y luego en Crear análisis.
- Haga clic en el menú desplegable Tipos de visualización y seleccione Valor único.
- Haga clic en la pestaña Operaciones y Añada una nueva operación.
- Seleccione Funciones de Agregación y luego Recuento de Registros.
- Haga clic en la flecha lateral a la derecha del editor para expandir el Panel de Visualización. Debajo de Valor, haga clic en + Agregar campo y seleccione Recuento de registros.
- Haga clic en el título del análisis y cámbiele el nombre a "Recuento de saludos", luego haga clic en Guardar.
- Haga clic en Guardar y cerrar en la esquina superior derecha.
Dado que las finalizaciones no se guardan en el modo de desarrollador, haz clic en Ejecutar para probar este análisis en el reproductor Tulip Player.
Ejercicio 4: Calcular el último hola con una expresión
En este ejercicio, escribirás una expresión en un trigger que almacena a una variable para mostrar la última vez que la aplicación dijo hola.
- En el Panel Lateral, navegue hasta la pestaña App.
- Junto a Variables, seleccione X.
- Haga clic en + Crear variable.
- Nombra la variable "Última vez que saludaste" y haz clic en + Crear.
- En el paso Mostrar mensaje, haga clic en el botón Hola mundo y añada un nuevo disparador.
- Añada la siguiente acción al desencadenador**:Manipulación de datos** → Almacenar → Expresión: 'La última vez que dijiste hola fue a las' + ' ' + App Info.Fecha y hora actuales.Hora actual → Variable → Última vez que dijiste hola.
- En el paso Recuento de saludos, haga clic en Texto y seleccione Variable.
- En el panel lateral, en Opciones de datos, haga clic en el campo Fuente de datos en blanco y, a continuación, seleccione la variable La última vez que dijiste hola.
Cuando pruebe la aplicación, la expresión se guardará en la variable La última vez que saludaste y aparecerá como una marca de tiempo.
Siguientes Pasos
Ahora que has creado tu primera aplicación, aprende cómo publicarla y ejecutarla aquí.
Aprende más sobre la creación de aplicaciones:* Fundamentos de la creación de aplicaciones* Introducción al editor de aplicaciones de Tulip* Cómo diseñar un diseño base efectivo
Conviértete en un constructor de aplicaciones certificado por Tulip:Certificación básica de constructor de aplicaciones
¿Has encontrado lo que buscabas?
También puedes dirigirte a community.tulip.co para publicar tu pregunta o ver si otros se han enfrentado a una pregunta similar.