Conception d'applications mobiles avec React Native

Dernier cadre de Facebook pour des applications professionnelles

Développement d'Applications Mobiles4.6(47)16h 56min84 leçons9 sections

Ce que vous apprendrez

  • Comprendre ce qu'est React Native et installer les outils
  • Utiliser Expo et créer votre premier projet
  • Manipuler les composants de base
  • Mettre en forme les écrans avec Style Sheet et FlexBox
  • Concevoir les écrans du projet
  • Créer des éléments de formulaire et des écrans de connexion
  • Demander des autorisations d'accès et manipuler les images et la localisation
  • Naviguer entre les écrans
  • Gérer le réseau et les API

À propos du cours

Ce cours enseigne la conception d'applications mobiles avec React Native, un framework de Facebook pour construire des applications Android et iOS avec JavaScript. Il commence par l'introduction du cours et ses prérequis, l'installation des outils, la création de votre premier projet et un aperçu d'Expo. Ensuite, vous apprenez les composants de base comme View, Text, Image, Touchable, Buttons et Alerts, puis Style Sheet, FlexBox, le positionnement des éléments et la conception de plusieurs écrans. Vous travaillez alors avec TextInput, Switch, Modal, la création d'éléments de formulaire et les écrans LoginScreen et RegisterScreen. Vous apprenez aussi les fonctions natives comme les autorisations d'accès, les images et la localisation, la navigation entre les écrans avec StackNavigator et TabNavigator, et enfin la gestion du réseau et des API avec Postman, Fetch et Axios. Le cours convient à ceux qui connaissent les bases de JavaScript et veulent construire des applications mobiles. Vous serez ensuite capable de concevoir les écrans de l'application, de les relier et de réaliser un projet complet qui se connecte à un serveur. L'enseignement est pratique et progressif : suivez les leçons dans l'ordre pour passer de l'idée à l'application pas à pas.

Résultats attendus

  • Capacité à créer des applications mobiles avec React Native.
  • Compréhension approfondie de la gestion des réseaux et des fonctionnalités des appareils.
  • Créer des applications qui prennent en charge la navigation entre les écrans et l'interaction utilisateur.
  • Maîtriser l'utilisation des outils qui améliorent l'efficacité des applications.

Avis des apprenants

