Instructivo 1: Hello App Maker!

Widget de botón Habilidades básicas de App Maker

access_time Entre 10 y 15 minutos

Qué compilarás

Compilarás una aplicación simple de Hello World. Esta aplicación usa un nombre como entrada y responde a un clic de un botón mostrando un mensaje de saludo personalizado.

Qué aprenderás

En este instructivo, aprenderás a realizar las siguientes acciones:

  • Crear y renombrar una aplicación
  • Agregar elementos de la IU, como cuadros de texto y botones, con la paleta de widgets y el editor de páginas
  • Establecer las propiedades de los widgets con el Editor de propiedades (Property Editor)
  • Agregar el código JavaScript para responder a un clic del mouse en un botón. Se describen dos enfoques: usar un cuadro de alerta de JavaScript y usar una asignación de propiedad
  • Obtener una vista previa y probar una aplicación

Crea tu aplicación

  1. Accede a la cuenta de G Suite que te proporcionó tu empleador o escuela.
  2. Abre App Maker.
  3. Crea una aplicación en blanco:
    • Si App Maker muestra el cuadro de diálogo de bienvenida, haz clic en Crear aplicación nueva (Create New App).
    • De lo contrario, haz clic en Menú menu chevron_right Nueva (New) chevron_right Aplicación en blanco (Blank Application).
  4. Cambia el nombre de la aplicación. Borra el nombre predeterminado, Aplicación sin título (Untitled App) y, luego, ingresa Hello App Maker.

Renombra una página

Las páginas en App Maker se convierten en páginas en una aplicación, similar a las páginas web tradicionales. Las páginas son contenedores principales para los elementos de la IU, como formularios, tablas, botones y gráficos.

Cada aplicación nueva en blanco contiene una página vacía llamada NewPage. Para esta aplicación, solo necesitas una página.

Renombra la página:

  1. En la barra lateral izquierda, junto a NewPage, haz clic en Más more_vert y, luego, en Renombrar (Rename).
  2. Ingresa HelloPage y haz clic en Aceptar (OK).

Agrega widgets y configura sus propiedades

Los widgets son las partes de la IU que ensamblas en una aplicación. Por ejemplo, etiquetar elementos, aceptar y presentar datos, configurar la navegación de la página, etcétera.

En este paso, usa Widgets para agregar dos widgets a HelloPage. A medida que agregas los widgets, configuras las propiedades en el Editor de propiedades (visible cuando se selecciona el editor edit).

Compilarás una página que se ve de la siguiente manera:

Hello App Maker

  1. Agrega un cuadro de texto para la entrada del usuario:
    1. Haz clic en Widgets y arrastra un cuadro de texto Widget de cuadro de texto cerca de la esquina superior izquierda del recuadro (el área en el centro del Editor de páginas). En el Editor de propiedades (Property Editor), la ubicación exacta es visible en Diseño (Layout).
    2. Arrastra el controlador de cuadro de texto a la derecha para aumentar el ancho del cuadro de texto.
    3. En el Editor de propiedades, cambia la propiedad del nombre a YourName.
    4. Para decirle al usuario de la aplicación qué hacer, ingresa Type your name (Escribe tu nombre) en la propiedad etiqueta (label).
  2. Agrega un botón para que el usuario haga clic:
    1. Desde Widgets , arrastra el botón Widget de botón a la derecha de tu cuadro de texto recién creado.
    2. Alinea verticalmente los bordes inferiores del botón y el cuadro de texto. A medida que arrastras el widget, verás una línea azul para mostrar la alineación.
    3. Haz doble clic en el botón y cambia el texto a Say hello (Di hola).
  3. Define una acción para realizar cuando un usuario hace clic en el botón:
    1. Haz clic en el botón Say hello (Di hola).
    2. En el Editor de propiedades chevron_right sección Botón, haz clic en la propiedad onClick y selecciona Acción personalizada (Custom action).
    3. Usa JavaScript para definir una acción, en este caso, qué sucede cuando un usuario hace clic en el botón. Copia y pega esta secuencia de comandos en el cuadro de diálogo Secuencia de comandos de cliente:
      alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
      Un cuadro de alerta de JavaScript hace referencia a la propiedad value del cuadro de texto YourName.
    4. Haz clic en Listo (Done) para guardar los cambios y cerrar el cuadro de diálogo.

