- Repasarás los diferentes componentes que puedes utilizar en App Inventor o Thunkable
- Encontrarás un componente que pueda ayudar a tu aplicación
- Investigarás un tutorial y programarás al menos un componente en tu aplicación
Estas son las actividades para esta lección:
COMPONENTES DE 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á de los componentes estándar 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 siguen añadiendo más funciones y componentes continuamente.
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 grabar vídeos. Puedes utilizarlo para aplicaciones sociales, aplicaciones de compartir videos, o en cualquier otro momento que quieras que tu usuario grabe un video. | Camcorder |
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 | Files (photo library) |
| 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. | VideoPlayer |
Video |
| Permite traducir texto a otro idioma. Requiere que tu app tenga acceso a internet, ya que depende de servicios de traducción externos. | Translator |
Speech |
| Permite al usuario grabar un sonido o ruido. | SoundRecorder | Sonido |
| Este componente de audio reproduce un sonido. Funciona mejor con sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, Sound, para audio de cualquier longitud. | 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. | SpeechRecognizer |
Speech |
| Este componente hace lo contrario que SpeechRecorder; permite a los usuarios introducir texto y la aplicación lo leerá en voz alta. | TextToSpeech | Speech |
| Puedes hacer que una animación JSON se reproduzca en tu aplicación. | No disponible | Animation |
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 | 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. | VideoPlayer |
Video |
| Permite al usuario realizar una llamada telefónica desde su aplicación. | PhoneCall | Share |
| Permite al usuario enviar un mensaje de texto al teléfono de otro usuario a través de su aplicación. | Texting | Share |
| Este componente de audio reproduce un sonido. Funciona mejor con sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, Sound, para audio de cualquier longitud. | 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. | Sharing | Share |
| 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 poder ser descargadas o publicadas. | No disponible | Ads |
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 | Open link (Control block) |
| Te permite incrustar un mapa en su 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. | Maps | Maps |
| Permite a los usuarios ver páginas web dentro de tu aplicación. | WebViewer | Web Viewer |
| Permite que tu aplicación envíe y reciba información de sitios web externos. | Web | Web API |
| Permite al usuario realizar una llamada telefónica desde su aplicación. | PhoneCall | Share |
| Estos componentes permiten que tu aplicación se conecte con dispositivos Bluetooth. | Bluetooth Client, Bluetooth Server, BlueToothLE (extension) |
Bluetooth Low Energy |
| Este componente de audio reproduce un sonido. Funciona mejor con sonidos "largos", como canciones, discursos o poemas. Thunkable sólo tiene un componente, Sound, para audio de cualquier longitud. | Player | Sonido |
| Se utiliza para recoger datos de fuentes externas (sensores, web, archivos de datos) y mostrarlos en forma de gráfico. | Chart, ChartData2D |
No disponible |
| Se puede utilizar para conectarse a dispositivos serie como Arduino. | Serial | 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 | Sign-in |
| Permite incrustar un archivo pdf en la aplicación | No disponible | PDF Reader |
Si tu aplicación necesita recopilar información sobre el mundo que le 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. | AccelerometerSensor |
Accelerometer |
| 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. | Pedometer |
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. | GyroscopeSensor |
Gyroscope |
| Se utiliza para medir la densidad de flujo magnético. No todos los teléfonos admiten esta función. | MagneticFieldSensor |
Magnetometer |
| 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. | Clock | Timer |
| 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. | LocationSensor |
Location Sensor |
| 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. | ProximitySensor |
No disponible |
| Permite a tu aplicación leer un código de barras. | Escáner de códigos de barras | Cámara |
| Mide la presión atmosférica ambiente. | Barometer | No disponible |
| Mide la humedad relativa del aire ambiente. Poco común en la mayoría de los dispositivos móviles. | Hygrometer |
No disponible |
| Mide el nivel de luz. | LightSensor | No disponible |
| Permite a tu aplicación compartir datos con otros dispositivos equipados con NFC (Near-field Communication). | NearField | No disponible |
| Proporciona información sobre la orientación física del dispositivo en tres dimensiones: balanceo, Presentación y acimut. | OrientationSensor | 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 "Crear tu propia tabla". | TinyDB | Variable almacenada Lista DataViewer Cuadrícula del visor de datos |
| Permite que tu aplicación almacene, recupere y actualice datos en la nube para que los datos puedan ser compartidos entre diferentes usuarios de la aplicación. Thunkable ofrece variables en la nube utilizando Firebase. DataViewer y DataViewerGrid pueden vincularse a Airtable, Google Sheets y Webflow. En App Inventor, el componente 'Spreadsheet' se vincula a Google Sheets. | CloudDB FirebaseDB Spreadsheet |
cloud Variable – (Firebase) DataViewer List DataViewerGrid |
Utiliza modelos de aprendizaje automático para la clasificación y herramientas de IA generativa dentro de la aplicación.
| Descripción | App Inventor | Thunkable |
|---|---|---|
| Permite la comunicación con un chat bot de IA, ChatGPT de OpenAI. | Chatbot | Open AI Services (text completion) |
| Te permite incluir DALL-E en tu aplicación para crear y editar imágenes. | Imagebot | Open AI services (image generation) |
| Te permite crear tu propio modelo de aprendizaje automático (imagen, sonido, pose) y utilizarlo en tu aplicación. | PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine (note these all require you to add the extension) |
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. | Canvas | Canvas |
| Estos componentes son los elementos con los que se puede animar e interactuar dentro de un juego o animación | ImageSprite Ball |
Sprite |
Añadirás componentes en la ventana de diseño 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: APRENDE UN NUEVO COMPONENTE
Tiempo estimado: 60 minutos
Elige un componente sobre el que 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í:
- Programa una aplicación utilizando ese nuevo componente
Consejo de los mentores
Buenas 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 descubres que no funciona, no pasa nada. En el mundo de programación llamamos a esta investigación un "spike" porque estás tratando de cavar rápidamente lo más profundo posible (algo así como clavar un pincho de ferrocarril en el suelo).
Preguntas orientativas para estudiantes: Si estuviéramos haciendo una aplicación para un reloj de Apple, ¿qué tipo de componentes podría haber en el reloj de 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 programadora 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 programació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 programación Bus beginner (muchos tutoriales sobre componentes)
- GirlsCodeIt Tutoriales de Technovation
- Lista de referencia completa de componentes (Google doc para imprimir)
