PRIMERS PASSOS AMB
App Inventor
Comencem!
Reptes de programació
Entorn de disseny "Dissenyador"
MIT App Inventor
Entorn de programació "Blocs"
MIT App Inventor
App Inventor és una plataforma de codificació visual desenvolupada pel Massachusetts Institute of Technology que permet als usuaris/àries sense experiència prèvia en programació crear aplicacions per a dispositius mòbils, tant Android com iOS. Utilitza una interfície de tipus "drag and drop" per a components gràfics i blocs de codi, facilitant la introducció a la programació i el disseny d'aplicacions. Amb App Inventor, els usuaris/àries poden desenvolupar aplicacions interactives utilitzant una varietat de sensors i elements multimèdia dels dispositius, així com connectar-se al web i a serveis externs. Dins de la pàgina web, fes clic a "Create Apps!" per accedir als entorns de disseny i de programació.
Anar a la web d'App Inventor
Entorn de disseny - "Dissenyador"
L'entorn de "Dissenyador" a App Inventor és on es crea la interfície visual de les aplicacions mòbils. Aquí pots seleccionar i col·locar components com botons, textos i imatges, i ajustar les seves propietats per definir l'aspecte de l'aplicació. Funciona mitjançant una interfície gràfica de tipus "drag and drop" que fa fàcil i intuïtiu el disseny d'aplicacions.
Explicació seccions
Passa el ratolí per sobre de la imatge per conèixer les diferents seccions de l'entorn de disseny d'App Inventor
Entorn de programació - "Blocs"
L'entorn de programació "Blocs" a App Inventor és una interfície de programació visual que permet construir la lògica d'aplicacions a partir d'arrossegar i deixar anar blocs. Aquests representen comandes i funcions variades, funcionant com peces de puzle que s'encadenen per formar estructures de control, manipulació de dades i interacció amb la interfície d'usuari. Això permet una programació més intuïtiva, sense la necessitat d'escriure codi en formats tradicionals.
Passa el ratolí per sobre de la imatge per conèixer les diferents seccions de l'entorn de programació d'App Inventor
Explicació seccions
Reptes de programació
Aprèn les bases de programació d'App Inventor i a dissenyar aplicacions mòbils a partir d'aquestes pràctiques:
Hello, World!
Comptador de clics
Conversor d'unitats
Temporitzador
App-Pintor
Hello, World!
Qualsevol procés d'aprenentatge dins del món de la programació, sigui amb un nou llenguatge o una nova placa, s'inicia amb el programa "Hello, World!". Un mínim d'instruccions per comprovar el funcionament de l'entorn de disseny i de programació. Segueix el següent vídeo per fer aquesta primera aplicació i personalitza el teu missatge de salutació.
Explicació dels components
Procés per provar a un dispositiu mòbil
Generar APK i instal·lar a un dispositiu mòbil
Generar APK i instal·lar a un dispositiu mòbil
Per generar un APK (arxiu instal·lable de l'aplicació) a App Inventor i instal·lar-lo en un dispositiu mòbil, cal seguir aquests passos:
- Des de la interfície d'App Inventor, selecciona l'opció "Genera" o "Build" per empaquetar l'aplicació en un fitxer APK.
- Un cop generat, descarrega l'APK al teu dispositiu escanejant el codi QR.
- Instal·la l'APK al dispositiu i obre l'app.
Assegura't que el dispositiu tingui permís per instal·lar aplicacions de fonts desconegudes.
Comptador de clics
Un comptador de clics a App Inventor és una aplicació que incrementa un número cada vegada que l'usuari prem un botó. Aquest tipus d'aplicació és ideal per descobrir els fonaments del disseny d'interfície d'usuari i la lògica de programació de blocs, com l'ús de variables per emmagatzemar dades i el maneig d'esdeveniments, com el clic d'un botó. Segueix el següent vídeo per dissenyar i programar aquesta app. Com a repte, prova d'afegir un botó que reinici el comptador a 0.
Explicació dels components
Conversor d'unitats
Un conversor d'unitats a App Inventor és una aplicació que permet als usuaris/àries convertir entre diferents unitats de mesura. Aquesta aplicació ha de proporcionar una interfície intuïtiva amb camps d'entrada per als valors d'entrada i sortida i botons per realitzar les conversions específiques. Dissenya i programa una app que canviï entre les unitats que consideres més útils. Utilitza els següents blocs de programació amb conversions ja prepades com inspiració:
Temporitzador
Un temporitzador a App Inventor és una aplicació que incrementa progressivament un comptador fins a assolir el temps especificat per l'usuari/ària en un quadre de text. Serveix per aprendre a manipular components d'interacció amb l'usuari/ària, gestionar el temps i programar respostes a esdeveniments específics, com arribar al temps desitjat i activar una funció, en aquest cas, la vibració del dispositiu.
Dissenya i programa aquesta app utilitzant el codi que es presenta a continuació. A més, afegeix un "Notificador" per avisar que s'ha superat el temps d'espera especificat.
Explicació dels components
App-Pintor
App-Pintor és una aplicació que permet a l'usuari/ària dibuixar en un "canvas" interactuant directament amb la pantalla tàctil. Amb blocs de programació, es defineixen accions com arrossegar el dit per dibuixar línies o tocar per crear cercles. També inclou botons per esborrar el dibuix o fer una foto, que pot ser utilitzada com a fons del "canvas" de dibuix. Replica el disseny de l'app de la imatge i el programa que pots veure a continuació. Prova a canviar el color i la mida dels punts i de les línies.
- Etiqueta (Label): mostra text fix a la pantalla, com "Hello World!" o les instruccions per a l'usuari.
- Botó (Button): quan es prem, desencadena una acció dins de l'aplicació.
- Contenidor vertical (Vertical Arrangement): Organitza visualment els components en una columna vertical.
- Rellotge (Clock): serveix per controlar el pas del temps en l'aplicació, encara que no es mostra la seva funció específica en la imatge.
- So (Sound): podria ser utilitzat per emetre un so quan el temporitzador arribi a un cert temps o en ser restablert.
Explicació dels components
Explicació dels components
- Etiqueta (Label): mostra text fix a la pantalla, com "Hello World!" o les instruccions per a l'usuari.
- Botó (Button): quan es prem, desencadena una acció dins de l'aplicació.
- Contenidor vertical (Vertical Arrangement): organitza visualment els components en una columna vertical.
- Etiqueta (label): mostra text a la pantalla que no requereix interacció per part de l'usuari/ària. A la imatge, "valor del comptador" i el número "0" són etiquetes.
- Botó (button): aquest component permet a l'usuari/ària interactuar amb l'aplicació. Quan es prem un botó, pot desencadenar qualsevol acció programada dins de l'aplicació.
- Contenidor horitzontal (horizontal arrangement): organitza els components en una fila horitzontal.
Explicació dels components
Primers passos amb App Inventor
Make and Learn
Created on January 12, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Practical Timeline
View
History Timeline
View
Education Timeline
View
Timeline video mobile
Explore all templates
Transcript
PRIMERS PASSOS AMB
App Inventor
Comencem!
Reptes de programació
Entorn de disseny "Dissenyador"
MIT App Inventor
Entorn de programació "Blocs"
MIT App Inventor
App Inventor és una plataforma de codificació visual desenvolupada pel Massachusetts Institute of Technology que permet als usuaris/àries sense experiència prèvia en programació crear aplicacions per a dispositius mòbils, tant Android com iOS. Utilitza una interfície de tipus "drag and drop" per a components gràfics i blocs de codi, facilitant la introducció a la programació i el disseny d'aplicacions. Amb App Inventor, els usuaris/àries poden desenvolupar aplicacions interactives utilitzant una varietat de sensors i elements multimèdia dels dispositius, així com connectar-se al web i a serveis externs. Dins de la pàgina web, fes clic a "Create Apps!" per accedir als entorns de disseny i de programació.
Anar a la web d'App Inventor
Entorn de disseny - "Dissenyador"
L'entorn de "Dissenyador" a App Inventor és on es crea la interfície visual de les aplicacions mòbils. Aquí pots seleccionar i col·locar components com botons, textos i imatges, i ajustar les seves propietats per definir l'aspecte de l'aplicació. Funciona mitjançant una interfície gràfica de tipus "drag and drop" que fa fàcil i intuïtiu el disseny d'aplicacions.
Explicació seccions
Passa el ratolí per sobre de la imatge per conèixer les diferents seccions de l'entorn de disseny d'App Inventor
Entorn de programació - "Blocs"
L'entorn de programació "Blocs" a App Inventor és una interfície de programació visual que permet construir la lògica d'aplicacions a partir d'arrossegar i deixar anar blocs. Aquests representen comandes i funcions variades, funcionant com peces de puzle que s'encadenen per formar estructures de control, manipulació de dades i interacció amb la interfície d'usuari. Això permet una programació més intuïtiva, sense la necessitat d'escriure codi en formats tradicionals.
Passa el ratolí per sobre de la imatge per conèixer les diferents seccions de l'entorn de programació d'App Inventor
Explicació seccions
Reptes de programació
Aprèn les bases de programació d'App Inventor i a dissenyar aplicacions mòbils a partir d'aquestes pràctiques:
Hello, World!
Comptador de clics
Conversor d'unitats
Temporitzador
App-Pintor
Hello, World!
Qualsevol procés d'aprenentatge dins del món de la programació, sigui amb un nou llenguatge o una nova placa, s'inicia amb el programa "Hello, World!". Un mínim d'instruccions per comprovar el funcionament de l'entorn de disseny i de programació. Segueix el següent vídeo per fer aquesta primera aplicació i personalitza el teu missatge de salutació.
Explicació dels components
Procés per provar a un dispositiu mòbil
Generar APK i instal·lar a un dispositiu mòbil
Generar APK i instal·lar a un dispositiu mòbil
Per generar un APK (arxiu instal·lable de l'aplicació) a App Inventor i instal·lar-lo en un dispositiu mòbil, cal seguir aquests passos:
- Des de la interfície d'App Inventor, selecciona l'opció "Genera" o "Build" per empaquetar l'aplicació en un fitxer APK.
- Un cop generat, descarrega l'APK al teu dispositiu escanejant el codi QR.
- Instal·la l'APK al dispositiu i obre l'app.
Assegura't que el dispositiu tingui permís per instal·lar aplicacions de fonts desconegudes.Comptador de clics
Un comptador de clics a App Inventor és una aplicació que incrementa un número cada vegada que l'usuari prem un botó. Aquest tipus d'aplicació és ideal per descobrir els fonaments del disseny d'interfície d'usuari i la lògica de programació de blocs, com l'ús de variables per emmagatzemar dades i el maneig d'esdeveniments, com el clic d'un botó. Segueix el següent vídeo per dissenyar i programar aquesta app. Com a repte, prova d'afegir un botó que reinici el comptador a 0.
Explicació dels components
Conversor d'unitats
Un conversor d'unitats a App Inventor és una aplicació que permet als usuaris/àries convertir entre diferents unitats de mesura. Aquesta aplicació ha de proporcionar una interfície intuïtiva amb camps d'entrada per als valors d'entrada i sortida i botons per realitzar les conversions específiques. Dissenya i programa una app que canviï entre les unitats que consideres més útils. Utilitza els següents blocs de programació amb conversions ja prepades com inspiració:
Temporitzador
Un temporitzador a App Inventor és una aplicació que incrementa progressivament un comptador fins a assolir el temps especificat per l'usuari/ària en un quadre de text. Serveix per aprendre a manipular components d'interacció amb l'usuari/ària, gestionar el temps i programar respostes a esdeveniments específics, com arribar al temps desitjat i activar una funció, en aquest cas, la vibració del dispositiu.
Dissenya i programa aquesta app utilitzant el codi que es presenta a continuació. A més, afegeix un "Notificador" per avisar que s'ha superat el temps d'espera especificat.
Explicació dels components
App-Pintor
App-Pintor és una aplicació que permet a l'usuari/ària dibuixar en un "canvas" interactuant directament amb la pantalla tàctil. Amb blocs de programació, es defineixen accions com arrossegar el dit per dibuixar línies o tocar per crear cercles. També inclou botons per esborrar el dibuix o fer una foto, que pot ser utilitzada com a fons del "canvas" de dibuix. Replica el disseny de l'app de la imatge i el programa que pots veure a continuació. Prova a canviar el color i la mida dels punts i de les línies.
Explicació dels components
Explicació dels components
Explicació dels components