Aller au contenu principal

Installation des outils

Notions théoriques​

Présentation des 4 outils :

  • JavaScript est le langage de programmation le plus utilisé pour le développement Web. Il permet de rendre les pages Web interactives et est également utilisé pour le développement d'applications mobiles grâce à des frameworks comme React Native.

  • Node.js est un environnement d'exécution JavaScript qui permet d'exécuter du code JavaScript en dehors d'un navigateur Web.

  • Expo est un ensemble d'outils et de services construits autour de React Native qui permettent de développer, construire et déployer rapidement des applications iOS et Android. L'utilisation d'Expo simplifie le processus de développement en évitant la configuration complexe des environnements natifs.

Installation d'Expo​

Pour installer Expo, nous allons utiliser Node.js, donc Node.js doit être installé sur l'ordinateur.

astuce

Si vous avez besoin d'aide, vous pouvez consulter le tutoriel "Premiers pas avec Node.js".

Une fois Node.js installé, ouvrez le terminal (ou l'invite de commande) et exécutez la commande suivante pour installer Expo CLI, l'interface en ligne de commande d'Expo :

npm install -g expo-cli

Après l'installation, nous pouvons créer un nouveau projet Expo minimaliste avec la commande :

npx create-expo-app --template blank MonProjetFantastique

Commandes à connaître​

  • npm install -g <paquet> : Installe un paquet npm globalement sur votre machine.
  • npx create-expo-app --template blank <nom_du_projet> : Crée un nouveau projet Expo minimaliste.
  • expo start : Lance le serveur de développement et ouvre l'application Expo.
astuce

Plus d'infos sur le site d'Expo.

Test de mémorisation/compréhension​


Quel est l'avantage principal d'utiliser Expo dans le développement d'applications mobiles ?


Quel commande utilise-t-on pour créer un nouveau projet Expo minimaliste ?


Qu'est-ce que Node.js ?


Quelle commande permet de lancer le serveur de développement Expo ?


Quelle commande permet d'installer un package npm globalement ?


Quelle est la première étape avant d'installer Expo CLI ?


Quelle est la commande pour installer Expo CLI si Node.js est déjà installé ?


Quel est l'outil qui permet de rendre les pages Web interactives ?


Quel package est nécessaire pour corriger l'erreur `CommandError: It looks like you're trying to use web support...` ?


TP : Mise en place du projet "Pacman"​

  1. Installez Node.js sur votre ordinateur si ce n'est pas déjà fait.

  2. Ouvrez un terminal dans le dossier de vos Documents.

  3. Installez Expo CLI avec la commande npm install -g expo-cli :

  4. Créez un nouveau projet Expo minimaliste nommé "MonJeuPacman" en utilisant la commande npx create-expo-app --template blank MonJeuPacman :

  5. Tapez y pour lancer l'installation du package "create-expo-app" :

  6. Votre projet est désormais mis en place :

  7. Ensuite, il suffit d'entrer dans le dossier du projet avec la commande cd MonJeuPacman.

  8. Démarrez le serveur Web avec la commande npm run web.

    Si l'erreur CommandError: It looks like you're trying to use web support... s'affiche

    Veuillez installer les packages react-native-web, react-dom et @expo/metro-runtime avec la commande :

    • npx expo install react-native-web react-dom @expo/metro-runtime

    puis relancez la commande :

    • npm run web

  9. Si la page suivante ne s'est pas automatiquement affichée dans votre navigateur, veuillez ouvrir l'URL http://localhost:8081/ :

  10. Veuillez ouvrir le dossier MonJeuPacman avec Visual Studio Code, et, comme indiqué, ouvrez le fichier App.js pour commencer à travailler sur votre application :

  11. Vous pouvez consulter, dans Visual Studio Code, le code du programme principal de votre application, dans le fichier App.js :

    import { StatusBar } from 'expo-status-bar';
    import { StyleSheet, Text, View } from 'react-native';

    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    Quel est le rôle de flex: 1 dans la feuille de style StyleSheet ?

    Dans React Native, le système de layout est basé sur le modèle Flexbox, qui est également utilisé dans le développement web pour organiser les éléments à l'écran de manière prévisible et adaptable à différentes tailles d'écran.

    Lorsque vous définissez flex: 1 dans le style d'un composant, vous utilisez la propriété flex pour contrôler comment un composant doit se dimensionner et se répartir dans l'espace disponible.

    Voici ce que signifie flex: 1 dans le contexte du style que vous avez fourni :

    • Flex Container: Tout d'abord, pour que la propriété flex ait un effet, l'élément doit être un enfant direct d'un conteneur flexible (flex container). Dans React Native, tous les composants sont des flex containers par défaut, donc l'élément avec flex: 1 sera traité en tant qu'élément flexible.

    • Répartition de l'espace: Dans votre exemple, en donnant flex: 1 à la container, vous indiquez que le conteneur doit prendre tout l'espace disponible de son parent. Cela signifie que le conteneur va s'étendre en longueur et en largeur pour occuper tout l'espace de son conteneur parent, moins les marges, bordures, padding, et autres éléments frères non flexibles.

    • Alignement et Justification: Les propriétés alignItems et justifyContent sont utilisées en conjonction avec la propriété flex pour aligner et distribuer les enfants à l'intérieur du conteneur. alignItems: 'center' centre les enfants horizontalement dans le conteneur, et justifyContent: 'center' les centre verticalement.

  12. La mise en place des outils est terminée, nous allons maintenant Dessiner le labyrinthe de notre jeu de Pacman.