Hello Hive!
Today I'd like to start a new series of articles documenting my apprenticeship in mobile app development with Flutter.
This year I've set myself an ambitious goal: to publish a mobile app on the PlayStore by the end of 2024. This is not only a professional goal for me, but also a long-held dream.
I've made a lot of attempts in the past, pauses and discontinuous learning.
2024 is the year I change all that. My commitment is reinforced by my decision to document my journey here on Hive. This way, I can benefit from a kind of social pressure.
My first "test" application
To begin with, I'm going to dive into the development of an application that is a replica of the existing "HabitKit" application.
This first development will serve as a training ground for acquiring a complete understanding of the application development cycle from A to Z.
As I'm about to copy "HabitKit", I'm making it clear that I won't be publishing this application.
Current progress on the project
Now that the presentation of the project and the goal is done, let's dive into what I've already accomplished in this "HabitKit" replica project:### 1. creation of Project Flutter
I started by setting up the development environment and creating the Flutter project.It had been a few months since I last opened a flutter project. For those interested, I use :
- Windows laptop ;
- VSCode as a code editor;
- A Google Pixel 3A emulator to launch my flutter application.
3. Folder organization
I'm not a pro at organizing folders when I'm developing. In general, I tend to put them everywhere.
While researching on the Internet, I came across many different techniques for structuring a flutter project.
For this first project, I'm going for the simplest:
- /screens/ for the application's various screens;
- /services/ for the business logic;
- /view_models/ for state management;
- /widgets/ for reusable components.
That said, for future applications, I'll probably do something more professional. I think it's interesting to try out different ways of doing things.
3. Creating the home page
Next, I created the file for the application's home page.This is where users arrive when they launch the application.
For the moment, there's not much to it:
- A top bar (AppBar) with, on the left, a "⚙️" symbol to access settings (I haven't developed this feature yet), in the center, the name of the "HabitKit" application, and on the right a "➕" symbol to add a new habit.
- In the center of the page, a simple text informs the user that no habit has been added yet. Below this, a large "➕" button allows a new habit to be added.
Later, once I've found a way to store and display habit data, this page should look like the one on the right in the screenshot below :
source : https://www.habitkit.app
Setting up the habit addition form
Finally, I worked on the functionality allowing users to add a new habit.
So, when the "➕" button is clicked, a popup opens from bottom to top. This offers the user the opportunity to enter:- The habit name;
- A description of the habit;
- A list to select the frequency of goal repetition per week;
- A list to select the frequency of reminders to the user;
- A grid to select an icon representative of the habit;
- A grid to select a color for the habit.
Next steps 🧑💻
As I continue to move forward with the development of this Flutter application, here are two major goals I plan to tackle soon:
1. Storing data locally on the phone
The next big challenge is to store habit data directly on the phone. I prefer local storage to external database storage for several reasons:
- Internet independence: This allows the application to function without requiring an Internet connection.
- Simplicity: For a first project, avoiding the complexities of an external database makes the learning process more manageable.
- Data security: Local storage keeps user data secure on their own device.
2. Displaying habits on the home page
Once habit data can be stored, the next step is to display them:
- Habit cards: Each habit added by the user will be represented by a card on the home page.
- Simple display: To begin with, the display will focus on presenting the basic information of each habit, such as name, description and frequency.
I don't know if this series of articles might be of interest to you. My hope is that, by sharing my journey, I can not only motivate myself through the support and benevolent "social pressure" of the Hive community, but also offer something useful or inspiring to each and every one of you.
If you have any suggestions, tips, or even specific requests about what you'd like to see in my future articles, I invite you to share them.
In particular, your feedback could help shape the content of this series to make it more relevant and interesting for everyone.
Bonjour Hive !
Aujourd'hui je souhaite commencer une nouvelle série d'articles qui documentera mon apprentissage dans le développement d'applications mobiles avec Flutter.
Cette année, je me suis fixé un objectif ambitieux : publier une application mobile sur le PlayStore d'ici la fin de 2024. Ce n'est pas seulement un objectif professionnel pour moi, mais aussi un rêve de longue date.
J'ai fait beaucoup de tentatives par le passé, de pauses, et d'apprentissages discontinus.
2024 est l'année où je change tout cela. Mon engagement est renforcé par ma décision de documenter mon parcours ici, sur Hive. Je pourrais ainsi profiter d'une sorte de pression sociale.
Ma première application "test"
Pour commencer, je vais me plonger dans le développement d'une application qui est une réplique de l'application existante "HabitKit".
Ce premier développement va me servir de terrain d'entraînement pour acquérir une compréhension complète du cycle de développement d'une application de A à Z.
Etant donné que je m'apprête à copier "HabitKit", je précise que je ne publierais pas cette application.
Avancées actuelles dans le projet
Maintenant que la présentation du projet et de l'objectif est faite, plongeons dans ce que j'ai déjà accompli dans ce projet de réplique de "HabitKit" :
1. Création du Projet Flutter
J'ai commencé par mettre en place l'environnement de développement et créer le projet Flutter.
Cela faisait quelques mois que je n'avais pas ouvert de projet flutter. Pour les intéressés, j'utilise :
- Pc portable sous Windows ;
- VSCode comme éditeur de code ;
- Un émulateur du Google Pixel 3A pour lancer mon application flutter.
3. Organisation des Dossiers
Je ne suis pas un pro de l'organisation des dossiers quand je développe. En général, j'ai tendance à en mettre partout.
En me renseignant sur Internet, je suis tombé sur beaucoup de techniques différentes pour structurer un projet flutter.
Pour ce premier projet, je vais au plus simple :
- /screens/ pour les différents écrans de l'application ;
- /services/ pour la logique métier ;
- /view_models/ pour la gestion de l'état ;
- /widgets/ pour les composants réutilisables.
Cela dit, pour les prochaines applications, je ferais sans doute quelque chose de plus pro. Je pense qu'il est intéressant de tester plusieurs façons de procéder.
3. Création de la page d'accueil
J'ai ensuite créé le fichier pour la page d'accueil de l'application. C'est ici que les utilisateurs arrivent lorsqu'ils lancent l'application.
Pour le moment, il n'y a pas grand-chose :
- Une barre supérieure (AppBar) avec, à gauche, un symbole "⚙️" pour accéder aux paramètres (je n'ai pas encore développé cette fonctionnalité), au centre, le nom de l'application "HabitKit", et à droite un symbole "➕" pour ajouter une nouvelle habitude.
- Au centre de la page, un texte simple informe l'utilisateur qu'aucune habitude n'a été ajoutée pour le moment. En dessous, un grand bouton "➕" permet d'ajouter une nouvelle habitude.
Plus tard, une fois que j'aurai trouvé un moyen de stocker et d'afficher les données des habitudes, cette page devrait ressembler à celle de droite dans la capture d'écran ci-dessous :
source : https://www.habitkit.app
Mise en place du formulaire d'ajout d'habitude
Enfin, j'ai travaillé sur la fonctionnalité permettant aux utilisateurs d'ajouter une nouvelle habitude.
Ainsi, lorsque l'on clique sur le bouton "➕", un popup s'ouvre du bas vers le haut. Ce dernier offre à l'utilisateur la possibilité de saisir :
- Le nom de l'habitude ;
- La description de l'habitude ;
- Une liste pour sélectionner la fréquence de répétition de l'objectif par semaine ;
- Une liste pour choisir la fréquence des rappels à l'utilisateur ;
- Une grille pour sélectionner une icône représentative de l'habitude ;
- Une grille pour choisir une couleur pour l'habitude.
Prochaines étapes 🧑💻
Alors que je continue à avancer dans le développement de cette application Flutter, voici deux objectifs majeurs que je prévois d'aborder prochainement :
1. Stockage des données localement sur le téléphone
Le prochain grand défi consiste à stocker les données des habitudes directement sur le téléphone. Je préfère le stockage en local au stockage dans une base de données externe pour plusieurs raisons :
- Indépendance d'Internet : Ca permet à l'application de fonctionner sans nécessiter une connexion Internet.
- Simplicité : Pour un premier projet, éviter les complexités d'une base de données externe rend le processus d'apprentissage plus gérable.
- Sécurité des données : Le stockage local garde les données de l'utilisateur sécurisées sur leur propre appareil.
2. Affichage des habitudes sur la page d'accueil
Une fois que les données des habitudes pourront être stockées, l'étape suivante sera de les afficher :
- Cartes d'habitude : Chaque habitude ajoutée par l'utilisateur sera représentée par une carte sur la page d'accueil.
- Affichage simple : Pour commencer, l'affichage se concentrera sur la présentation des informations de base de chaque habitude, comme le nom, la description et la fréquence.
Je ne sais pas si cette série d'articles peut être intéressante pour vous. Mon espoir est que, en partageant mon parcours, je puisse non seulement me motiver grâce au soutien et à la "pression sociale" bienveillante de la communauté Hive, mais aussi offrir quelque chose d'utile ou d'inspirant à chacun d'entre vous.
Si vous avez des suggestions, des conseils, ou même des demandes spécifiques sur ce que vous aimeriez voir dans mes prochains articles, je vous invite à les partager.
Vos retours pourraient notamment orienter le contenu de cette série pour la rendre plus pertinente et intéressante pour tous.
The article's presentation photo is generated by AI and edited with Canva.
The other photos are my screenshots.
English is translated from French by DeepL