Tu aplicación ahora está completa y lista para probarla.

Obtén una vista previa y prueba la aplicación

Ahora estás listo para obtener una vista previa de tu aplicación. Una vista previa es una aplicación totalmente funcional a la que solo tú puedes acceder.

  1. En la esquina superior derecha, haz clic en Vista previa (Preview). Tu aplicación se abre en una pestaña nueva del navegador.
  2. Haz clic en Permitir(Allow) para permitir que la aplicación use tu información.

    La primera vez que obtienes una vista previa de una aplicación, y luego si cambias las funciones de tu aplicación, se te solicita que permitas que tu aplicación utilice información específica.

    Sobre la aplicación (en la parte superior de la pantalla), verás el menú Página donde puedes navegar entre las páginas de la aplicación. De forma predeterminada, el menú de la página no está presente en una aplicación publicada.

    Debajo de la aplicación, ves una consola donde puedes ver los mensajes de entorno de ejecución y hacer clic en un vínculo para ver los registros del servidor.

  3. En el cuadro de texto Type your name (Escribe tu nombre), ingresa tu nombre y haz clic en Say hello (Di hola).

  4. Cuando aparezca el cuadro de alerta, haz clic en Aceptar (OK) para cerrarla.

Felicitaciones. Acabas de compilar una aplicación de App Maker.

Usa una asignación de propiedad para la salida (opcional)

En este paso, modificarás tu aplicación colocando la salida en la IU de la aplicación, en lugar de usar un cuadro de alerta de JavaScript. Usa un widget de etiqueta para la salida y una asignación de propiedad en JavaScript que haga referencia a la entrada:

  1. Agrega una etiqueta para la salida de Hello App Maker.
    1. Desde Widgets , arrastra una etiqueta Widget de botón debajo del cuadro de texto. Alinea de forma horizontal los bordes izquierdos de la etiqueta y el cuadro de texto.
    2. En el Editor de propiedades, cambia la propiedad del nombre a Salida.
    3. Desde la propiedad texto, borra Etiqueta.
  2. Revisa la acción onClick del botón Say Hello (Di hola) para tomar la entrada del usuario y emitirla a través de la etiqueta.
    1. Haz clic en Say Hello (Di hola).
    2. Haz clic en la propiedad onClick y selecciona Acción personalizada (Custom action). Cuando aparezca el cuadro de diálogo de la secuencia de comandos de cliente, quita la acción actual y reemplázala por uno de los siguientes fragmentos de código:
      • El más simple: usa una sola instrucción de asignación de JavaScript para asignar la propiedad value del widget de entrada a la propiedad text del widget de salida:
        widget.root.descendants.Output.text = "Hello, " +
        widget.root.descendants.YourName.value + "!";
      • Un poco más complejo, para manejar el caso nulo: haz referencia a los widgets de entrada y salida en variables y prueba el caso nulo antes de asignar la propiedad de text del widget de salida:
        // Define variables for the input and output widgets
        var nameWidget = app.pages.HelloPage.descendants.YourName;
        var outputWidget = app.pages.HelloPage.descendants.Output;
        // If a name is supplied, say hello to it.
        // Otherwise, just say 'Hello!'
        if (nameWidget.value) {
        outputWidget.text = 'Hello, ' + nameWidget.value + '!';
        } else {
        outputWidget.text = 'Hello!';
        } 
      • Haz clic en Listo (Done) para guardar los cambios y cerrar el cuadro de diálogo.
  3. Obtén una vista previa y prueba tu aplicación revisada.
    1. En la esquina superior derecha de App Maker, haz clic en Obtener vista previa (Preview).
    2. En el cuadro de texto, ingresa tu nombre y haz clic en Say Hello (Di hola). El widget de etiqueta muestra el mensaje de saludo.
  4. Cierra la pestaña en la que se está ejecutando la aplicación Hello App Maker. Mantén la pestaña abierta con App Maker.

Próximos pasos

  1. Haz el instructivo 2: compila una aplicación simple de base de datos de empleados y aprende sobre modelos, formularios y tablas de datos.
  2. Estudia la aplicación de muestra: la muestra Hello App Maker! replica tu trabajo aquí, con una diferencia: se colocó una tarjeta en el recuadro antes de colocar los demás widgets. Esta tarjeta te permite diseñar la IU.