Faire une application iOS 📱 ou Android 📱 compl√®te sans savoir coder (et SANS MAC 💻) (Thunkable)


Reviewed by:
Rating:
5
On 15 septembre 2019
Last modified:5 juillet 2019

Summary:

Télécharge l'application officielle gratuitement

Mettre un nom

Cliquer sur ¬ę¬†OK¬†¬Ľ

Cliquer sur la vignette

Cliquer sur ¬ę¬†English¬†¬Ľ

Possibilité de changer la langue

Tous les √©l√©ments qu’on peut mettre dans l’application (User Interface)

Tous les √©l√©ments qu’on peut mettre dans l’application (User Interface)

Tous les √©l√©ments qu’on peut mettre dans l’application (Layout)

Tous les √©l√©ments qu’on peut mettre dans l’application (Media)

Tous les √©l√©ments qu’on peut mettre dans l’application (Drawing & Animation)

Tous les √©l√©ments qu’on peut mettre dans l’application (Sensors)

Tous les √©l√©ments qu’on peut mettre dans l’application (Social)

Tous les √©l√©ments qu’on peut mettre dans l’application (Storage)

Tous les √©l√©ments qu’on peut mettre dans l’application (Visualisation)

Tous les √©l√©ments qu’on peut mettre dans l’application (Connectivity)

Tous les √©l√©ments qu’on peut mettre dans l’application (Artificial Intelligence)

Tous les √©l√©ments qu’on peut mettre dans l’application (LEGO MINDSTORMS)

Tous les √©l√©ments qu’on peut mettre dans l’application (Experimental)

Possibilité de rajouter des fonctions externes

Je vais vous faire un exemple d’application simple pour vous montrer comment cela fonctionne

Faire glisser le label sur l’√©cran du milieu

Voici ce que ça donne

Descendre

Changer le texte

Remonter

Voici ce que ça donne

Cliquer sur ¬ę¬†Front size¬†¬Ľ et mettre 25

On voit que la taille a augmenté

Faire glisser un checkbox sur l’√©cran

Descendre

Changer le texte

Remonter

Voici ce que ça donne

Cliquer sur ¬ę¬†Background Color¬†¬Ľ

Choisir une couleur (ici rouge)

Voici ce que ça donne

Faire glisser un ¬ę¬†Date Picker¬†¬Ľ

Descendre

Changer le texte

Remonter

Voici ce que ça donne

Cliquer sur Width

Cliquer sur ¬ę¬†Fill Parent¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Voici ce que ça donne

Cliquer sur ¬ę¬†Height¬†¬Ľ

Cliquer sur ¬ę¬†Pixel¬†¬Ľ

Mettre 20

Cliquer sur ¬ę¬†OK¬†¬Ľ

Voici ce que ça donne

Glisser un ¬ę¬†Button¬†¬Ľ

Descendre

Changer le texte

Remonter

Voici ce que ça donne

Descendre

Cliquer sur ¬ę¬†Layout¬†¬Ľ

Glisser un ¬ę¬†Horizontal Arrangement¬†¬Ľ

Cliquer sur ¬ę¬†Width¬†¬Ľ

Cliquer sur ¬ę¬†Fill parent¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Cliquer sur ¬ę¬†User interface¬†¬Ľ

Faire glisser une ¬ę¬†Image¬†¬Ľ dans le rectangle gris

Faire glisser un ¬ę¬†Button¬†¬Ľ √† droite de l’image

Cliquer sur le cadre gris

Cliquer sur ¬ę¬†Align Vertical¬†¬Ľ

S√©lectionner ¬ę¬†Center¬†¬Ľ

Voilà ce que ça donne

Cliquer sur le logo image

Cliquer sur ¬ę¬†Picture¬†¬Ľ

Cliquer sur ¬ę¬†Upload File¬†¬Ľ

Cliquer sur ¬ę¬†Choisissez un fichier¬†¬Ľ

Sélectionner une image

Cliquer sur ¬ę¬†Ouvrir¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Cliquer sur ¬ę¬†Height¬†¬Ľ

Cliquer sur ¬ę¬†pixels¬†¬Ľ

Mettre 200

Cliquer sur ¬ę¬†OK¬†¬Ľ

Cliquer sur ¬ę¬†Width¬†¬Ľ

Cliquer sur le bouton

Cliquer sur ¬ę¬†Width¬†¬Ľ

Cliquer sur ¬ę¬†Fill parent¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Descendre

Changer le texte

Remonter

Cliquer sur ¬ę¬†Add Screen¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Descendre

Faire glisser l’√©l√©ment ¬ę¬†Google Maps¬†¬Ľ

Cliquer sur ¬ę¬†User interface¬†¬Ľ

Faire glisser le ¬ę¬†Web Viewer¬†¬Ľ en dessous de la map

Dans ¬ę¬†Home URL¬†¬Ľ, mettre l’URL d’un site, ici ¬ę¬†https://saligaud.com¬†¬Ľ

Voilà

Apr√®s l’aspect visuel, place √† la ¬ę¬†programmation¬†¬Ľ simplifi√©e

Cliquer sur ¬ę¬†Screen2¬†¬Ľ

Cliquer sur ¬ę¬†Screen1¬†¬Ľ

Cliquer sur ¬ę¬†Blocks¬†¬Ľ

Cliquer sur ¬ę¬†Screen1¬†¬Ľ

Glisser le ¬ę¬†When¬†¬Ľ

Pour comprendre, il suffit de lire ce qu’il y a de marqu√© sur les blocks. C’est assez clair je trouve^^

Aller dans ¬ę¬†Horizontal Arrangement¬†¬Ľ

Faire glisser ¬ę¬†Visible¬†¬Ľ

Faire glisser la partie verte dans la jaune

