Comment créer une application mobile dans Expo et Firebase (pour iOS et Android)

Dans cet article, nous allons avoir une idée de la façon de développer une application pour Android et iOS en utilisant Expo et Firebase, basée sur ma propre expérience de création d’une application avec ces technologies. Si vous n’avez jamais travaillé avec Firebase auparavant, veuillez consulter son guide des projets JavaScript avant de plonger.

Si vous êtes nouveau sur JavaScript, assurez-vous que vous êtes clair sur les bases d’ECMAScript 6 fonctionnalités, telles que l’importation de classe et les fonctions fléchées. Vous pouvez apprendre React Native à partir de la documentation officielle qui contient une section sur les principes fondamentaux de React au cas où vous n’auriez pas travaillé avec React. Ne vous inquiétez pas de la façon de créer une application avec Android Studio ou Xcode, car nous utiliserons le cadre Expo .

Lecture recommandée sur SmashingMag:

Brève description du projet [19659002] Nous pouvons décrire notre projet comme un transporteur à la demande – vous pourriez dire Uber pour le transport de marchandises. L’utilisateur choisira les informations de transport, telles que le type de véhicule et les emplacements de chargement et de déchargement, puis les véhicules de transport à proximité apparaîtront sur la carte. L’utilisateur confirme sa demande et les conducteurs reçoivent les notifications une par une. La notification de chaque conducteur est active pendant 25 secondes. S’ils ignorent ou refusent la demande, le système sélectionne un autre pilote, etc. Lorsqu’un conducteur accepte la demande, l’utilisateur peut surveiller l’ensemble du processus de transport sur la carte, y compris via l’application Web.

Installation et configuration d’Expo

Tout d’abord, nous devons installer l’interface de ligne de commande (CLI) pour Expo , qui nous aidera à tester l’application dans un simulateur ou sur des appareils réels et à construire notre application dans le cloud.

 npm install -g expo-cli 

Créons notre projet Expo.

 expo init [19659013] La partie intéressante est que toutes les configurations de votre application peuvent être effectuées dans un seul fichier JSON,  app.json . Voici quelques conseils que j'ai appris qui pourraient augmenter vos chances d'être acceptés dans l'App Store et Google Play et pour vous aider à éviter certains problèmes courants.

• Si vous utilisez Google Maps dans votre application, assurez-vous de fournir l’API dans le fichier de configuration app.json afin de le faire fonctionner correctement. Google ne vous facturera pas le rendu de carte natif à moins que vous ne rendiez un itinéraire ou que vous n’utilisiez d’autres services d’API payants.

   ...
  "ios": {
      ...
      "config": {
          "googleMapsApiKey": "YOUR_API_KEY"
      }
  },
  "Android": {
      ...
      "config": {
         "Google Maps": {
            "apiKey": "YOUR_API_KEY"
         }
      }
  } 

• Pour effectuer des mises à jour d’emplacement ou toute autre tâche en arrière-plan, travailler en arrière-plan dans iOS, ajoutez les clés suivantes sous ios.infoPlist :

   ...
  "ios": {
      ...
      "infoPlist": {
          ...
          "UIBackgroundModes": [
            "location",
            "fetch"
          ]
      }
  } 

• Si vous ne définissez pas les autorisations que votre application utilisera, l’application générée par Expo utilisera par défaut toutes les autorisations disponibles. Par conséquent, Google Play rejettera votre application. Donc, spécifiez vos autorisations requises.

   ...
  "Android": {
      ...
      "autorisations": [...],
   } 

• Apple vous demande de fournir un message expliquant à l’utilisateur pourquoi l’application demande cet accès, sinon vous serez rejeté.

   ...
  "ios": {
      ...
      "infoPlist": {
          ...
          "NSCameraUsageDescription": "Pourquoi demandez-vous l'accès à la caméra de l'appareil?",
          "NSLocationWhenInUseUsageDescription": "Pourquoi demandez-vous l'accès à la caméra de l'appareil?"
        }
  } 

• Assurez-vous d’incrémenter la clé android.versionCode avant de publier une nouvelle version sur Google Play.
• Toutes les mises à jour peuvent être effectuées avec Expo par liaison radio, sans passer par Google Play ou le App Store, sauf si vous apportez les modifications suivantes:
  • mettez à niveau la version d’Expo SDK;
  • modifiez quoi que ce soit sous ios android ou notification touches;
  • modifiez les éclaboussures de l’application ;
  • modifiez l’icône de l’application ;
  • modifiez le nom de l’application ;
  • modifiez les paramètres de l’application propriétaire ;
  • modifiez le schéma de l’application ;
  • modifiez facebookScheme ;
  • modifiez vos actifs groupés sous assetBundlePatterns
