Cette article traitera de l’une des premières choses que l’on souhaite ajouter sur une application mobile: charger des données.

Pour mes applications mobiles, j’utilise quasiement toujours Firestore pour le stockage des données. C’est simple d’utilisation, et la faible utilisation que j’en fais est gratuite. Cela me permet ainsi de me pas me préoccuper du Back pour pouvoir lancer rapidement une application.

Création d’un projet Firestore

Pour créer son projet, il faut se rendre sur la console de Firebase: https://console.firebase.google.com/ et cliquer sur “créer un nouveau projet”.

Ensuite, il suffit de cliquer sur “continuer” pour chaque bouton. Et vous arriverez sur la page suivante:

Dans le menu de gauche, on clique sur “Database”, et depuis ce nouvel écran, on va pouvoir créer une nouvelle base de données “Cloud Firestore”.

On clique sur ‘Créer une base de données. Une nouvelle base de données va être créée.

On va créer une nouvelle collection en cliquant sur ‘Commencer une collection’. On choisi le nom de la collection. Ici j’ai écrit ‘test’ pour l’exemple, mais il faut l’appeler ‘todos’ car c’est le nom que nous utiliserons plus tard.

On peut ensuite créer un premier document pour cette collection. Dans ‘Champ’, on met le nom du champ, pour notre cas, on peut écrire ‘tache’ et dans la valeur ‘Faire la vaiselle’. On laisse l’id générée automatiquement. On clique ensuite sur ‘Enregistrer’.

On se retrouve à nouveau sur l’écran de gestion des données.

On revient maintenant au départ et on clique sur Vue d’ensemble du projet. Depuis cette page, clique sur l’icône </> qui va nous permettre de créer l’application au niveau de firebase et ainsi générer la configuration de notre application que nous utiliserons dans le code de l’application.

Ici on choisi le nom de l’application

Et on arrive enfin sur la page qui nous permet de récupérer la configuration de notre application.

Configuration de Firestore dans l’application

installation des dépendances

Afin de pouvoir utiliser Firestore dans l’appication, j’utilise un HOC. Cela va permettre de pouvoir faire appel aux fonctions Firebase dans tous nos composants.

La première chose à faire est d’installer le package Firebase dans notre projet.

npm install firebase

Création de la configuration

On va commencer par créer un nouveau répertoire qui contient un fichier avec les informations de connexion. J’ai l’habitude d’appeler le répertoire Firebase mais chacun peut faire comme il veut.

Dans ce répertoire, j’ajoute un fichier ‘config.js’ qui contient les informations que j’ai récupérée lors de l’initialisation de la création du projet sur le site Firebase (dernière image de la partie précédente)

export default {
    apiKey: "AIzaSyAYRiFZ3_cjhfL1TAqidHfRUTVPIdcewOk",
    authDomain: "blog-e5f3b.firebaseapp.com",
    databaseURL: "https://blog-e5f3b.firebaseio.com",
    projectId: "blog-e5f3b",
    storageBucket: "blog-e5f3b.appspot.com",
    messagingSenderId: "1077443551327",
    appId: "1:1077443953427:web:978e78b0b81fd1f8fr476a",
    measurementId: "G-V9XKOF47JY"
}

Définition des appels vers Firestore

On va ensuite créer un fichier qui va contenir les appels vers Firestore dans un fichier ‘firebase.js’

import * as firebase from 'firebase'
import 'firebase/firestore'

import firebaseConfig from './config'

firebase.initializeApp(firebaseConfig)

const db = firebase.firestore()

const Firebase = {
  todos: () => {
    return db.collection('todos')
  }
}

export default Firebase

Création du context

Afin de permettre d’accéder à notre base de données depuis l’ensemble de l’application, on va créer utiliser le principe des contextes.

On va créer un nouveau fichier (toujours dans le rpertoire Firebase) qui s’appelle ‘context.js’.

import React, { createContext, Component } from 'react'

const FirebaseContext = createContext({})

export const FirebaseProvider = FirebaseContext.Provider
export const FirebaseConsumer = FirebaseContext.Consumer

export const  firebaseHOC = Component => props => (
  <FirebaseConsumer>
    {state => <Component {...props} firbase={state} />}
  </FirebaseConsumer>
)

Dans ce fichier, on crée aussi notre HOC (High Order Component) qui nous permettra de l’utilise dans l’application.

Fichier d’export

Et enfin, on crée un dernier fichier ‘index.js’ qui nous permet d’exporter notre Provider et HOC pour l’utiliser depuis le reste de l’application

import Firebase from './firebase'
import { FirebaseProvider, firebaseHOC } from './context'

export default Firebase

export { FirebaseProvider, firebaseHOC }

Nous avons maintenant toutes les information nécessaires afin de pouvoir faire nos appels à la base de données

Utilisation du Provider et du HOC

Initialisation du provider

Pour utiliser le provider, on va se rendre sur la page ‘App.js’. On va importer les fichiers que nous avons créer précedement.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import Firebase, { FirebaseProvider } from './Firebase'
import Todos from './components/Todos';

export default function App() {
  return (
    <FirebaseProvider value={Firebase}>
      <View style={styles.container}>
        <Text style={{
          fontSize: 25,
          textAlign: 'center'
        }}>
          Tâches à traiter
        </Text>
      </View>
      <Todos />
    </FirebaseProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Chargement des données

Nous n’allons pas faire le chargement des infos directement dans la page App, nous allons donc devoir créer un nouveau fichier que nous allons appeler ‘Todos.js’. Cest dans celui ci que nous allons charger les informations de la collection ‘Todos’. Pour respecter l’organisation de l’espace de travail, on va le créer dans le répertoire ‘Components’.

C’est dans ce fichier que nous allons utiliser notre HOC pour pouvoir appeler la fonction de chargement des ‘tâches à traiter’.

Le chargement des infos se fait dans le useEffect afin de se lancer au chargement de la page. L’utilisation de ‘onSnapshot’ nous permet de nous abonner à la mise à jour de la collection. Ainsi, si la collection est mise à jour, la page affichera automatiquement les nouvelles informations.

import React, { useState, useEffect } from 'react'
import { View, Text } from 'react-native'
import { firebaseHOC } from '../Firebase'
import Todo from './Todo'

function Todos({ firebase }) {
    const [loading, setLoading] = useState(true)
    const [todos, setTodos] = useState([])

    useEffect(() => {
        const loadTodos = () => firebase.todos().onSnapshot(
            (query) => {
                const list = []
                query.forEach(doc => {
                    const { tache } = doc.data()
                    list.push({
                        id: doc.id,
                        tache
                    })
                })
                setTodos(list)
                setLoading(false)
            }
        )

        loadTodos()
    }, [])

    const renderTodos = () => {
        return todos.map(item =>
            <Todo todo={item.tache} key={item.id} />
        )
    }

    if (loading) {
        return null
    }

    return (
        <View>
            {renderTodos()}
        </View>
    )
}

export default firebaseHOC(Todos)

affichage des données

Il ne nous reste plus qu’à boucler sur le tableau pour afficher chacun des documents qui nous a été retourné.

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function Todo({ todo }) {

    return (
        <View>
            <Text style={{ padding: 5 }}>{todo}</Text>
        </View>
    )
}

Conclusion

L’application permettant d’afficher kes tâches à traiter est maintenant terminée. Elle nous sert ici uniquement d’exemple pour l’utilisation de Firestore. Elle est moche, elle ne permet pas de saisir de données. Mais j’espère que ce petit article vous aura permis de mieux comprendre la simplicité d’utilisation de Firestore.