build Archives - Deeply Learning

Cours web Mobile – React Native

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

1 novembre 202028 mai 2021
par Bastien Maurice

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)

Code source du chapitre disponible sur Github.

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 :

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 + :

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 :

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 :

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

Vous aurez un nouveau fichier sur votre bureau :

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 :

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

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

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

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

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

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 + :

On coche App IDs, et on continue :

On sélectionne App, et on continue :

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 :

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 + :

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 :

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

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

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

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

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.

Cours logiciel - Electron

Chap 6 : Build, package et distribution (installateur) de…

26 novembre 201915 décembre 2019
par Bastien Maurice

Nous avons vu au chapitre précédent comment améliorer l’UI de notre application avec un système permettant à l’utilisateur de choisir son thème. Cela se fait beaucoup actuellement sur les applications pour reposer notamment les yeux lors d’une utilisation nocturne. Nous avons aussi vu comment sérialiser simplement et rapidement des données utilisateurs concernant les préférences et paramètres de l’application via de simples fichiers JSON.

Le code source concernant ce chapitre est disponible sur mon Github.

Principe global

Dans ce sixième et dernier chapitre de cette série consacré à l’utilisation de Electron, nous allons voir comment packager notre application afin de la distribuer. Pour cela nous allons utiliser le très bon module Electron-builder pour créer nos installateurs. On va installer ce module en tant que dépendances de dév :

npm i electron-builder -g

Nous allons devoir réaliser deux principales étapes afin de créer notre installateur :

Builder notre application Angular en mode production,
Packager le précédent build via Electron-builder.

Génération du build Angular en mode prod

Cette première étape va consister à créer un bundle de notre application. On va demander à Angular de builder notre application en mode production afin de compiler l’ensemble de nos composants, contrôleurs et pages web avec nos modules NPM, afin de passer d’un dossier de quelques centaines de Mo à un build ne pesant que quelques Mo.

Nous allons devoir effectuer quelques modifications de code, car actuellement on ne fait que build notre application dans un environnement de développement via notre serveur local.

Chargement de la page d’accueil

Pour le moment on demandait à Electron de charger à l’initialisation de la fenêtre, le rendu du serveur local de Angular via :

win.loadURL('https://localhost:4200/')

On va ajouter du code permettant de demander le chargement de index.html de notre build dorénavant :

On va demander de charger un fichier et non plus une URL, en indiquant via le paramètre protocol. Le chemin correspond au fichier index.html dispo dans notre build, situé dans le dossier ‘dist’ de Angular. Le paramètre slashes est extrêmement important pour Angular, afin de permettre le routage des diverses pages au sein de notre application.

