Un peu de détente cette semaine : vous avez sans doute déjà entendu parler des Chuck Norris Facts. Par exemple, celui qui dit que Chuck a déjà compté jusqu’à l’infini…deux fois.
Une petite perle qui valait bien une appli démo pour montrer qu’on peut faire des applis élaborées, et s’amuser en même temps.
Pour cette application que nous vous proposons, ce sont pas moins de 100 facts authentiques + un fact incluant Codergo que nous mettons dans une appli.
C’est parti !
Etape 1 : Constituer la base de données
C’est l’étape de base : il faut constituer ce qui servira pour l’appli.
Pour cela, vous pouvez aller dans le menu de votre Drive et créer un nouveau fichier Sheets, ou plus simplement utiliser le raccourci sheets.new, directement dans la barre d’url de votre navigateur.
Nommez ensuite votre fichier clairement, par exemple “Chuck Norris Fact App”
On va ensuite pouvoir créer différents onglets, qui seront autant de tables pour notre application.
Onglet FACT : les facts
Pour cet exemple, nous sommes allés les chercher sur ce site anglophone: Chuck Norris Jokes
Après avoir été les reporter soigneusement dans un Google Sheets (il ne faut pas troubler Chuck Norris !), nous en avons opéré une traduction en français avec l’excellente expression GOOGLETRANSLATE().
Par exemple, pour nous ça donne:
=GOOGLETRANSLATE(B2;”en”;”fr”)Comme tout n’est pas parfait, nous avons ensuite opéré une petite vérification de la traduction…histoire de rester cohérent.
A cela, on ajoute une colonne-clé qui servira à identifier la ligne.
Voici le résultat:
Onglet LANGUAGE : les langues
Eh oui, parce que notre appli est bilingue !
Ici c’est très simple : on précise les deux langues qui nous intéressent, à savoir l’anglais et le français.
Mais au fait…pourquoi FR et GB, et pas simplement Français et English ?
Patience, ça vient !
Onglet HOME : pour l’écran principal
C’est LA table essentielle, qui porte une ligne unique. Elle sera présentée à l’utilisateur via une vue de type Detail, de laquelle on cachera certaines colonnes.
Etape 2 : La création de l’appli
On peut maintenant aller sur appsheet.com, et créer une nouvelle app en utilisant le fichier créé.
Il vous faudra ensuite naviguer pour retrouver votre fichier.
Astuce: vous pouvez utiliser l’outil de recherche, comme sur cette capture d’écran
Charge à vous ensuite d’aller ajouter les 3 onglets créés au sein de ce fichier.
Comme AppSheet est super-sympa avec vous, il vous aide en vous évitant de naviguer de nouveau !
Si vous n’avez pas ces suggestions, vous pouvez manuellement ajouter vos autres onglets en cliquant sur le bouton “New Table”.
Etape 3 : le paramétrage des données
Vous avez tout ajouté ?
Passons en revue quelques détails maintenant !
Tables > Mode de mise à jour
Dans le panneau Data > Tables, il vous faut choisir si les données sont modifiables ou non.
Voici ce qu’il faut sélectionner sur ces trois tables.
Colonnes > Propriétés
Une fois les tables ajoutées, il faut s’occuper de vérifier les propriétés de chaque colonne.
Ainsi, les colonnes de type Ref seront celles faisant référence aux autres tables, les colonnes de type LongText seront celles autorisant les retours à la ligne, etc.
De plus, les colonnes virtuelles, qui permettente des calculs au sein des tables, sont ici utiles pour notre application.
Voici les détails pour chaque table.
Table HOME
- On positionne le bon type REF pour les colonnes LANGUAGE et FACT, pour les faire pointer vers les autres tables
- On ajoute une colonne virtuelle, nommée ici _FACT_text, qui permettra d’afficher à l’utilisateur le fact dans la bonne langue. La formule utilisée ici est :
SWITCH([LANGUAGE],
"FR",[FACT].[FR],
[FACT].[GB]
)- On active la propriété Label de cette colonne virtuelle, et on vérifie les propriété SHOW par ailleurs
Table LANGUAGE
Petite astuce: on va ici utiliser une formule qui permet, à partir d’un code ISO à deux lettres d’un pays, de récupérer son drapeau.
On utilise cette formule dans une colonne virtuelle, qu’on mettra en label ensuite. Voici ce que ça donne :
La formule utilisée pour la colonne “_flag” est la suivante :
"https://countryflagsapi.com/png/"&[key]Table FACT
Pour la table FACT, on va surtout vérifier les types des colonnes.
Etape 4 : le paramétrage de la vue principale
Si vous avez bien suivi jusque là, les données sont prêtes. Il reste à les afficher à l’utilisateur !
Pour cela, on va créer une vue sur-mesure et supprimer toutes les autres, qui ne nous servent pas.
Allons dans le menu App > Views, puis cliquons sur le bouton “New View” !
Vue HOME
C’est la seule vue que nous allons utiliser. Chaque encart de vue comporte plusieurs sections, nous les parcourons ici.
Section des paramètres principaux
Voici ce que nous devons définir :
- le nom : HOME
- la source de données : HOME
- le type de vue : Detail
- sa position : middle, qui correspond au centre
Section View Options
Vous avez sans doute remarqué que chaque type de vue a ses propres options. Voyons tout cela en détail:
(vue tronquée)
Section Display
Et enfin la partie sympathique : l’icône et le nom affiché de la vue tel qu’il est affiché à l’utilisateur !
A ce stade, dans l’émulateur, votre appli prend forme !
Etape 5 : le paramétrage des actions
Ici, deux dernières choses à régler avant que l’appli ne soit totalement opérationnelle :
- ôter le bouton “Edit”, avec un crayon
- créer un bouton “random” qui sélectionnera un nouveau fact
C’est parti !
Ôter le bouton Edit
Il faut naviguer dans le menu Actions, et chercher les actions rattachées à la table HOME.
Une fois trouvé, descendez jusqu’à la section Appearance >,Prominence, puis sélectionnez “Do not display”.
Bouton New Fact
C’est le bouton magique ! Celui qui fera le charme de votre application 🙂
Dans le même panneau, on cliquera cette fois sur le bouton “New Action”.
Voici ce qu’il faut sélectionner :
Et la formule utilisée est:
RANDBETWEEN(MIN(FACT[key]),MAX(FACT[key]))Etape 6 : un peu de customisation
L’appli commence à prendre forme, mais elle n’est pas encore agréable à utiliser. Remédions à cela !
Image de la page HOME
Le plus simple est de ponctuellement ré-autoriser l’affichage du bouton “Edit”, pour charger manuellement via l’émulateur l’image de votre choix.
C’est cette image qui se mettra en fond, et qui sera toujours visible par l’utilisateur.
Apparence générale de l’appli
C’est dans l’onglet “Settings” que vous pouvez gérer cela. De nombreuses options sont disponibles !
Etape 7 : Admiration du résultat
Vous pouvez être fier de vous !
Si vous êtes arrivés jusque-là, vous avez créé un générateur de Chuck Norris Facts splendide !
Conclusion
Avec cette appli basée sur un thème léger, vous avez pu aborder de nombreuses notions : les données, les vues, les noms d’affichage, les actions, la customisation. Et vous avez ri, bien sûr !
Parfait pour apprendre, n’est-ce pas ? Qu’en avez-vous pensé ?
Vous avez un projet pour une appli ou une formation AppSheet ? C’est ici que ça se passe !