App Inventor 2 est une plateforme qui nous permet permet de développer des applications logicielles pour Android, ésta es una creación de Google Labs, aquí podremos ir visualizando con distintos tipos de herramientas básicas los proyectos en los que estamos trabajando, una de las grandes ventajas que trae el App Inventor 2 es que el usuario puede ir enlazando una serie de bloques para crear application. Ce système est entièrement gratuit et facilement téléchargeable à partir de votre propre site Web. Les applications que nous pouvons créer dans App Inventor sont quelque peu limitées par leur simplicité, bien qu'ici, nous puissions également passer beaucoup de temps à développer des applications sans fin pour les appareils Android de base.
Avec Google App Inventor une grande simplicité d'utilisation a été démontrée qui a facilité l'apparition d'un grand nombre de nouvelles applications; De nos jours, de nombreux utilisateurs développent des applications dans le centre de distribution d'applications Android grâce à cela.
Qu'est-ce qu'App Inventor 2 nous permet de faire ?Créez des applications pour les appareils dotés d'un système Android à l'aide d'un navigateur Web et d'un téléphone ou d'un émulateur connecté. Les serveurs App Inventor stockent votre travail et assurent le suivi de vos projets.
Il s'agit d'un outil de développement visuel très facile à utiliser, de sorte que de nombreux utilisateurs de cet outil ne sont pas de purs programmeurs.
Avec quoi construisons-nous nos applications dans App Inventor 2 ?App Inventor Designer est l'application utilisée pour sélectionner les composants pour App Inventor, elle nous offre une palette qui contient un grand nombre d'outils avec lesquels vous pouvez travailler avec une grande simplicité.
App Inventor Blocks Editor nous permet de lier les différents types de blocs avec lesquels nous pouvons définir les fonctions de ce que nous concevons dans notre application. L'un des avantages est la manière simple et visuelle de montrer le travail que nous faisons sous la forme d'un puzzle.
Est-il facile de créer des applications avec App Inventor 2 ?Les différentes applications qui apparaissent au fil du temps sur les appareils Android nous ont montré qu'il existe une abondance d'applications dans lesquelles nous pouvons travailler, qu'elles soient basiques ou compliquées. L'application Inventor 2 nous permet de travailler avec une simplicité qui signifie que vous n'avez pas besoin d'être un programmeur pour travailler dans un environnement d'une grande simplicité, non plus travailler avec une palette d'outils ou un ensemble de blocs que nous pouvons manipuler pratiquement comme un jeu de puzzle. En plus de tout cela, une fois votre projet terminé, vous pouvez empaqueter votre application et produire une application distincte à installer.
Un autre avantage qu'il vous offre est que vous n'avez pas nécessairement besoin d'avoir un téléphone avec un système d'exploitation Android, car à partir de la page App Inventor, vous pouvez télécharger un logiciel appelé aiStarter qui vous permettra de l'émuler à partir de votre PC.
Comment accéder à App Inventor 2 ?Pour y accéder, la première chose que vous devez faire est de vous inscrire dans App Inventor, en utilisant votre compte Gmail. Il est important de savoir que ce processus est entièrement gratuit.
Configuration requise pour le système, l'appareil ou le navigateur
Systèmes d'exploitation
- Macintosh : Mac OS X 10.5 ou supérieur.
- Windows : Windows XP, Windows Vista, Windows 7
- GNU/Linux : Ubuntu 8 ou supérieur, Debian 5 ou supérieur
Navigateurs
- Mozilla Firefox 3.6 ou supérieur
- Apple Safari 5.0 ou supérieur
- Google Chrome 4.0 ou supérieur
- Microsoft Internet Explorer ne le prend pas en charge
Téléphones et tablettes
- Système d'exploitation Android 2.3 ("Gingerbread") ou supérieur
1. Installation d'App Inventor 2
Tout d'abord, nous devons savoir que L'application Inventor 2 vous permet de concevoir et de modifier en blocs comme nous l'avons déjà mentionné et tout cela fonctionne dans votre navigateur. Mais pour tester ce sur quoi nous travaillons (Testez-le en direct), nous avons trois options pendant que nous construisons notre application :
Option 1Le plus recommandé par la page appinventor est que si vous avez un appareil qui utilise Android et que vous avez une connexion Internet sans fil (WiFi), nous ne pouvons travailler qu'en installant l'application App Inventor sur notre appareil Android.
Option 2La deuxième option consiste à installer le logiciel sur notre ordinateur pour pouvoir utiliser l'émulateur Android et tester nos applications pendant que nous les construisons.
Option 3Dans cette option, c'est la plus compliquée et la plus lourde; Si notre système d'exploitation est Windows et que nous avons un appareil Android mais que nous n'avons pas de réseau sans fil (WiFi), nous pouvons installer le logiciel sur notre ordinateur et connecter notre appareil Android via USB. Sur la page, nous pouvons voir comment cette option est utilisée en dernier recours en raison de sa complexité évidente.
Une fois que nous connaissons les différentes options dont nous disposons lors de l'installation d'App Inventor 2, j'expliquerai étape par étape comment exécuter chacune de ces options :
Option 1: Connexion d'App Inventor 2 à votre appareil Android via une connexion sans fil (WiFi)
Étape 1
Téléchargez et installez l'application MIT AI2 Companion sur votre appareil Android. Dans cette option, il vous suffirait de rechercher sur votre appareil Android l'application "MIT AI2 Companion" sur le PlayStore, de la télécharger et de l'installer ou vous pouvez également la télécharger directement à partir du fichier APK. Le plus conseillé est de le télécharger depuis le PlayStore car si nous téléchargeons le fichier APK, nous devrons activer dans la configuration de notre appareil Android l'option permettant l'installation d'applications à partir de sources inconnues. Cette option se trouve dans les versions Android antérieures à 4.0, pour cela nous allons Paramètres> Applications et cochez la case " Sources inconnues". Pour les appareils avec Android 4.0 ou supérieur, vous devez aller à Paramètres> Sécurité ou alors Paramètres> Sécurité et verrouillage de l'écran, et sélectionnez le "Sources inconnues".
Ici, je laisse les codes QR respectifs pour le télécharger depuis le Playstore ou directement sous forme de fichier APK, si vous avez besoin d'un scanner QR, nous pouvons en rechercher un dans le Playstore.
PlayStore
Fichier APK
NoterTenez compte du fait que si nous le téléchargeons depuis le PlayStore, il sera mis à jour automatiquement et si nous utilisons l'option de le télécharger directement, nous devrons le mettre à jour manuellement.
Étape 2
Connectez votre PC au même réseau WiFi que votre appareil Android. App Inventor affichera l'application que vous créez automatiquement, uniquement si App Inventor est en cours d'exécution sur votre ordinateur et si Companion est en cours d'exécution sur votre appareil Android et que ces 2 sont connectés au même réseau Wi-Fi.
Étape 3
Comment connecter le projet sur lequel nous travaillons à notre appareil Android. Nous allons à la page App Inventor et nous ouvrons le projet avec lequel nous allons travailler, nous choisissons "Connect" et "Al Companion" dans le menu principal.
Il nous montrera une boîte de dialogue avec un code QR, nous recherchons notre appareil, nous exécutons l'application MIT App Companion puis nous cliquons sur le bouton "Scanner le code QR" et on scanne le code :
Après avoir attendu quelques secondes, nous devrions pouvoir voir le projet sur lequel nous travaillons et il sera mis à jour en fonction des modifications que nous y apportons.
Options 2 et 3: Installez App Inventor sur notre ordinateur avec le système d'exploitation les fenêtres
Ici, l'installation est la même pour les deux cas.
Étape 1
Tout d'abord, ce que nous devons faire est de télécharger le programme d'installation MIT_App_Inventor_Tools_2.3.0_win_setup.exe Nous pouvons le faire en accédant au lien suivant. Après avoir téléchargé le programme d'installation, nous l'exécutons.
Cette fenêtre va apparaître, nous allons cliquer sur Suivant>.
Ensuite, nous accepterons le contrat de licence en cliquant sur je suis d'accord.
Étape 2
Nous choisissons si nous voulons installer le programme uniquement pour un utilisateur ou pour tous les utilisateurs et cliquez sur Suivant>.
Nous choisissons les composants que nous voulons installer et cliquons Suivant>.
Nous choisissons où nous allons l'installer et cliquons Suivant>.
Étape 3
Nous choisissons le dossier de départ et appuyons sur Installer.
Nous attendons quelques secondes que vous installiez MIT App Inventor Tools 2.3.0.
Une fois le processus d'installation terminé, nous pouvons cliquer sur Finir et avec cela, nous aurons terminé l'installation.
Étape 4
Oui nous laissons l'option Démarrer l'outil aiStarter maintenant sélectionnée Une fenêtre aiStarter devrait apparaître où elle indiquera dans la première ligne le système d'exploitation où nous travaillons, dans la deuxième ligne où se trouve le dossier où il est installé, dans la troisième ligne le serveur sur lequel il s'exécute, dans la quatrième ligne il s'agit de trouver l'adresse IP où l'application est active. Pour fermer l'exécution d'aiStarter, appuyez sur Ctrl + C.
NoterL'aiStarter doit être exécuté chaque fois que nous allons travailler avec App Inventor 2. Si nous n'utilisons pas la connexion réseau sans fil WiFi, l'icône aiStarter devrait apparaître sur le bureau après l'installation.
2. Exécution d'App Inventor 2
Premier pas
Tout d'abord, nous devons démarrer aiStarter en cliquant sur l'icône qui se trouve sur le bureau.
Cela lancera la fenêtre aiStarter.
Deuxième pas
Après avoir démarré aiStarter, nous allons sur la page Appinventory et cliquez sur Créer des applications !
Il vous demandera d'accéder à votre compte Gmail. Après cela, il nous demandera les autorisations pour accéder à notre compte, ici nous sélectionnons Permettre. Ensuite, il nous montrera les conditions d'utilisation. Nous acceptons les termes, puis il nous demandera si nous voulons répondre à un sondage, puis il nous accueillera. Nous cliquons sur continuer.
Si nous le souhaitons, pour nous faciliter la tâche, nous pouvons sélectionner la langue avant de commencer à établir notre première connexion.
Troisième étape
Maintenant, nous allons commencer un nouveau projet.
On donne un nom à ce nouveau projet, dans mon cas je vais lui donner Test_1 et on accepte.
Cela nous amènera automatiquement au projet que nous venons de créer et nous montrera les outils et ce que nous allons utiliser.
Quatrième étape
Maintenant que nous allons exécuter l'émulateur, je ne ferai qu'une application simple qui affiche une étiquette avec le "Hello world" typique pour cela, nous faisons glisser une étiquette de la palette et changeons le texte qu'elle contient en Hello world.
Nous allons utiliser l'émulateur, pour cela nous allons Se connecter> Émulateur.
Il se connectera et nous dira d'attendre quelques secondes, nous suivons les instructions qu'il nous donnera ci-dessous.
Comme c'est la première fois que nous utilisons l'émulateur, il nous demandera de le mettre à jour et il nous indiquera dans l'émulateur si nous voulons installer la mise à jour.
Une fois installé, nous cliquons sur "Terminé" et redémarrons la connexion comme le disent les instructions.
Une fois la connexion redémarrée, nous démarrons l'émulateur et il devrait nous montrer le projet sur lequel nous travaillons comme vous pouvez le voir dans l'image suivante.
Une fois que nous aurons effectué toutes ces étapes, l'émulateur sera mis à jour et tous nos projets sur lesquels nous travaillons seront visibles sur l'écran de l'émulateur.
NoterJe recommande qu'avant de commencer tout projet, nous nous assurons que nous avons démarré aiStarter afin que nous n'ayons aucun problème lors du test de nos applications et qu'il soit nécessaire qu'il soit en cours d'exécution avant d'exécuter l'émulateur sur la page.
3. Première application dans App Inventor 2
Maintenant que tout est opérationnel, nous pouvons commencer à travailler dessus. Inventeur d'applications, alors je vais vous montrer comment développer des applications simples cela nous aidera à avoir une base pour développer nos propres applications Android.
Étape 1
Nous commencerons par développer une calculatrice de base, qui nous permet d'effectuer des fonctions mathématiques typiques telles que l'addition, la soustraction, la multiplication et la division.
Pour cela, nous allons d'abord Projets> Mes projets. Là, nous cliquons sur démarrer un nouveau projet, je vais nommer ce projet Calculadora_Basica et appuyez sur le bouton OK.
Cela nous redirigera vers la zone de conception où nous travaillerons avec notre projet, la première chose que nous allons faire est d'ajouter quatre boutons en les faisant glisser depuis la palette qui se trouve à notre gauche.
Étape 2
Nous allons maintenant changer le texte de chacun des boutons en sélectionnant les composants un par un et en modifiant le texte dans ses propriétés. Comme nous pouvons le voir, il y a les propriétés par défaut du bouton que nous sélectionnons, ici nous pouvons modifier la façon dont nous voulons que le bouton soit. Pour le moment je me limiterai à changer le texte.
Après avoir modifié le texte, vous devriez immédiatement remarquer les changements dans le bouton que nous modifions dans la visionneuse.
Étape 3
Maintenant, pour des raisons esthétiques, je vais utiliser une disposition horizontale pour organiser les boutons que nous avons précédemment modifiés. Nous le trouverons dans la palette en cliquant sur la mise en page et en faisant glisser la mise en page horizontale vers le visualiseur.
Étape 4
Nous allons maintenant ajouter nos boutons un par un vers notre disposition horizontale. On devrait avoir quelque chose comme ça :
Étape 5
Ensuite, nous ajoutons 2 zones de texte où nous allons introduire les nombres nécessaires pour effectuer nos opérations de base d'addition, soustraction, multiplication et division. En plus de cela, nous ajouterons également une étiquette pour montrer le résultat de nos opérations. L'étiquette et les champs de texte peuvent être trouvés dans la palette en cliquant sur l'interface utilisateur. À la fin, nous devrions avoir quelque chose de similaire à l'image suivante :
Étape 6
Nous allons "Blocs”Pour commencer à configurer les fonctions de nos boutons. Pour y aller il suffit de cliquer sur les blocs, sur le côté droit de l'écran à côté du bouton Designer.
Il devrait nous diriger vers le visualiseur de blocs où nous pouvons voir les différents types de blocs que nous pouvons utiliser pour nos applications. Pour l'instant, nous n'aurons besoin d'utiliser que les boutons intégrés pour définir la fonction qu'ils exécutent lorsque chacun d'eux est enfoncé.
Pour définir l'action effectuée par chaque bouton, nous commencerons d'abord par le bouton1, qui dans mon cas, j'ai changé le texte en signe plus (+) et je veux définir qu'à chaque pression, il ajoute les montants qui sont en champ de texte 1 et champ de texte 2, pour cela, nous commençons par cliquer sur le bouton 1, puis nous sélectionnons "lorsque le bouton 1 clique sur exécuter" et le faisons glisser vers notre visionneuse, cela devrait ressembler à ceci :
Étape 7
Ensuite, nous ajoutons Label1, cliquez sur Label1 et faites glisser « mettre le texte Label1 sous » vers la visionneuse et liez-le à « executer ». Cela devrait être ainsi.
Étape 8
Ajoutons maintenant la fonction d'addition, pour cela, nous cliquons sur Math et faisons glisser la somme de deux nombres et la lions au bloc d'étiquettes.
Alors Nous allons ajouter les champs de texte en sélectionnant TextField1, nous recherchons "TextField1 Text" et le faisons glisser pour le lier au bloc de somme. Le premier espace pour le champ de texte1 et pour le deuxième espace le champ de texte2. Faire le même processus devrait ressembler à l'image suivante :
Étape 9
Maintenant, nous répétons les processus que nous avons effectués avec chaque bouton en changeant uniquement les opérations mathématiques pour chacun, à la fin nous devrions avoir quelque chose comme ceci :
Et enfin il est temps de tester notre application, dans mon cas je vais la tester dans l'émulateur pour PC. Nous vérifions comment était notre application, nous pouvons tester si chacun des boutons fonctionne et s'ils remplissent les fonctions assignées. Dans l'image suivante, vous pouvez voir une division.
Avec cela, nous concluons notre première application mobile simple avec des opérations mathématiques.
4. Deuxième application dans App Inventor 2
Nous allons maintenant créer une application qui nous permet de sauvegarder et de visualiser les données d'une base de données tyniDB. TyniDB est une base de données documentaire légère, écrite en pur Python et sans dépendances externes.
Étape 1
La première chose que nous allons faire est de créer un nouveau projet, nous l'appellerons List_BD :
Étape 2
Nous y ajouterons deux dispositions horizontales ; Dans le premier d'entre eux, nous ajoutons une étiquette et un champ de texte, dans le second, nous ajoutons deux boutons, nous devrions avoir quelque chose comme ceci :
Étape 3
Nous allons sélectionner chacune des dispositions, dans les propriétés nous modifions la largeur pour s'adapter au conteneur. En plus de cela, nous sélectionnons une étiquette et modifions le texte pour entrer des données et dans les boutons, nous en appellerons une "New Record" et le deuxième "save" devraient ressembler à ceci :
Étape 4
Maintenant, nous allons ajouter une visionneuse de liste en bas, à laquelle, dans les propriétés, nous sélectionnerons l'option de largeur qui correspond au conteneur et en hauteur, nous allons mettre 300px, nous aurons quelque chose comme ceci :
Étape 5
Ajoutons notre base de données TinyDB trouvée à palette> stockage et nous faisons glisser TinyBD vers notre visionneuse de liste, comme ceci :
Étape 6
Nous allons maintenant passer aux blocs et la première chose que nous allons faire est d'ajouter une variable globale de type texte. Pour cela, nous allons d'abord blocs> prédéfinis> variables et à partir de là, nous faisons glisser "initialiser global en tant que", puis nous allons au texte dans blocs> intégré> texte, nous faisons glisser la chaîne de texte et la lions avec "initialize global".
Étape 7
Nous allons configurer quelle action le bouton que nous appelons un nouvel enregistrement va effectuer, qui remplira la fonction de mettre notre zone de texte en blanc, pour cela nous allons blocs> Mise en page horizontale2> Bouton1 et nous faisons glisser lorsque Button1 clique sur notre visualiseur de blocs, puis nous allons à blocs> HorizontalArrangement1> TextField1, nous faisons glisser put TextField1.Text as, en le liant avec whenButton1.Clic et enfin nous recherchons une chaîne de texte et la lions avec "TextField1.Text as", ce qui donne l'image suivante :
Étape 8
Maintenant, nous allons configurer notre bouton Enregistrer pour ajouter des données à notre liste, pour cela nous recherchons notre bouton 2 et le faisons glisser vers notre visionneuse. Ensuite, nous allons à Blocs> Liste> ajouter élément à lister et là où il est écrit liste, nous établissons un lien vers une prise qui est dans Blocs> Variables> Prendre et nous le lions en cliquant pour sélectionner les données de la liste globale. Enfin, là où l'élément apparaît dans notre bloc pour ajouter un élément à la liste, nous plaçons un bloc à partir de notre TextBox1.Text, il devrait ressembler à ceci :
Étape 9
Maintenant, nous allons ajouter les valeurs à notre base de données, pour cela la première chose que nous devons faire est de rechercher dans Blocs> Screen1> TinyBD, nous faisons glisser l'appel TinyBD1.SaveValue et nous le lions avec notre bloc Button2, suivi de cela, dans l'étiquette, nous plaçons ce que nous allons enregistrer, dans ce cas nous enregistrerons uniquement les noms, pour cela nous cherchons un bloc de texte, nous le lions dans l'étiquette et nous mettons Nom, puis à partir de là, nous plaçons la valeur à sauvegarder pour qu'elle la prenne dans la liste globale comme nous l'avons fait dans le bloc d'ajout d'éléments.
Étape 10
Nous avons juste besoin de l'afficher dans le visualiseur de liste, pour cela nous le lions avec Button2, nous allons Blocs> Écran1> ListViewer1 et nous faisons glisser put ListViewer1.Elements pendant que nous lions la liste globale, montrant quelque chose comme ceci :
Étape 11
Comme nous nous en souvenons, la meilleure chose à propos d'une base de données est que vous pouvez fermer votre application et les données que vous y avez enregistrées seront stockées, disponibles lorsque vous démarrez une nouvelle session. Pour ce faire, nous allons nous assurer qu'au démarrage de Screen1, la base de données est à nouveau ajoutée à une liste et qu'elle réapparaît dans le visualiseur de liste.
Pour ce faire, il suffit d'aller à Blocs> Écran1 et faites glisser le bloc "lorsque Screen1.initialize à exécuter" dans notre visualiseur de blocs et à cela nous allons lier la variable "put" trouvée dans Blocs> Intégré> Variables, nous faisons glisser « put » et dans ce bloc, nous sélectionnons la liste globale à laquelle nous allons lier à partir de TinyBD1 « appelez TinyBD1. GetValue ”, dans label nous ajouterons le bloc de texte auquel nous mettrons Name et dans Value si label n'existe pas nous créons une liste vide qui est trouvée etm Blocs> Liste> Créer une nouvelle liste vide. Avec cela, ce que nous obtenons, c'est que toutes les données sont enregistrées dans une nouvelle liste.
Pour nous montrer les données dans la visionneuse de liste, ce que nous devons faire lier "lorsque Screen1.initialize" avec "Set ListView1.Elements as" qui à son tour est lié à "Take global List" comme nous l'avons fait dans le bloc précédent.
Avec cela, nous terminons la partie bloc. Il ne nous reste plus qu'à essayer d'utiliser notre émulateur. Voici une capture d'écran des données déjà enregistrées.
NoterSi vous obtenez une erreur, je vous recommande uniquement de vérifier les blocs, s'il n'y a pas d'erreur dans les blocs, redémarrez le formulateur.
Développement d'applications Android Netbeans
