Création d'une application web "Todo" avec React Native et Node

Cette application utilise React Native et Node pour implémenter une simple application mobile "Todo". Cette application s'appuie sur l'application React et Node abordée dans 11.3 Exemple d'application web adaptative avec Bootstrap/React et Node. Pour cette version de l'application, React Native sert de frontal, gérant l'interface utilisateur et obtenant et définissant les données via des requêtes HTTP. Node sert de dorsal, utilisant l'API construite avec le Django REST Framework dans 11.2 Exemple d'application web adaptative avec Bootstrap et Django.

Prérequis

Pour construire l'application mobile "Todo" à l'aide de React Native et Node, vous avez besoin de React Native v0.67, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9 et Axios v0.21.0. Cette application "Todo" fonctionnera à l'aide de l'émulateur Android et utilisera Android Studio v2021.1.1.

• Pour commencer, téléchargez et installez un émulateur pour la plateforme que vous avez choisie (iOS ou Android).
• Si vous prévoyez d'exécuter l'application native sur un appareil ou un émulateur iOS, téléchargez et installez Xcode (Xcode), qui est l'IDE d'Apple permettant le développement d'applications pour les plateformes Apple.
• Si vous prévoyez d'exécuter l'application native sur un appareil ou un émulateur Android, téléchargez et installez Android Studio, qui permet le développement d'applications pour les systèmes d'exploitation mobiles Android.
• Figure 11.38 montre comment configurer l'émulateur Android. Lancez Android Studio. Dans la navigation supérieure, sélectionnez Outils > Gestionnaire de périphériques. Cliquez sur Créer un appareil. Dans la fenêtre contextuelle Sélectionner le matériel, sélectionnez Pixel 5 et cliquez sur Suivant. Sur la page suivante, sélectionnez Télécharger Pie. Cliquez sur le lien Télécharger pour obtenir une image comme indiqué. Cliquez sur Suivant, puis sur Terminer.

Figure 11.38 Ceci montre comment configurer l'émulateur Android. (Android Studio est une marque déposée de Google LLC.)

Une fois l'image créée, elle apparaîtra dans le Gestionnaire de périphériques. Ensuite, cliquez sur le bouton Démarrer pour lancer l'émulateur. Lorsque l'émulateur est lancé, il s'allume, comme le montre la Figure 11.39.

Figure 11.39 Voici comment l'émulateur apparaîtra après son lancement. (Android Studio est une marque déposée de Google LLC.)

Création de l'application React Native

Après avoir lancé l'émulateur, créez l'application React Native en exécutant la commande suivante dans un répertoire extérieur et séparé du répertoire nodebackend/. Figure 11.40 montre les fichiers de l'application React Native dans le répertoire reactnativefrontend/.

$ npx react-native init reactnativefrontend

Figure 11.40 Lorsque l'application React Native est créée, elle génère les fichiers de l'application React Native dans le répertoire reactnativefrontend/. (rendu en React Native, sous licence MIT ; source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

Ensuite, naviguez dans le répertoire reactnativefrontend/ et lancez l'application React Native pour confirmer que l'application frontale React Native a été créée avec succès. À ce stade, l'application n'est pas connectée au dorsal Node et lancera le Metro bundler (Metro bundler), qui regroupe le code JavaScript déployé sur l'appareil mobile ou l'émulateur lorsque l'application frontale React Native est terminée avec succès. Une fois cela fait, exécutez la commande. Figure 11.41 montre la page dans le terminal.

$ npx react-native start

Figure 11.41 Cette page apparaîtra lorsque la commande react-native start sera exécutée. (source : React Native, sous licence MIT)

L'étape suivante consiste à ouvrir un autre terminal, à naviguer jusqu'au répertoire reactnativefrontend/ et à exécuter la commande suivante. Cela construira le code frontal et le déploiera sur l'émulateur, ce qui peut prendre quelques minutes.

$ npx react-native run-android

Lorsque l'application est construite avec succès, la Figure 11.42 montre ce qui devrait apparaître dans le second terminal.

Figure 11.42 Ce code devrait apparaître dans le second terminal lorsque l'application React Native est construite avec succès. (source : Copyright Rice University, OpenStax, sous licence CC BY 4.0)

Figure 11.43 montre comment l'application native devrait apparaître dans l'émulateur.

Figure 11.43 Une fois l'application React Native construite avec succès, voici comment l'application native devrait apparaître dans l'émulateur. (Android Studio est une marque déposée de Google LLC.)

Création des composants de l'application React Native

Les paquets utilisés par l'application React Native pour la navigation et d'autres fonctionnalités sont différents des paquets utilisés par React. Pour installer les paquets requis, dans le répertoire reactnativefrontend/, exécutez la liste de commandes suivante :

$ npm install @react-navigation/[email protected]
$ npm install @react-navigation/[email protected]
$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]

