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 *