Votre application Symfony sur le Google Play Store avec Turbo Native

Bonjour 🙂,
Dernièrement on a parlé de Turbo et iOS ainsi que de rendre les PWA installable.
Cet article, c'est la suite de ces deux articles (enfin plus celui sur iOS), du coup je vous invite à le survoler, car même si les deux systèmes sont assez différents, le principe est le même.

L'application en production

Comme toujours, l'application dont nous allons parler et celle qui me sert à chaque fois que je veux tester des nouvelles technologies, a l'heure où j'écris ces lignes, elle est bien disponible sur le Google Play Store.

Comment commencer avec Turbo Native Android ?

Coté JavasScript

Comme pour iOS, il faudra rendre turbo accessible directement depuis "window, comme ceci :

Coté Android

Si vous n'avez jamais travaillé avec Android, ou si comme moi, vous l'avez fait, mais ça remonte à des années, je pense que le mieux est de récupérer le projet de Turbo Native Android sur Github.

Dans le projet de démo, vous allez déjà pouvoir comprendre certaines choses, et surtout, vous pourrez le compiler.

Quelques notions sur le fonctionnement de base

Le fichier de routes

Oui, il y en a un ici aussi, mais je trouve que sur Android il a plus d'importance encore que sur l'autre plateforme, déjà voici un exemple :

Déjà dans ce fichier le "screenshots_enabled" permet tout simplement de gérrer les transitions, si vous voulez que lors d'un retour en arrière, un screenshot de la "vue" (la page, en gros) soit afficher, ou si on met simplement un "spinner" de chargement.

Ensuite, il y a le routage, on choisit quel configuration va se charger via une regex.
Dans la configuration on choisit :

• Le context : "default" ou "modal", a noté qu'ici contrairement à iOS, quand on clique sur un lien dans un modal, même un lien dans une turbo frame, alors, turbo native va ouvrir un autre modal par-dessus le modal.
• l'URI : Ici, on choisit le fragment à utiliser pour cette vue, pour simplifier, un fragment est la classe qui sera attachée à la vue, les fragments sont des elements natif d'Android.
• La présentation : Vous pouvez voir ici à quoi cela correspond, vous pouvez ici décider de reset le "stack" de navigation par exemple.

Le plus important dans ce fichier, est le choix de l'URI qui va être utilisé, vous verrez plus tard pourquoi.

Le fichier MainSessionNavHostFragment.kt

C'est d'ici que tout part, par exemple, vous pouvez voir l'import des différents fragments que votre application va utiliser. C'est également ici que l'on va créer la session et la webview.
Depuis cet endroit, on va pouvoir par exemple créer des fonctions utilisables par Javascript.

Cas concrets

On va faire comme dans l'article précédent, au lieu de reire des choses déjà vu et revu, on va mettre quelques cas concrets.

Utiliser du code natif depuis javascript

C'est assez différent d'iOS en fait, dans notre fichierMainSessionNavHostFragment.kt, il va falloir faire quelques modifications :

Dans la méthode "onSessionCreated", on ajoute une ligne "session.webView.addJavascriptInterface", celà nous permet de définir une classe qui va devenir accessible depuis javascript, dans notre cas la classe AndroidNativeInterface, d'ailleurs, on voit qu'on injecte une activité avec "requireActivity".

Partager une URL

Et oui, comme sur l'application sur l'autre plateforme on va avoir besoin de partager des URL, pour partager l'invitation aux autres invités.

Dans le controller Stimulus :

On utilise tout simplement la méthode "share" de la class que nous avons créer dans le chapitre précédent.

En ce qui concerne la partie Android :

On pense bien à ajouter "@JavascriptInterface" avant notre méthode.

Envoie d'un e-mail

L'envoie d'un email reste aussi assez simple, dans le controlleur Stimulus :

Si nous sommes sur Android on appelle tout simplement la méthode "composeEmail" de notre classe exposée à Android.

La méthode "composeEmail" :

Et voilà, le code natif est assez simple.

Je ne vais pas mettre plus de détail du même genre, vous avez compris le principe je pense, et surtout, pensez à regarder l'article sur iOS, car même si le langage est différent, c'est la même logique.

Controller le bouton retour d'Android

Lors du développement, j'ai eu un problème, en effet, une fois la prise d'emprunter bancaire par stripe effectué, lorsque j'arrive sur la vue de confirmation de réservation, pour une raison encore inconnue, je n'ai pas pu mettre la vue en "replace_root" pour empêcher l'utilisateur d'appuyer sur retour et donc d'avoir un comportement bizarre.

Vous vous souvenez des fragments que vous pouvez associer à une url dans la configuration des routes ? Et bien j'ai créer un fragment specifique pour la route "complete-" :

Tout simplement une methode qui change le comportement du bouton retour et renvoie l'utilisateur a l'écran d'acceuil de l'appareil quand il clique dessus, cette méthode on l'appelle dans "onViewCreated" et "onResume", on resume, c'est quand l'utilisateur revient de l'écran d'acceuil vers l'application.

Conclusion

Cet article est plus conçis que celui sur iOS, tout simplement, car la logique est la même, la plateforme et le langage de programmation changent, mais la logique elle, elle reste la même.
Passez une très bonne semaine 😁.