Browse Source

Updated install instructions without Expo

Arnaud Vergnet 1 year ago
parent
commit
cad2c3e81c
2 changed files with 55 additions and 80 deletions
  1. 48
    75
      INSTALL.md
  2. 7
    5
      README.md

+ 48
- 75
INSTALL.md View File

@@ -1,22 +1,19 @@
1 1
 # Installer l'application depuis ce dépot
2 2
 
3
-**Vous allez devoir installer git, node et npm sur votre machine, puis cloner ce dépot.**
3
+**Vous allez devoir installer git, node et npm sur votre machine, puis cloner ce dépôt.**
4
+
5
+Tout est expliqué dans ce guide, si vous avez un problème ou une question, merci de me contacter par mail : app@amicale-insat.fr
4 6
 
5 7
 ## Table des matières
6 8
 * [Installation de Git](#installation-de-git)
7 9
 * [Installation de node](#installation-de-node)
8
-* [Installation de expo-cli](#installation-de-expo-cli)
10
+* [Installation de  React Native](#installation-de-react-native)
9 11
     * [Configuration de NPM](#configuration-de-npm)
10 12
     * [Installation](#installation)
11 13
 * [Téléchargement du dépot](#téléchargement-du-dépot)
12 14
 * [Téléchargement des dépendances](#téléchargement-des-dépendances)
13 15
 * [Lancement de l'appli](#lancement-de-lappli)
14
-    * [En console](#en-console)
15
-    * [Directement avec PHPStorm](#directement-avec-phpstorm)
16 16
 * [Tester sur un appareil](#tester-sur-un-appareil)
17
-    * [Émulateur android](#émulateur-android)
18
-    * [Appareil Physique](#appareil-physique)
19
-* [Compilation](#compilation)
20 17
 
21 18
 ## Installation de Git
22 19
 
@@ -40,111 +37,87 @@ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
40 37
 sudo apt-get install -y nodejs
41 38
 ```
42 39
 
43
-## Installation de expo-cli
44
-
45
-### Configuration de NPM
46
-Il est nécessaire d'installer le paquet npm expo-cli de manière globale au système. Il est faut donc avoir les droits root pour l'installer. Une manière de contourner cette limitation est de changer le répertoire utilisé par npm pour les paquet globaux. Pour cela, procédez comme suit :
47
-
48
-Créez un dossier pour les paquets globaux  :
49
-```shell script
50
-mkdir ~/.npm-global
51
-```
52
-Configurez npm pour qu'il utilise ce nouveau dossier :
53
-```shell script
54
-npm config set prefix '~/.npm-global'
55
-```
56
-Ouvrez le fichier .profile dans votre dossier home (ou créez le si il n'existe pas) et ajoutez ces lignes à la fin pour ajouter les paquets globaux à votre PATH.
57
-```shell script
58
-NPM_STORE="${HOME}/.npm-global"
59
-PATH="$PATH:$NPM_STORE/bin"
60
-```
61
-Il est possible d'ajouter ces lignes dans le .bashrc a la place du .profile si vous n'utilisez expo qu'en console. Mais pour pouvoir l'utiliser depuis PhpStorm, il est necessaire de mettre à jour le PATH globalement avec le .profile et pas seulement pour les terminaux avec le .bashrc.
62
-
63
-Redémarrez votre système (ou simplement logout/login) pour appliquer ces changements.
64
-
65
-### Installation
66
-
67
-Vous pouvez maintenant installer expo-cli sans problèmes avec la commande suivante :
40
+## Installation de React Native
68 41
 
69
-```shell script
70
-npm install -g expo-cli
71
-```
42
+Merci de suivre les [instructions d'installation](https://reactnative.dev/docs/environment-setup) sur le site officiel.
72 43
 
73
-## Téléchargement du dépot
44
+## Téléchargement du dépôt
74 45
 
75
-Clonez ce dépot à l'aide de la commande suivante :
46
+Clonez ce dépôt à l'aide de la commande suivante :
76 47
 ````shell script
77 48
 git clone https://git.etud.insa-toulouse.fr/vergnet/application-amicale.git
78 49
 ````
79 50
 
80 51
 ## Téléchargement des dépendances
81 52
 
82
-Une fois le dépot sur votre machine, ouvrez le projet dans PHPStorm, ouvrez le terminal et tapez : 
53
+Une fois le dépôt sur votre machine, ouvrez le terminal dans le dossier du dépôt cloné et tapez : 
83 54
 ````shell script
84 55
 npm install
85 56
 ````
86 57
 Ceci installera toutes les dépendances listées dans le fichier _package.json_. Cette opération peut prendre quelques minutes et utilisera beaucoup d'espace disque (plus de 300Mo).
87 58
 
88
-## Lancement de l'appli
59
+### Instructions pour iOS
89 60
 
90
-Il est conseillé d'utiliser un logiciel comme **PHPStorm** (logiciel pro gratuit pour les étudiants) pour éditer l'application car ce logiciel est compatible avec les technologies utilisées.
61
+Pour iOS, en plus de la commande précédente, il faut aussi installer les dépendances iOS. Pour cela, allez dans le dossier `ios` et installez les pods :
62
+```shell script
63
+cd ios && pod install
64
+```
91 65
 
92
-### En console
66
+## Lancement de l'appli
93 67
 
94
-Ouvrez simplement une console dans le répertoire du projet et tapez :
68
+Il est conseillé d'utiliser un logiciel comme **WebStorm** (logiciel pro gratuit pour les étudiants) pour éditer l'application car ce logiciel est compatible avec les technologies utilisées.
95 69
 
70
+Vous aurez besoin de 2 consoles :
71
+* Une pour lancer le *Bundler*, qui permet de mettre à jour l'application en temps réel (vous pouvez le laisser tout le temps ouvert).
72
+* Une autre pour installer l'application sur votre appareil/simulateur.
73
+
74
+Pour lancer le *Bundler*, assurez vous d'être dans le dossier de l'application, et lancez cette commande :
75
+````shell script
76
+npx react-native start
96 77
 ````
97
-expo start
78
+
79
+### Android
80
+Dans la deuxième console, lancez la commande suivante :
81
+````shell script
82
+npx react-native run-android
98 83
 ````
99 84
 
100
-Cette commande va démarrer le Metro Bundler permettant de lancer l'appli. Attendez quelques instants, quand un QR code apparait, l'application est prête à être lancée sur votre téléphone.
85
+### iOS
86
+Dans la deuxième console, lancez la commande suivante (valable que sur Mac) :
87
+````shell script
88
+npx react-native run-ios
89
+````
101 90
 
102 91
 **Ne stoppez pas le Metro Bundler dans la console à chaque changement !** Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer pour des petits changements ! Il est seulement nécessaire de redémarrer le Metro Bundler quand vous changez des librairies ou des fichiers.
103 92
 
104
-### Directement avec PHPStorm
105
-
106
-Si vous n'aimez pas la console et voulez utiliser le merveilleux bouton play de PHPStorm, il faut le paramétrer. Nous utilisons ici expo, il faut donc dire à PHPStorm de lancer une commande expo quand nous cliquons sur le bouton play.
107
-
108
-Pour cela, cliquez sur **Edit Configurations** en haut à droite, dans la nouvelle fenêtre, cliquez sur **+**, et choisissez **React Native**.
109
-
110
-Donnez un petit nom à cette configuration, décochez **Build and launch application** (nous utilisons expo pour ça, pas react native), mettez `127.0.0.1` dans le champ **Bundler Host**, et `19001` dans **Bundler Port**.
111
-
112
-Ensuite, dans **Before Launch**; cliquez sur **+** pour ajouter une nouvelle configuration, et choisissez **Start React Native Bundler** si il n'est pas déjà présent. Une fois ajouté, cliquez dessus, puis sur le bouton éditer (une icone de crayon). Dans la nouvelle fenetre, choisissez **npm script** dans le champ **Command** et **start** dans **Script**. Vérifiez que vous utilisez bien l'interpreteur Node associé au projet (pour utiliser les bonnes dépendances installées précédement), et cliquez sur OK.
113
-
114
-[Plus d'informations ici](https://www.jetbrains.com/help/phpstorm/react-native.html)
115
-
116
-Le projet est maintenant pret, quand vous cliquez sur run (ou shift+F10), le projet sera lancé (cela peut prendre plusieurs minutes).
117
-Quand un QR code apparait, vous pouvez tester sur un appareil.
118
-
119
-**Ne stoppez pas le Metro Bundler dans la console a chaque changement !** Toutes les modifications sont appliquées automatiquement, pas besoin de stopper et de redémarrer pour des petits changements ! Il est seulement nécessaire de redémarrer le Metro Bundler quand vous changez des librairies ou des fichiers.
120
-
121 93
 ## Tester sur un appareil
122 94
 
123 95
 Assurez vous d'avoir installé et lancé le projet comme expliqué plus haut.
124 96
 
125
-### Émulateur android
97
+### Android
98
+
99
+#### Émulateur
126 100
 
127 101
 [Suivez la procédure sur ce lien pour installer un émulateur](https://docs.expo.io/versions/latest/workflow/android-studio-emulator/).
128
-expo start
129
-Une fois l'emulateur installé et démarré, lancez le projet, puis appuyez sur la touche **a** dans la console, cela lancera l'aplication dans l'émulateur.
130 102
 
131
-### Appareil Physique
103
+Une fois l'emulateur installé et démarré, lancez l'application comme expliqué plus haut.
132 104
 
133
-Installez l'application **Expo** sur votre appareil (android ou iOS), assurez vous d'avoir démarré le projet et d'avoir votre machine de développement et le téléphone sur le même réseau wifi (non publique). Ouvrez l'application expo, Votre projet devrait apparaitre dans la liste. Cliquez dessus et c'est bon !
105
+#### Appareil Physique
134 106
 
135
-Si vous utilisez le réseau Wifirst des résidences INSA (ou tout autre wifi publique), il y a une méthode très simple pour créer un réseau privé entre votre PC et votre téléphone (en tout cas avec un téléphone android). Connectez votre téléphone en Wifi au réseau, puis connectez le en USB à votre PC. Une fois connecté, allez dans les paramètres et activez le "USB Tethering". Votre PC est maintenant connecté en réseau filaire à votre téléphone, qui lui est connecté à Internet par la wifi. Si vous voulez connecter d'autres appareils, il suffit de créer un Hotspot sur votre PC et de connecter vos autres appareils à ce Hotspot. Profitez de votre réseau privé dans votre Promolo !
107
+Branchez votre appareil, allez dans les options développeurs et activer le *USB Debugging*. Une fois qu'il est activé et branché, lancez l'appli comme expliqué plus haut. 
136 108
 
137
-## Compilation
109
+### iOS
138 110
 
139
-Avant de compiler, créez vous un compte Expo. Ensuite, lancez le Metro Bundler et connectez vous a votre compte dans la console (les touches sont indiquées).
111
+#### Émulateur
140 112
 
141
-Pour compiler sur android, vous avez deux solutions:
142
- - Vous voulez générer un `.apk` pour pour l'installer sur votre téléphone, lancez cette commande dans un terminal dans le projet : `expo build:android`. Cette commande va générer les paquets nécessaires à Expo et les envoyer sur leurs serveurs. Ne touchez à rien pendant la création des paquets (cela peut prendre une à deux minutes). Une fois que vous voyez écrit `Build in progress...`, vous pouvez fermer votre console : les serveurs ont pris la main et vous avez un lien pour analyser la progression. Ce processus dure en général 8 minutes. Si vous ne fermez pas la console, vous aurez un lien direct pour télécharger le fichier `.apk`, sinon connectez vous sur votre compte Expo, rubrique Builds pour le télécharger.
143
- 
144
- - Vous voulez compiler pour ensuite publier sur le Play Store, lancez cette commande dans un terminal dans le projet : `expo build:android -t app-bundle`. Cette commande fait exactement la même chose que la précédente à une chose près. Vous obtiendre un fichier `.aab`, qui est un format optimisé pour le Play Store. Ce fichier est plus volumineux mais permet au Play Store de générer les apk les plus optimisés possible pour différentes architectures de téléphone.
145
- 
113
+Installez le logiciel Xcode et téléchargez l'émulateur de votre choix. Ensuite, lancez la commande suivante pour lancer l'application sur votre émulateur.
114
+````shell script
115
+npx react-native run-ios --simulator="NOM DU SIMULATEUR"
116
+````
117
+En remplaçant `NOM DU SIMULATEUR` par le simulateur que vous voulez.
146 118
 
147
-Pou compiler sur iOS, vous aurez besoin du compte développeur de l'amicale car un tel compte est payant.
119
+#### Appareil Physique
148 120
 
121
+Aucune idée je suis pauvre je n'ai pas de Mac.
149 122
 
150 123
 [reference]: ##Installation de Git

+ 7
- 5
README.md View File

@@ -10,20 +10,22 @@ Créée pendant l'été 2019, cette application compatible Android et iOS permet
10 10
  - Disponibilité des salles libre accès
11 11
  - Réservation des Bib'Box
12 12
  
13
-Ce dépot contient la source de cette application, modifiable par les étudiants de l'INSA Toulouse, sous licence GPLv3.
13
+Ce dépot contient la source de cette application, sous licence GPLv3.
14 14
 
15 15
 ## Contribuer
16 16
 
17 17
 Vous voulez influencer le développement ? C'est très simple !
18 18
 
19
-Pas besoin de connaissance, il est possible d'aider simplement en proposant des améliorations ou en rapportant des bugs par mail (vergnet@etud.insa-toulouse.fr) ou sur [cette page](https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues), en vous connectant avec vos login INSA.
19
+Pas besoin de connaissance, il est possible d'aider simplement en proposant des améliorations ou en rapportant des bugs par mail ([app@amicale-insat.fr](mailto:app@amicale-insat.fr)) ou sur [cette page](https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues), en vous connectant avec vos login INSA.
20 20
 
21
-Si vous avez assez de connaissances et vous souhaitez proposer des modification dans le code, installez l'application sur votre machine, réalisez votre modification et créez une 'pull request'.
21
+Si vous avez assez de connaissances et vous souhaitez proposer des modifications dans le code, [installez l'application](INSTALL.md) sur votre machine, réalisez votre modification et créez une 'pull request'. Si vous avez des problèmes ou des questions, n'hésitez pas à me contacter par mail ([app@amicale-insat.fr](mailto:app@amicale-insat.fr)).
22 22
 
23 23
 ## Technologies Utilisées
24
-Cette application est faite en JavaScript avec React Native (framework Open Source créé par Facebook), combinée avec Expo.
24
+Cette application est faite en JavaScript avec React Native (framework Open Source créé par Facebook).
25 25
 
26
-Cette combinaison permet de n'avoir qu'un seul code JavaScript à écrire pour Android et iOS. Pour compiler pour la plateforme souhaitée, il suffit d'effectuer une commande, qui envoie le code sur les serveurs d'Expo pour compilation (voir section Installer). Plus besoin de Mac pour développer une application iOS ! (Mais toujours besoin d'un pour publier sur l'App store...)
26
+React Native permet de n'avoir qu'un seul code JavaScript à écrire pour Android et iOS. Pour compiler pour la plateforme souhaitée, il suffit d'effectuer une simple commande. Plus besoin de Mac pour développer une application iOS ! (Mais toujours besoin d'un pour compiler et publier sur l'App store...)
27
+
28
+Cette application utilisait initialement Expo, permettant de simplifier grandement le développement et le déploiement, mais il a été abandonné à cause de ses limitations et de son impact sur les performances. Revenir sur Expo n'est pas possible sans un gros travail et une suppression de fonctionnalités non compatibles.
27 29
 
28 30
 ## [Installer l'application depuis ce dépot](INSTALL.md)
29 31
 

Loading…
Cancel
Save