en gl en ca gl gl gl gl es gl en gl es en pt ceb lt gl gl it gl gl gl gl gl gl gl gl gl gl gl es gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl it gl gl gl gl es gl gl pt gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl gl eo en en en en en gl gl gl gl gl gl lt gl it fr ast gl gl gl es gl pt pt it it es it gl gl gl gl en en en gl en en en en gl en en en en gl
Na nosa primeira app aparecerá a imaxe dun gatiño na pantalla que miañará cando o toques e vibrará cando axites o teu dispositivo.
OLLO: O nome dos proxectos non pode conter espazos en branco. Se queres, no seu lugar utiliza o símbolo de guión ou guión baixo.
A pantalla que aparece é a  de deseño que  se divide en 5 partes:
Paleta: Á esquerda, na paleta, están os obxectos que imos usar para deseñar a pantalla da nosa aplicación. Botóns, imaxes, debuxos, etc. É coma a paleta dun pintor.
Visor: A pantalla do centro, o visor, representa a pantalla do móbil, e serve para deseñar o aspecto da aplicación.
Componentes: Á dereita do Visor está  a parte de compoñentes, que é onde se mostra a lista de compoñentes que estamos usando na nosa app. Inicialmente o único compoñente dispoñible é Screen1 que simboliza a pantalla do dispositivo Android.
Medios: Debaixo da lista de compoñentes temos un espazo máis chamado medios que mostrará os ficheiros de imaxe e son que imos utilizar na nosa app.
Propiedades: Á dereita  se atopa a sección de propiedades, que mostra as propiedades dos compoñentes. Así, despois de seleccionar un compoñente poderemos ver e modificar as súas propiedades (tamaño, posición, texto, etc).
Antes de nada, para este exercicio necesitamos dous recursos que temos que descargar no noso ordenador. Estes arquivos pódelos atopar na web de appinventor.mit.edu – CC By SA
O primeiro compoñente que imos engadir é unha Etiqueta para mostrar un texto.
Na Paleta, na categoría Interface de usuario, fai clic en Etiqueta e arrástrao ata a área do Visor. Alí aparece un rectángulo co texto: “Texto para etiqueta”.
Na xanela de Propiedades, na propiedade chamada Texto, cambia o texto que aparece alí por “Acariña ao gatiño” e pulsa intro. Verás como o texto se modifica tamén na sección do Visor.
Cambia a cor de fondo da etiqueta facendo clic no cadro Color de Fondo, selecciona, por exemplo, a cor azul. Cambia tamén a cor do texto da etiqueta usando a propiedade Color de Texto, por exemplo usa a cor turquesa. Para terminar, cambia dende a propiedade Tamaño de Letra o tamaño da fonte a 30 puntos.
Imos engadir un botón á nosa app e faremos que este compoñente mostre a imaxe do gato.
Desde a Paleta, selecciona o compoñente Botón  e arrástrao ata o Visor, colocándoo xusto debaixo da etiqueta anterior. Verás que aparece un botón cun aspecto clásico.
Agora que temos o botón faremos que apareza nel a imaxe do gato.
Asegúrate de que tes seleccionado o Botón na lista de Componentes, así, na xanela de Propiedades,  fai clic en Imagen (que actualmente ten o valor Ninguno…) e pulsa o botón  Subir archivo… Selecciona a imaxe do gato, kitty.png, que descargaches previamente ao teu computador e logo OK.
A imaxe do gato mostrarase inmediatamente na pantalla.
Observa que a imaxe tamén estará dispoñible na sección Media.
Como comprobarás, sobre a imaxe do gato aínda aparece o texto do botón. Busca a propiedade Texto do botón e borra o texto “Texto para el Botón1” que hai alí.
Se non ves a cara do gato enteira na pantalla do dispositivo deberás cambiar os valores das Propiedades  Ancho e Alto do Botón por “Ajustar al contenedor“, para que se axusten ao tamaño máximo dispoñible na pantalla do dispositivo.
NOTA: Lembra ir gardando os cambios da túa App, no menú Proyectos > Guardar proyecto, aínda que App Inventor vai gardando automaticamente, non estará demais.
Engadir o miañar do gato
Cando o usuario toque o botón, queremos que se escoite o miañar do gato. Para iso necesitamos o son meow.mp3 e un compoñente que se encargue da súa reprodución.
Dende a Paleta fai clic na categoría Medios e arrastra o compoñente Sonido ata o Visor. Independente de onde o soltes, o compoñente de son situarase na parte inferior; nun apartado chamado Componentes no visibles.
Na sección de Componentes, selecciona Sonido1 para poder visualizar as súas propiedades. Usa a propiedade Origen para seleccionar  meow.mp3 que podes subir co botón Subir archivo…
Con isto terminamos de deseñar o aspecto da nosa aplicación. Agora vén a maxia: temos que programar como se comportará a aplicación.
A programar en bloques!
Fai clic no botón Bloques situado na esquina superior dereita.
Isto abre a xanela de programación con Bloques. A parte máis ampla, agora en branco, é o Editor, onde colocaremos os bloques dos nosos programas.
Imos facer que soe o son do gato cada vez que fagamos clic sobre a imaxe do gato (botón).
Facemos clic en Botón1 para que se mostren os bloques de cores dispoñibles para escribir o noso código, o programa. Ábrese un caixón de ferramentas con todos os bloques que podemos utilizar. Arrastramos ata o editor o que di Cuando Botón1.Click .
Os bloques cor mostaza son os xestores de sucesos, indican que hai que facer cando sucede algo na aplicación. Neste caso, indícalle ao computador que debe facer cando fagamos clic sobre o gato.
Agora facemos clic sobre o noso compoñente Sonido1 para abrir o seu caixón. Arrastramos a instrución Llamar.Sonido1.Reproducir ata encaixala dentro do outro bloque que creamos para o Botón1.
Se tocas a imaxe do gato no teu dispositivo (ou fas clic se estás a usar o emulador), deberás escoitar como o gato miaña.
Lembra que tes 3 opcións para probar a túa App en vivo, no menú Conectar.
Utiliza este modo se tes un dispositivo Android conectado e configurado que se atope na mesma Wi-Fi que o computador.
No teu dispositivo, lanza a aplicación MIT AI2 Companion (Inventor Companion App) e selecciona Scan QR Code. Despois, escanea o código QR que aparece na pantalla de teu computador.
Para as outras dúas opcións, tes que ter instalado a aplicación aiStarter no teu computador, e execútala:
Para Windows: Descarga o instalador aiStarter. Fai clic na icona de aiStarter, abrirase unha xanela negra.
Para Linux: Descarga Appinventor Setup installer Debian package. Para executar aiStarter, localiza en /usr/google/appinventor/commands-for-Appinventor/aiStarter &, botón dereito e executar.
Se non tes dispositivo Android debes usar o emulador. Fai clic no menú Conectar > Emulador, agarda a que cargue a aplicación e próbaa (aínda tarda un pouco en cargar).
Elixe USB se non tes unha conexión sen fíos a Internet pero tes un dispositivo Android conectado mediante USB ao teu computador. A opción de conexión USB pode ser complicada en Windows, xa que non recoñece automáticamente tódolos dispositivos, pero en Linux funciona millor.
Se todo funciona como é debido, poderás ver a app no teu dispositivo ou no emulador e a medida que fagas cambios nela irás véndoos tamén.
Podemos mellorar a aplicación facendo que o teléfono vibre á vez que o gato miaña.
Hai que buscar dentro do caixón de bloques do obxecto Sonido1 .
O bloque que fai que o móbil vibre é Llamar.Sonido1.Vibrar. Este bloque  ten unha caixa polo lado dereito que serve para indicar canto tempo ten que vibrar o dispositivo en milisegundos.
Para poñer aquí un valor de tempo hai que abrir o caixón Matemáticas e arrastrar o bloque de arriba ata a caixa libre á dereita do bloque LLamar.Sonido1.Vibrar, onde indica milisegundos .
Agora cambiamos o valor 0 polo valor 500, para que vibre durante medio segundo.
Os bloques quedarán así:
Imos engadir un último elemento para que ao axitar o noso dispositivo tamén se reproduza o son do gato. Para conseguilo necesitaremos un compoñente máis chamado Acelerómetro.
Agora volveremos ao Diseñador.
Fai clic no botón Diseñador da esquina superior dereita, e na Paleta, dentro do caixón Sensores engadiremos o obxecto Acelerómetro, quedará baixo a xanela do Visor, xunto co obxecto de Sonido1, porque é un obxecto invisible na nosa interface de usuario.
Agora, volvemos ao editor de Bloques.
Elixiremos na xanela de bloques o obxecto Acelerómetro1. Do seu caixón elixiremos o bloque mostaza cuando.Acelerómetro1.Agitar.
Agora copiamos o bloque Llamar.Sonido1.Reproducir de arriba, facendo clic co botón dereito sobre el e seleccionando Duplicar.
Unha vez duplicado encaixarémolo co bloque mostaza que creamos. O editor de código aparecerá como na seguinte figura.
Que vai ocorrer? O gato tamén miañará cada vez que axitemos o móbil. O acelerómetro é o sistema que detecta que o móbil se move, ou cambia de orientación vertical a horizontal.
Descarga a app ao teu dispositivo
A proba en vivo permíteche comprobar facilmente a app mentres traballas nela. O único problema é que unha vez rematado o traballo, cando desconectes o teu dispositivo, a app deixará de funcionar. Para conseguir a app de forma definitiva no dispositivo necesitaremos instalala.
O primeiro que debemos facer é asignar unha imaxe para a icona que representará a nosa app no dispositivo. Desde a vista de Diseñador, selecciona o compoñente Screen1 e asígnalle en Propiedades unha imaxe en Icono (por exemplo kitty.png).
Agora asegúrate de que o teu dispositivo Android pode executar apps que non proveñan da tenda oficial de Google, a Play Store.
Para a maioría de dispositivos terás que ir a Axustes / Aplicacións e marcar o recadro Permitir apps de fontes descoñecidas.
De novo na xanela de Diseñador de App Inventor, fai clic no menú Generar. Aparecerán dúas opcións:
Selecciona App (generar código QR para el archivo .apk). Despois duns segundos, aparecerá o código QR; escanéalo cunha app adecuada. O teu dispositivo pedirache que introduzas a túa contrasinal da túa conta de Google. Despois de introducila, comezará a descarga da túa app e poderalo comprobar na área de notificacións do teu dispositivo. Cando a descarga finalice, xa podes proceder á súa instalación.
Selecciona App (guardar archivo .apk en mi ordenador) para crear un ficheiro coa extensión .apk e gardalo no teu computador. Podes compartir a túa app enviando o ficheiro por correo electrónico.
Lembra que para instalar a túa app debes ter activada no dispositivo Android a opción que permite instalar apps de fontes descoñecidas, é dicir, apps que non proveñen da tenda oficial de Google (Play Store).
Ao terminar a instalación, bota unha ollada ás apps dispoñibles no teu dispositivo e verás que a túa app Miau xa está dispoñible. Podes tocar sobre a súa icona para comezar a súa execución tal e como farías con calquera outra app.
Compartir o código fonte (os bloques)
Tamén podes, se o desexas, compartir o código fonte (os bloques) da túa app. Para facelo, fai clic no menú   Exportar a mi ordenador el proyecto (.aia) seleccionado>>. Este proceso creará un ficheiro no teu computador coa extensión .aia.
Podes enviar por email o arquivo a outras persoas que tamén queiran aprender a usar apps con App Inventor. Os destinatarios poderán facer clic no menú   Importar proyecto (.aia) desde mi ordenador…>>  para ver a túa aplicación, editala, ampliala, etc.
Con todo o que aprendiches nesta páxina, crea unha App onde fagas unha invitación a túa festa de aniversario!
Webs onde podes descargar imaxes, sons e demais libremente:
Que número estás a pensar?
Mellora o teu Xilófono
Un tour por París!
Onde está o meu coche?
App Inventor e Arduíno
Acender un led RGB
Control de un coche Arduino por Bluetooth
© 2022 App Inventor • Creado con GeneratePress
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.