• Je préfère ne pas interpréter l’expérience utilisateur en définissant fallbackToCacheTimeout sur 0 sous la touche met à jour . Cela permettra à votre application de démarrer immédiatement avec un ensemble mis en cache, tout en téléchargeant un plus récent en arrière-plan pour une utilisation future.

Et voici un exemple complet de la configuration dans app.json :

 {
  "expo": {
    "nom": "Transportili",
    "slug": "transportili",
    "schéma": "transportili",
    "vie privée": "public",
    "sdkVersion": "36.0.0",
    "notification": {
      "icon": "./assets/notification-icon.png",
      "androidMode": "par défaut"
    },
    "plates-formes": [
      "ios",
      "android",
      "web"
    ],
    "version": "0.3.2",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "éclaboussure": {
      "image": "./assets/splash.png",
      "resizeMode": "contient",
      "backgroundColor": "#ffffff"
    },
    "mises à jour": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.transportili.driver",
      "supportsTablet": faux,
      "infoPlist": {
        "UIBackgroundModes": [
          "location",
          "fetch"
        ],
        "LSApplicationQueriesSchemes": [
          "transportili"
        ],
        "NSCameraUsageDescription": "L’application utilise l’appareil photo pour prendre une photo ou numériser vos documents.",
        "NSLocationWhenInUseUsageDescription": "L’application utilise votre position pour aider les chauffeurs ou les transporteurs à vous trouver sur la carte."
      },
      "config": {
        "googleMapsApiKey": "AIzaSyA8Wcik6dTuxBKolLSm5ONBvXNz8Z0T-6c"
      }
    },
    "Android": {
      "googleServicesFile": "./google-services.json",
      "package": "com.transportili.driver",
      "versionCode": 6,
      "autorisations": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION"
      ],
      "config": {
        "Google Maps": {
          "apiKey": "AIzaSyA8Wcik6dTuxBKolLSm5ONBvXNz8Z0T-6c"
        }
      }
    },
    "la description": "",
    "githubUrl": "https://github.com/chafikgharbi/transportili-native.git"
  }
} 

Passons à l’installation de Firebase, en utilisant la commande suivante:

 expo install firebase 

Je préfère créer un fichier firebase.js dans le dossier racine de l’application qui contient toutes les configurations Firebase. Dans ce cas, j’utilise uniquement les services Firestore et Storage.

 const firebaseConfig = {
    apiKey: "api-key",
    authDomain: "project-id.firebaseapp.com",
    databaseURL: "https://project-id.firebaseio.com",
    projectId: "project-id",
    storageBucket: "project-id.appspot.com",
    messagingSenderId: "sender-id",
    appId: "app-id",
    mesureId: "G-mesure-id"
}; 

Maintenant, chaque fois que nous voulons utiliser Firebase, nous importons simplement ce fichier, comme suit:

 import {firebase, firestore, storage} from "./firebase";;19659013 diplomatedThe documentation has une explication plus détaillée de  utilisant Firebase avec Expo .

La base de données de l’application

Vous pouvez stocker vos données directement dans le cloud à l’aide de Firebase, qui propose deux types de bases de données. L’une est la base de données en temps réel et l’autre est Firestore, qui est considérée comme la version améliorée de la base de données en temps réel, avec des fonctionnalités plus avancées. Les deux sont des bases de données NoSQL avec écouteurs de synchronisation des données et de changements instantanés. Ils ont différents mécanismes: la base de données en temps réel stocke les données en tant qu’objet JSON, tandis que Firestore stocke les données en tant que documents dans des collections. Ils calculent également l’utilisation et le coût différemment: le premier est basé sur la quantité de données échangées et le second est basé sur le nombre d’opérations dans les documents (lectures, écritures et suppressions).

Dans mon cas, j’ai utilisé la base de données Firestore pour stocker les utilisateurs, les demandes, les véhicules et d’autres données d’application. (J’essayais d’être intelligent en mettant toutes mes données dans un document pour réduire l’utilisation des opérations, mais j’ai découvert que chaque document ne pouvait stocker que 1 Mo.)

En plus de stocker des chaînes, des nombres, des objets, etc. dans Firebase, vous pouvez également stocker un geoPoint, qui est un objet qui contient les coordonnées des points géographiques (latitude et longitude). Malgré cela, malheureusement, vous ne pouvez pas effectuer de requêtes géographiques, telles que la récupération d’utilisateurs à proximité.

Pour ce faire, nous pouvons utiliser GeoFirestore. Mais nous devons tenir compte du fait que ce package restreint la structure du document de l’utilisateur à ceci:

 Utilisateur: {
d: {toutes les données utilisateur ici}
g: (emplacement geohash)
l: {premier emplacement géopoint}
} 

Donc, si vous allez l’implémenter directement dans votre collection d’utilisateurs, comme je l’ai fait, vous devrez mettre toutes les données de l’utilisateur dans la clé d .

