- Revisa los diferentes componentes que puedes utilizar en App Inventor o Thunkable
- Encuentre un componente que pueda ayudar a su aplicación
- Investiga un tutorial y codifica al menos un componente en tu aplicación
Éstas son las actividades para esta lección:
COMPONENTES PARA SMARTPHONES
Es hora de elegir y codificar los componentes, algunos de los cuales incluyen sensores que quieres que utilice tu aplicación. Los distintos componentes disponibles permitirán que tu app haga muchas cosas distintas: ¡asegúrate de elegir los que más te convengan!
Esta lección es una referencia para que conozcas muchos componentes que puedes utilizar en tu aplicación.
Probablemente ya hayas elegido tu plataforma, pero vamos a listar todos los componentes tanto para App Inventor como para Thunkable, sólo para que puedas ser consciente de los componentes disponibles.
Busca los componentes que puedes utilizar para implementar las funciones que has planeado para tu aplicación.
LISTA DE COMPONENTES POR CATEGORÍA
Los siguientes componentes van más allá del estándar componentes de la interfaz de usuarioque permiten al usuario interactuar con la aplicación.
Esta no es una lista completa, pero cubre la mayoría de los componentes disponibles actualmente. Thunkable y App Inventor continúan añadiendo más características y componentes todo el tiempo.
La información que figura a continuación también está disponible en este documento.
Si tu aplicación necesita funciones relacionadas con cosas como fotografías, audio y video, estos componentes te serán muy útiles.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Permite al usuario tomar videos. Puedes utilizarlo para aplicaciones sociales, aplicaciones para compartir video o en cualquier otro momento en el que quieras que tu usuario grabe un video. | Videocámara | Cámara |
| Permite al usuario hacer fotos. Esto puede ser útil para aplicaciones que permiten a los usuarios establecer fotos de perfil o tomar fotos para compartir o guardar en una galería. | Cámara | Cámara |
| Permite al usuario elegir una imagen de su biblioteca de fotos. Permitirá a los usuarios elegir fotos que hayan tomado fuera del uso de tu app. | ImagePicker | Archivos (fototeca) |
| Permite incrustar un video en la aplicación sobre el que el usuario puede hacer clic. El video debe ser un .wmv, .3gp o .mp4 y no superar 1MB. | Reproductor de vídeo | Video |
| Permite traducir texto a otro idioma. Requiere que tu app tenga acceso a internet, ya que depende de servicios de traducción externos. | Traductor | Discurso |
| Permite al usuario grabar un sonido o ruido. | SoundRecorder | Sonido |
| Este componente de audio reproduce un sonido. Funciona mejor para sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, sonido, para cualquier longitud de audio. | Player | Sonido |
| Muy similar al componente Player, pero es mejor para sonidos cortos, como "dings" de notificación. | Sonido | Sonido |
| Traduce la voz del usuario a texto. Esto es especialmente útil para aplicaciones que requieren manos libres. | Reconocedor del habla | Discurso |
| Este componente hace lo contrario que SpeechRecorder; permite a los usuarios introducir texto y la aplicación lo leerá en voz alta. | Voz a texto | Discurso |
| Puedes hacer que una animación JSON se reproduzca en tu aplicación. | No disponible | Animación |
Si necesitas que tu aplicación realice llamadas telefónicas, envíe correos electrónicos, envíe mensajes de texto y comparta determinados tipos de información, estos componentes sociales pueden serte útiles.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Muestra los contactos del usuario y le permite elegir a alguien de esa lista. | ContactPicker | No disponible |
| Permite al usuario introducir una dirección de correo electrónico de la lista de contactos del usuario. | EmailPicker | No disponible |
| Permite al usuario elegir un número de teléfono de una lista de contactos telefónicos. | PhoneNumberPicker (Seleccionador de números de teléfono) | No disponible |
| Permite incrustar un video en la aplicación sobre el que el usuario puede hacer clic. El video debe ser un .wmv, .3gp o .mp4 y no superar 1MB. | Reproductor de vídeo | Video |
| Permite al usuario realizar una llamada telefónica desde la aplicación. | Llamar por teléfono | Compartir |
| Permite al usuario enviar un mensaje de texto al teléfono de otro usuario a través de su aplicación. | Mensajes de texto | Compartir |
| Este componente de audio reproduce un sonido. Funciona mejor para sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, sonido, para cualquier longitud de audio. | Player | Sonido |
| Permite a los usuarios compartir mensajes, imágenes u otros contenidos de tu aplicación con otras aplicaciones del teléfono del usuario, como el correo electrónico y la mensajería. | Compartir | Compartir |
| Permite la comunicación entre tu aplicación y Twitter. Los usuarios pueden buscar tweets, enviar y recibir mensajes, obtener una lista de seguidores, etc. | No disponible | |
| Thunkable te permite añadir anuncios a tu aplicación. Todas las aplicaciones deben ser aprobadas por Thunkable antes de que puedan ser descargadas o publicadas. | No disponible | Anuncios |
Estos componentes permiten a tu aplicación interactuar con entidades externas a ella, como la web, los dispositivos y otras aplicaciones.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Permite que tu aplicación inicie otras aplicaciones, como Cámara o Google Maps, o aplicaciones creadas por el usuario e instaladas en el teléfono. | ActivityStarter | Abrir enlace (Bloque de control) |
| Te permite incrustar un mapa en tu aplicación. App Inventor incluye componentes como Marcadores y Formas que pueden añadirse a un mapa. Estas características se añaden en código en Thunkable. | Mapas | Mapas |
| Permite a los usuarios ver páginas web dentro de tu aplicación. | WebViewer | Visor web |
| Permite que tu aplicación envíe y reciba información de sitios web externos. | Web | API web |
| Permite al usuario realizar una llamada telefónica desde la aplicación. | Llamar por teléfono | Compartir |
| Estos componentes permiten que tu aplicación se conecte con dispositivos Bluetooth. | Cliente Bluetooth, Servidor Bluetooth, Bluetooth LE (extensión) | Bluetooth de baja energía (BLE) |
| Este componente de audio reproduce un sonido. Funciona mejor para sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, sonido, para cualquier longitud de audio. | Player | Sonido |
| Se utiliza para recoger datos de fuentes externas (sensores, web, archivos de datos) y mostrarlos en forma de gráfico. | Gráfico, ChartData2D | No disponible |
| Se puede utilizar para conectarse a dispositivos que permiten la comunicación serial como Arduino. | Serie | No disponible |
| Permite a los usuarios de tu aplicación registrarse con un nombre de usuario y una contraseña. Esto requiere que primero configures una cuenta Firebase. | No disponible | Registro |
| Permite incrustar un archivo pdf en la aplicación | No disponible | Lector de PDF |
Si tu aplicación necesita recopilar información sobre el mundo que la rodea o sobre el usuario, aquí tienes algunos sensores a los que App Inventor y Thunkable pueden acceder.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Puede determinar si el teléfono tiembla y si se sujeta en posición vertical o invertida. Esta función es muy útil cuando quieres que la pantalla se reoriente en función de cómo se sostenga el teléfono, o si quieres que la aplicación reaccione a las sacudidas. | AcelerómetroSensor | Acelerómetro |
| Utiliza el sensor acelerómetro para medir cuántos pasos da el usuario que sujeta el teléfono, y también puede estimar la distancia recorrida. | Podómetro | No disponible |
| Puede detectar si el teléfono está inclinado. Es más preciso que el acelerómetro y puede medir cuánto ha cambiado la orientación del teléfono. | GiroscopioSensor | Giroscopio |
| Se utiliza para medir la densidad de flujo magnético. No todos los teléfonos admiten esta función. | Sensor de campo magnético | Magnetómetro |
| Permite a tu aplicación obtener la hora actual o utilizar un temporizador. Esto puede ser útil para establecer una alarma temporizada o utilizar un temporizador. | Reloj | Temporizador |
| Recoge la latitud y la longitud de la ubicación del teléfono. Este sensor puede ser útil siempre que necesites buscar puntos de interés cercanos al usuario. | Sensor de ubicación | Sensor de ubicación |
| Indica si el teléfono está cerca de un objeto. Suele utilizarse para saber si el usuario tiene el teléfono cerca de la oreja. No todos los teléfonos admiten esta función. | Sensor de proximidad | No disponible |
| Permite a su aplicación leer un código de barras. | Escáner de códigos de barras | Cámara |
| Mide la presión atmosférica ambiente. | Barómetro | No disponible |
| Mide la humedad relativa del aire ambiental. Poco común en la mayoría de los dispositivos móviles. | Higrómetro | No disponible |
| Mide el nivel de luz. | Sensor de luz | No disponible |
| Permite a tu aplicación compartir datos con otros dispositivos equipados con NFC (Near-field Communication). | Campo cercano | No disponible |
| Proporciona información sobre la orientación física del dispositivo en tres dimensiones: balanceo, cabeceo y acimut. | OrientaciónSensor | No disponible |
| Mide la temperatura ambiente (exterior). | Termómetro | No disponible |
Tu aplicación puede almacenar datos dentro de la app, en el dispositivo y en la nube con estos componentes.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Bloque que permite actualizar y almacenar información dentro de la aplicación. Cualquier información se borra cuando se cierra la aplicación. | Variable | app Variable |
| Permite a tu aplicación almacenar y actualizar información localmente en el dispositivo móvil y utilizarla dentro de la aplicación. Los datos pueden almacenarse y recuperarse entre ejecuciones de la aplicación. En Thunkable, DataViewer y DataViewerGrid pueden almacenar datos localmente utilizando la opción "Crea tu propia tabla". | TinyDB | Variable almacenada Lista DataViewer Cuadrícula del visor de datos |
| Permite que tu app almacene, recupere y actualice datos en la nube para que los datos puedan ser compartidos entre diferentes usuarios de la app. Thunkable ofrece variables en la nube utilizando Firebase. DataViewer y DataViewerGrid pueden vincularse a Airtable, Google Sheets y Webflow. El componente Spreadsheet de App Inventor enlaza con Google Sheets. | CloudDB FirebaseDB Hoja de cálculo | cloud Variable - (Firebase) Lista DataViewer DataViewerGrid |
Utilice modelos de aprendizaje automático para la clasificación y herramientas de IA generativa dentro de su aplicación.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Permite la comunicación con un chat bot de IA, ChatGPT de OpenAI. | Chatbot | Open AI Services (finalización de texto) |
| Te permite incluir DALL-E en tu aplicación para crear y editar imágenes. | Imagebot | Servicios de IA abiertos (generación de imágenes) |
| Te permite crear tu propio modelo de aprendizaje automático (imagen, sonido, pose) y utilizarlo en tu aplicación. | PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine (tenga en cuenta que todos ellos requieren que añada la extensión) | No disponible |
Habilita el dibujo en una aplicación y añade sprites para animar y crear juegos.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Añade un área en la pantalla donde los usuarios pueden dibujar. Aquí también puedes añadir sprites que puedes animar. | Lienzo | Lienzo |
| Estos componentes son los elementos con los que se puede animar e interactuar dentro de un juego o animación | ImageSprite Bola |
Sprite |
Añadirás componentes en la ventana Designer de App Inventor. Tendrás que hacer clic en una categoría de la paleta para abrir el cajón y mostrar los componentes.
ACTIVIDAD: APRENDER UN NUEVO COMPONENTE
Tiempo estimado: 60 minutos
Elije un componente para aprender
- Elige al menos un componente o sensor que creas que vas a utilizar en tu aplicación.
- Encuentra documentación y/o un tutorial para utilizar el componente en una aplicación. Puedes empezar por aquí:
- Codifica una aplicación utilizando ese nuevo componente
Consejo del tutor
Mejores prácticas prácticas: El componente que elijas no tiene por qué ser perfecto para tu aplicación. Mientras estés aprendiendo sobre un nuevo componente, eso es lo que importa. Elige algo que creas que puede funcionar y si te das cuenta de que no funciona, no pasa nada. En el mundo de la codificación llamamos a esta investigación un "pico" porque estás tratando de cavar lo más profundo posible (algo así como clavar un pincho de ferrocarril en el suelo).
Preguntas orientativas para las alumnas: Si estuviéramos creando una aplicación para un reloj Apple, ¿qué tipo de componentes podría tener el reloj Apple? (Pulsómetro, giroscopio - para el seguimiento de los pasos, bluetooth). ¿Cuántos datos recoge? ¿Podrías utilizar esos datos para entrenar tu modelo de IA?
Los consejos de los mentores se proporcionan gracias al apoyo de AmeriCorps.
Una de las mejores habilidades que puedes aprender como programador es a encontrar recursos que te ayuden cuando estés atascado o necesites aprender a utilizar algo.
Esta actividad es una práctica.
Puede que no coincida exactamente con la aplicación que quieres crear, pero practicar la codificación con componentes te ayudará a la hora de crear tu propia aplicación.
REFLEXIÓN
Esta lección es una referencia para todos los componentes que puedes utilizar para construir tu aplicación. No es fácil encontrar un tutorial o documentación para aprender a utilizar un componente.
REVISIÓN DE TÉRMINOS CLAVE
- Componentes de la interfaz de usuario - componentes estándar con los que interactúa un usuario, como botones, etiquetas y cuadros de texto.
- Componentes multimedia - Algunos ejemplos de componentes multimedia son las fotos, el audio y video.
- Sensores - diferentes tipos de dispositivos instalados en un teléfono que recopilan datos para diversos fines.
- Componentes sociales - funciones que permiten a los usuarios llamar por teléfono, enviar correos electrónicos, enviar mensajes de texto y compartir cosas a través de su aplicación.
- Componentes de conectividad - funciones que permiten a su aplicación interactuar con lugares ajenos a ella, como la web y otras aplicaciones.
- Componentes de almacenamiento - Bloques y componentes que permiten almacenar información en la aplicación, en el dispositivo y en la nube.
- Componentes de IA - Componentes que le permiten utilizar modelos de aprendizaje automático o herramientas de IA generativa en su aplicación.
RECURSOS ADICIONALES
Otros sitios de tutoriales útiles para App Inventor:
- appinventor.org
- El curso para principiantes Coding Bus (muchos tutoriales sobre componentes)
- GirlsCodeIt Tutoriales de Technovation
- Lista de referencia completa de componentes (Google doc para imprimir)
