SI vous passez à XCode 12 depusi une version antérieure (la 11.x dans mon cas) et vous compilez votre projet (React Native) dans mon cas, vous aurez sans doute un problème de compatibilité avec les modules
Module compiled with Swift 5.3.1 cannot be imported by the Swift 5.2.4 compiler
Il faut aller dans les paramètres de XCode, puis Location et sélectionnez la version du CLI
C’est un casse-tête cette màj de IOS.
J’étais en RN 0.61.5 et après avoir mis à jour la version de XCode vers la version 12, le déploiement sur device IOS marche mais il manque les images. Ce qui est conseillé est de mettre à jour React Native vers la dernière version qui corrige ce problème. Il est conseillé de mettre régulièrement à jour React Native, ça va tellement vite. J’ai lu que si vous ne le faites pas sur une durée de 18 mois, c’est un peu la catastrophe de mettre à jour, car le programme qui met à jour peut changer et d’autres joyeusetés.
Pour mettre à jour suivez ce lien sur Stackoverflow,
Cocoapod refus de s’exécuter, si vous avez le message :
[!] CocoaPods could not find compatible versions for pod "ReactCommon/callinvoker":
In Podfile:
ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
None of your spec sources contain a spec satisfying the dependency: `ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)`.
You have either:
* out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
* mistyped the name or version.
* not added the source repo that hosts the Podspec to your Podfile.
Tuto React Native Apple Pay avec Laravel en backend
Pour pouvoir payer avec Apple Pay, vous devez ouvrir l’application Wallet, scanner votre carte bancaire, un process de validation va suivre et si c’est OK vous pourrez utiliser votre Iphone pour payer. C’est en fait une dématérialisation de votre carte bancaire, qui ne fera qu’un avec votre téléphone, vous n’avez plus besoin d’utiliser votre carte bancaire. Apple Pay agit comme un proxy de votre carte bancaire. Vous avez un portefeuille numérique (Digital Wallet)
Apple Pay n’est pas un moyen de paiement au sens Payment Gateway (comme l’est Stripe, Briaintree,, ça n’encaisse pas d’argent sur un compte Apple, ce n’est pas le In App purchase sur lequel Apple prélève 30%. Apple Pay n e peut donc être utilisé pour l’In App purchase. C’est pour ça qu’une fois Apple Pay est intégré sur une application mobile, si vous utilisez Strip epour encaisser, il faudra utiliser le tuto de Stripe pour intégrer Apple Pay, car votre code Apple Pay va faire une requête vers Stripe.
Apple Pay, Apple Pay Payment Processing, choisissez le Merchant ID cochez, un nouveau provisioning profile sera créé (à chaque fois que vous ajoutez ou enlevez une Capabilities+Capabilities« , une liste apparait, double cliquez sur Apple Payhttps://medium.com/enappd/implement-apple-pay-in-react-native-apps-dec9cd5c6808, pour ce lien ne suivez pas l’utilisation de la librairie mais seulement la configuration côté Apple developper Account, elle n’est plus maintenue, et préférer ces deux liens, IOS et Android.
Générer le CSR pour Apple Pay : https://docs.skillz.com/docs/v23.2.1/apple-pay/
On your Mac, open
https://docs.skillz.com/docs/v23.2.1/apple-pay/Keychain Access
In the menu bar go toKeychain Access>Certificate Assistant>Request a Certificate from a Certificate Authority....
Input your preferred email address
SelectSaved to Disk
CheckLet me specify key pair information
PressContinue
Choose a location to save the.certSigningRequestfile, and give it a name.
Select AlgorithmECC
Select Key Size256 Bits** NOTE: You MUST selectECCbefore the256 Bitsoption becomes available
PressContinue
Pour éviter d’utiliser votre vraie carte, il vous faut ce type de compte. Allez dans AppStore Connect, dans Utilisateurs et Accès, barre latérale gauche, dans Sandbox, cliquez sur Testeurs, ajoutez un testeur, entrez les informations et validez le compte via email.
Attention la procédure suivante nécessite de vous déconnecter de votre Iphone et de vous connecter avec le compte de test.
Une fois connecté, allez dans vos paramètres > wallet and apple Pay ou en cliquant sur l’icône Wallet, il vous faut entrer manuellement votre carte de test. Vérifiez que la région de votre compte est bien dans un pays supporté par Apple Pay. Cette page officielle contient des numéro sde carte, mais je n’ai pu réussir qu’avec le numéro sur cette page.(je n’ai pas tout essayé non plus)
https://enappd.com/blog/facebook-login-in-react-native-apps/89/
https://developers.facebook.com/docs/react-native/login/
Résumé des étapes pour intégrer le Facebook Login
LoginButton, LoginManagerBien suivre les instructions de cette videos, j’ai suivi le tuto, j’ai pu faire marcher sur Android, mais pas sur IOS qui refuse de builder malgré le paramétrage, la solution a été proposée sur Stackoverflow, solution non intuitive si on n’est pa développeur natif.
Ce lien propose une solution quand le projet ne veut lus builder après l’installation de fbsdk sur IOS.
Si vous faites coexister votre système de login et celui de Facebook Login, des questions intéressantes peuvent se poser. A la première connexion, l’utilisateur n’a pas de compte sur votre application, il peut choisir soit de recourir à votre système, soit à celui de Facebook. Je suppose que l’ backend de l’appli est un serveur sous PHP (ex Laravel ou Symfony), et que l’application React Native communique par Rest API, donc authentification par JWT.
Mais voilà à ce stade il a le choix de créer son compte ou non. S’il crée un compte sur l’application, on doit pouvoir recueillir son email automatiquement (c’est possible avec Facebook Login de demander l’email, nom et prénom), envoyer vers le serveur (s’assurer que le compte n’existe pas déjà en comparant l’email), la création de compte étant fini, il faut pouvoir renvoyer un token d’authentification vers l’application qui stockera le token.
import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken, LoginManager, GraphRequestManager, GraphRequest } from 'react-native-fbsdk';
export default class Login extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LoginButton
onLoginFinished={
(error, result) => {
LoginManager.logInWithPermissions(['public_profile', 'email']).then(
function (result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data)
let accessToken = data.accessToken;
const responseInfoCallback = (error, result) => {
if (error) {
console.log(error)
alert('Error fetching data: ' + error.toString());
} else {
console.log(result)
alert('Success fetching data: ' + result.toString());
}
}
const infoRequest = new GraphRequest(
'/me',
{
accessToken: accessToken,
parameters: {
fields: {
string: 'email,name,first_name,middle_name,last_name'
}
}
},
responseInfoCallback
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
}
)
}
},
function (error) {
console.log("Login fail with error: " + error);
}
);
}
}
onLogoutFinished={() => console.log("logout.")} />
</View>
);
}
};
Anoter que la section
LoginManager.logInWithPermissions(['public_profile', 'email']).then(
function (result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
la façon dont est géré la promesse ne permet pas de lire le bon mot clé this, donc si on passait une props, elle ne sera pas récupérable on aura un undefined, la bonne technique est:
LoginManager.logInWithPermissions(['public_profile', 'email']).then( (result) => {
if(!result){
console.log("Login cancelled");
}
else {
// le code quand tout est bon
}
https://github.com/lakshmantgld/react-native-fbsdk-example
https://developers.facebook.com/docs/facebook-login/multiple-providers/
Voir aussi Intégrer Google SignIn
Cette librairie est considérée comme importante car elle est incluse par défaut quand vous bootstrapez un projet React Native.
⚠️ StackNavigator V4 is deprecated, use createStackNavigator instead in V5
#Step 1: $ npm install @react-navigation/native @react-navigation/stack #Step 2: install the required peer dependencies $ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Il vous faut installer le package principal et tous les package suivants
$ npm install @react-navigation/native $ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Pour Android, pas d’installation, mais ajouter deux lignes dans le fichier build.gradle dans votre_projet/android/app/build.gradle dans la directive dependencies
dependencies {
....
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
}
$ cd ios; pod install; cd ..
Chargement de gesture handler en tout début de script du fichier d’entrée App.js ou index.js, cet import doit être vraiment le tout premier code Js de votre projet.
# dans index.js (ou App.js si pas de index.js) import 'react-native-gesture-handler';
Note: For iOS with bare React Native project, make sure you have Cocoapods installed
IOS. install cocoapod : mandatory for React Native 0.60+ (https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9)
$ sudo gem install cocoapods
***Passing data to Screen:
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
passing initial param to a screen from <Stack.Screen>
<Stack.Screen
name="Details"
component={DetailsScreen}
initialParams={{ itemId: 42 }}
/>
Retrieving from the destination Screen :
function DetailsScreen({ route, navigation }) {
/* 2. Get the param */
const { itemId } = route.params;
const { otherParam } = route.params;
....
Pour migrer de la version 4 de React Navigation à la 5, voici le lien, principale différence dans la version 5
« In React Navigation 5.x, we have split the navigation prop into 2 props: navigation prop contains helper methods such as navigate, goBack etc., route prop contains the current screen’s data (previously accessed via navigation.state).
In React Navigation 5.x there’s no createAppContainer which provided screens with navigation context. You’ll need to wrap your app with NavigationContainer provider.
On a des creens qui sont contenu dans des navigators, si on a un lien d’un autre navigator, si depuis l’écran SignupScreen, on a un lien vers HistoryScreen, il y aura une erreur, car le screen History n’est pas connu du HomeStack navigator.
<HomeStack.Navigator>
<HomeStack.Screen name="SignUp" component={SignUpScreen} />
</HomeStack.Navigator>
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profil" component={ProfileScreen} />
<ProfileStack.Screen name="History" component={HistoryScreen} />
<ProfileStack.Screen name="Edit" component={EditScreen} />
</ProfileStack.Navigator>
Pour permettre la navigation inter navigator, il faut déclarer dans le Homestack navigator le screen History
<HomeStack.Navigator>
<HomeStack.Screen name="SignUp" component={SignUpScreen} />
<HomeStack.Screen name="History" component={HistoryScreen} />
</HomeStack.Navigator>
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profil" component={ProfileScreen} />
<ProfileStack.Screen name="History" component={HistoryScreen} />
<ProfileStack.Screen name="Edit" component={EditScreen} />
</ProfileStack.Navigator>
Nesting Navigation: https://reactnavigation.org/docs/nesting-navigators/
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
React navigation possède un défaut : imaginez que vous soyez dans votre page profile dans une application, vous voulez éditer, et quand l’édition est finie vous revenez visualiser votre page de profile, les informations ne se rafraichissent pas, car le goBack() ne gère pas le rafraichissement.
Voici une méthode pour forcer le rafraichissement de la page profile (qui est la page parente, la page édition de profile étant la page enfant).
Quand vous passez de la page Profile à EditionProfile, vous allez passer une fonction en props, que vous allez exécuter dans la page enfant EditionProfile, juste avant de revenir à la page parente Profile. Cette fonction va muter une variable arbitraire qui existe dans la page parente, comme ça on pourra détecter la mutation de cette variable au sein de notre hook useEffect.
const [foo, setFoo] = useState(1)
useEffect(() => {
fetch(getUserInfoUrl, {
method: 'GET',
headers: headers,
})
.then(response => {
return response.json()
})
.then(data => {
console.log(data)
setUser(data)
})
//AJAX LOAD
setShowLoader(false)
}, [foo]) /// foo est la variable surveillée par useEffect pour se déclencher, si vous ne savez pas ce qu'est un hook useEffect allez voir la documentation.
La fonction définie dans Profile et passée puis exécutée dans la page EditionProfile (pas dans Profile, oui on peut passer des props fonction dans React)
const handleOnNavigateBack = () => {
setFoo(foo + 1)
}
Dans la page ProfileEdit
...
onNavigateBack() // exécuter cette fonction va incrémenter foo dans la page parente !
navigation.navigate('Profil')
...
Les builds c’est vraiment la difficulté dans le développement des application mobile, au moins au début, mais c’est suffisamment difficile et décourageant car c’est d’une très grande complexité, et un même problème peux avoir deux causes différentes, et comme vous êtres développeur, vous n’êtes pas axé sur cet aspect, qui est pourtant nécessaire, sans quoi vos compétences de développeur ne seront rien, en effet à quoi bon avoir l’application codées si on ne peut pas la déployer sur le store?
Un build sur Android nécessite Android Studio, un build sur IOS nécessite Xcode. Si vous êtes sur Windows, vous ne pourrez développer que pour Android, pas pour IOS. SI vous être sur Mac OS vous pourrez développer pour Android et IOS ! Donc voilà une raison de vous acheter un macBook Pro !
La difficulté tient à la complexité d’un processus de build, d’un cache non vidé, en effet un build réussi peut très bien échouer pour X raison mais vous ne pourrez résoudre ce problème que si vous remettez tout à zéro !
Néanmoins il y a des messages d’erreur qui reviennent souvent et vous devez connaitre.
Mais avant il faudra vous familiariser avec le parcours nominal de configuration d’un build, pour Android, il s’agira bien sûr de mettre en place Android Studio et tout ce qui va avec, télécharger les SDK qu’il faut. Pour IOS c’est plus fluide, néanmoins vous devez connaître le flow de build, les commandes correspondantes.
D’autre part, notez qu’en développement vous pouvez builder pour un émulateur, ou votre terminal physique.
Déployer sur le store est une autre paire de manche, spécialement pour Apple Store, où le fameux provisioning profile en fera suer plus d’un ! oui le développement d’application mobile est un métier, et nettement plus fastidieux que de faire un site web. Par moment vous vous direz « Vive les PWA ! ».
A quoi sert AppCompat?
When new versions of android are published, Google will have to support the older versions of android. So AppCompat is a set of support libraries which can be used to make the apps developed with newer versions work with older versions.
Troubleshoot configuration : https://www.youtube.com/watch?v=GUZVGidimqY
https://medium.com/pvtl/react-native-android-development-on-mac-ef7481f65e47
React navigation causes android not working because of maybe
java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/swiperefreshlayout/widget/SwipeRefreshLayout;
Gradle build file add two lines to build.gradle: (https://github.com/react-navigation/react-navigation/issues/6267 and https://github.com/software-mansion/react-native-screens#usage-with-react-navigation-without-expo)
lignes à ajouter dans VOTRE_APP/android/app/build.gradle
dans la section dependencies
dependencies {
...
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
}
Error running android: Gradle project sync failed. Please fix your project and try again
Goto File -> Invalidate caches / Restart
Erreur gradle ne trouve pas une dépendance ‘react-native-screen’, parfois mettre à jour le plugin de Gradle pour Android Studio peut résoudre le problème.
Lien suite les versions compatible entre la version du plugin pour Android et la version de Gradle:
https://stackoverflow.com/questions/17727645/how-to-update-gradle-in-android-studio
Ouvrez Android Studio, branchez votre device Android (vous devrez avoir configuré en mode développeur). autorisez le transfert de fichier entre votre device et l’ordinateur.
Il y a deux façon de déployer sur votre device, soir en ligne de commande, soit en via Android Studio. Il faut au préalable avoir branché le device et ensuite faire la même commande. Voci la commande pour détecter les devices trouvés :
adb devices
SI à côté du nom de device c’est marqué offline, ça ne marchera pas, rebranchez le devices et jusqu’à ce que vous obtenez device marqué à droite du nom de l’appareil. Pour maintenir la connexion active depuis votre device Android faites cette ligne pour rerouter les requêtes vers le serveur (sinon le live reload ne marchera pas) :
https://reactnative.dev/docs/running-on-device
adb reverse tcp:8081 tcp:8081
Cycle inside ; building could produce unreliable results: Xcode 10 Error
Vous pouvez résoudre ce problème en effaçant les données du répertoire de build, c’est une procédure très complexe, et parfois le plus simple et de force à recompiler en effaçant toutes les données.
#efface le contenu du répertoire derived data (Xcode) rm -rf /Users/utilisateur/Library/Developer/Xcode/DerivedData/*
Effacer le cache React Native
Il est assez difficile d’effacer le cache de react Native. Si vous avez React Native version < 0.50
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
Si vous avez React Native version > 0.50
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache
lien : https://stackoverflow.com/questions/46878638/how-to-clear-react-native-cache
Une fois j’ai malgré avoir appliqué TOUTES ces méthodes n’ai pas pu rafraichir mon application, j’ai renommé par précaution mon répertoire build qui est dans le répertoire android, et j’ai rebuildé le projet. Un nouveau répertoire build est créé avec un build plus frais !
Metro se lance sur le port 8081, il y a de grande chance que ce soit occupé par un autre process.
Dans ce cas faire un npm start peut déclencher l’erreur suivante :
Dans ce cas il faut killer le process en question. Pour le trouver, faire la commande :
lsof -n -i4TCP:8081
Ensuite pour killer :
kill -9 <PID>
Pour une application React Native, allez dans le Finder, le répertoire IOS, et cliquez sur le fichier avec extension xcworkspace et non celui avec l’extension xcodeproj .
Branchez votre device sur votre Mac, dans Finder, cliquez sur votre devie sur la barre latérale, votre nom de device sera présent, cliquez sur le nom sur la barre horizontale, le UDID s’affiche, ensuite clic droit et copiez l’UDID
Vous recevez ce message en général après une longue période d’absence de développement sur votre applicationmobile, ou peut être le lendemain alors que tous se passait bien la veille.
Vous essayer de redémarrer Metro (dans le cas de React Native) mais rien n’y fait. Il est vraisemblable que la version de XCode n’est pas synchro avec la version de IOS du device.
Xcode 12 → iOS 14 Xcode 11.6 → iOS 13.6 Xcode 11.5 → iOS 13.5 Xcode 11.4 → iOS 13.4
Voici la page de téléchargement des binaires et entre autre de XCode. Vous pouvez aussi télécharger XCode depuis le le store de Mac OS, mais j’ai eu des lenteurs extrêmes, donc c’est quelque chose que je ne vous conseille pas, faisons à l’ancienne !
Il m’est arrivé, je vérifie que XCode est bien à jour, si ça ne marche toujours pas, aller dans Windows > devices, il y aura un message d’erreur, du type « impossible de configurer … », essayez de rafraichir cette fenêtre en changeant des paramètres :
Puis revenez en mode normale, le contenu de la fenêtre aura varié, ça peut prendre quelques dizaines de secondes, refaites un build.
Allez dans Paramètre > Itunes store et Appstore > Mise à jour d’apps
Allez aussi dans Général > Mise à jour Logicielle, décochez « Téléchargez les mises à jours »
bougez le switch pour désactiver
Lorsque vous réalisez par exemple un canvas dans Ionic, vous devez gérer les événement souris et touch (souris pour le développement et touch pour la production), malheureusement ce n’est pas trivial, s’il est assez facile de détecter la position de la souris, cela demande un peu plus de travail avec le touch (encore que vous le sachiez !)
Soit le code du canvas suivant par exemple dans Ionic
<canvas #imageCanvas (mousedown)="startDrawing($event)" (touchstart)="startDrawing($event)" (mousemove)="moved($event)" (touchmove)="moved($event)" (mouseup)="endDrawing()" (touchend)="endDrawing()" ></canvas>
Il faut dans un premier temps détecter le type d’événement. L’image ci dessous est un dump de l’objet événement touchstart
Comme vous le voyez les variables de position ne sont pas au même endroit ! pensez-y
Si vous développez pour une application mobile, comme Ionic, vous aurez sans doute le problème du scroll quand vous dessinez, l’écran va scroller et c’est gênant. Ce qu’il faut faire c’est d’empêcher l’événement de se propager
this.canvasElement.addEventListener("touchstart", function(event) {event.preventDefault()})
this.canvasElement.addEventListener("touchmove", function(event) {event.preventDefault()})
this.canvasElement.addEventListener("touchend", function(event) {event.preventDefault()})
this.canvasElement est l’élément Canvas que vous avez en variable.
Le fichier info.plist contient les informations diverses et variées mais importantes sur votre application que vous allez déployer sur l’Appstore
Récemment pour résoudre le problème d’une application rejetée car ne fonctionnant pas sur Ipad, j’ai dû trouver un moyen pour forcer le déploiement sur iphone. Même sur Stackoverflow c’était pas clair pour beaucoup de gens qui pensaient que ce n’était pas possible.
Après un build Ionic, le fichier info.plist se trouve sur dans /platform/ios/nom-appli/nom-appli-Info.plist.
L’éditer avec un éditeur de texte, et ajouter une clé UIRequiredDeviceCapabilities
Pourquoi vous devez éditer le fichier directement, parce que il me semble que dans Xcode lui même je ne pouvais pas ajouter la clé manuellement (bug?)
<key>UIRequiredDeviceCapabilities</key> <dict> <key>telephony</key> <true/> </dict>
Ensuite sur Xcode dans l’onglet Info, forcer à rafraîchir l’onglet qui reflétera le fichier.
Voici la documentation officielle d’Apple sur les différente clé qu’on peut mettre.
Lien pour savoir comment archiver une app et la déployer sur l’Appstore.
Note 1 : Si vous avez ce message parce que vous avez essuyé un refus, puis refait un upload, il vous faut aller dans « General » et « Build » et incrémenter le numéro de build. Un numéro de build correct doit être un entier, il est différent de la version de l’application. En incrémentant le numéro de build vous n’avez pas besoin de changer le numéro de version de l’application pour resoumettre.
Note 2 : si vous avez une application ciblant Iphone et Ipad, vous ne pouvez plus dans une version ultérieure restreindre aux Iphone seulement.
D’abord il faut installer l’environnement de développement. Pou rle JDK, Gradle,NodeJS, n’oubliez pas de configurer la variable Path!
Pour ce faire il vous faut aller sur le site d’Oracle et créer un compte 🙁
Installation de Ionic et cordova
Lors du build vous allez avoir des erreurs, mais ce doit être minime si vous avez effectué les étapes de ci-dessus.
Gradle qui est le builder doit être installé indépendamment même s’il vient avec Android Studio (ne me demandez pas pourquoi) Télécharger Gradle depuis ce site.
Premier build et possibles problèmes
Pour le premier build ou run, mettez vous en mode verbose pour voir les détail sdes potentiels problèmes :
ionic cordova run android --verbose
Problèmes possibles avec Gradle : à un moment vous pouvez avoir le message comme quoi vous n’avez pas validé la license du SDK
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
platforms;android-28 Android SDK Platform 28
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
Il faut vous rendre à ce répertoire sous Windows
C:\Users\admin\AppData\Local\Android\Sdk\tools\bin
Exécutez cette commande dans ce répertoire et validez par ‘y’ toutes les questions.
J’ai du faire récemment une application démonstrateur (POC : proof of concept) avec Ionic et des iBeacon, devant le peu d’information je pose un petit tuto par ici en espérant que ça peut servir, n’hésitez pas à poser des questions j’aurais peut être réponse.
Un iBeacon est un objet électronique qui émet des signaux bluetooth à intervalles réguliers. Il émet un seul message, qui contient des données. Et si un smartphone est équipé du Bluetooth et un programme pour capter ces messages, il peut les interpréter et par exemple faire une action. Un iBeacon est un device qui doit être positionné de façon fixe. Il sert de repère géolocalisé. Une application exemple est celle d’un musée, si vous êtes équipé de l’application du musée, et que vous vous présentez devant un tableau, l’application peut vous fournir des informations sur ce tableau.
En commerce, le filon est exploité de façon un peu différente : quand vous disposez de l’application de la chaine de magasins, si vous passez à proximité, vous recevez une notification push sur une promotion.
Le iBeacon est capable d’émettre sur 70m ! en Bluetooth low energy (BLE), de fait un distingue 3 zones, proximité immédiate, proximité, et éloigné.
Ibeacon est une émanation de Apple, Google a répliqué avec les eddystones. Il y a une différence entre les eddystones et les ibeacons, les devices sont identifiés par leur uuid, un identifiant qui est sensé les rendre unique. Une des différences à ma connaissance est que sur IOS, il faut connaitre à l’avance les uuid de vos iBeacons, sinon votre application IOS ne verra rien. Par contre une application Android avec des eddystones pourra scanner tous les eddystones se trouvant à proximité, même si ces derniers n’ont pas le même uuid que celui mis dans l’application.
Ionic est un framework de développement d’application mobile, vous développez des applications sans avoir à connaitre Java, ni Swift. Donc c’est destiné aux développeurs d’application web, qui n’auront pas besoin d’avoir la douleur d’apprendre un nouveau langage. Ceci dit, le plus difficile au début c’est de comprendre comment fonctionne Ionic.
Ionic est basé sur Cordova, une solution open source d’application mobile en y ajoutant une couche plus « native ». Depuis la version 3 il fonctionne avec le framework Javascript Angular 2+ et le langage est TypseScript, une surcouche de Javascript en plus typé. En mode développement, l’application peut être vue sur un navigateur web. Vous pouvez ensuite déployer sur une des plateforme prise en charge (Android ou IOS), et il vous faudra disposer de Android Studio pour faire marcher dans un émulateur virtuel Android, et de Xcode pour émuler sur un device IOS.
Vous pouvez aussi déployer sur un smartphone en phase de développement, ceci est nécessaire car nous utilisons des fonctionnalités disponibles seulement sur un device physique.
Il faut savoir que si vous êtes sur Windows, vous ne pourrez pas déployer sur IOS. Par contre sur Mac, vous pourrez déployer sur IOS et Android.
ionic start MyApp --type=ionic-angular
#installation des librairies
Pour configurer les iBeacons, téléchargez l’application iBKS config. Reportez vous à la documentation pour paramétrer chaque iBeacon, un peu laborieux au début.
Note : uuid doit être en minuscule ! pas de trait d’union pour paramétrer l’uuid dans le iBeacon.
Note : Pour builder pour Android, voir cet article pour builder une application Ionic sous Windows, c’est à peu près la même chose, mais sachez que vous avez besoin d’un Mac pour builder pour IOS, impossible de faire autrement que d’investir dans un macbook PRO par exemple (16 Go de RAM conseillé)
ionic cordova build ios --device
Ensuite allez dans le répertoire projet et les sous répertoire /platforms/ios et cliquez sur le fichier .xcodeproj pour ouvrir Xcode. Configurez Xcode pour le lier à votre compte développeur Apple sans quoi vous ne pouvez rien faire. En effet vous devez créer un provisioning profile.
Ensuite cliquez sur la liste des devices en haut à gauche, puis sur le triangle noir pour déployer sur votre device.
ionic cordova build ios --prod
Répétez les mêmes process que précédemment, mais en buildant vous aurez une erreur de type code signing ou pas suivant si vous avez sélectionné le certificat que vous aurez créé pour votre application. Pour paramétrer le certificat, il faut aller dans votre projet dans Xcode (icône bleue dans la sidebar), puis General puis la section Signing et cochez la case « Automatically manage signing »
Cliquez sur à côté du triangle noir en sélectionnant dans la liste le device Generic ou si vous avez un device branché, le device correspondant. En fait il faut sélectionner Generic Device lorsque vous n’avez pas de device branché.
Ensuite allez dans Produit > Archive dans le menu en haut de l’écran de votre Mac, l’archivage se lance et une nouvelle fenêtre se lance.
Une fois que vous avez mis votre archive en ligne, vous pouvez le télécharger depuis le l’adresse paramétré à l’étape 4.
Une fois téléchargé, l’application ne se lancera pas, vous avez un avertissement de droit. Pour autoriser l’application, allez dans Paramètres, Général > Gestion de l'appareil > App d'Entreprise (Nom entreprise) puis cliquer sur Faire confiance à « Nom Entreprise ».
Le fichier contenant le lien pour télécharger l’archive :
<html> <head> <title>Mon application</title> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> </head> <body> <ul> <li><a href="itms-services://?action=download-manifest&url=https://www.monsite.fr/app10/manifest.plist">Installer/MAJ New App IBeacon V 1.0.12 Build 1</a></li> </ul> <p>Instruction : Après installation allez dans Paramètres, Général > Gestion de l'appareil > App d'Entreprise (Mon entreprise) puis cliquer sur Faire confiance à "Mon entreprise"</p> </body> </html>
Il est possible de débugger votre application même s’il tourne sur un smartphone, pour ce faire, si c’est pour Android, il faut ller à l’url :
chrome://inspect/#devices Si votre smartphone est connecté par USB et que vous avez autorisé le debug par USB dans les paramètres de votre smartphone,dès que l'application tourne (après avoir fait la commande : ionic cordova run android --device ) vous aurez l'option pour ouvrir une nouvelle fenêtre :
Lien : https://ionicframework.com/docs/v3/developer-resources/developer-tips/
Mais il y a peu de différence sous Windows. Lien vers la documentation officielle
On est en release donc l’apk sera dans le répertire de release et non debug.
ionic cordova build --release android
/Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk
Le bundle généré par la précédente commande n’est pas signée, il faut le faire manuellement. Pour ce faire il faut générer une clé, si vous avez déjà la clé, passer cette étape
Générer le certificat pour signer l’application
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
Il vous sera demandé un mot de passe pour le keystore, un fichier nommé my-release-key.keystore sera créé. CE FICHIER EST ULTRA IMPORTANT NE LE PERDEZ PAS ! il n’est pas versionné de base.
Signature de l’application
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore /Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
Si vous avez tout bon jusque là félicitation ! Maintenant une opération d’optimisation pour réduire la taille. Avec l’utilitaire zipalign,
~/Library/Android/sdk/build-tools/28.0.3/zipalign -v 4 /Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk myApp.apk
Maintenant on est prêt à déployer sur Google Play !!
C’est un nouveau format qui permet une taille d’application plus réduite. C’est le format du futur qui remplacera le format apk. L’idée est de laisser la plateforme Google Play optimiser le code pour vous, et l’on obtient une taille d’application diminuée de moitié par rapport à un apk (sur un apk de 50 Mo)
Lien sur générer aab avec Ionic
Note si pas de réseau sur la version déployée sur Android
A partir du SDK28 (ou 27) vous ne pouvez plus faire de requêtes vers les url non sécurisées, sauf si vous ajoutez une directive dans AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>
Source :
https://github.com/react-native-community/react-native-permissions#ios
Il faut installer si ce n’est déjà fait le package react-native-permission
Exemple : Autoriser la camera
Aller dans le fichier AndroidManifest.xml et ajouter les entrées en xml, par exemple pour la caméra :
<uses-permission android:name="android.permission.CAMERA" />
Il faut éditer le fichier plist.info
#dans le fichier info.plist
<key>NSCameraUsageDescription</key>
<string>Usage de camera</string>
#dans le fichier Podfile
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
#après faites un
cd ios && pod install
https://medium.com/@rossbulat/react-native-managing-app-permissions-for-ios-4204e2286598
https://github.com/moaazsidat/react-native-qrcode-scanner/issues/213
Il existe d’autres types d’autorisation (SMS, vibrations etc)
Update : MacOS Catalina, connaitre son UDID
Le provisioning profile vous permet de développer et déployer des application mobile sur IOS.
Pour qui n’a jamais fait, c’est un véritable challenge, tant sur la complexité et le sens obscure des mots techniques.
C’est quoi un provisioning profile? Avant tout dites vous que Apple a envie de tout controler, et veut s’assurer qu’on montre patte blanche avant de pouvoir utiliser sa plateforme. Ainsi pour installer une application, à la différence d’Android, il faut que votre application soit signée électroniquement. Et c’est là qu’intervient le provisioning profile.
Résumons : pour pouvoir installer votre application sur un device IOS, il vous faut un compte développeur sur developer.apple.com, il vous en coûtera 99 euros au minimum par an.
En phase de développement, vous choisissez quelle application doit tourner sur quel device (c’est très limitatif, mais c’est Apple !)
Le provisioning profile se construit à partir de l’id du device physique (UDID), du certificat (qui lui même est fait à partir du CSR qui est généré plus tôt)
Le provisioning profile est à télécharger depuis votre compte développeur sur votre ordinateur pour pouvoir dans XCode builder votre application. Ce provisioning profile sera ensuite mis sur votre device, sans quoi votre application ne pourra démarrer. Ceci peut arriver quand vous avez un provisioning profile effacé du compte développeur, vous pouvez installer l’application, mais elle ne démarrera pas (voire ne s’installera pas)
Les étapes de création du provisioning profile:
Ouvrir l’application Trousseau D’accès (Keychain en anglais) et aller dans Certificate Assistant > demander un certificat. Enregistrez le
Sauvez votre certificat, allez dans votre compte développeur Apple, allez à la section « Certificates, Identifier & Profile », cliquez sur le + pour créer un certificat, uploader votre CSR, et un certificat (fichier avec extension .cer)sera généré que vous allez télécharger. Sur votre Mac, double cliquez sur ce certification pour le mettre dans le trousseau (keychain). Votre certificat a une durée de validité.
Si vous avez pris le soin de nommer votre clé, vous verrez dans votre trousseau la clé publique et privée. On peut passer à la suite
Il s’agit , allez dans la rubrique « Identifier », cliquez sur le +, vous allez créer une application avec un nom et un reverse domain (nom de domaine inversé en guise d’identifiant technique)
Pour une application React Native, allez dans le Finder, le répertoire IOS, et cliquez sur le fichier avec extension xcworkspace et non celui avec l’extension xcodeproj .
Enfin nous y sommes pour cette partie importante ! Allez dans la rubrique « Profile », créez un profile.
En phase de développement, choisissez « Development », pour déployer sur le store, ce sera un « Distribution » provisioning profile. Sur l’écran suivant vous allez choisir sur quelle application vous allez créer ce provisioning profile.
Enfin sur l’écran suivant, sélectionnez le certificat (le fichier avec extension .cer que vous avez téléchargé plus tôt)
Après avoir choisi le certificat (qui représente votre ordinateur Mac en fait) vous allez affecter au device (que vous avez entré plus tôt)
Ensuite vous pouvez télécharger votre provisioning profile, mais ce n’est pas nécessaire si vous laisser XCode gérer le signin automatiquement (recommandé)
Liens pour plus de lecture:
Vous avez fini votre application et vous êtes sur la dernière ligne droite?
Pour avoir une application mobile professionnelle, il vous faut les icônes qui vont bien et le splash screen.
Image du splash screen, il est conseillé d’avoir une image de 3000 x 3000 pixels, et pour les icônes, il faut aussi une grande image, la méthode présentée va générer les différentes résolutions. icon.png sert de base à la génération d’icône, et monSplash.png à la génération du splash screen
Télécharger les packages npm nécessaires :
npm i @bam.tech/react-native-make npm i react-native-splash-screen # pour IOS il faut faire un pod install cd ios && pod install # génération du splash # If you are using our cover splash react-native set-splash --path "monSplash.png" --resize cover #génération des icônes (pour Android et IOS) react-native set-icon --path "icon.png"
https://blog.bam.tech/developer-news/set-up-your-react-native-splash-screen-in-15-minutes
Une méthode plus proche du natif pour mettre un splash screen:
npm install -g create-react-native-app create-react-native-app MyReactNative install NodeJS Python Jdk8 npm install -g react-native-cli npm start
$ npm install -g react-native-cli $ react-native init helloWorldReactNative $ cd helloWorldReactNative
Run instructions for iOS:
• cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-ios
- or -
• Open helloWorld/ios/helloWorld.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-android
index.js est le fichier d’entrée de node.js, App.js est le fichier qui définit le composant global de l’application React Native <App/> qui contient tous les autres composants, c’est le composant root.
Le CLI originel, toujours en activité et c’est le CLI recommandé car de base.
Liens utiles : Navigation dans React Native avec React Navigation
$ yarn add react-native-vector-icons
$ npm i --save react-native-vector-icons
link sert dans le cas de React Native à lier les dépendences natives, par exemple certaines librairies sont seulement en Javascript, pas besoin de faire un link, mais certaines librairies font appel à des fonctionnalités natives, donc il faut faire un link. Dans les anciennes versions de React Native, il fallait le faire manuellement, mais les récentes versions de React Native n’ont pas besoin de faire cette commande. ( 0.60+)
$ react-native link react-native-vector-icons
donc il est conseillé de le faire manuellement : copier le dossier Font depuis node_modules/react-native-vector-icons
Ouvrir Xcode et aller dans Info.plist (rien que le fait d’ouvrir Xcode normalement devrait faire marcher l’inclusion des icônes)
Néanmoins éditez le fichier info.plist et ajouter une propriété « Fonts provided by application »
Ajouter ensuite : import Icon from "react-native-vector-icons/Ionicons"; //dans votre fichier
Il faut recompiler le projet pour que ça marche
Si message d’erreur :error Could not find the following native modules: RNVectorIcons. Did you forget to run "pod install"
faire $ pod install
Source : aboutreact.com/react-native-vector-icons/
Autre source officielle: https://github.com/oblador/react-native-vector-icons
Faire attention à la version de la librairie que vous utilisez, vous risquez de tomber dans des anciennes version de tutoriels qui ne marcheront pas pour vous. Exemple FormLabel, FormInput sont enlevés de la version 1.2
Syntaxe plus concise :
class Columns extends React.Component {
render() {
return (
<>
<td>Bonjour</td>
<td>Monde</td>
</>
);
}
}
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
https://reactnative.dev/docs/linking-libraries-ios << conseillé de le lire
(https://medium.com/@scottlydon18/podspecs-podfile-pod-install-what-happens-518af7e6471d)
BUILD FOR IOS problems: (https://stackoverflow.com/questions/35449248/failure-to-call-appregistry-registercomponent) ====================== A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
ReactJS notes:https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Au début, React se travaillait essentiellement avec des classes avec le mot clé class, ce n’est pas une varie classe au sens OOP, mais plutôt un sucre syntaxique. Depuis la version 16.8, les Hooks sont là et permettent de travailler d’une façon plus fonctionnelle (au sens programmation fonctionnelle)
https://medium.com/better-programming/react-hooks-vs-classes-add2676a32f2
Exemple avec class
import React from 'react'
class Counter extends React.Component {
constructor() {
super()
this.state = {
counter: 0
}
this.handleIncrement = this.handleIncrement.bind(this)
}
handleIncrement() {
this.setState({
counter: this.state.counter += 1
})
}
render() {
return (
<div>
<div>{this.state.counter}</div>
<hr />
<button type="button" onClick={this.handleIncrement}>+</button>
</div>
)
}
}
Exemple fonctionnel
import React, {useState} from 'react'
function Counter() {
const [counter, incrementCounter] = useState(0)
function handleIncrement() {
incrementCounter(counter + 1)
}
return (
<div>
<div>{counter}</div>
<hr />
<button type="button" onClick={handleIncrement}>+</button>
</div>
)
}
S’il y a bien un process laborieux de déploiement d’une application c’est bine sur IOS. Les processus sont très compliqués, et on oublie facilement. Ces quelques pages sont là pour aide mémoire.
Le device (iphone ou Ipad) a lui seul a plusieurs identifiants, mais en ce qui nous concerne le plus important est le UDID, car il va nous servir à générer le provisioning profile, pour déployer une application.
C’est une chaine de caractère de 40 caractères de long qui identifie de manière unique un device Apple.
Branchez le device à votre Mac, lancez Itunes
Cliquez sur l’icône à côté de « Musique »
Dans l’encart « Ipad mini 2 » (si vous avez un ipad mini) cliquez sur ECID pour faire tourner les textes, à un moment vous aurez le UDID
Sur Mac OS Catalina il est possible de le trouver dans le Finder
Vous seriez peut-être aussi intéressé de lire ces tutoriels complémentaires : Comment créer des provisioning profile pour déployer votre application mobile sur AppStore
Le provisioning profile Ad Hoc permet de diffuser une application sur un nombre limité d’appareil (100 iphones, 100 Ipads, 100 Ipods en cumulatif (info 2019)) pour un compte à 99 $/an.
Ces appareils doivent être enregistré avec leur UDID au moment de la création d’un provisioning profile dans l’interface de votre compte développeur Apple. L’avantage : pas besoin de validation de la part de l’équipe AppStore !
Un device peut contenir plusieurs provisioning profiles.
Source : lien
De quoi a-t-on besoin pour créer un provisioning profile?
Le provisioning profile a pour rôle de lier une AppID (l’application) et un certificat de distribution. Il prouve à Apple que c’est vous qui avez distribué une application, donc c’est pour ça que le certificat de distribution est lié à votre ordinateur Mac.
Ne pas confondre AppStore Connect et le Development Center. Vous pouvez accéder à ce dernier après vous être authentifié dans le Developement Center, en allant sur cette url.
source : lien
Ionic 3 est un framework de développement d’application mobile, en gros vous n’avez pas besoin de connaitre le Java pour développer une application Android, vous n’avez pas besoin de connaitre le Swift ou Objective-C pour développer une application IOS. Vous avez seulement besoin de connaitre le Javascript (le Typescript pour Ionic 3). Ionic 3 peut se baser sur Angular 2+ comme framework.
Un projet Ionic 3 , c’est beaucoup de réglage, de syntaxe avec annotation, vous codez dans des stubs tout fait. Il faut connaitre l’écosystème de plugins, qui est à la base de fonctionnalités natives. Une application Ionic a l’avantage de vous faire coder une seule fois et créer deux application mobile pour les plateformes Android et IOS, via la compilation avec Android Studio et XCode.
Comme vous codez des applications qui sont destinées à être mises sur les store, vous devez connaitre les déploiements vers ces deux plateforme, perso j’ai trouvé celle de IOS laborieuse.
Ces deux logiciels sont à la base de développement avec les framework Javascript, ces sont surtout des outils pour automatiser des tâches de build. Téléchargez d’abord NodeJS, de préférence une version LTS, dont la maintenance est assurée.
Créez vous un répertoire pour votre projet et allez dedans, et faites la commande :
#Mac Linux sudo npm install -g ionic sudo npm install -g cordova #syntaxe alternative sudo npm install -g ionic cordova
Je me suis posé beaucoup de questions quand à la possibilité de ne pas installer en global pour un projet, pour l’instant j’ai suivi la méthode préconisée par le site officiel de Ionic.
A la base c’est le projet Cordova qui permettait de développer des application mobile cross-platform, mais le look and feel n’était pas assez natif, et peut être manquait de tooling, donc le projet Ionic est un wrapper sur Cordova, et permet en gros d’avoir un look plus natif, mais pas que.
Mise à jour de Cordova
Parce que tout va très dans le monde de l’informatique, il vous faut parfois mettre à jour Cordova, pour ce faire effacez d’abord votre répertoire Android ou IOS, car Cordova fait le lien entre la plateforme et votre code Javascript
cordova platform update android
Maintenant que tout les scripts sont installés, nous allons créer une application Ionic
# ionic-angular == ionic 3 ! ionic start ibeacon blank --type=ionic-angular # allez dans le répertoire de l'application ionic serve
Un répertoire ibeacon sera créé, c’est celui de votre projet, un répertoire node_modules sera créé, et contiendra toutes les librairies nécessaires à votre projet. Ce répertoire peut vite est volumineux, il ne faut pas le versionner sous Git. Un fichier packages.json sera généré, ce fichier consigne les librairies qui sont installées via NPM. Il faut le versionner, car il permet de reconstituer le répertoire node_modules sur un autre poste si besoin est.
blank est le template de votre projet, il existe d’autres template : sidemenu avec une barre latérale, tabs avec 3 onglets, super avec 14 designs de page, tutorial pour commencer à apprendre avec Ionic 3.
Cette commande va lancer l’application dans votre navigateur par défaut sur le port 8100 à l’adresse http://localhost:8100
Le fait que ce soit sur le port 8100 fait que Ionic ne va pas interférer si vous avez un serveur Apache ou Nginx sur le port 80 par exemple.
La structure se base sur celle de Cordova, nous voyons qu’il y a un répertoire principal /src, il y a souvent le tryptique fichier ts/fichier scss/template html.
/src
/app
app.module.ts
app.html
app.scss
main.ts
app.component.ts
/pages
/assets
/theme
/www
/assets
/build
index.html
manifest.json
service-worker.js
Le fichier à la racine du répertoire index.html est le point d’entrée de l’application. Vous pouvez comparer avec le index.html de /www/index.html, ils sont quasi identiques.
Le répertoire www contient les fichiers compilés, que vous allez déployer, en effet les fichiers qui sont dans le répertoire src sont uniquement utilisé en développement, et servent à compiler l’application finale.
Le répertoire /src a plusieurs répertoires importants, /app contient le root module de l’application, qui est en fait un wrapper pour charger le reste des modules, app.module.ts est le premier module à être chargé.
Ce répertoire est très important car il contient le root module qui va appeler les modules restants. Le fichier main.ts est le fichier dans lequel vous allez mettre votre code propre, votre code métier, il y a le tryptique app.* où * est scss,html,ts. Il y a le composant app.component.ts, le code de ce script crée une classe qui est chargée dans le fichier app.module.ts.
Le contenu de app.module.ts contient le code suivant :
@NgModule({
declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
imports: [BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Toute application contient un élément racine, qui va piloter l’application et charger le reste des modules. Les composants à charger sont à l’attribut entryComponent (dans Ionic, tout est à base de composants). « MyApp » est le nom de la classe (du composant) définit dans le fichier app.component.ts .
Le fichier app.html a un élément <ion-nav> dont un des attributs est [root]="rootPage",
Il contient les différentes « pages » ou vues de l’application. Chaque page est constituée du tryptique ts/html/scss.
Il contient les images, icônes, des éléments de la vue.
Cette action est vraiment la plus facile, il suffit de lancer la commande :
ionic serve
Votre application se lancera sur votre navigateur par défaut sur le port 8100 sur l’adresse http://localhost:8100
Pour ce faire il vous faut installer sur Windows Android Studio, et notez que sur Windows vous ne pouvez pas émuler un Iphone. Pour MacOs il est possible de lancer l’émulateur IOS et Android, avec l’aide respectivement de XCode et Android Studio.
Vous devez disposer de Android Studio, Java 8, et Gradle à installer séparément avec Homebrew
brew install gradle
Paramétrage pour l’environnement Android Studio. Il faut setter les variables d’environnement, voir cette page.
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk # avdmanager, sdkmanager export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin # adb, logcat export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools # emulator export PATH=$PATH:$ANDROID_SDK_ROOT/emulator export PATH=$PATH:$ANDROID_SDK_ROOT/build-tools #gradle home setting, mettre le chemin de gradle que vous avez installé avec Homebrew (brew info gradle pour connaitre le chemin) export GRADLE_HOME=/usr/local/Cellar/gradle/5.6.3 export PATH=$PATH:$GRADLE_HOME/bin
Pour convertir le code Javascript en Java ou Swift, il faut d’abord installer les plateformes. Exécutez ces instructions en sudo :
ionic cordova platform add ios ionic cordova platform add android #pour enlever ionic cordova platform rm ios !! Vous aurez sans doute en phase de build un erreur de droit d'accès, c'est parce que vous avez dû créé la plateforme avec un sudo, dans ce cas changez le owner du répertoire plateform $ chown -R moi:moi platform
Sur Mac Os j’ai eu le problème suivant: les répertoire /platforms appartiennent à root, il a fallu faire un sudo chown -R monuser: /platforms pour changer le propriétaire de l’arborescence.
Vous devez disposer de XCode, la première chose à faire est de disposer d’un Apple ID ou d’un compte développeur Apple (cette procédure est plus compliquée), c’est un identifiant d’un compte sur apple.com. Ensuite la chose importante est de créer un provisioning profile en utilisant l’Apple ID. Qu’est ce qu’un provisioning profile?
Source
A provisioning profile is a collection of digital entities that uniquely ties developers and devices to an authorized iPhone Development Team and enables a device to be used for testing. A Development Provisioning Profile must be installed on each device on which you wish to run your application code. Each Development Provisioning Profile will contain a set of iPhone Development Certificates, Unique Device Identifiers and an App ID. Devices specified within the provisioning profile can be used for testing only by those individuals whose iPhone Development Certificates are included in the profile. A single device can contain multiple provisioning profiles.
Un provisioning profile est un ensemble d’identifiant qui lie de façon unique un device à une équipe de développeur, permettant en phase de développement de tester l’application. Ce profile (Vous le téléchargez depuis votre compte sur appe.com) doit être installé sur chaque device. un device peut contenir plusieurs provisioning profile. Avec ce dernier vous choisissez quel device peut lancer l’application et quels service votre application peut utiliser.
Provisioning is the process of preparing and configuring an app to launch on devices and to use app services. During development, you choose which devices can run your app and which app services your app can access. A provisioning profile is downloaded from your developer account and embedded in the app bundle, and the entire bundle is code-signed. The embedded provisioning profile is installed on the device before the app is launched. If the information in the provisioning profile doesn’t match certain criteria, your app won’t launch. You indirectly configure a development provisioning profile by choosing options in Xcode
Source
Bon ce n’est pas tout de faire une application, encore faut-il la déployer sur un smartphone ! là est vraiment la valeur ajoutée de Cordova et Ionic, faire une application native sans connaitre Java ou Swift.
ionic cordova run android --device
si vous avez une erreur installez
sudo npm i -g native-run
Il se peut que votre Mac n’arrive pas à détecter votre téléphone Android, dans ce cas vérifiez bien que vous êtes en mode développeur (lien ici) et que le débogage USB est activé, branchez le câble USB à votre smartphone, ensuite dans Android Studio, allez scanner les devices dans le volet gradle (screenshot ici) en haut à droite de Android Studio. Lors de la connexion de votre smartphone Android via le port USB, n’oubliez de sélectionner « Transfert de fichier », car il faudra y mettre des fichiers.
Si le device ne s’affiche vérifiez les points suivants : smartphone en mode développeur, activer le mode débogage, ensuite allez sur « Run » du menu, « Select device », puis sur la popup « Troubleshoot » vous aurez cet écran :
Faites un « rescan device ».
Vidéo sur le déploiement sur Android en seconde partie (vidéo en anglais)
La majorité des applications doivent être sur les stores, pour profiter de leur audience. Sauf certaines applications confidentielles ou B2B, le reste vous avez tout intérêt à installer sur les stores Appstore pour IOS et Google Play pour Android.
Vidéo sur le déploiement sur l’Appstore, de la génération du CSR jusqu’à l’upload de l’application et paramétrage sur Itunes Connect
Erreur Fréquemment rencontrée lorsque vous démarrez en local une application ionic :
Vous avez oublié de déclarer ce composant dans le fichier app.module.ts sous l’annotation @NgModule.
@NgModule({
declarations: [ // déclarer le composant ici
MyApp,
...
HomePage,
MentionsPage
],
...
})