Setup (création de l’appli) :

npm install -g create-react-native-app
create-react-native-app MyReactNative

install NodeJS Python Jdk8
npm install -g react-native-cli
npm start

Bootstrap bare react Native CLI App :

$ npm install -g react-native-cli
$ react-native init helloWorldReactNative  
$ cd helloWorldReactNative

Run (much easier than Ionic !!!)

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

Run instructions for Android:

• 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

Architecture de l’application React Native :

Les fichier index.js et App.js quelle différence?

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

REACT NATIVE VECTOR ICONS

Installation avec yarn

$ yarn add react-native-vector-icons

ou avec npm

$ npm i --save react-native-vector-icons

link << cette commande ne semble pas marcher…

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

React Native Element use the V1.2 because different from 0.19.1 !

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:

• react-native-vector-icons (to unlink run: « react-native unlink react-native-vector-icons »)
  This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via « react-native unlink  » and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
  Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

Que fait la commande link?

https://reactnative.dev/docs/linking-libraries-ios << conseillé de le lire

Que fait la commande Pod Install?

(https://medium.com/@scottlydon18/podspecs-podfile-pod-install-what-happens-518af7e6471d)

Problèmes de builds pour IOS

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.

FUNCTIONAL COMPONENT VS CLASS COMPONENT

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>;
  }
}

React Hooks, une autre façon de faire par rapport aux classes

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>
  ) 
}

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.

Bootstrappez votre application Ionic 3

Installation de NodeJs et NPM

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.

Installation via NPM de Ionic et Cordova

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.

Pourquoi Cordova?

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

Créer l’application Ionic

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.

Structure d’un projet Ionic 3

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é.

Le répertoire /app

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",

Le répertoire /pages

Il contient les différentes « pages » ou vues de l’application. Chaque page est constituée du tryptique ts/html/scss.

Le répertoire /assets

Il contient les images, icônes, des éléments de la vue.

Lancer l’application sur un navigateur

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

Lancer l’application dans un émulateur

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.

Lancer avec un émulateur smartphone

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

Installer (et enlever) les plateformes IOS et Android

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.

Lancez votre application sur un smartphone physique

Lancez votre application Ionic sur IOS

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?

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.

Source

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.

Lancez votre application Ionic sur un smartphone Android

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)

Le grand final déploiement dans les stores !

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 :

ERROR: Component xyz is not part of any NgModule or the module has not been imported into your module

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
  ],
...
})