Cliquer sur ¬ę¬†Logic¬†¬Ľ

Prendre le ¬ę¬†false¬†¬Ľ

Cliquer sur ¬ę¬†Button1¬†¬Ľ

Glisser ¬ę¬†Click¬†¬Ľ

Cliquer sur ¬ę¬†Control¬†¬Ľ

Glisser le ¬ę¬†if¬†¬Ľ

Cliquer sur ¬ę¬†Logic¬†¬Ľ

GIisser le ¬ę¬†and¬†¬Ľ

Voilà

Faire glisser le ¬ę¬†=¬†¬Ľ

Copier et coller le ¬ę¬†=¬†¬Ľ

Cliquer sur ¬ę¬†CheckBox1¬†¬Ľ

Glisser ¬ę¬†Checked¬†¬Ľ

Cliquer sur ¬ę¬†Logic¬†¬Ľ

Glisser le ¬ę¬†true¬†¬Ľ

Cliquer sur ¬ę¬†Date_Picker1¬†¬Ľ

Descendre

Glisser ¬ę¬†Year¬†¬Ľ

Cliquer sur ¬ę¬†Math¬†¬Ľ

Glisser le ¬ę¬†0¬†¬Ľ

Le glisser dans le ¬ę¬†=¬†¬Ľ

Copier et coller le ¬ę¬†visible¬†¬Ľ

Cliquer sur la roue dans dents du ¬ę¬†if¬†¬Ľ

Glisser le ¬ę¬†else¬†¬Ľ dans le ¬ę¬†if¬†¬Ľ

Cliquer dans le vide pour valider

Cliquer sur ¬ę¬†Label1¬†¬Ľ et glisser le ¬ę¬†text¬†¬Ľ dans le ¬ę¬†else¬†¬Ľ

Cliquer sur ¬ę¬†Text¬†¬Ľ

Le glisser dans le ¬ę¬†text¬†¬Ľ du ¬ę¬†label1¬†¬Ľ

Cliquer sur ¬ę¬†Button2¬†¬Ľ

Cliquer sur ¬ę¬†Control¬†¬Ľ

Glisser ¬ę¬†open another screen screenName¬†¬Ľ

Cliquer sur ¬ę¬†Text¬†¬Ľ

Glisser un ¬ę¬†text¬†¬Ľ et noter ¬ę¬†Screen2¬†¬Ľ

Maintenant pour tester et installer l’application sur un smartphone

Cliquer sur ¬ę¬†Apps¬†¬Ľ

Cliquer sur ¬ę¬†Save app¬†¬Ľ

Cliquer sur ¬ę¬†Export¬†¬Ľ

Cliquer sur ¬ę¬†App (provide QR code for .apk)¬†¬Ľ

Attendre la fin du chargement

Voici le QR code qu’il va falloir scanner

Mais avant, faire descendre la barre de notifications

Cliquer sur le logo des réglages

Descendre

Cliquer sur ¬ę¬†S√©curit√©¬†¬Ľ

Cocher ¬ę¬†Sources inconnues¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Retourner au menu principal

Ouvrir une application de scan de QR code, ici ¬ę¬†QR Droid¬†¬Ľ

Le fichier a été téléchargé, cliquer dessus

Cliquer sur ¬ę¬†Installer¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Voici le résultat

On peut voir que j’ai fait le bouton trop petit donc on ne peut pas lire le texte

Cocher la case

Cliquer sur l’ann√©e

Scoller vers le haut

S√©lectionner ¬ę¬†1950¬†¬Ľ

Cliquer sur ¬ę¬†OK¬†¬Ľ

Cliquer sur ¬ę¬†Valider¬†¬Ľ

Cliquer sur ¬ę¬†Aller √† la page suivante¬†¬Ľ

Voici la 2ème page

Allez faire un tour sur le site ūüôā (www.saligaud.com)

Compl√©ment : Possibilit√© de changer l’icone, d’enlever ¬ę¬†Screen1¬†¬Ľ et ¬ę¬†Screen2¬†¬Ľ en haut et de faire encore plein de trucs. Thunkable fonctionne exactement comme Apinventor (mais en plus moderne). J’ai fait une d√©mo d’Appinventor plus compl√®te (lien dans la description de la vid√©o) que je vous invite √† regarder.

Maintenant pour iOS

Descendre

Cliquer sur ¬ę¬†Get Your App Started¬†¬Ľ

Cliquer sur ¬ę¬†iOS¬†¬Ľ

Cliquer sur ¬ę¬†Sign in with Google¬†¬Ľ

Cliquer sur votre compte

Cliquer sur le ¬ę¬†+¬†¬Ľ

Mettre un nom

Cliquer sur ¬ę¬†Create¬†¬Ľ

Cliquer sur le logo de l’application

On retrouve des fonctions similaires à celles sur Android

Faire glisser sur l’√©cran du mobile

Voici le résultat

Faire glisser sur l’√©cran du mobile

Cliquer sur ¬ę¬†Screen1¬†¬Ľ

Cliquer sur ¬ę¬†Blocks¬†¬Ľ

Cliquer sur ¬ę¬†Button1¬†¬Ľ

Même principe que pour Android

Cliquer sur Map1

Même principe que pour Android

Cliquer sur ¬ę¬†Live Test¬†¬Ľ

Pour tester l’application sur un iPhone

Voici le QR code

Fermer la fenêtre

Cliquer sur Download

Possibilit√© d’envoyer l’application par mail

Fermer la page

Personnellement je n’ai pas d’iPhone donc je n’ai pas pu faire le test. Mais vous trouverez, dans la description de la vid√©o, un tuto qui explique comment proc√©der exactement pour iOS.

Télécharge l'application officielle gratuitement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *