android ios react native expo Cours web Mobile – React Native

Chap 2 : Builder & générer les .apk &…

Après quelques instants de build.. TADAAA !

Objectif

  • Signer son app
  • Builder offline et en local son app
  • Générer les fichiers d’installation Android (apk) & iOS (ipa)

 

Introduction

Vous pouvez utiliser directement Expo pour lancer très facilement votre build sur leurs serveurs distants, avec la simple commande :

expo build:android

Pourquoi je ne l’utilise pas ?

Car lorsque que j’ai voulu lancer un build, leurs serveurs étaient down, laissant mon build en attente. Flemme de perdre plus de temps, je me suis lancé dans les recherches afin de savoir si l’on pouvait nous même générer notre build. C’est un peu plus tricky, mais ça marche.

 

A SAVOIR AVANT DE SE LANCER DANS LE DEV MOBILE

Je souhaite vous parler de compte développeur. ça vous évitera toute surprise comme j’ai pu avoir en développant ma première application sur les stores.

Si vous souhaitez distribuer votre application sur les stores :

  • iOS : Compte développeur nécessaire ( 100€ par an )
  • Android : Compte développeur nécessaire (25€ à vie )

Avec une licence, vous pouvez ensuite lancez autant d’application que vous le souhaitez, vous n’êtes pas limité en nombre.

 

Si vous souhaitez seulement builder votre application en local :

  • iOS : Compte développeur toujours nécessaires, sur un macOS exclusivement. Vous ne pouvez générer votre certificat, teamID et votre fichier de provision en local par vous même.
  • Android : Pas besoin de compte spécifique. Juste un macOS ou Linux d’obligatoire. Car votre fichier de clée nécessaire au build est générable en local, par vous même.

 

Prérequis

  • Bash
  • NodeJS

Build pour Android

  • macOS ou Linux ( pensez à avoir une VM )
  • JDK/JRE (Java Development kit) en version 8 exclusivement

Build pour iOS

  • macOS
  • Xcode (minimum v11.4)
  • Fastlane ( préférez l’installation par Homebrew, le plus simple et rapide moyen )

 

Si comme moi vous êtes pauvres et n’avez pas de macbook pour build votre .IPA, je vous ait fait un article qui vous sauvera un ou deux jours de recherche et de test pour avoir un macOS Catalina sur votre linux qui est proche d’avoir les performances d’une install native ! Oubliez windows, oubliez virtual box ou vmware. Même mon pc à 4000€ ne fait pas tourner macOS, car aucun de ces softs ne peut attribuer des ressources graphiques, entrainant de gros ralentissement lors de vos déplacement de souris et ouverture de logiciel. Bref, c’est inutilisable, à moins de passer par mon tuto qui utilise le combo QEMU/KVM, et qui fait tourner lui Catalina facilement sur mon portable à 2 coeurs de 2015 😁

 

On utilisera la TurtleCLI pour générer le build. Installez le via npm :

npm install -g turtle-cli

 

Signature de l’application

Android

La première étape consiste à signer l’application. Cela permet de créer des certificats concernant la sécurité, pour la distribution. On va utiliser l’outil keytool de java pour générer notre keystore :

Vous pouvez apercevoir aussi des clés avec l’extension « .keystore ». C’est une clée comme les « .jks » avec un format différent.

Cette commande va vous demander plusieurs questions vous concernant :

Génération du keystore

Un fichier va être crée. Veillez à bien mettre de côté de fichier. Il vous sera demander à chaque build de votre application

 

iOS

Il vous faudra un certificat, un apple Team ID, et un fichier de provision

 

 Génération du certificat

Allez sur votre compte développeur Apple. Dans l’onglet certificat, cliquez sur le bouton + :

apple ios generation application ipa certificat p12 provision

 

Choisissiez l’option iOS Distribution (app store and ad hoc ) :

 

Faîte continuer, et on arrive sur une nouvelle fenêtre nous invitant à envoyer un fichier CRC :

apple ios generation application ipa certificat p12 provision

 

On va devoir générer un certificat. Pour cela, lancez l’application Trousseaux d’accès qui est dans le dossier Applications/Utilitaires de votre macbook. Dans le menu en haut à gauche, cliquez sur Trousseaux d’accès, puis sur Assistant de certification, puis sur Demander un certificat à une autorité de certificat :

apple ios generation application ipa certificat p12 provision

 

Remplir les champs demandé, et faîte enregistrer en local :

apple ios generation application ipa certificat p12 provision

 