Ces avis proviennent d'apprenants qui ont acheté le contenu et en ont complété au moins 50% — il n'y a aucun avis de personnes n'ayant pas suivi le contenu.
4.6
★★★★★
47 avis
5★
28
4★
17
3★
2
2★
0
1★
0

    Contenu du cours

    1

    Introduction à React Native

    6 leçons
    1. Introduction au coursPrésente l'application à construire avec React Native pour Android et iOS, avec les écrans d'inscription, de connexion, d'accueil, de compte, de messages, d'ajout de publication ou d'image et de localisation, et une structure de dossiers organisée.3:01
    2. Exigences du coursExplique les prérequis pour apprendre React Native : JavaScript avec ses notions avancées comme la programmation orientée objet et les modules, puis React avec ses concepts de composants, JSX, props, hooks et state.3:44
    3. Qu'est-ce que React NativeDéfinit React Native comme un framework pour créer des applications mobiles Android et iOS en JavaScript avec des composants comme View et Text, le compare aux langages natifs de chaque plateforme et précise qu'il a été développé par Facebook.9:31
    4. Installation des outilsExplique l'installation des outils nécessaires sous Windows pour créer des applications React Native, dont Node.js, npm et Expo, des extensions d'éditeur utiles et l'installation de l'application Expo sur le téléphone pour tester le projet.17:07
    5. Créer votre premier projetExplique la création du premier projet React Native avec Expo et les commandes npm, la structure des fichiers, l'ajout de styles et l'exécution de l'application sur Expo Go avec rafraîchissement instantané.14:30
    6. Aperçu d'ExpoExplique l'outil Expo et ses services comme environnement de développement React Native, dont Snack, l'exécution sur un appareil, la création d'un projet avec la bonne commande et les raccourcis du terminal pour relancer.13:52
    2

    Explication des Composants de Base

    9 leçons
    1. Introduction au chapitre (explication des composants de base)Introduit le deuxième chapitre sur les composants de base de React Native, présente des composants comme button et montre comment la documentation détaille les propriétés de chacun, y compris celles propres à Android ou iOS.9:49
    2. ViewExplique le composant View de React Native comme brique de base des interfaces, en testant l'ajout d'éléments à l'intérieur et la définition de sa hauteur, et en montrant l'effet de Views imbriquées sur l'espace.18:02
    3. TextExplique le composant Text pour afficher du texte dans React Native, ses propriétés comme le style, la taille de police et la limite de lignes, et la gestion du appui avec onPress en affichant le résultat dans le terminal.14:48
    4. ImageExplique le composant Image de React Native pour afficher des images depuis les fichiers du projet via require et depuis internet via uri, avec des propriétés comme blurRadius et resizeMode pour les effets et l'ajustement au cadre.19:09
    5. TouchableExplique les composants Touchable comme TouchableHighlight, TouchableOpacity et TouchableWithoutFeedback pour gérer l'interaction au toucher, l'effet d'opacité sur une image, l'appui long et TouchableNativeFeedback réservé à Android.18:56
    6. ButtonsExplique le composant Button natif de React Native, ses propriétés clés comme le titre et le gestionnaire de clic, la différence d'apparence entre Android et iOS et l'uniformisation du rendu par une personnalisation.8:06
    7. AlertsExplique l'API Alert pour afficher un message d'alerte à l'utilisateur, l'ajout de boutons avec des fonctions comme la confirmation de suppression, et Alert.prompt qui demande une saisie et ne fonctionne que sur iOS.15:55
    8. Style SheetExplique l'usage de StyleSheet.create à la place des styles en ligne, la définition d'un objet styles regroupant les styles sous des clés, de préférence par composant, et la différence avec le CSS du web.7:33
    9. PlatformExplique l'usage de Platform pour détecter le système et exécuter du code propre à Android ou iOS, la correction du chevauchement avec la barre d'état via SafeAreaView et un padding haut, et la valeur StatusBar.currentHeight.12:23
    3

    Dimensions et organisation de la mise en page

    10 leçons
    1. DimensionsExplique comment obtenir les dimensions de l'écran de l'appareil via Dimensions, pourquoi elles diffèrent d'un appareil à l'autre, la différence entre pixels et unités indépendantes de la densité, et l'usage des pourcentages pour un design adaptatif.17:50
    2. OrientationsExplique comment détecter l'orientation de l'écran et gérer ses changements avec des hooks comme useWindowDimensions et useDeviceOrientation, en distinguant les dimensions screen et window et en adaptant l'interface.19:07
    3. FlexBoxExplique le système Flexbox pour mettre en page les écrans dans React Native, en utilisant la propriété flex pour répartir l'espace proportionnellement entre les éléments, appliquée au dessin du drapeau égyptien avec des bandes égales ou inégales.10:46
    4. FlexDirectionExplique la propriété flexDirection de Flexbox avec ses valeurs row, row-reverse, column et column-reverse, montre son effet sur l'ordre des éléments dans le conteneur, l'axe principal et l'axe transversal, avec l'exemple du drapeau égyptien.7:34
    5. Contrôler la position de l'élémentExplique les propriétés qui placent les éléments dans une View comme justifyContent et alignItems, leurs valeurs début, fin, centre et espacement, et la différence entre direction ligne et colonne ainsi que l'ordre inversé.17:59
    6. Sortie de l'élément de l'écranExplique la gestion des éléments qui dépassent du cadre de l'écran, avec flexWrap pour les passer à la ligne et alignContent pour répartir les lignes quand le contenu dépasse la taille de l'écran.4:41
    7. Définir la position de l'élémentExplique le positionnement d'un élément avec la propriété position, son décalage par des valeurs top, left, right et bottom positives ou négatives, et la différence entre relative aux voisins et absolute à l'écran.6:57
    8. Concevoir la première écran du projetExplique la conception du premier écran avec une ImageBackground, le centrage du logo et le placement de deux boutons en bas de l'écran, en réglant tailles et alignement avec les propriétés de mise en page apprises.29:51
    9. Concevoir la deuxième écran du projetExplique la conception du second écran affichant une image sur fond noir avec deux petits boutons, le réglage de leur taille et couleur depuis le fichier de couleurs partagé et la séparation des couleurs primaire et secondaire.25:29
    10. Télécharger les fichiers du projet 1
    4

    Style

    12 leçons
    1. BordureExplique le style Border dans React Native : ajouter une bordure autour d'un élément avec couleur et épaisseur, utiliser borderRadius pour l'arrondir, et définir des bordures différentes pour chaque côté.8:30
    2. OmbreExplique le style Shadow dans React Native et comment régler sa couleur, son décalage et son opacité sur iOS, en précisant qu'Android nécessite la propriété elevation à la place pour afficher l'ombre.8:18
    3. Marge intérieureExplique la différence entre padding et margin dans React Native : le padding ajoute un espace interne entre le bord d'un élément et son contenu, la margin un espace externe avec les autres éléments, avec les variantes par côté.7:47
    4. Mise en forme du texteExplique les propriétés de mise en forme du texte dans React Native, comme fontWeight, l'alignement avec textAlign et fontFamily, y compris les différences de polices prises en charge entre Android et iOS.16:12
    5. Créer un nouvel élément de texteExplique la création d'un composant texte personnalisé réutilisable, l'unification du style des textes dans toute l'application et le choix de la police selon le système avec Platform plutôt que de répéter le code.12:23
    6. IcôneExplique l'affichage d'icônes avec la bibliothèque vector icons, la recherche, le choix et l'import des icônes, le changement de taille et pourquoi elles gardent leur qualité à l'agrandissement contrairement aux images.9:53
    7. Rééditer la première écran du projetExplique la création d'un composant AppButton réutilisable, son style avec largeur, bords arrondis et marges, le passage du titre et de la couleur en props avec une couleur par défaut, puis son usage sur le premier écran.27:36
    8. Rééditer la deuxième écran du projetExplique la modification du second écran avec deux icônes MaterialCommunityIcons, fermer et supprimer, dans deux View, le réglage de leur couleur et taille et la suppression du fond pour ne garder que l'icône.6:17
    9. Créer un élément CardExplique la création d'un composant Card affichant un article avec son image, son titre et son sous-titre, reçus en props, la mise en forme du prix, afin de le réutiliser ensuite dans des listes.26:52
    10. Créer un élémentConstruit un composant ListItem en React Native qui affiche la photo d'une personne, son nom et son nombre d'abonnés, en recevant ces valeurs comme props et en les stylisant.12:23
    11. Concevoir la troisième écran dans le projetConçoit le troisième écran, qui s'ouvre lorsqu'on touche une carte, en organisant l'image, le titre, le prix et les conteneurs avec des styles, en ajoutant une nouvelle couleur pour la liste et en réglant le padding.14:35
    12. Télécharger les fichiers du projet 2
    5

    Travailler avec les listes

    8 leçons
    1. Concevoir la quatrième écran dans le projet avec FlatListIntroduit le chapitre sur les listes et construit l'écran des messages avec FlatList, en passant le tableau de données, une fonction renderItem pour afficher chaque élément et un keyExtractor pour donner une clé unique à chacun.17:46
    2. Créer un élément d'écranCrée un composant Screen réutilisable pour corriger l'affichage du contenu sous la barre d'état sur Android, en utilisant SafeAreaView et StatusBar.currentHeight pour ajuster la marge du haut.15:33
    3. Créer un élément séparateurCrée un composant Separator réutilisable qui sépare les éléments d'une liste, l'utilise avec ItemSeparatorComponent dans FlatList avec pleine largeur, faible épaisseur et couleur claire, puis l'ajoute à l'écran des messages.9:10
    4. Comment sélectionner un élément dans la listeExplique comment rendre un élément cliquable avec un composant Touchable, changer la couleur de surbrillance au clic avec underlayColor et relier le clic à une fonction qui traite l'élément sélectionné de la liste.7:37
    5. Rafraîchir les données de l'écranExplique le rafraîchissement des données de l'écran par glissement vers le bas dans une FlatList, avec useState pour stocker les messages, la propriété refreshing et une fonction onRefresh pour ajouter de nouveaux messages.7:44
    6. Concevoir la cinquième écran pour afficher les biensExplique la conception de l'écran des articles avec une FlatList qui affiche un composant Card, le passage des données, l'usage de keyExtractor pour la clé de chaque élément et le réglage des couleurs et du style.12:04
    7. Concevoir la sixième écran pour afficher le compte personnelExplique la conception de l'écran du compte personnel avec un composant ListItem affichant la photo, le nom et l'e-mail, et une liste d'options à icônes rondes colorées, chacune menant à son propre écran.32:02
    8. Télécharger les fichiers du projet 3
    6

    Gestion des Entrées

    11 leçons
    1. Travailler avec le composant TextInputExplique l'utilisation du composant TextInput pour recevoir la saisie de l'utilisateur, ses propriétés comme la limite de caractères et le type de clavier, et la lecture de la valeur saisie pour l'afficher aussitôt via le state.14:53
    2. Créer le composant AppTextInputCrée un composant AppTextInput réutilisable combinant un TextInput avec une icône et un style cohérent, transmet les propriétés par décomposition et le teste en saisissant du texte.18:15
    3. Travailler avec le composant SwitchExplique l'utilisation du composant Switch et sa différence d'apparence entre Android et iOS, avec la propriété value pour son état et onValueChange pour le mettre à jour, relié au state pour basculer à l'appui.11:29
    4. Créer le composant AppPickerExplique la création d'un composant AppPicker à partir du code Picker existant, l'affichage des catégories au clic et l'ajout d'une icône MaterialCommunityIcons à côté du texte avec la mise en forme.12:19
    5. Travailler avec le composant ModalExplique l'utilisation d'un Modal pour afficher la liste des catégories dans l'AppPicker au clic, la sélection d'un élément affiché ensuite, la fermeture de la fenêtre et l'affichage de l'icône choisie.18:56
    6. Créer des éléments de formulaireExplique la création d'éléments de formulaire avec les bibliothèques Formik et Yup, Formik gérant les valeurs et l'envoi des champs, Yup validant la saisie via un validation schema et affichant les erreurs.28:36
    7. Concevoir l'écran LoginScreenExplique la conception de l'écran de connexion avec champs e-mail et mot de passe via Formik et Yup, la définition d'un schéma de validation de l'e-mail, l'affichage des erreurs et l'ajout du logo avec la mise en page.21:16
    8. Concevoir l'écran RegisterScreenExplique la conception de l'écran d'inscription avec nom, e-mail et mot de passe via Formik et Yup, le type de clavier pour l'e-mail, le masquage du mot de passe avec secureTextEntry et l'affichage des valeurs saisies.16:54
    9. Concevoir l'écran ListingEditScreenExplique la conception de l'écran ListingEditScreen pour ajouter un article avec un formulaire Formik (titre, prix, catégorie, description), la définition du schéma de validation et des longueurs de champs, et le bouton d'envoi.16:48
    10. Quelques modifications et améliorations dans le projetPasse en revue des améliorations du code du chapitre précédent, comme l'ajout d'un Picker pour choisir la catégorie, l'ajustement des largeurs et la limitation des lignes de texte de la carte, avant d'aborder la logique et les images.9:12
    11. Télécharger les fichiers du projet 4
    7

    Gestion des Fonctionnalités Natives

    10 leçons
    1. Introduction au chapitre (Travailler avec les fonctionnalités natives)Introduit le chapitre sur les fonctionnalités natives de l'appareil comme la caméra, les photos et la localisation, cherche la bibliothèque Expo adaptée pour choisir des images, consulte sa documentation et l'installe dans le projet.9:21
    2. Demander des autorisations d'accèsExplique comment demander l'autorisation d'accéder aux photos dans l'application via ImagePicker et une fonction exécutée une seule fois avec useEffect, puis vérifier le résultat de la demande et l'octroi de la permission.10:43
    3. Travailler avec différentes autorisations d'accèsExplique la gestion des différentes permissions d'accès via l'API Permissions d'Expo, en demandant plusieurs autorisations comme la caméra et la localisation, en vérifiant le résultat et en agissant selon l'acceptation ou le refus de l'utilisateur.7:58
    4. Accéder aux images depuis l'appareilExplique l'accès aux photos de l'appareil après l'autorisation de l'utilisateur, l'ouverture de la bibliothèque d'images au clic sur un bouton et l'affichage de l'image choisie dans un composant Image.9:19
    5. Créer un composant ImageInputExplique la création d'un composant ImageInput pour choisir des images, avec la demande d'autorisation de la caméra via useEffect, l'ouverture de la bibliothèque au clic et le style du conteneur et de l'image.21:55
    6. Créer un composant ImageInputListExplique la création d'un composant ImageInputList qui affiche les images choisies dans un ScrollView, avec des fonctions d'ajout et de suppression, les chemins stockés dans un tableau et la suppression d'une image au clic.16:32
    7. Créer un composant FormImagePickerExplique la création d'un FormImagePicker qui relie ImageInputList à Formik, gère les erreurs d'images, leur ajout et suppression via setFieldValue, et affiche un message d'erreur si aucune image n'est choisie.8:16
    8. Télécharger des images et les ajouter à ListingEditScreenExplique l'ajout du FormImagePicker à l'écran ListingEditScreen pour téléverser les photos d'un article, son lien avec le champ images de Formik, le masquage de l'erreur après le choix d'une image et la préparation des données pour le serveur.4:35
    9. Accéder à l'emplacement du téléphoneExplique l'accès à la position du téléphone avec la bibliothèque expo-location, la demande d'autorisation, la récupération de la latitude et de la longitude, puis le déplacement du code dans un hook personnalisé useLocation réutilisable.15:24
    10. Télécharger les fichiers du projet 5
    8

    Navigation entre les Écrans

    12 leçons
    1. Introduction au chapitre (Naviguer entre les écrans)Introduit le chapitre sur la navigation entre écrans, présente les types de navigateurs comme Stack, Tab et Drawer, puis installe la bibliothèque React Navigation avec les paquets complémentaires nécessaires.6:29
    2. Travailler avec StackNavigatorExplique l'utilisation du Stack Navigator de React Navigation : installation de la bibliothèque, création du navigateur avec createNativeStackNavigator, déclaration des écrans à l'intérieur et encapsulation dans un NavigationContainer.16:17
    3. Comment naviguer entre les écrans avec le StackExplique la navigation entre écrans avec Stack : envelopper le navigateur dans un NavigationContainer, utiliser navigation.navigate pour aller vers un autre écran et accéder à navigation dans des composants non-écrans via useNavigation.8:23
    4. Envoyer des données entre les écransExplique l'envoi de données d'un écran à l'autre via la route, le passage d'un objet contenant identifiant, nom et description lors de la navigation, puis sa lecture et son affichage sur le second écran.9:16
    5. Changer le style de l'en-têteExplique la modification du style du header en navigation, comme la couleur de fond, pour un seul écran ou pour tous via les options du Navigator, et laquelle a la priorité en cas de conflit.6:29
    6. Travailler avec TapNavigatorExplique la navigation par onglets avec le bottom tab navigator, l'installation du paquet, la création d'un Tab Navigator à deux écrans et son utilisation à la place du Stack dans le NavigationContainer.8:27
    7. Travailler avec les styles d'écran via TapExplique le style du Tab Navigator, comme les couleurs d'onglet actif et inactif et la taille d'icône, l'ajout d'icônes via tabBarIcon et le masquage du header en double quand un Stack est imbriqué dans un onglet.11:17
    8. Créer un élément de transition AuthNavigationExplique la création d'un AuthNavigation dans un dossier navigation, avec un Stack Navigator reliant les écrans d'accueil, de connexion et d'inscription, le masquage du header et la navigation par les boutons.8:27
    9. Créer des éléments de transition AppNavigation, FeedNavigationRelie les écrans de l'application via les composants AppNavigation et FeedNavigation en React Native, configure les onglets du bas et les en-têtes, et transmet les données de l'élément touché à l'écran suivant.18:43
    10. Créer un élément de transition AccountNavigationCrée le composant AccountNavigation sur le modèle de FeedNavigation, le relie à l'onglet du compte dans AppNavigation et ajoute un bouton sur l'écran du compte qui mène à l'écran des messages via navigate.5:34
    11. Concevoir AppNavigationAjoute des icônes MaterialCommunityIcons aux onglets d'AppNavigation et crée un bouton personnalisé pour l'onglet central sous forme de composant fonction, avec son style et la gestion de l'appui pour naviguer vers l'écran voulu.11:52
    12. Télécharger les fichiers du projet 6
    9

    Gestion des Réseaux

    6 leçons
    1. Introduction au chapitre (travail avec les réseaux)Introduit le chapitre sur le réseau et la connexion de l'application à un backend à la place de données fictives, avec les notions d'internet et du web, le protocole HTTP et des outils comme fetch et axios pour les requêtes GET, POST et DELETE.3:35
    2. Travailler avec le BackEndExplique les notions de base du réseau : ce qu'est internet, la requête envoyée du navigateur au serveur et ses parties comme l'URL, les méthodes GET, POST et DELETE, les codes de statut des réponses et les endpoints du serveur.23:39
    3. Comprendre l'APIExplique le concept d'API comme le lien entre l'interface utilisateur, le serveur backend et la base de données, en le comparant à un serveur de restaurant qui transmet la commande à la cuisine et rapporte la réponse.4:21
    4. Travailler avec PostmanExplique l'utilisation de Postman pour tester le backend, l'envoi d'une requête POST avec des données dans le corps et d'une requête GET pour récupérer les catégories, et la lecture de la réponse du serveur.11:47
    5. Travailler avec Fetch et AxiosExplique deux façons d'appeler une API depuis l'application, Fetch intégré au navigateur qui renvoie une Promise et la bibliothèque Axios, ainsi que la demande de données et la lecture de la réponse.9:28
    6. Télécharger les fichiers du projet 7

    Formateur

    Ing. Amr Abdel Fattah

    Ing. Amr Abdel Fattah

    Ingénieur en systèmes informatiques spécialisé dans le développement d'applications mobiles et de sites Web, avec une expérience dans la création de plateformes et d'applications Web populaires.
    49.1K vues20 cours

    Cours similaires