Accentsconagua
Share
Dans mon développement plus facile de React Native avec Expo Post, vous avez appris comment il est plus facile pour les débutants de commencer à créer des applications avec React Native. Vous avez également appris que Expo permettait aux développeurs de développer plus rapidement le développement d'applications React Native, car il n'était plus nécessaire de configurer Android Studio, Xcode ou d'autres outils de développement..
Mais comme vous l'avez également vu, Expo ne prend pas en charge toutes les fonctionnalités natives dont une application pourrait avoir besoin. Bien que l'équipe de l'Expo s'efforce toujours de prendre en charge davantage de fonctionnalités natives, c'est une bonne idée d'apprendre à convertir un projet Expo existant en un projet natif standard afin que vous puissiez effectuer facilement une transition en cas de besoin..
Donc, dans cette série en deux parties, nous examinons comment faire cela. Dans la première partie de la série, vous avez appris les concepts de base d’ExpoKit. Dans cet article, nous allons continuer là où nous en sommes restés en détachant l'application dans ExpoKit et en continuant à coder l'application de partage de position..
Pour vous détacher d’ExpoKit, vous devez d’abord modifier le app.json et package.json des dossiers.
dans le app.json fichier, assurez-vous qu'un prénom a été mis en. le plateformes devraient être les plates-formes que vous voulez construire à.
"expo": "name": "ocdmom", "plateformes": ["ios", "android"],
Si vous souhaitez créer pour iOS, vous devez spécifier le iOS option:
"ios": "bundleIdentifier": "com.ocd.mom",
Si vous souhaitez prendre en charge Android, spécifiez également l'option suivante:
"android": "package": "com.ocd.mom"
Il y a d'autres options qui ont été pré-remplies par le exp outil de ligne de commande lors de la création du projet. Mais les seuls importants sont les bundleIdentifier pour iOS et paquet Pour Android. Ce seront les identifiants uniques de l’application une fois celles-ci publiées sur Apple ou Play Store. Le détachement nécessite ces informations car il génère le code natif de l'application à exécuter sur un périphérique. Vous pouvez trouver plus d’informations sur les différentes options de configuration du app.json fichier dans la documentation de l'Expo.
Vous pouvez voir le contenu complet du fichier dans le dépôt GitHub.
Ensuite, ouvrez le package.json fichier et ajouter le nom du projet:
"nom": "ocdmom"
Ce doit être le nom que vous avez utilisé lors de la création du projet à l'aide de exp init. Il est très important qu'ils soient identiques car le prénom vous spécifiez dans le package.json est utilisé lors de la compilation de l'application. Les incohérences dans ce nom provoqueront une erreur.
Nous sommes maintenant prêts à nous détacher d’ExpoKit. Exécutez la commande suivante à la racine du répertoire du projet:
exp détachement
Cela téléchargera les packages Expo natifs pour Android et iOS localement.
Vous devriez voir une sortie semblable à celle-ci si elle réussit:
Si vous déployez sur iOS, vous devez installer la dernière version de Xcode. Au moment de la rédaction de ce didacticiel, la dernière version est la 9. Ensuite, installez CocoaPods en exécutant sudo gem installer des cocoapods. Cela vous permet d'installer les dépendances iOS natives du projet. Une fois que cela est fait, naviguez vers le iOS répertoire du projet et exécuter installation de pod installer toutes les dépendances natives.
Maintenant que nous nous sommes détachés, nous pouvons maintenant installer des packages natifs comme dans un projet standard de React Native..
Pour cette application, nous avons besoin des packages React Native Background Timer et Pusher..
Tout d’abord, installez le paquet Pusher car c’est plus facile:
npm installer --save pusher-js
Cela nous permet de communiquer avec l'application Pusher créée précédemment..
Ensuite, installez le temporisateur d'arrière-plan réactif natif. Cela nous permet d'exécuter périodiquement du code (même lorsque l'application est en arrière-plan) en fonction d'un intervalle spécifique:
npm install --save react-native-background-timer
Contrairement au package Pusher, cela nécessite une bibliothèque native (iOS ou Android) pour être liée à l'application. L'exécution de la commande suivante le fait pour vous:
lien réactif natif
Une fois cela fait, il devrait également initialiser le module sur android / app / src / main / host / exp / exponent / MainApplication.java. Mais juste pour être sûr, vérifiez si le fichier suivant existe dans ce fichier:
importer com.ocetnik.timer.BackgroundTimerPackage; // vérifie cette liste publiquegetPackages () retourne des tableaux. asList (new BackgroundTimerPackage () // cochez également cette option);
Si vous construisez pour iOS, ouvrez le Podfile à l'intérieur de iOS répertoire et assurez-vous que ce qui suit est ajouté avant la post_install déclaration:
pod 'react-native-background-timer',: chemin => '… / node_modules / react-native-background-timer'
Une fois que c'est fait, exécutez installation de pod à l'intérieur de iOS répertoire pour installer le module natif.
Pour Android, cela se fait déjà automatiquement lorsque vous exécutez l'application avec Android Studio..
Si vous construisez pour Android, ouvrez le fichier manifeste Android (android / app / src / main / AndroidManifest.xml) et assurez-vous que les autorisations suivantes sont ajoutées:
Cela nous permet de demander à Pusher l'autorisation d'accéder à Internet et à Expo pour obtenir l'emplacement actuel de l'utilisateur sur des appareils Android..
Nous n'avons pas encore terminé, mais il est préférable de lancer l'application maintenant pour voir si cela fonctionne ou non. De cette façon, vous pouvez également voir les modifications pendant le développement de l'application..
La première étape de l'exécution de l'application consiste à exécuter début exp depuis le répertoire racine du projet. Cela démarrera le serveur de développement de sorte que toute modification apportée au code source soit reflétée dans l'aperçu de l'application..
Si vous construisez pour Android, ouvrez Android Studio et sélectionnez Ouvrir un projet Android Studio existant. Dans le sélecteur de répertoire qui s’affiche, sélectionnez le Android dossier dans le projet Expo. Une fois que vous avez sélectionné le dossier, il doit indexer les fichiers de ce dossier. À ce stade, vous devriez maintenant pouvoir reconstruire le projet en sélectionnant Construire> Reconstruire le projet dans le menu du haut. Une fois que cela est fait, lancez l'application en sélectionnant Exécuter> Exécuter 'app'.
Android Studio peut exécuter l'application sur tout appareil Android connecté à votre ordinateur, sur l'un des émulateurs que vous avez installés via Android Studio ou via Genymotion (Android Studio détecte automatiquement une instance d'émulateur en cours d'exécution). Pour cette application, je vous recommande d'utiliser l'émulateur Genymotion, car celui-ci est doté d'un beau widget d'émulation GPS qui vous permet de modifier l'emplacement via une interface Google Maps:
(Si vous rencontrez des problèmes lors de l'exécution de l'application sur votre appareil, veillez à consulter cette question de dépassement de capacité lors de la reconnaissance de votre appareil par Android Studio.)
Une fois cela fait, ouvrez le iOS /ocdmom.xcworkspace fichier avec Xcode. Une fois que Xcode a terminé l'indexation des fichiers, vous devriez pouvoir appuyer sur ce gros bouton de lecture et exécuter automatiquement l'application sur votre simulateur iOS sélectionné..
Xcode vous permet également de simuler l'emplacement, mais uniquement lorsque vous créez l'application pour qu'elle soit exécutée dans le simulateur. La modification du code et l'actualisation de l'application par le serveur de développement ne modifieront pas l'emplacement. Pour changer d'emplacement, cliquez sur l'icône d'envoi et sélectionnez l'emplacement que vous souhaitez utiliser:
Nous sommes maintenant prêts à continuer à écrire le code de l'application. Cette fois-ci, nous ajouterons la fonctionnalité permettant d'exécuter du code lorsque l'application est en arrière-plan..
Importez les packages Pusher and Background Timer que vous avez installés précédemment:
importer BackgroundTimer de 'react-native-background-timer'; importer Pusher de 'pusher-js / react-native';
Définissez la valeur de la clé API Google du projet Google créé précédemment:
const GOOGLE_API_KEY = 'VOTRE CLE D'API PROJET GOOGLE';
Utilisez l'API Emplacement et autorisations de Expo:
const Lieu, Autorisations = Expo;
Les API d'Expo fonctionnent sur plusieurs plates-formes. Cela ressemble à un projet standard de React Native, dans lequel vous devez installer un package tel que React Native Permissions pour accéder à une API d'autorisations compatible multiplate-forme..
Ensuite, définissez l'intervalle (en millisecondes) que le code destiné à suivre l'emplacement actuel de l'utilisateur va exécuter. Dans ce cas, nous voulons qu'il s'exécute toutes les 30 minutes. Notez que dans le code ci-dessous, nous utilisons la valeur de la état_emplacement variable pour vérifier si l'autorisation d'accéder à l'emplacement actuel de l'utilisateur a été accordée ou non. Nous définirons la valeur de cette variable ultérieurement, une fois le composant monté:
var interval_ms = 1800 * 100; // 1800 secondes = 30 minutes, fois 100 à convertir en millisecondes var location_status = null; // si l'accès à l'emplacement de l'utilisateur est autorisé ou non BackgroundTimer.runBackgroundTimer (() => // exécute la tâche en arrière-plan si (emplacement_status == 'accordé') // si l'autorisation d'accéder à l'emplacement est accordée par l'utilisateur / / next: ajoute du code pour obtenir l'emplacement actuel de l'utilisateur, interval_ms);
Obtenez l'emplacement actuel en utilisant l'API d'emplacement de l'Expo:
Location.getCurrentPositionAsync (// récupère les coordonnées de l'utilisateur enableHighAccuracy: true // permet d'extraire un emplacement de grande précision) .then ((res) => let latitude, longitude = res.coords; // extrait la latitude et valeurs de longitude // suivant: ajout du code pour obtenir l'adresse en fonction des coordonnées);
Ensuite, à l'aide de l'API de géocodage de Google Maps, envoyez une requête au noeud final de géocodage inverse en fournissant les valeurs de latitude et de longitude. Ceci retourne une adresse formatée basée sur ces coordonnées:
fetch ('https://maps.googleapis.com/maps/api/geocode/json?latlng=$ latitude, $ longitude & clé = $ GOOGLE_API_KEY') .then ((réponse) => réponse. json ()) .then ((responseJson) => let addr = responseJson.results [0] .formatted_address; // next: envoie l'emplacement avec Pusher) .catch ((error) => console.error (error ););La prochaine étape consiste à envoyer le lieu à l’aide de Pusher. Plus tard, nous allons créer le serveur qui servira de point final d'authentification et affichera en même temps la page indiquant l'emplacement actuel de l'utilisateur..
Mettez à jour le constructeur pour définir une valeur par défaut pour l'occurrence de Pusher:
constructor () / * le code pour générer un code unique à partir de * / this.pusher = null;
Lorsque le composant est monté, nous voulons initialiser Pusher. Vous pouvez désormais fournir la clé d'API Pusher et le cluster à partir du paramètre de l'application Pusher que vous avez créé précédemment:
composantWillMount () this.pusher = new Pusher ('VOTRE CLE APP PUSHER', authEndpoint: 'VOTRE POINT D'ENVOI DE SERVEUR AUTH (A AJOUTER PLUS TARD)', cluster: 'VOTRE CLUSTER D'AUTH SERVEUR', chiffré: true // si la connexion sera crypté ou non. Cela nécessite https s'il est défini sur true); Ensuite, vous pouvez maintenant ajouter le code pour envoyer la position actuelle. Dans Pusher, cela se fait en appelant le déclencheur() méthode. Le premier argument est le nom de l'événement déclenché et le second argument est un objet contenant les données que vous souhaitez envoyer..
Plus tard, sur le serveur, nous nous abonnerons au même canal que nous le ferons une fois le composant monté. Ensuite, nous allons nous lier à la emplacement client événement afin que chaque fois qu'il est déclenché quelque part, le serveur sera également averti (bien que seulement lorsque la page qu'il sert est également abonnée au même canal):
fetch (…) .then (…) .then ((responseJson) => let addr = responseJson.results [0] .formatted_address; current_location_channel.trigger ('emplacement-client', addr: addr, lat: latitude, lng : longitude);) .catch (…);Nous ne demanderons la permission d'accéder à l'emplacement actuel de l'utilisateur que lorsque le composant est monté. Nous mettrons ensuite à jour le état_emplacement basé sur la sélection de l'utilisateur. La valeur peut être "accordée" ou "refusée".
Rappelez-vous que le code de vérification de l'emplacement actuel de l'utilisateur est exécuté périodiquement. Cela signifie que la nouvelle valeur du état_emplacement variable sera également utilisé ultérieurement lors de l'exécution de la fonction. Après cela, nous souhaitons également nous abonner au canal Pusher où les mises à jour d'emplacement seront envoyées:
composantDidMount () try Permissions.askAsync (Permissions.LOCATION) .then ((status) = => emplacement_status = status;); catch (error) console.log ('err:', error); // s'abonner au canal Pusher current_location_channel = this.pusher.subscribe ('private-current-location-' + this.state.unique_code); Nous sommes maintenant prêts à créer le serveur. Commencez par créer votre répertoire de travail (ocdmom-serveur) en dehors du répertoire de projet de l'application. Naviguez dans ce répertoire et exécutez npm init. Appuyez simplement sur Entrer jusqu'à ce qu'il crée la package.json fichier.
Ensuite, installez les paquets dont nous avons besoin:
npm install --save express pousseur d’analyseur de corps
Voici un aperçu de ce que chaque paquet fait:
Express: utilisé pour créer un serveur. Il s’agit de servir la page de suivi et de répondre au point final d’authentification..analyseur de corps: Middleware Express qui analyse le corps de la demande et le rend disponible en tant qu'objet JavaScript. poussoir: utilisé pour communiquer avec l'application Pusher créée précédemment.Une fois que cela est fait, votre package.json Le fichier devrait maintenant ressembler à ceci:
"name": "ocdmom-server", "version": "1.0.0", "description": "", "main": "server.js", "scripts": "test": "echo \ "Erreur: aucun test spécifié \" && exit 1 "," start ":" node server.js "," author ":" "," license ":" ISC "," dépendances ": " analyseur de corps " : "^ 1.18.2", "express": "^ 4.16.2", "poussoir": "^ 1.5.1"
Créer un server.js déposer et importer les packages que nous venons d'installer:
var express = require ('express'); var bodyParser = require ('analyseur de corps'); var Pusher = require ('poussoir');Configurez le serveur pour utiliser le analyseur de corps emballer et définir le Publique dossier en tant que répertoire des fichiers statiques:
var app = express (); app.use (bodyParser.json ()); // set middleware pour analyser le corps de requête en objet JavaScript app.use (bodyParser.urlencoded (extended: false)); // pour l'analyse du corps de la requête codée en URL app.use (express.static ('public')); // spécifie le répertoire où se trouvent les fichiers statiques tels que css, JavaScript et les fichiers imageInitialiser le poussoir. Les valeurs fournies ici proviendront des variables d'environnement. Nous les ajouterons plus tard, lorsque nous déploierons le serveur:
var pousseur = nouveau poussoir (appId: process.env.APP_ID, clé: process.env.APP_KEY, secret: process.env.APP_SECRET, cluster: process.env.APP_CLUSTER,);
Servez la page de suivi lors de l'accès à l'URL de base:
app.get ('/', fonction (req, res) res.sendFile (__ dirname + '/public/tracker.html'););Ensuite, créez la route pour répondre aux demandes adressées au noeud final d'authentification. Cela sera touché à chaque fois que l'application initialise la connexion à Pusher, ainsi que lorsque la page de suivi est consultée. Cela permet d'authentifier l'utilisateur afin qu'il puisse communiquer avec l'application Pusher directement à partir du côté client..
Notez que cela n'a pas vraiment de mesures de sécurité en place. Cela signifie que n'importe qui peut simplement demander à votre point final d'authentification s'il a accès à la clé de votre application Pusher. Dans une application de production, vous souhaitez une sécurité plus robuste!
app.post ('/ pusher / auth', fonction (req, res) var socketId = req.body.socket_id; var channel = req.body.channel_name; var auth = pusher.authenticate (socketId, channel); var app_key = req.body.app_key; var auth = pusher.authenticate (socketId, channel); res.send (auth););Enfin, faites en sorte que le serveur écoute le port spécifié dans les variables d’environnement. Par défaut, il s’agit du port 80, mais nous le configurons également comme valeur alternative au cas où il n’existerait pas:
var port = process.env.PORT || 80; app.listen (port);
La page de suivi affiche une carte qui est mise à jour chaque fois que le emplacement client événement est déclenché depuis l'application. N'oubliez pas de fournir votre clé API Google:
OCDMom Tracker
Ensuite, créez un public / js / tracker.js déposer et ajouter ce qui suit:
fonction getParameterByName (nom, URL) if (! url) url = window.location.href; name = name.replace (/ [\ [\]] / g, "\\ $ &"); var regex = new RegExp ("[? &]" + name + "(= ([^ & #] *) | & | # | $)"), results = regex.exec (url); si (! résultats) renvoie null; if (! results [2]) return "; return decodeURIComponent (résultats [2] .replace (/ \ + / g," "));La fonction ci-dessus extrait le paramètre de requête de l'URL. Le code unique (celui affiché dans l'application) doit être inclus en tant que paramètre de requête lors de l'accès à l'URL de base du serveur sur un navigateur. Cela nous permet de garder la trace de l'emplacement de l'utilisateur, car il nous abonnera au même canal que celui auquel l'application est abonnée..
Ensuite, initialisez Pusher. Le code est similaire au code du serveur précédemment. La seule différence est qu'il suffit de spécifier la clé d'application Pusher, le point de terminaison d'authentification et le cluster:
var pusher = new Pusher ('VOTRE CLÉ DE PUSHER APP', authEndpoint: 'VOTRE FIN DE PUSHER AUTH', cluster: 'VOTRE CLUSTER DE PUSHER', crypté: true);Vérifiez si le code est fourni en tant que paramètre de requête, et ne vous abonnez au canal Pusher que s'il est fourni:
var channel = null; if (getParameterByName ('code') == null) alert ('Assurez-vous que le code est fourni en tant que paramètre de requête, puis actualisez la page.'); else channel = pusher.subscribe ('private-current-location-' + getParameterByName ('code')); Ajoutez la fonction pour initialiser la carte. Cela affichera la carte avec un marqueur pointant sur l'emplacement par défaut que nous avons spécifié:
var map = null; marqueur var = null; function initMap () var myLatLng = // définit l'emplacement par défaut affiché sur la carte lat: -25.363, lng: 131.044; map = new google.maps.Map (document.getElementById ('map'), zoom: 16, center: myLatLng); marker = new google.maps.Marker (position: myLatLng, map: map); Se lier à la emplacement client un événement. La fonction de rappel est exécutée chaque fois que l'application déclenche une emplacement client event qui a le même code unique que celui que l'utilisateur a fourni en tant que paramètre de requête:
if (canal) canal.bind ('emplacement-client', fonction (données) console.log ('message reçu:', données); var position = new google.maps.LatLng (data.lat, data.lng ); // créer un nouvel objet de position sur les cartes Google // le définir comme position du marqueur et de la marque.setPosition (position); map.setCenter (position);); Ensuite, ajoutez les styles pour la page de suivi (public / css / style.css):
#map height: 100%; html, body height: 100%; marge: 0; rembourrage: 0;
Nous allons utiliser maintenant pour déployer le serveur. C'est gratuit pour les projets open-source.
Installer maintenant globalement:
npm installer maintenant
Une fois installé, vous pouvez maintenant ajouter les informations d'identification de l'application Pusher en tant que secrets. Comme mentionné précédemment, Now est gratuit pour les projets open source. Cela signifie qu’une fois le serveur déployé, son code source sera disponible sur le serveur. / _src chemin. Ce n'est pas vraiment bon car tout le monde peut également voir vos informations d'identification de l'application Pusher. Donc, ce que nous allons faire est de les ajouter en tant que secret afin qu'ils puissent être consultés en tant que variable d'environnement.
Se souvenir du process.env.APP_ID ou process.env.APP_KEY du code du serveur plus tôt? Ceux-ci sont définis en tant que variables d'environnement via des secrets. pusher_app_id est le nom attribué au secret, et VOTRE_PUSHER_APP_ID est l'identifiant de votre application Pusher. Exécutez les commandes suivantes pour ajouter vos informations d'identification de l'application Pusher en tant que secrets:
now secret add pusher_app_id YOUR_PUSHER_APP_ID now secret add pusher_app_key YOUR_PUSHER_APP_KEY maintenant secret add pusher_app_secret YOUR_PUSHER_APP_SECRET maintenant secret add pusher_app_cluster YOUR_PUSHER_APP_CLUSTER
Une fois que vous avez ajouté ceux-ci, vous pouvez maintenant déployer le serveur. APP_ID est le nom de la variable d'environnement, et pusher_app_id est le nom du secret auquel vous voulez accéder:
maintenant -e APP_ID = @ pusher_app_id -e APP_KEY = @ pusher_app_key -e APP_SECRET = @ pusher_app_secret APP_CLUSTER = @ pusher_app_cluster
Voici à quoi cela ressemble une fois le déploiement terminé. L'URL qu'il renvoie est l'URL de base du serveur:
Copier cette URL sur la App.js archivez et enregistrez les modifications:
this.pusher = nouveau pousseur ('VOTRE CLE APP PUSHER', authEndpoint: 'https: // URL DE BASE-DE-VOTRE SERVEUR / pousseur / auth', cluster: 'VOTRE CLUSTER APP PUSHER', chiffré: true )À ce stade, l'application devrait maintenant être entièrement fonctionnelle.
C'est tout! Dans cette série en deux parties, vous avez appris à détacher un projet d’expo existant dans ExpoKit. ExpoKit est un bon moyen d’utiliser certains des outils fournis par la plate-forme Expo lorsque votre application est déjà convertie en projet natif standard. Cela vous permet d’utiliser les modules natifs existants pour React Native et de créer vos propres.
Pendant que vous êtes ici, consultez certains de nos autres articles sur le développement d'applications React Native.!
