App Mobiles

xcode

Problème rencontré avec XCode

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

xcode

Mise à jour de React Native suite à la version IOS 14

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.

Solution à ce problème :

react native

Configurer Apple Pay sur React Native (Part 1)

Tuto React Native Apple Pay avec Laravel en backend

C’est quoi Apple Pay?

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)

Ce qu’Apple Pay n’est pas

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.

Procédure de configuration sur le site d’Apple

  • créer un CSR depuis le trousseau de clé Application > Utilitaire
  • Aller dans le compte développeur Apple, créer un Id Merchant
  • Aller dans Certificate créer un certificat cochez Apple Pay Payment Processing Certificate
  • Uploadez le CSR généré, attention pour générer un certificat pour Apple Pay, c’est différent il faut associer une clé spéciale
  • Vous serez invité à téléchargé le certificat
  • Allez dans Certificat,Identifier & Profile, cliquez sur l’application sur laquelle vous voulez utiliser 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
  • Ouvrez Xcode, choisissez onglet Signing&Capabilities, cliquez sur le bouton « +Capabilities« , une liste apparait, double cliquez sur Apple Pay
  • Apple Pay apparait maintenant dans l’onglet, cochez la case « MerchantID »

https://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ération du certificat Procédure

Générer le CSR pour Apple Pay : https://docs.skillz.com/docs/v23.2.1/apple-pay/

On your Mac, open Keychain Access
In the menu bar go to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority....
Input your preferred email address
Select Saved to Disk
Check Let me specify key pair information
Press Continue
Choose a location to save the .certSigningRequest file, and give it a name.
Select Algorithm ECC
Select Key Size 256 Bits ** NOTE: You MUST select ECC before the 256 Bits option becomes available
Press Continue

https://docs.skillz.com/docs/v23.2.1/apple-pay/

Créer un Sandbox tester Account

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)

react native

Ajouter Facebook Login dans une application React Native

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

  • créer une ap dans Facebook developer Console, récuper l’Id de l’app
  • Installer le package pour React Native
  • Implémenter le code 2 composants sont nécessaire LoginButton, LoginManager

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

https://www.youtube.com/watch?v=J-VIu_i0NRM

Ce lien propose une solution quand le projet ne veut lus builder après l’installation de fbsdk sur IOS.

https://stackoverflow.com/questions/50096025/it-gives-errors-when-using-swift-static-library-with-objective-c-project/56187043#56187043

Facebook Login et le système existant de connexion à votre application

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.

Votre système de création de compte et de connexion

  • Création de compte : l’utilisateur entre email et mot de passe et valide la création
  • l’utilisateur se connecte en entrant email et mot de passe
  • le serveur envoit un token d’authentification qui sera stocké sur l’application, et envoyé à chaque requête Ajax

Création avec Facebook Login

  • L’utilisateur clique sur le bouton Facebook Login, s’authentifie, et Facebook envoit un Access Token

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.

Obtenir l’email avec le facebook login

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

react native

React Navigation V5 (librairie de React Native)

Cette librairie est considérée comme importante car elle est incluse par défaut quand vous bootstrapez un projet React Native.

React Navigation V5

Bare react Native CLI

⚠️ 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

Configuration initiale de React Navigator

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

Configuration native pour Android

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

Installation des fichiers natifs IOS

$ 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';

Pour IOS React navigation a besoin de cette opération: Cocoapod

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.

Imbrication de routes

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

PRO TIP : Régler le problème du refresh lors d’un goBack()

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')
...
Android

Déploiement d’une application React Native sur Android

Les Builds sur IOS et Android

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 ! ».

Problèmes de builds pour Android

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

Déploiement sur Android Device (depuis MacOs)

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

Erreurs récurrentes lors de la compilation sur device ou émulateur

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 !

react native

Que faire quand Metro ne se lance pas (React native)

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 :

listen EADDRINUSE: address already in use :::8081

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>

react native

Connaitre l’UDID de son appareil sur MacOS Catalina

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

xcode

XCode iPhone is not available. Please reconnect the device

Pourquoi le message XCode iPhone is not available. Please reconnect the device ?

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.

Quelle version de Xcode pour quelle version de IOS ?

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 !