Vous aurez un nouveau fichier sur votre bureau :

apple ios generation application ipa certificat p12 provision

 

On retourne sur le compte développeur Apple ouvert précédemment, nous étions rester sur la fenêtre ou on nous demander notre fichier CSR. C’est le fichier que nous venons de générer sur le bureau que nous allons upload :

apple ios generation application ipa certificat p12 provision

 

Nous pouvons désormais télécharger notre certificat ! Téléchargez le, et ouvrez le :

apple ios generation application ipa certificat p12 provision

 

Il sera automatiquement ajouté à notre trousseau d’accès, attaché à notre session :

apple ios generation application ipa certificat p12 provision

 

Sélectionnez votre certificat fraichement installé avec sa clé privée, et exportez les deux éléments :

apple ios generation application ipa certificat p12 provision

apple ios generation application ipa certificat p12 provision

 

Exportez au format .p12, et donnez lui un nom et mettez le de côté, ce fichier vous sera obligatoire pour builder :

apple ios generation application ipa certificat p12 provision

 

Un mot de passe sera demandé, notez le bien de côté, il vous le sera demandé lors du build :

apple ios generation application ipa certificat p12 provision

 

Vous avez maintenant un certificat au format .p12 sur votre bureau. Gardez le bien de côté.

 

Création du teamID

On revient sur le compte développeur Apple, et on va allez cette fois ci dans l’onglet Identifiers, cliquez sur + :

apple team build id

 

On coche App IDs, et on continue :

apple team build id

 

 

On sélectionne App, et on continue :

apple team build id

 

 

On remplis le champ Description qui est le nom de l’application, ainsi que son bundleID sous la forme recommandé. Dans Capabilities, vous cocherez les accès et autorisations que votre application à besoin. Par exemple si c’est une application photo, elle devra avoir accès à l’APN du smartphone. Vous cliquez ensuite sur Continue, puis Register :

apple team build id

 

Notez bien votre App ID Prefix, qui est votre Team ID. Vous en aurez besoin pour build par la suite.

 

 

Fichier de provision

Troisième et dernière étape. On va maintenant s’occuper de générer du fichier de provision, lui aussi nécessaire pour buid l’application.

Toujours sur notre compte développeur Apple, on va sélectionner cette fois ci l’onglet Profiles, et cliquer sur + :

apple build ios appstore provision file

 

On sélectionne ensuite App store, dans l’onglet Distribution. A savoir, les builds Ad Hoc ne sont pas pris en charge par Expo. On clique sur Continue :

apple build ios appstore provision file

 

Sélectionnez l’app ID précédemment crée, et faîte Continue :

apple build ios appstore provision file

 

Sélectionnez le certificat précédemment crée, et faîte Continue :

apple build ios appstore provision file

 

Donnez un nom à votre fichier de provision, et faîte Generate :

apple build ios appstore provision file

 

Téléchargez le, et gardez le de côté, vous en aurez besoin pour générer votre build :

apple build ios appstore provision file

 

Export de l’application

Android & iOS

La seconde étape consiste à exporter notre application. Cela permet de créer les bundles (iOS & Android) à partir des fichiers javascript. Vous devriez apercevoir la création d’un dossier « dist » dans votre répertoire courant via la commande suivante :


Attention à utiliser la bonne, selon si votre application contient du HTTP ou HTTPS.

 

Servir l’application

Android & iOS

On va maintenant lancer notre application à partir du bundle crée précédemment, en local. Pour cela on va utiliser python. Déplacez vous dans le dossier « dist » précédemment crée, et lancer la commande suivante :

 

Vérifiez bien que le serveur tourne, via curl, ou en lançant une connexion à votre localhost via votre navigateur :

 

Build l’application

Dernière étape, on va pouvoir lancer le build de nos fichiers. Revenez à la racine de votre projet et ouvrer une autre console.

Android

Lancez la commande suivante pour lancer le build via turtle-cli :

Voilà votre fichier APK, situé dans le répertoire annoncé dans la console.

 

iOS

Lancez la commande suivante pour lancer le build via turtle-cli :

 

Soucis fréquemment rencontré

EACESS permissions denied

Vous pouvez vous confronter à des erreurs d’accès aux fichiers pour installer des packets npm globaux ( pour turtle-cli ou encore expo ). Oubliez les sudo su et sudo en tout genre, qui m’ont fait juste galérer encore plus. Vous pouvez fix cela en deux étapes :

  • Utilisez l’option ‘–unsafe-perm‘ de NPM
  • Pour le dossier ‘lib/node_modules’ qui résisterait aux erreurs, passez un coup de chown -R votreNomUser pour donner accès à votre utilisateur courant de la session au dossier en lecture et écriture.

 

