Tutorial Pizza Party con Airtable | Diseño UI

Esta es la segunda publicación para crear la aplicación Pizza Party usando Kodular y Airtable. Si deseas saber como utilizar los aspectos básicos de Airtable, te invito a leer esta publicación: Tutorial Pizza Party con Airtable o ver el vídeo: Airtable | Tutorial de manejo básico.

Pizza Party con Fusion Tables es uno de los tutoriales insignia en MIT App Inventor, hemos querido recrear ese famoso tutorial utilizando Airtable como base de datos y Kodular como plataforma de desarrollo.

El objetivo de esta aplicación es realizar un pedido de pizza y bebida que será almacenado en la nube (Airtable).

Diseñando la UI de la aplicación

1. Ingresa a la interfaz del creador de Kodular y selecciona la cuenta de correo que deseas utilizar.
2. Puedes cambiar el idioma de la interfaz usando el botón Language en la esquina superior derecha.
3. Crea un proyecto haciendo clic en New Project (Nuevo proyecto). 
4. Escribe un nombre para tu proyecto, recuerda que el nombre de un proyecto debe comenzar con una letra y sólo puede contener letras, números y guiones bajos.
5. Crea el siguiente diseño

Fig. 1 Diseño de la UI

A continuación, se describen los componentes de la UI como aparecen en la pantalla en orden descendente. Solo se mencionan las propiedades que cambian su valor predeterminado. Antes de empezar tu diseño debes tener en cuenta que algunos componentes están colocados dentro de componentes de diseño (Layout), por ejemplo, btnPizza y lblArrowPizza dentro de HAPizzaSelection, así que los componentes marcados con un guión (-) están colocados dentro del contenedor previo. 

Recomendación: Realiza pruebas en vivo para asegurarte que tu diseño va por buen camino. Utiliza el método de conexión que tengas disponible. Aquí puedes ver como conectar App Inventor con tu dispositivo móvil.

Components	Name	Property	Value
Screen1	Screen1	Align Horizontal	Center
		Min SDK (Min. Android Version)	Android 4.1 ...
		Screen Orientation	Portrait
		Scrollable	True
		Sizing	Responsive
		Title	Pizza Party
		Title Visible	True
Vertical Arrangement	VAVirtualScreen1	Align Horizontal	Center:3
		Width	Fill parent
- Label	lblToOrder	Text	To order:
		Font Size	20
- TextBox	txtName	Font Typeface	Roboto Thin
		Height	Automatic
		Width	60 percent...
		Hint	Enter your name
		Input Type	Name:3
		Text	(Leave blank)
- Horizontal Arrangement	HAPizzaSelection	Align Vertical	Center:2
		Width	90 percent...
- - Button	btnPizza	Width	70 percent...
		Text	Select a Pizza
- - Label	lblArrowPizza	Font Size	24
		Font Typeface	Material Icons
		Width	Fill parent
		Text	keyboard_arrow_down
		Text Alignment	Right:2
- List View Image and Text	LVIPizza	Height	26 percent
		Width	90 percent
		Item size	Small:2
		Title Font Typeface	Roboto Thin
		Visible	False
- Horizontal Arrangement	HADrinkSelection	Align Vertical	Center:2
		Width	90 percent...
- - Button	btnDrink	Width	70 percent...
		Text	Select a Drink
- - Label	lblArrowDrink	Font Size	24
		Font Typeface	Material Icons
		Width	Fill parent
		Text	keyboard_arrow_down
		Text Alignment	Right:2
- List View Image and Text	LVIDrink	Height	26 percent
		Width	90 percent
		Item size	Small:2
		Title Font Typeface	Roboto Thin
		Visible	False
- TextBox	txtPhoneNumber	Font Typeface	Roboto Thin
		Height	Automatic
		Width	60 percent...
		Hint	Enter your phone number
		Input Type	Phone number:9
		Text	(Leave blank)
- TextBox	txtComment	Font Typeface	Roboto Thin
		Height	Automatic
		Width	60 percent...
		Hint	Write a comment
		Input Type	Normal:1
		Text	(Leave blank)
- Button	btnSubmit	Width	50 percent...
		Text	Submit
		Shape	Rounded
Horizontal Arrangement	HADB	Align Vertical	Center:2
		Align Horizontal	Right:2
		Width	90 percent...
Switch	Switch1	Text Off	Show order table
		Text On	Hide table
Web_Viewer	Web_Viewer1	Height	100 percent

Para mejorar el diseño final es recomendable agregar un componente Space (espaciador) después de cada uno de los componentes descritos arriba. Puedes ensayar algo como esto:

Space

Space1

Height

20 pixels

Una vez finalizado el diseño deberías tener algo parecido a esta UI:

Fig. 2 UI de la aplicación

Y una vez introducidos los bloques de código necesarios (Pizza Party |Tutorial # 2) deberías tener una app funcional parecida a esto:

Fig. 3 UI de la aplicación Pizza Party

Vídeo tutorial con los pasos para crear la interfaz de usuario.

Vídeo tutorial con los pasos para crear el comportamiento de la app.

Tutorial Pizza Party con Airtable | Diseño UI - Prodidáctica

Descarga el archivo .aia de este proyecto.