De l'Idée à l'Application :
Lancez-vous avec React Native
Bienvenue à cette session immersive où nous allons
démystifier la création d'applications mobiles ! Préparez-
vous à transformer vos idées en réalité numérique.
Formateur : AKAKPO Kodjovi Denis-Papin
Lomé - Togo - 19 Juillet 2025 - Teams
1
Le formateur
CTO @
DevOps Office
AKAKPO Kodjovi Denis-Papin
Education : Aspirant Master IA & Big Data
Dev React Native
5 ans d’expérience
https://www.linkedin.com/in/kodjoviakakpo/
[email protected]
2
Une Histoire de Téléphone : Du Nokia au Monde des Apps
2000 : Nokia 3310 – "Téléphones incassables, Snake, SMS".
2007 : iPhone – "Écran tactile, premières apps".
2008 : App Store & SDK – "Les développeurs créent
des apps pour tous"
2010 : Explosion des smartphones – "Android, App Store,
Google Play".
2025 : Le monde des apps – "5 milliards d’utilisateurs,
apps pour tout".
"En 2008, Apple a ouvert l’App Store et libéré son SDK, donnant à
SDK ?
chacun le pouvoir de créer des apps qui changent le monde.
3
Pourquoi apprendre à créer des apps ?
Marché en Expansion Innover et Créer Opportunités Pro
80% du trafic internet mondial
vient des mobiles (source : Les compétences en
Donnez vie à vos idées, résolvez
Statista, 2023). développement mobile sont
des problèmes locaux ou
internationaux avec des très recherchées. Développez
Afrique : 700 millions solutions mobiles innovantes. votre carrière ou lancez votre
d’utilisateurs mobiles (GSMA, propre entreprise.
2024).
Les apps sont au cœur du futur digital, et vous pouvez en faire partie !
4
Le Mobile Domine le Digital
80%
C'est la part du trafic internet mondial provenant
des appareils mobiles. Une statistique qui parle
d'elle-même.
Que ce soit pour le divertissement, le travail, ou la
communication, le mobile est au cœur de nos
interactions numériques. Ignorer cette tendance,
c'est passer à côté d'une opportunité majeure.
5
L’application mobile native (OS et SDK)
GPS, WIFI, API, Push Notifications, Capteurs, Réseaux, Puissance de Calcul, Gyroscope etc...
SDK
Si votre application doit être
sur iOS et Android, vous
aviez besoin de deux
équipes
Application Mobile
ANDROID Samsung, LG, Sony, Google Nexus Java
iPhone OS Apple Swift
Windows Microsoft C#
Phone
6
Les apps natives utilisent les SDK pour exploiter la caméra, le GPS, le Wi-Fi… et créer des expériences incroyables !
Qu’est-ce que le développement mobile cross-platform ? 🌐
Android : Pixel, Tecno, Xiaomi, One Plus iOS : iPhone X, 11, etc....
SDK ANDROID SDK iOS
1.Un seul code pour Android et iOS.
2.Plus rapide et moins cher à
développer.
3.Exemple : React Native, utilisé par
Gozem.
Framework Cross Platform
7
Créer une app pour Android et iOS avec un seul code, c’est possible !
Qu’est-ce qu’un framework mobile ?
Définition Analogie Culinaire Analogie Lego
Imaginez un livre de recettes C'est comme avoir des
Un framework est un cadre
qui vous donne les bases et briques Lego préfabriquées
de travail structuré, avec des
les ustensiles pour préparer pour construire rapidement,
outils et des règles
un plat, au lieu de découvrir plutôt que de devoir mouler
prédéfinies pour faciliter le
chaque ingrédient et chaque pièce
développement.
technique par vous-même. individuellement.
8
Un framework mobile simplifie la création d’apps, comme une recette en cuisine
React Native : Le Framework le Plus Populaire
Créé par Meta
Développé par Facebook depuis 2015 (maintenant Meta), React Native est issu
d'une technologie éprouvée et largement adoptée.
Multi-plateforme
Écrivez votre code une seule fois et déployez-le sur iOS et Android. Gain de
temps et d'efforts garanti !
Développement Rapide
Grâce à ses composants réutilisables et son rechargement à chaud, le cycle de
développement est accéléré.
9
Un framework mobile simplifie la création d’apps, comme une recette en cuisine !
Qui l’utilise ?
10
Créer une app pour Android et iOS avec un seul code, c’est possible !
Ce que voient les utilisateurs finaux
Utilitaire Finance Contenu
Des livres avec Amazon
Communication, Ventes de produits sur
Kindle, office 365 sur mobile,
Applications compagnons, Marketplace,
Microsoft Designer etc....
Co-voiturage Cryptomonnaies
Des applis pour la création
L’utilisateur utilise l’application pour contacter, vendre, créer du contenu etc....
La beauté de React Native, c'est que l'utilisateur final ne voit pas la technologie sous-jacente, seulement une
application rapide et performante. 11
Ce que voit le développeur : exemple avec Nima-Passager
12
Le développeur transforme des idées en apps avec du code et des outils simples
Et Expo dans tout ça ?
Bref Historique
Créé en 2017 par Evan Bacon
Points Expo React-Native
pour simplifier React Native.
Types d’apps : Apps mobiles,
apps web, prototypes.
Configuration Juste NPM Android Studio/Xcode
Tests rapides Complexe à mettre en
Dev
(Expo Go) oeuvre
Expo simplifie React Native pour créer des apps très simplement 13
Et Expo dans tout ça ?
Naviguer entre les pages comme dans un site
expo-router
(Accueil, Détails…)
expo-auth-
Ajouter l’authentification (Google, Facebook…)
session
Recap
🔐 Sécurité : SecureStore, expo- Envoyer des notifications push (ex : rappel d’un
événement)
AuthSession notifications
📦 Données : FileSystem, expo-camera
Accéder à l’appareil photo (scanner un QR code,
prendre une photo)
SQLite, Storage
🛰️ Matériel : Camera, expo-location
Obtenir la géolocalisation (pour des apps comme
Uber)
Location, Notifications
📱 Interface : Router, expo-media-
library
Accéder aux fichiers médias (galerie, images,
vidéos)
MediaLibrary, ImagePicker
Expo simplifie React Native pour créer des apps très simplement 14
L’application qu’on va construire ensemble 🎉
🌟 Qu'est-ce que Mato ? Une mini-application mobile pour publier et consulter des
événements autour de soi.
Idéal pour découvrir, partager ou organiser des sorties
simplement.
Conçue pour vous apprendre les bases : navigation, interfaces,
formulaires et backend.
📱 Les 3 écrans de l'application
1. Écran d’accueil 2. Écran “Ajouter un 3. Écran de détails – Voir un
Affiche tous les événement” – Formulaire événement
événements disponibles Champs à remplir : titre, Affiche tous les détails de
Infos visibles : titre, lieu, description, lieu, date l’événement sélectionné
date Bouton "Publier" Possibilité d’appuyer sur “Je
Taper sur un événement → Sauvegarde dans la base participe” (optionnel)
ouvre la fiche détaillée Appwrite
Appels API (Appwrite) Formulaire React Native Récupération d’un item
Affichage dynamique avec FlatList Hooks (useState) spécifique
Navigation vers les détails (router Envoi de données vers Appwrite Navigation dynamique avec
paramètre
Composants stylisés 15
⚙️ Fonctionnalités clés abordées
Catégorie Fonctionnalité Objectif pédagogique
🧭 Navigation Expo Router (3 routes)
Créer une vraie structure
multi-écrans
🎨 Interface FlatList, TextInput,
Pressable
UI mobile moderne et
réactive
💾 Données Lecture & écriture via
Appwrite
Comprendre les appels
API simples
🧠 Logique useState, useEffect Gérer l’état et les effets
🛰️ Backend Appwrite Database
Sauvegarder et récupérer
les événements
16
Les outils qu’on va utiliser
📱 Expo Go 💻 VS Code 🗄️ Appwrite 📹 Teams
Voir l’appli sur Gérer les Suivre la
Écrire le code
ton téléphone données formation en live
source
- - -
-
Pas besoin Comme Simple, sécurisé,
Léger, pratique,
d’émulateur, Firebase, mais pas de compte
gratuit
super rapide open-source requis
17
Un mot sur Appwrite (le backend)
Appwrite est une plateforme open-source qui fournit les outils backend (base de
données, authentification, stockage…) pour ton app sans devoir tout coder toi-même.
✅ Hébergement gratuit en local ou en cloud ✅ Base de données facile à configurer
✅ API simple, parfaite pour les débutants ✅ Alternative à Firebase, mais libre et auto-hébergeable
Appwrite dans Mato
📦 Stocker les événements (titre, lieu, date...)
🔐 (optionnel) Authentifier les utilisateurs
📤 Sauvegarder ou récupérer les données via des API
🚀 Faire le lien entre le front (Expo) et le backend
Appwrite nous aide à aller plus loin, sans se perdre dans les serveurs 18
Petit détour : JavaScript
JavaScript est le langage qu'on utilise pour créer l'application.
Javascript
C’est comme la langue parlée par les applis web et mobiles modernes.
😄
Si tu sais faire une phrase en JS, tu peux parler aux téléphones
Pourquoi JavaScript dans notre projet ?
🧠 Simple à apprendre (syntaxe légère)
🌍 Langage universel (web, mobile, backend)
⚛️ Utilisé avec React Native pour créer des
composants mobiles
🚀 C’est LE langage du développement
frontend
19
Petit détour : React
React est une bibliothèque JavaScript qui permet de construire des interfaces
React
utilisateur comme des briques LEGO . 🧱
Chaque composant = une section de l’interface.
🖼️ Exemple : Un bouton, une carte d’événement, un en-tête, une liste… ce sont
tous des composants.
Pourquoi React dans notre projet ?
Terme Définition simple Exemple concret
Les infos qu’on donne Le titre d’un
Props événement dans une
au composant
carte
L’état interne du Savoir si un bouton est
State composant (qui peut cliqué ou non
changer)
Bloc indépendant d’UI Une carte d’événement
Composant avec bouton
avec logique propre
“Participer” 20
Comment React Native fonctionne ?
Plateforme
Le développeur
Java : Android
Composant React tout React Native
simple.
Swift ou Objective C : iOs
21
Live
Coding
22
FAQ
Faut-il être bon en JS ? Oui mais JS est très simple à apprendre
Est-ce que ça marche sur
Oui, Android, iOS, tvOS, Fire
Android/iOS ?”
Autres questions ?
23
Et après
Nouvelle Session ?
Session en Présentiel ?
Consultations ?
24
Merci
25
Ensemble pour penser et mettre en ligne vos applications mobiles.