La première étape consiste à créer le composant Todo. Dans le répertoire reactnativefrontend/, créez le répertoire src/Screens/. Dans le répertoire src/Screens/, créez le fichier TodoList.js. Le code suivant montre les importations requises pour créer les composants d'écran.

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  FlatList,
  TouchableOpacity,
  Dimensions,
  StatusBar,
  Alert,
} from 'react-native';
import axios from 'axios';
import {COLORS} from '../utils/colors';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import Modal from 'react-native-modal';
import Snackbar from 'react-native-snackbar';
import {duration} from 'moment';

Une fois cela fait, le code suivant inclut la return() fonction qui rend les composants d'écran.

return (
  <View style={styles.container}>
    <StatusBar backgroundColor={COLORS.DARKALT} />
    <Text style={styles.heading}>Bienvenue dans l'application de liste de tâches Todo !</Text>
    <Text style={styles.heading}>Vos tâches</Text>

    {todos.length == 0 ? (
      <View style={styles.center}>
        <MaterialCommunityIcon
          name="note-multiple"
          size={90}
          color={COLORS.LIGHTALT}
        />
        <Text style={styles.noTasksText}>Aucune tâche ajoutée</Text>
      </View>
    ) : (
      <>
        <View style={styles.todosContainer}>
          <FlatList
            data={todos}
            renderItem={({item}) => (
              <View style={styles.todo}>
                <Text
                  style={item.complete ? styles.completedStyle : styles.text}>
                  {item.title}
                </Text>
                <TouchableOpacity
                  style={styles.deleteTodo}
                  onPress={() => deleteTodo(item._id)}>
                  <Text style={{color: COLORS.WHITE}}>X</Text>
                </TouchableOpacity>
              </View>
            )}
          />
        </View>

        <TouchableOpacity
          style={styles.addButton}
          onPress={() => {
            setModalActive(true);
          }}>
          <MaterialIcon name="add" size={32} color={COLORS.LIGHT} />
        </TouchableOpacity>
      </>
    )}

    <Modal
      isVisible={modalActive}
      animationIn={'slideInUp'}
      animationOut={'slideInDown'}>
      <View style={styles.modalView}>
        <TouchableOpacity
          style={styles.modalCloseBtn}
          onPress={() => setModalActive(false)}>
          <Text style={styles.modalCloseBtnText}>X</Text>
        </TouchableOpacity>
        <Text style={styles.addTaskHeading}>Ajouter une tâche</Text>
        <TextInput
          style={styles.taskInput}
          placeholder="Entrez la tâche ici.."
          onChangeText={text => setNewTodo(text)}
          value={newTodo}
        />
        <TouchableOpacity style={styles.createBtn} onPress={() => addTodo()}>
          <Text style={styles.createBtnText}>Créer une tâche</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  </View>
);

Le code suivant crée l'écran contextuel modal utilisé pour créer une liste de tâches "Todo".

