Desafío de Programación #1

Diseñando tu pantalla

Para esta aplicación debes crear una presentación de diapositivas permitiéndole a tu usuario navegar a través de imágenes. Cuando diseñes tu pantalla, deberás incluir una imagen además de botones que indiquen ‘anterior’ y ‘siguiente’ en los cuales el usuario puede hacer clic. Esta parte será realizada en la sección diseñador.

  1. Agrega una imagen a tu pantalla.
    • ¡Ajústala al tamaño de tu pantalla cambiando el largo y el ancho!
    • Elegiremos nuestra imagen como “fill parent”. Cuando seleccionas “fill parent” le dices al componente que rellene todos los espacios de cualquier cosa que esté La imagen 1 está dentro de la pantalla, pero los botones están dentro del contenedor del arreglo horizontal. Puedes ver qué cosas hay dentro de otras por cómo están dispuestas en el menú de los componentes.
  2. Agrega un diseño horizontal a tu pantalla debajo de la imagen.
  3. Agrega dos botones en el diseño horizontal.
    • Haz click en los botones en el menú de los componentes.
      • Edita el texto para hacer que los botones digan ‘anterior’ y ‘siguiente’
      • También deberías cambiar los nombres de tus botones para ayudarte a recordar que es lo que se supone tienen que hacer. Puedes hacerlo haciendo clic en “rename” bajo cada componente.
  4. Sube una imagen que quieras usar en tu presentación.
  5. Selecciona la imagen que quieres usar en la primera pantalla de tu presentación.
    • Haz clic en “Image1” en el menú “Componentes” y luego en “imagen” en el menú de propiedades. Puedes elegir una imagen que hayas subido.
  6. Agrega al menos dos pantallas má Para nuestra presentación, usamos tres pantallas pero puedes agregar cuantas quieras.
    • Por ahora no tienes que hacer nada con esas pantallas, pero luego de programar los bloques tendrás que agregarles botones e imágenes igual que como lo hiciste para esta pantalla.

designer

Programando los bloques

Explicación: Ahora que ya tienes tu pantalla configurada, tendrás que hacer que haga algo. Cuando el usuario presiona los botones, quieres que tu aplicación abra otra pantalla con otra imagen dentro de esta. Para hacer esto usarás el botón controladores de eventos.

  1. Haz clic en ‘previous’ para ver todos los controladores de eventos que puedes usar. Agarra el botón ‘when button.click’ y muévelo a tu espacio de trabajo.
  2. Haz clic en ‘control’ y encuentra el bloque ‘open another screen screenName.
  3. Obtén una caja de texto vacía y haz clic en el bloque ‘open another screen screenName‘. Escribe el nombre de la última pantalla que aparecerá en tu presentación. Para nosotros, fue Screen3.
  4. Haz clic en el siguiente botón y agarra el controlador de eventos ‘when button.click‘.
  5. Obtén otro bloque ‘open another screen screenName‘ desde control.
  6. Obtén un bloque de texto vacío y escribe la siguiente pantalla que aparecerá en tu presentación. (Para nosotros, fue Screen2.)
  7. blocks

    ¡Punto de control!

    Antes de continuar, asegurémonos de que el código que creaste funciona. Es un buen hábito revisar partes de tu código antes de escribir la aplicación completa, para asegurarte de que funciona. De otra manera, podrías crear la aplicación y tener muchas prestaciones que no terminan funcionando (¡y podría ser difícil averiguar por qué no funciona!

    Empareja App Inventor con tu celular, tablet o emulador. ¿Los botones hacen lo que se supone que tienen que hacer? Nuestros botones funcionaron de la siguiente manera: “previous” (“anterior”) nos llevó a Screen3 y “next” (“siguiente”) nos llevó a Screen2. Si tus botones no hacen lo que esperabas que hicieran, intenta volver y asegurarte de que tu código está correcto.

    Pista: Ya que no hay nada en Screen 2 y Screen 3 todavía, volvimos a la pantalla 1 usando App Inventor en nuestro computador. App Inventor te permite navegar a través de diferentes pantallas en tu celular o emulador conectado usando tu computador. Este será un buen truco utilizable más adelante.

    Terminando tu app

    Explicación: Ahora que has configurado una pantalla y la has programado exitosamente, puedes programar las pantallas restantes. Puedes agregar más pantallas si quieres que tu presentación tenga más imágenes, pero asegúrate que siempre tienes al menos tres. Los siguientes diagramas muestran cómo debería ser el flujo.

    1.  Repite los pasos 1-12 para cada pantalla de tu presentación. Asegúrate que el botón “siguiente” siempre te lleva a la siguiente pantalla de tu presentación y de que el botón “anterior” te lleva a la pantalla anterior.


    3screen-diagram
    4screen-diagram

    Punto de Control Final

    ¿Atorada? No olvides descargar nuestra app de ejemplo desde Google Play Store para ver cómo funciona. También puedes descargar nuestro código de fuente para este desafío aquí: Código de fuente Presentación

    Aquí están las instrucciones sobre cómo descargar y usar los códigos de fuente:

    Source Code Instructions


    Download the Source Code