Conclusion

Nous venons de générer nos fichiers d’installation APK pour Android et IPA pour iOS, afin de distribuer notre application.
On s’attaque à la navigation entre plusieurs écrans sur notre prochain chapitre.

 

android ios react native expo Cours web Mobile – React Native

Chap 1 : Environnement, prérequis & Hello world !

Résultat du cours

Objectif

  • Configurer l’environnement de développement
  • Générer le squelette basique d’une application
  • Tester son application sur son smartphone

 

ReactNativeCLI, ExpoCLI…

Nous avons des outils dans le développment web, permettant de développer rapidement un squelette de base pour une application :

  • CLI pour Angular
  • CRA pour React
  • CLI pour React Native

 

Mais pour créer mon premier projet pour découvrir ces technos mobile, je pars non pas sur ReactNative CLI, mais sur ExpoCLI. C’est comme Rails mais pour ReactNative, ou encore Phonegap pour Cordova. Il étends les fonctionnalité de ReactNativeCLI.

Qu’apporte t-il de plus par rapport à React Native CLI et quand l’utiliser ?

Avantage :

  • Pas besoin d’Android Studio ni de Xcode
  • Configuration bien plus simple & rapide ( hello world en moins de une minute )
  • Hot reload, sur smartphone physique et non par simulateur. Oui, via l’appli Expo, vous pouvez tester votre app sur votre smartphone iOS ou Android physique, et ce instantanément. En react native vanilla, vous avez droit au simulateur Android sur Windows, et simulateur iOS sous macOS exclusivement.

Inconvénient :

  • Poids de l’apk/ipa, du à l’ajout de librairie annexes (~50mo le hello world, ça fait mal…)
  • Accès aux modules natifs impossible. Vous ne pouvez ajouter de lib natif via Xcode ou Android studio, car tout est packagé via le sdk Expo. Certaines fonctionnalité sont impossible d’être utilisé, comme les achats in-app ou le bluetooth.

 

En résumé, pour débuter le dév mobile ou pour de simples application, vous devriez commencer par Expo. Pour des utilisateurs expérimentés ou souhaitant des fonctionnalités spécifiques à chaque plateforme, partez sur du ReactNative vanilla.

 

Prérequis

Il vous faudra de base :

  • NodeJS

Installez ensuite la CLI de Expo via une console :

npm install -g expo-cli

Pensez à avoir Python dans vos variables d’environnements, au risque d’avoir une erreur d’installation.

 

Initialisation du squelette

On initialise une nouvelle application via la commande :

expo init "Nom_de_votre_app"

 

Vous aurez l’architecture suivante :

  • assets/ : dossier contenant vos images
  • app.json : fichier de configuration du projet
  • app.tsx : fichier d’entrée de votre application
  • package-json : contient l’ensemble des dépendances et scripts du projet
  • tsconfig.json : fichier de configuration de typescript
  • babel.config.js : fichier de configuration pour la gen du bundle ( une sorte de webpack )

 

Lancement du serveur de dév

Simple :

npm start

Un nouvel onglet dans votre navigateur va s’ouvrir, vous proposant divers options :

 

Pour faire fonctionner le simulateur Android ou iOS, vous allez devoir installer les biblio natives. Mais on peut éviter cela en utilisant notre propre smartphone. On va devoir connecter notre smartphone au même réseau wifi que l’ordinateur sur lequel on développe.

Installez l’application EXPO, disponible sur l’iOS Store et GooglePlay store, selon votre type de device. Une fois l’application lancé sur votre smartphone, vous allez pouvoir scanner le QR code affiché sur la console, comme montré sur la capture d’écran précédent. Cela va permettre de transférer le bundle directement sur le smartphone.

Vous allez pouvoir ainsi voir vos modification en temps réel sur votre téléphone, de l’application que vous codez, à chaque sauvegarde.

 

Icone & Splash screen

Vous pouvez changer l’icone de votre application via le fichier « app.json ».

De même pour le splash screen, qui correspond a l’image qui sera affiché le temps que votre application soit chargé par votre smartphone.

react native chap1 splash screen

 

Conclusion

Nous venons de voir comment réaliser un « HelloWorld » en quelques minutes, et ce directement sur notre smartphone.

On discutera dans le prochain chapitre sur comment générer les fichiers APK et IPA, permettant d’installer et de distribuer notre application.