<Modal 
  isVisible={modalActive}
  animationIn={'slideInUp'}
  animationOut={'slideInDown'}>
  <View style={styles.modalView}>
    <TouchableOpacity
      style={styles.modalCloseBtn}
      onPress={() => setModalActive(false)}>
      <Text style={styles.modalCloseBtnText}>X</Text>
    </TouchableOpacity>
    <Text style={styles.addTaskHeading}>Ajouter une tâche</Text>
    <TextInput
      style={styles.taskInput}
      placeholder="Entrez la tâche ici.."
      onChangeText={text => setNewTodo(text)}
      value={newTodo}
    />
   <TouchableOpacity style={styles.createBtn} onPress={() => addTodo()}>
      <Text style={styles.createBtnText}>Créer une tâche</Text>
    </TouchableOpacity>
  </View>
</Modal>

Ensuite, mettez à jour le fichier reactnativefrontend/App.js, comme indiqué dans le code suivant, pour rendre les composants d'écran déclarés dans le fichier TodoList.js.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import TodoList from './src/Screens/TodoList';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="TodoList"
          component={TodoList}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default App;

Une fois cela fait, relancez le Metro bundler et déployez l'application native en exécutant les commandes suivantes :

$ npx react-native start
$ npx react-native run-android

Ensuite, créez un élément Todo (Figure 11.44).

Figure 11.44 Après avoir relancé le Metro bundler et déployé l'application native, cet écran permet aux utilisateurs de créer un élément Todo. (Android Studio est une marque déposée de Google LLC.)

Une fois l'élément Todo créé, il devrait apparaître sur l'écran principal comme le montre la Figure 11.45.

Figure 11.45 Voici comment l'élément Todo devrait apparaître sur l'écran principal. (Android Studio est une marque déposée de Google LLC.)

Connexion de l'application native frontale à l'application Node (Node) dorsale

L'étape suivante consiste à connecter l'application frontale React Native à l'application dorsale Node. Pour ce faire, ouvrez reactnativefrontend/src/Screens/Todolist.js. Ajoutez la variable API_BASE et configurez l'adresse IP de l'ordinateur local, exécutant le serveur web (web server) Express, comme indiqué dans le code suivant.

import axios from 'axios';
import {COLORS} from '../utils/colors';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import Modal from 'react-native-modal';
import Snackbar from 'react-native-snackbar';
import {duration} from 'moment';

const width = Dimensions.get('window').width;

const API_BASE = 'http://192.168.1.183:8080';

Ensuite, ajoutez les appels Axios pour interagir avec l'API REST fournie via le serveur web Express afin d'interagir avec la base de données MongoDB.

const [todos, setTodos] = useState([]);
  const [modalActive, setModalActive] = useState(false);
  const [newTodo, setNewTodo] = useState('');

  useEffect(() => {
    GetTodos();
  }, [todos]);

  const GetTodos = () => {
    axios
      .get(`${API_BASE}/api/todos`)
      .then(response => {
        setTodos(response.data);
      })
      .catch(err => {
        console.error('Error: ', err);
        Snackbar.show({
          text: '' + err,
          duration: Snackbar.LENGTH_LONG,
          backgroundColor: 'red',
          textColor: COLORS.WHITE,
        });
      });
  };

  const completeTodo = async id => {
    const data = await axios.put(`${API_BASE}/api/todos/${id}`);

    setTodos(todos =>
      todos.map(todo => {
        if (todo._id === data._id) {
          todo.complete = data.complete;
        }

        return todo;
      }),
    );
  };

  const deleteTodo = async id => {
    const data = await axios.delete(`${API_BASE}/api/todos/${id}`);

    setTodos(todos => todos.filter(todo => todo._id !== data._id));
  };

  const addTodo = async () => {
    if (newTodo == '') {
      Alert.alert('Error!', 'Please enter a task first!');
      return;
    } else {
      await axios
        .post(`${API_BASE}/todo/new`, {
          text: newTodo,
        })
        .then(function (response) {
          const data = response.data;
          setTodos([...todos, data]);
          setModalActive(false);
          setNewTodo('');
        })
        .catch(function (error) {
          console.log('Erreur : ', error);
        });
    }
  };