Activer le Hash (#)

Etant donnée que l’on crée une SPA ( Single Page Application ), on peut observer des # dans notre URL, mais pas pour tout le monde, puisque Angular le cache dans les dernière version, et cela pose problème.

En effet avec le serveur de dév, tout fonctionne bien. Mais une fois passé en mode production, on arrive plus à afficher nos pages web correctement, car l’URL est faussé sans notre #. Pour cela, on va devoir le spécifier dans notre module principal de routing, d’utiliser le hash :

Base des liens

On va aller modifier la base de l’ensemble des liens de notre application, disponible dans notre index.html afin qu’il corresponde avec Electron :

<base href="./">

Cible de build

Dans le fichier de configuration de build de Angular, tsconfig.json, on va modifier la ligne suivante :

« target »: « es2015 »

par :

« target »: « es5 »

Génération du build

Dernière étape, on va générer le build Angular via :

ng build –prod

Le build est dispo sous /dist.

Pensez à tester ce build de production directement avec Electron avant de passer à l’étape suivante, via la commande :

electron .

Sans utiliser notre arguments –devTools, on demande à electron de tester notre build précédemment crée et non le serveur de développement de Angular.

Tout fonctionne pour moi, on peut passer à l’étape finale 😎

/!\ Attention à bien vérifier les liens vers vos assets, qu’ils soient bien relatif et non absolue, sinon vous risquez d’avoir des soucis et ne seront pas trouvé dans votre app Electron !

Package du build via Electron-builder

Vous avez de disponible quelques modules pour vous permettre de vous faciliter la vie pour créer votre installateur. En voici les principaux :

Comparatif des modules de build/package les plus populaires

Je vous propose de partir sur le plus populaire du moment de Github, à savoir Electron-builder. Mais vous pouvez partir sur celui qui vous fait plaisir, je n’ai pas essayé les autres mais je présume qu’ils doivent chacun faire le boulot !

Du coup avec le notre de module, c’est plutôt simple. On a juste à définir de nouveaux comportements dans notre fichier main.js. Je vous montre la spécification minimal, la plus simple pour générer un installateur. De nombreuses autres options sont disponible sur le site de Electron-builder, que cela soit pour faire un build Window, Linux ou macOS.

appId : nom de l’application

compression : définit le niveau de compression des données de notre application dans l’installateur

win : on définit ici les options pour un build pour window, à savoir la cible ainsi que le fichier d’icone pour notre application

electronDowload : permet de mettre en cache les utils et dépendances nécessaire à Electron builder afin de compiler notre installateur

directories : on définit le dossier d’output pour notre installateur

nsis : c’est la cible concernant un build pour window, on définit les options ici de l’installateur. On lui spécifie que on veut laisser le choix à l’utilisateur pour installer sur une session ou en global, la possibilité de choisir son dossier d’installation ainsi que de supprimer ou non les données de l’application en cache une fois celle-ci de supprimé

files : c’est ici que l’on spécifie à Electron builder les fichiers nécessaires au bon fonctionnement de notre application. On lui donne notre point d’entrée de notre app qui est main.js, ainsi que notre package.json ou l’ensemble du fonctionnement y est spécifié, et enfin le build de production généré par Angular précédemment

Pour générer l’installateur, ouvrez votre console dans le dossier du projet et tapez :

electron-builder

Il va télécharger les dépendances et utilitaires nécessaire pour créer l’installateur. Vous pouvez lui spécifier des arguments pour définir quelle plateforme et quelle architecture cible vous souhaitez pour votre/vos installateurs.

Dans votre dossier de sortie de Electron builder, sous /distElectron, vous aurez à la fois un dossier avec l’ensemble de votre application buildé et packagé prêt à fonctionner ( on peut appeler ça une installation dite portable, d’un simple copié/collé vous partagez votre app) ainsi que d’un installateur au format .exe traditionnel.

Astuce : builder en mode offline

Electron-builder va descendre certaines extension pour réaliser le build. Si vous souhaitez réaliser des builds en mode offline, sur un pc n’étant pas connecté à internet, vous pouvez mettre une variable d’environnement pour forcer le cache de electron builder dans le dossier spécifique de votre choix :

set ELECTRON_BUILDER_CACHE= »votre_dossier »

Vous aurez ainsi dans ce dossier les éléments suivants :

ELECTRON_BUILDER_CACHE :

votre_dossier
- nsis
  - nsis-x.x.x.x
  - nsis-ressources-x.x.x
- winCodeSign
  - winCodeSign-x.x.x

Vous aurez plus qu’a récupérer ce dossier, et de les déposer via usb sur votre nouvel ordinateur qui ne dispose pas d’un accès internet. N’oubliez pas de re-set la variable d’environnement sur ce dernier pc pour lui indiquer le bon chemin pour accéder à ce même dossier.

Conclusion

On arrive avec de sixième chapitre à la fin de la série consacré à comment débuter sur Electron. Vous êtes désormais capable de :

Initialiser un nouveau projet, développer avec un serveur de dév en local avec hot reload du frontend & backend,
Créer votre première fenêtre avec persistance des données utilisateurs,
Gérer la communication entre render & main process, gérer la communication entre composant de Angular,
Builder un projet Angular, packager votre application Electron.