Quand Xcode est à jour et que ça ne marche toujours pas

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 :

Passez sur Cordova par exemple (attention l’image vient d’un projet Ionic, pour React Native ce sera différent)

Puis revenez en mode normale, le contenu de la fenêtre aura varié, ça peut prendre quelques dizaines de secondes, refaites un build.

Astuce : empêchez IOS de se mettre à jours !

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

tuto ionic 4

Détecter dans le canvas (ou sur l’écran) la position du touch dans Ionic

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

Les événements touch

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

Eviter le scroll sur mobile

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.

Comment trouver le fichier info.plist dans Xcode

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.

ERROR ITMS-9000: “Redundant Binary Upload

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.

tuto ionic 4

Builder un projet avec Ionic sous Windows

D’abord il faut installer l’environnement de développement. Pou rle JDK, Gradle,NodeJS, n’oubliez pas de configurer la variable Path!

Installation de JDK

Pour ce faire il vous faut aller sur le site d’Oracle et créer un compte 🙁

Installation de NodeJS (donc de NPM)

Installation de Ionic et cordova

Installation de Android Studio

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.

tuto ionic 4

Tuto application Ionic 3 IBeacon et déploiement vers le device sous IOS

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.

Ibeacon qu’est ce que c’est?

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

Source https://gorillalogic.com/

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 qu’est-ce que c’est?

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.

Bootstrapper une application ionic

ionic start MyApp --type=ionic-angular

Importer les librairies pour iBeacon

#installation des librairies

Paramétrer vos iBeacons : importante distinction entre les iBeacons et les EddyStones (rappel)

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.

Déployer l’application Ionic sous IOS

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

Déployer pour le device

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.

Déployer pour la production IOS

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

1 – Création de l’archive

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.

2 – Choix du type de distribution

3 – Optionnel : App thinning

Important : over the air installation, vous permet de télécharger l’IPA depuis un lien web, pratique pour des application d’entreprise, si vous voulez éviter le processus de validation de l’Appstore

4 – Le chemin de votre archive sur le site web

5 – Export de l’IPA

Export de l’IPA sous forme d’un dossier, récupérez le dossier généré et uploadez le le en ligne.

6 – Installation over the air

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>

Débugger votre application sur un device

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/

Cliquez sur Inspect pour débugger dans votre navigateur.

Déployer l’application Ionic pour Google Play (Instruction sous MacOS)

Mais il y a peu de différence sous Windows. Lien vers la documentation officielle

Créer la release

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

Signer l’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 !!

Note sur Android App Bundle (.aab)

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://stackoverflow.com/questions/30326148/cordova-ionic-http-request-not-processing-while-emulating-or-running-on-dev

react native

React Native les permissions sur Android et IOS

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

Pour Android

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

Pour IOS

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)

xcode

Xcode, IOS comment créer un provisioning profile

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)

De quoi est composé un provisioning profile
  • Le development certificate : nécessaire pour tester une application sur une device physique (pour un émulateur pas besoin)
  • Unique Device Identifier, le UDID de votre device (grâce à Itunes vous pouvez le voir en connectant votre device à votre Mac, oui si vous n’avez pas de Mac, vous pouvez oublier les app IOS, il est possbile de contourner, mais est ce que le temps perdu à bidouiller en vaut-il la peine?
  • App ID, c’est l’Id de votre application (à créer sur le compte développeur)

Les étapes de création du provisioning profile:

  • créer un CSR (Certificate Signing Request)
  • sur votre compte développeur créez une application (il aura un AppId)
  • composer votre provisioning profile ensuite

Créer un CSR

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

Sur le compte Apple, créez l’app Id (ou BundleId)

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)

Ajoutez un device physique (entrez le UDID de votre appareil)

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 .

Créez votre provisioning profile

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:

react native

Ajouter un splash screen sur React Native la méthode facile

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:

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

react native

React Native Découverte

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

Comment trouver le device Id de votre Ipad ou Iphone

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.

Device id == UDID !!

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.

Trouver le UDID (unique Device ID)- avec Itunes

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

Comment créer un provisioning profile Ad Hoc

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

tuto ionic 4

Démarrer un projet avec Ionic 3

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