Applications React Native
Créer une application météo professionnelle
Ce que vous apprendrez
- Créer un projet React Native
- Obtenir la position de l'utilisateur
- S'inscrire sur le serveur de données météo
- Récupérer les données du serveur
- Comprendre l'unité de mesure et la modifier
- Afficher les données météo de base
- Ajouter une option pour recharger les données
- Afficher le reste des données météo
À propos du cours
Ce cours explique comment créer une application qui affiche les températures et les conditions météo avec React Native, pas à pas, de l'idée jusqu'à l'application terminée. Vous commencez par une introduction au cours puis vous créez le projet. Ensuite, vous obtenez la localisation, c'est-à-dire la position de l'utilisateur, et vous vous inscrivez sur le serveur qui fournit les données météo, puis vous récupérez les données du serveur et vous affichez les données de base. Vous découvrez alors l'unité de mesure et la manière de la modifier, vous ajoutez une option pour recharger les données, puis vous affichez le reste des données et vous arrivez à l'étape finale. Ce cours est utile à toute personne qui veut apprendre les applications mobiles à travers un petit projet pratique, que vous soyez débutant en React Native ou programmeur à la recherche d'un exemple concret. Bien que l'application soit petite, elle réunit de nombreuses compétences dont tout programmeur a besoin, et il est préférable de connaître les bases de la programmation avant de commencer. À la fin, vous serez capable de construire une application météo qui se connecte à un serveur, trouve la position et affiche les températures. Le cours est enseigné en arabe, avec une application pratique complète qui vous aide à comprendre facilement chaque étape.
Résultats attendus
- Créer une application simple avec React Native.
- Comprendre comment se connecter au serveur et récupérer des données.
- Ajouter des fonctionnalités interactives à l'application comme le rechargement.
- Compétences essentielles pour le développement futur d'applications React Native.
Avis des apprenants
Contenu du cours
1Applications React Native
11 leçons
- Introduction au coursPrésente l'application météo pratique en React Native, qui récupère des données d'un serveur externe via une API et une clé, et expose ses composants : infos de lieu, choix d'unité, icône de rechargement et détails météo.3:18
- Créer un projetCrée le projet météo React Native depuis le Terminal après avoir vérifié que Node.js est installé, puis le lance avec npx expo start sur un émulateur Android et teste que les modifications du code s'affichent aussitôt.4:33
- Obtenir la localisationObtient la position de l'utilisateur dans l'application météo avec la bibliothèque expo-location : demande l'autorisation de localisation, gère le refus avec un message d'erreur, puis lit la longitude et la latitude.15:34
- S'inscrire sur le serveurExplique l'usage de la longitude et de la latitude avec une API et les opérations CRUD sur un serveur, puis s'inscrit sur OpenWeatherMap pour obtenir une clé API et la stocker dans un objet du projet.5:17
- Obtenir des données du serveurRécupère les données météo d'OpenWeatherMap avec la fonction fetch à partir des coordonnées et de la clé, lit le résultat JSON, gère l'échec de connexion avec le message d'erreur et affiche la température.15:48
- Unité de mesureLance l'application météo sur un appareil réel via Expo Go et un code QR, puis ajoute un paramètre units à l'URL de l'API avec un state pour basculer entre Celsius et Fahrenheit.7:55
- Afficher les données de baseMet en place la mise en page dans le composant App et affiche les données de base de la réponse JSON, soit l'icône, la description et la température, dans le composant d'infos météo avec une image et du texte.20:23
- Changer l'unité de mesureCrée les composants WeatherDetails et UnitsPicker, installe une bibliothèque de liste déroulante et règle la position et les options du sélecteur pour passer de Celsius à Fahrenheit.13:00
- Ajouter une option de rechargement des donnéesConstruit le composant ReloadIcon qui affiche une icône d'actualisation du paquet Ionicons et reçoit la fonction de chargement en prop pour recharger les données à l'appui, avec sa position et sa couleur.4:59
- Afficher les données restantesConstruit le composant WeatherDetails pour afficher le reste des données, en arrondissant les valeurs avec Math.round et en ajoutant les unités, avec ressenti, humidité, pression et vent accompagnés d'icônes MaterialCommunityIcons et de styles fusionnés.18:30
- Dernière étapeAssemble tous les composants de l'application météo dans App.js par import et transmission de props, remet les valeurs à null à chaque chargement, affiche les erreurs et relie le changement d'unité et l'icône de rechargement.14:09
Formateur
Ing. Amr Abdel Fattah
