Si vous n’aviez pas déjà effectué la partie 1 du tutoriel, voici le lien pour vérifier si vous aviez les premiers prérequis 🙂

L’objectif est de prendre notre application powerapps de gestion de contacts et d’en générer un fichier .apk que l’on pourra installer sur son téléphone android pour en faire une app mobile native.

Voici un résumé de ce que nous allons montrer dans ce tutoriel Partie 2 :

  • Nous aurons besoin de signer notre code pour Android pour l’application afin d’obtenir une signature et cette signature sera nécessaire pour référencer aussi notre app dans le portail Microsoft Azure pour obtenir un Client id et utiliser cette signature dans l’url de retour ainsi que dans l’appcenter de microsoft pour générer le fichier d’install .apk
  • Nous enregistrerons notre app sur le portail Azure
  • Nous ferons aussi l’ajout de notre organisation et de l’application dans Visual Studio App center
  • Et nous devrons faire le lien entre l’application enregistrée sur azure et le appcenter par l’intermédiaire d’un powershell

La dernière partie du tutoriel (Partie 3) disponible ce week end, prendra tous les éléments générés de cette partie 2 pour générer le fichier .apk

Première étape :

Pour obtenir une signature de code pour Android, nous devons installer plusieurs outils gratuits :

  • Installer le SDK de la plate-forme JAVA, le JDK
  • Installer Android Studio
  • Installer OpenSSL (certificat)

Sur le site de Oracle, téléchargez le jdk pour windows et installez le.

Pour OpenSSL, vous pouvez vous rendre sur wiki.openssl.org pour trouver des binaires windows à installer. Pour ma part, j’ai pris le premier de la liste. Par défaut, sur le site officiel de OpenSSL, les codes sources sont présents mais ils ne sont pas compilés. Donc, pour éviter de perdre du temps à compiler le code, je vous conseille cette liste 🙂

Pour android studio, allez sur le site officiel pour le télécharger.

A la fin de toutes ces installations, vous allez être en mesure de lancer les commandes suivantes pour générer la signature pour votre app :

Ouvrez une ligne de commande en mode admin et saisir la commande suivante :

keytool -genkey -alias powerappswrap -keyalg RSA -keystore powerappswrap.jks -keysize 2048 -validity 5000

Saisissez un mot de passe, votre nom et prénom, nom de votre entreprise, etc… puis à la fin, indiquer oui pour valider le tout

Ouvrez ensuite une ligne de commande avec OpenSSL (lien disponible après l’installation de OpenSSL)

puis saisir la commande suivante :

keytool -exportcert -alias powerappswrap -keystore c:\keypowerapps | openssl sha1 -binary | openssl base64

c:\keypowerapps peut être un autre répertoire aussi que vous aurez créé préalablement. C’est celui que j’ai utilisé.

A la validation de la commande, vous obtenez la signature pour votre app. Gardez la précieusement, nous allons en avoir besoin un peu plus loin.

Nous allons maintenant inscrire notre application sur le portail Microsoft Azure et configurer aussi les autorisations d’API sur la plateforme d’identités Microsoft.

Prenez le module Azure Active Directory, et dans « App Registrations », cliquez sur « Add » register an application

Saisissez le nom de votre application et sélectionnez Accounts in any organizational directory.

Ne rien mettre pour l’instant dans Redirect URI. Cliquez sur le bouton « Register »

Le fait d’enregistrer l’app permet de générer un client id notamment qui nous servira plus tard pour la génération du fichier .apk d’install pour android.

Ensuite, nous allons ajouter une plateforme, soit Android.

Choisir « Authentication » puis « Add a platform ». Choisissez Android. Ensuite, indiquez votre nom de package sous la forme com.nomdevotrecompagnie.nomdelapp par exemple.

Dans la zone Signature Hash, vous allez mettre la signature obtenue précédemment avec l’utilitaire keytool. Ensuite, vous cliquez sur « Configure ».

Ensuite toujours dans « Authentication », ajouter l’URI pour votre app.

Elle se présente sous la forme msauth://com.nomdevotrecompagnie.nomdelapp/signatureobtenueaveckeytool

Nous allons aussi ajouter notre app et organisation dans le gestionnaire d’app sur Visual studio App center. Pour cela, allez sur l’url https://appcenter.ms

Ajoutons notre organisation (« add new organization »)

Ensuite nous allons ajouter notre app dans l’organisation

Cliquez sur « Add app » puis saisir votre nom d’app, le type de release, le système d’exploitation (on voit ici qu’on peut aussi générer pour windows, macOS, tvOS, etc…)

Sélectionner « React Native » pour la plateforme puis cliquez sur le bouton « Add new app »

On arrive à un tableau de bord pour notre application.

Prochaine étape, nous allons générer aussi un token pour notre application que nous devrons utiliser dans PowerApps pour compiler et générer le .apk dans la partie 3 du Tuto.

Pour générer un token, il suffit d’aller dans le menu « Settings »

Puis de cliquer sur l’icone crayon de l’option « App API tokens »

Sur l’écran suivant, cliquez sur « New API token »

Tapez une description, puis choisir « Full Access » puis bouton « Add new API token »

Nous obtenons un token (jeton d’accès) :

Conservez le pour la partie 3 du Tutoriel 🙂

Ensuite dernière étape, il faut faire le lien entre l’app enregistrée dans le portail Azure et Visual Studio App center.

Pour cela, nous devons utiliser PowerShell !

Si les outils Powerapps dans PowerShell ne sont pas déjà installés, voici la procédure pour le faire :

Dans le menu windows, sélectionnez Windows Powershell et exécuter en tant qu’administrateur.

Première chose à verifier la version de votre powershell. Il faut que votre version soit au moins supérieure ou égale à la version 5. Si ce n’est pas le càs, obtenez la dernière version par l’intermédiaire de windows.

Nous allons installer les modules Powerapps. En premier lieu, pour éviter des erreurs plus tard d’installation, nous devons saisir la commande suivante :

Ensuite nous allons installer le module d’administration powerapps powershell en tapant la commande suivante :

puis la commande suivante :

Une fois que les modules Powerapps sont installés, nous allons pouvoir faire l’association voulue.

En tapant la commande « Add-PowerAppsAccount », cela va ouvrir une fenêtre de connexion Microsoft. Entrez vos crédentiels PowerApps.

Une fois fait, si vous vous souvenez, on reprend notre client id obtenu dans le portail Azure Microsoft

et on saisit la commande suivante :

A la fin de l’exécution de cette commande, si le statusCode renvoie 200, le lien entre notre app enregistrée sur Azure et notre app dans l’app Center est réalisé !!

Nous avons maintenant tous les éléments pour passer à la dernière étape pour générer notre .apk qui sera disponible dans la partie 3 du tutoriel ce week end !

N’hésitez pas si vous avez des questions, je suis peut être passé vite sur certaines sections 🙂

Dominique