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

Imagen del diseño de la UI
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.


ComponentsNamePropertyValue
Screen1Screen1Align HorizontalCenter
Min SDK (Min. Android Version)Android 4.1 ...
Screen OrientationPortrait
ScrollableTrue
SizingResponsive
TitlePizza Party
Title VisibleTrue
Vertical ArrangementVAVirtualScreen1Align HorizontalCenter:3
WidthFill parent
- LabellblToOrderTextTo order:
Font Size20
- TextBoxtxtNameFont TypefaceRoboto Thin
HeightAutomatic
Width60 percent...
HintEnter your name
Input TypeName:3
Text(Leave blank)
- Horizontal ArrangementHAPizzaSelectionAlign VerticalCenter:2
Width90 percent...
- - ButtonbtnPizzaWidth70 percent...
TextSelect a Pizza
- - LabellblArrowPizzaFont Size24
Font TypefaceMaterial Icons
WidthFill parent
Textkeyboard_arrow_down
Text AlignmentRight:2
- List View Image and TextLVIPizzaHeight26 percent
Width90 percent
Item sizeSmall:2
Title Font TypefaceRoboto Thin
VisibleFalse
- Horizontal ArrangementHADrinkSelectionAlign VerticalCenter:2
Width90 percent...
- - ButtonbtnDrinkWidth70 percent...
TextSelect a Drink
- - LabellblArrowDrinkFont Size24
Font TypefaceMaterial Icons
WidthFill parent
Textkeyboard_arrow_down
Text AlignmentRight:2
- List View Image and TextLVIDrinkHeight26 percent
Width90 percent
Item sizeSmall:2
Title Font TypefaceRoboto Thin
VisibleFalse
- TextBoxtxtPhoneNumberFont TypefaceRoboto Thin
HeightAutomatic
Width60 percent...
HintEnter your phone number
Input TypePhone number:9
Text(Leave blank)
- TextBoxtxtCommentFont TypefaceRoboto Thin
HeightAutomatic
Width60 percent...
HintWrite a comment
Input TypeNormal:1
Text(Leave blank)
- ButtonbtnSubmitWidth50 percent...
TextSubmit
ShapeRounded
Horizontal ArrangementHADBAlign VerticalCenter:2
Align HorizontalRight:2
Width90 percent...
SwitchSwitch1Text OffShow order table
Text OnHide table
Web_ViewerWeb_Viewer1Height100 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:


SpaceSpace1Height20 pixels

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


Screenshoot de la UI de la aplicación
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:


Screenshoot de la aplicación Pizza Party
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.





1 Comentarios

نموذج الاتصال