Création de l’application Android Abduzeedo avec Jetpack Compose : My Weekend Ride with AI

Le week-end dernier, je me suis retrouvé face à un défi unique. C’était un de ces vendredis soirs tranquilles ; mon fils et ma femme dormaient profondément, et j’étais là, avec mon fidèle ordinateur portable et une mission en tête : sculpter l’application Abduzeedo pour Android à l’aide de Jetpack Compose. Maintenant, alors que je me suis déjà aventuré dans des applications Android simples (bonjour, Calmaria.app), cela jouait dans la cour des grands. Nous parlons du chargement de contenu à partir d’une myriade de JSON, du tissage de dispositions d’écran complexes, de la navigation dans les vues Web et de la conservation des images.

Chaque grande quête commence par une seule étape. Pour moi? Il s’agissait d’esquisser le plan de l’application. Avoir créé une application iOS il y a quelques années m’a donné un point de départ solide. Mais ensuite est venue la courbe d’apprentissage de la maîtrise de Jetpack Compose. Je connaissais les bases, comme la création de vues avec Text(), Box() et Columns. Mais, honnêtement, c’est en fusionnant tous ces éléments de manière transparente que j’ai rencontré un problème. Auparavant, Google et des sites comme StackOverflow étaient mes préférés. Mais cette fois? J’avais l’IA comme ingénieur principal.

Voici le problème avec l’IA : vous pouvez accéder à des détails spécifiques. J’ai commencé par présenter toutes mes requêtes dans un document Google et je les ai lancées à la fois sur ChatGPT et Bard. Les deux avaient leurs mérites, mais la conception de ChatGPT avait un avantage. La démarcation claire entre texte et code était tout simplement plus intuitive. Bard, bien qu’utile, se sentait un peu encombré pour les yeux d’un codeur.

Avec une poignée d’extraits de code générés par l’IA, je me suis lancé dans Android Studio. C’était une danse de codage, de pause, de révision et de temps en temps de recours à l’IA pour un rapide « Hé, pourquoi est-ce que ça fait ça ? ». Au cœur du projet, cependant, il ne s’agissait pas seulement de créer l’application, mais de vraiment se mettre dans le rythme avec Jetpack Compose.

Voici ma configuration Android Studio

Vendredi, après trois heures, j’ai réussi à charger les JSON dans une liste (mais sans style), à ​​restituer les images et même à configurer un élément cliquable qui a conduit à un autre écran présentant le billet de blog. Les progrès étaient palpables et c’était vraiment le point culminant. La possibilité d’extraire du contenu du site et de l’afficher dans l’application a constitué une avancée significative. Épuisé mais content, c’était l’heure du coucher pour moi.

Samedi matin, je me suis entraîné pour une course sur tapis roulant tout en préparant quelques leçons Jetpack Compose sur mon iPad. Mon choix était le « Cours accéléré pour débutants Jetpack Compose pour 2023 💻 (Tutoriel Android Studio) » de Philipp Lackner. Ce didacticiel m’a donné un aperçu plus clair des mécanismes de Jetpack et a clarifié plusieurs terminologies de cadre que j’avais essayé de faire expliquer à l’IA.

Suite à mon samedi, je me suis plongé dans l’ajout des styles de l’application. Je me suis plongé dans la thématique de l’interface utilisateur dans Jetpack, en exploitant MaterialTheme et en élargissant mon répertoire de typographies et de styles de couleurs. De plus, je me suis familiarisé avec l’affichage de contenu HTML dans une vue Web et l’intégration de styles CSS, créant essentiellement une page HTML hors ligne à afficher. Le soir, l’application est passée en douceur du flux aux détails, semblant plutôt élégante. Cependant, les catégories et les sections de menu étaient toujours en préparation, et je savais que cela impliquerait une refactorisation lourde, étant donné que mon code était lié à un seul JSON.

Alors que j’envisageais de créer des écrans de catégories, ce qui impliquait de récupérer des URL JSON distinctes adaptées avec des paramètres spécifiques pour chaque catégorie, cela semblait intimidant. Pourtant, à mon grand étonnement, le processus a été simple, me guidant sur les codes à ajuster, les éléments à introduire et les méthodes pour invoquer les nouvelles fonctions. Ce fut un véritable moment « époustouflant ». Et juste comme ça, j’ai décidé de m’éteindre, de sortir et d’embrasser l’ambiance du samedi.

Après un dimanche matin rafraîchissant passé à surfer à la plage, je suis revenu en mode application dans l’après-midi. Les catégories étant désormais actives et les fonctions fondamentales en place, j’ai porté mon attention sur le raffinement de l’esthétique de l’application : en peaufinant la typographie, en enrichissant les couleurs et en rationalisant les mises en page. Au cours de cette frénésie créative, j’ai essayé des conceptions d’interaction variées et j’ai approfondi ma compréhension de NavHost. J’ai toujours visé les meilleures pratiques, en m’orientant vers l’utilisation de composants et de widgets facilement disponibles, ou comme je le dis souvent, « en utilisant uniquement des éléments disponibles dans le commerce ».

Au moment où le soleil a commencé à descendre, j’étais très satisfait de la progression de l’application. Visuellement, c’était un régal, mais j’ai remarqué quelques aspérités, notamment au niveau de la navigation. Les conceptions de mouvement et les transitions actuelles, avec leurs effets de fondu d’entrée et de sortie par défaut, pourraient nécessiter un peu d’amélioration. De plus, l’optimisation de l’application pour les appareils plus grands, comme les pliables et les tablettes, est sur mon radar, mais c’est une tâche pour un autre week-end. Pour l’instant, voici un aperçu du parcours de l’application jusqu’à présent :

Prochaines étapes

• Rendez-le réactif
• Finaliser le système de navigation
• Améliorer la conception globale du mouvement
• Créer le lanceur d’icônes
• Soumettez-le au Play Store
• Lancement!