Enfin, n’oubliez pas d’optimiser votre code pour éviter des opérations inattendues:

• Utilisez la persistance hors ligne. Sur le Web, la persistance hors ligne est désactivée; assurez-vous de l’activer.
• Utilisez la pagination du curseur dans les requêtes Firestore. N’obtenez pas toutes les données en même temps.
• Désabonnez toujours les écouteurs, une fois terminés, ou les composants non montés.

Le back-end de l’application

Vous pouvez gérer la base de données Firestore, envoyer des notifications avec Expo et effectuer certaines opérations directement depuis le frontend ou l’application mobile, mais il y a d’autres opérations que nous ne pouvons pas faire sans backend et serveur. C’est pourquoi Firebase propose des fonctions – un back-end cloud qui vous permet d’exécuter du code Node.js sur un serveur évolutif. J’ai utilisé les fonctions Firebase pour les éléments suivants:

• Envoyer des notifications (voir l’exemple ci-dessous)
  Pour envoyer des notifications, nous utiliserons les notifications push, un outil qui aide le propriétaire d’une application à envoyer des messages à ses utilisateurs. Il apparaît dans la section des notifications de l’appareil, même si l’application n’est pas active. Nous ne voulons pas que ce processus soit interrompu par une interruption soudaine de la connectivité, nous devrons donc utiliser un serveur.
• Exécuter des tâches cron
  L’utilisation des tâches cron m’aide à gérer les demandes et notifications planifiées .
• Désinfection de la base de données
  Cela inclut la suppression des demandes inutiles et ignorées.
• Exécution de tâches sensibles, coûteuses ou continues
  Cela inclut l’enregistrement, la récupération des utilisateurs et la planification des commandes. Ce sont toutes des opérations sensibles. Si vous les créez directement à partir de votre application ou de votre frontal, il y a un risque de vulnérabilité de sécurité et de tâches interrompues.

L’article de Joaquin Cid « Comment créer une API basée sur les rôles avec l’authentification Firebase » donnera vous explique comment démarrer avec les fonctions Firebase et comment créer une API principale à l’aide d’Express. Il utilise TypeScript, mais la conversion de TypeScript en JavaScript n’est pas difficile.

Notifications push

Expo envoie une notification au périphérique de l’utilisateur à partir de ses serveurs. Il identifie l’appareil de l’utilisateur avec un jeton. Lorsque quelqu’un utilise l’application, l’application exécute du code pour obtenir le jeton de l’appareil, puis stocke ce jeton sur le serveur. J’ai utilisé Firestore comme d’habitude pour stocker le jeton et comparer les jetons entrants pour vérifier si l’utilisateur s’est connecté à partir d’un autre appareil.

Nous obtenons notre jeton en utilisant la fonction suivante:

 token = attendent Notifications.getExpoPushTokenAsync (); 

N’oubliez pas de demander la permission de pousser les notifications . La documentation a un exemple d’utilisation .

Chaque fois que vous voulez envoyer une notification à cet utilisateur, vous feriez une demande au serveur d’Expo, qui contient le jeton d’appareil de l’utilisateur déjà stocké sur votre serveur.

 curl -H "Content-Type: application / json" -X POST "https://exp.host/--/api/v2/push/send" -d '{"to": " ExponentPushToken [xxxxxxxxxxxxxxxxxxxxxx] "," title ":" hello "," body ":" world "} '

Voici un exemple simple qui envoie des notifications à tous les utilisateurs utilisant les fonctions Firebase. Cet exemple n’est pas sécurisé. Si vous souhaitez implémenter l’autorisation et l’authentification, veuillez suivre l’article de Cid mentionné ci-dessus.

Après avoir initialisé notre projet à l’aide de la CLI Firebase installons le framework Express pour gérer notre API.

 npm install express 

Nous devons prendre en charge CORS et ajouter un middleware analyseur de corps JSON. De cette façon, nous pouvons effectuer des requêtes à partir de n’importe quelle URL et analyser les requêtes au format JSON.

 npm install --save cors body-parser
npm install --save-dev @ types / cors 

Il s’agit du fichier principal index.js de notre répertoire

 de fonctions

:

 const express = besoin ("express");
const cors = require ("cors");
const bodyParser = require ("body-parser");
const admin = require ("firebase-admin");
fonctions const = require ("firebase-functions");

// Initialise le module SDK admin de firebase
admin.initializeApp (functions.config (). firebase);

// Définir l'application Express
const app = express ();
app.use (bodyParser.json ());
app.use (cors ({origin: true}));

// Gérer la demande de notifications push
app.post ("/ pushNotifications", require ("./ controllers / pushNotifications"));

// Gérer une autre demande
// app.post ("/ anotherRoute", require ("./ controllers / anotherController"));

// Exporte l'API de point de terminaison https gérée par l'application Express
export const api = functions.https.onRequest (app);