React Native Flashcards
Dans quel langage les applications Android sont-elles programmées ?
-C#
-JAVA /KOTLIN
-PHP
-Javascript
Java/kotlin
Globalement les app Native sont ?
- Moins performantes que les applications cross-platform
-La seule manière de faire des applications mobiles
-Plus performantes que les applications cross-platform
-Possèdent un meilleur rapport qualité/prix
Plus performantes que les applications cross-platform
App mobile utilisent?
-code compilé
-code non compilé
code compilé
définition compilateur
Un compilateur prend un langage de programmation donné pour les traduire en langage machine, ou « code », utilisé par le processeur d’un ordinateur.
principe d’une application web Embarquée?
Avantage et défauts ?
une app dans la technologie web avec javascript en utilisant un framework fonctionne qui hors ligne qui embarque sont code dans une app native géré par le framework.
Avantages = Améliore le développement, productivité globales du projet
Défaut = La performance pas au rdv Apple, facebook ont abandonné l’idée ils préfère le cross-platforme ou natif
Définition WebView
Page web lancée dans une application qui affiche des pages
A quoi sert une API?
API facilitent la communication des produits et services en simplifiant le développement des applications, gagne en temps , et en argent
Définition API NATIVE
API NATIVE
API native fait référence aux services internes de Windows NT, ce sont les interfaces privées où sont stockées les fenêtres API.
Lequel de ces frameworks ne permet pas de réaliser des applications web embarquées ?
Ionic
Cordova
PhoneGap
Symfony
Symfony
Quelle technologie est utilisée pour la mise en page d’applications web embarquées ?
HTML / CSS
Objective-C
Kotlin
À laquelle de ces problématiques ne répond pas une application web embarquée ?
Mutualiser le code entre les projets web et mobile
Avoir de bonnes performances
Des outils simplifiés pour la mise en page
Réduire le nombre de compétences nécessaires dans une équipe
Avoir de bonnes performances
Quel est l’équivalent d’une div en React Native ?
Box
View
Container
Une View est l’homologue d’une div en React Native et permet de définir un conteneur.
En termes de date d’apparition, vous diriez que React Native, par rapport aux applications natives et web embarquées, est…
La plus ancienne façon de créer des applications mobiles
La plus récente façon de créer des applications mobiles
Ni l’une, ni l’autre
La plus récente façon de créer des applications mobiles
Laquelle de ces phrases est fausse ?
React Native utilise un thread JavaScript pour faire tourner son code
React Native utilise un moteur de rendu 3D avec un canva pour afficher ses composants
NativeScript est un framework pour créer des applications cross-plaform hybrides
La deuxième réponse est fausse
Définition REACT NATIVE
Affiche le language natif plus simple et performant.
C’est quoi une application hybride ?
dernière évolution du cross-Platform. pour atteindre un compromis entre performance et facilité de développement. Une utilisation proche du web car génère du code proche du natif performant .
Définition Open sources ?
Les logiciels libres sont accessibles au public, développés en collaboration par une communauté, et offrent un bon rapport coût-efficacité, de la souplesse et une durée de vie plus longue. Ils vont au-delà de la création de logiciels et utilisent des modèles de production décentralisés pour résoudre des problèmes communautaires et sectoriels.
comment marche React Native ?
- Le tread Javascript : Le code est exécuté dans un seul fichier App.js par le packager React Native, puis lancé dans un moteur JavaScript au sein d’une application iOS ou Android. Le thread communique avec un thread natif spécialisant les instructions JSON. Cette opération se produit toutes les 16,67 ms, ce qui permet d’obtenir jusqu’à 60 images par seconde. Le fait de ne pas générer les instructions dans ce délai provoque un effet de ralenti, dégradant l’expérience utilisateur.
2.Le pont natif (Bridge)
il reçoit des instructions de la part du thread JavaScript, lui indiquant des changements à opérer sur l’application. De là, il va retranscrire ces informations en instructions qui seront interprétables par le thread natif, afin de pouvoir impacter le cycle de vie et l’affichage de l’application.
3.Les threads natifs
le thread UI (User Interface → Interface Utilisateur) reçoit des instructions pour afficher des composants natifs Android ou iOS, qui ont été pré-mâchés par le pont React Native.
Pourquoi Expo est aussi utile à REACT NATIVE que Symfony pour PHP ?
Expo utilise le principe de l’application sans compiler, en utilisant JavaScript et ne nécessitant l’application pendant la phase de programmation. Il facilite l’accès à la création mobile, et fournit et maintient un ensemble d’APIs systèmes, comme l’accès à la caméra ou le système de fichiers du téléphone.
Site les trois cadre de travail d’EXPO ?
Un mode Managed, qui est le plus facile d’accès, mais n’est pas trop personnalisable en termes de librairies embarquées.
Un mode Bare qui offre plus de souplesse sur les librairies embarquées. Il permet d’installer du code natif qui ne serait pas disponible dans Expo, tel qu’un module de machine learning par exemple, mais s’accompagne de toute la complexité liée à une application React Native classique.
Enfin, un mode Ejected, qui est l’ancienne version du Bare Workflow. Le mode Ejected possède toutes les fonctionnalités progressivement ajoutées au Bare Workflow, destiné à le remplacer.lus supportée à partir du SDK 38 : https://docs.expo.io/expokit/eject/.
On peut commencer en mode Managed, puis migrer vers le Bare ou Ejected à tout moment. L’autre sens n’est par contre pas simple et peut représenter une vraie complexité : à éviter, donc.
A quoi sert un composant ?
Un composant est une brique logicielle qui permet de réutiliser du code pour le factoriser. Ils peuvent s’écrire de différentes manières : avec des classes JavaScript ou avec des fonctions.
combien de façon y-t-il pour écrire un composant ?
Il y en a 2 ; ceux écrire à partir d’une classe et ceux d’une fonction, a retenir que , la syntaxe n’est pas tout à fait équivalente.
* Pour les composants basés sur une fonction, il faut utiliser des hooks, qui sont une nouvelle façon de gérer des états et effets de bords avec React.
Quel genre de relation ont les composant entre eux pour structurer l’application ?
Les composants ont une relation de parent/enfant et forment un grand arbre de composants pour définir la structure d’une application.
Qu’est ce que le jsx?
Le JSX (JavaScript XML) est une syntaxe destinée à simplifier l’imbrication des composants dans une application React. Il est compilé vers une syntaxe JavaScript au moment où on génère le fichier JS final via le packager.
Comment fonctionne un composant ?
Les composants possèdent un cycle de vie qui leur permet de venir déclencher des effets de bord lorsqu’ils sont créés, détruits ou qu’ils reçoivent de nouveaux arguments.
A quoi sert un hook ?
La plupart du temps, on utilisera les hooks pour aller chercher des données distantes ou pour initialiser des gestionnaires d’événements.
Qu’est-ce qu’une prop ?
Les props sont des données transmises entre un parent et un enfant dans React Native, facilitant la transmission d’informations et de fonctionnalités, rendant les composants réutilisables et modulaires, et immuables.
(Pour améliorer la lisibilité et la propreté du code, il est possible d’utiliser la décomposition (destructuring) pour extraire les props directement dans les paramètres de la fonction du composant.)
Qu’est qu’un state ?
Le state est un mécanisme permettant de stocker et de gérer les données internes d’un composant. Contrairement aux props, le state est mutable, ce qui signifie qu’il peut être modifié au cours du cycle de vie d’un composant. Le state est utilisé pour gérer les données qui peuvent changer au fil du temps et pour déclencher des mises à jour lorsque ces données sont modifiées.
Qu’est ce qu’une dépendance autrement dit ‘dependy array”?A quoi sert elle ?
Un tableau de dépendances (ou « dependency array » en anglais) est un paramètre optionnel que l’on peut passer à la fonction useEffect dans un composant React. Ce tableau permet de spécifier les variables dont dépend l’effet déclenché par useEffect. La table de dépendance optimise les performances d’un composant en déclenchant la fonction useEffect lorsqu’une variable change, évitant ainsi les ralentissements.
Quels approchent différentes on les composants fonctionnel et les composants de classes ?
.Dans les composants de classe, le cycle de vie est géré par des méthodes spécifiques, telles que componentDidMount, componentDidUpdate ou componentWillUnmount. Ces méthodes sont appelées automatiquement par React en fonction de l’étape de vie du composant.
En revanche, dans les composants fonctionnels, le cycle de vie est géré par les hooks, tels que useEffect, useLayoutEffect, useReducer, useState. Les hooks permettent aux composants fonctionnels de gérer l’état et les effets secondaires, ainsi que de modifier leur comportement en fonction de leur état et des entrées utilisateur.
Quel différence y-a t-il entre les deux ? Avantages inconvénient?
Les hooks ont une approche de coding et de maintenance de React, qui permet de separer la logique d’état et de cycle de vie en deux parties distinctes, rendre le code plus lisible et modulaire. Les hooks permettent de réutiliser la logique d’état et de cycle de vie entre les différents composants,ainsi que la possibilité création de personnalisées et bibliothèques de composants réutilisables. les hooks sont une alternative plus simple et efficace pour gérer le cycle de vie des composants en React.
comment se transmettent les données entre parent et enfants
Pour transmettre des données d’un composant parent à un composant enfant, nous utilisons des props. Les props permettent de passer des valeurs et des fonctionnalités d’un composant à un autre, créant ainsi une communication unidirectionnelle des données. nous utilisons généralement des fonctions de rappel (callbacks).
définition fonction callbacks ?
Les fonctions de rappel sont des fonctions qui sont passées en tant que props à un composant enfant. Ces fonctions permettent au composant enfant d’interagir avec le composant parent en appelant la fonction de rappel.
Quel est le meilleur combo pour développer une app ?
YogaLayout de Facebook pour pour les flexbox et STYLESHEET une API pour mimer css. Et s’assurer que l’on écrit du style correct et qui, si l’IDE le permet, ajoute de l’auto-complétion, ce qui est très pratique. Utiliser du style avec les composants React Native est très simple et s’inspire grandement de la très populaire syntaxe CSS.
Enfin, on peut faire varier les styles dynamiquement en fonction de variables comme le state ou les props, ce qui nous permettra de gérer des animations.
(Rappel) C’est quoi une API?
Une API (application programming interface ou « interface de programmation d’application ») est une interface logicielle qui permet de « connecter » un logiciel ou un service à un autre logiciel ou service afin d’échanger des données et des fonctionnalités.
Pourquoi a-t-on besoin de faire varier du code entre les plateformes
Malgré la plus grande tentative d’abstraction entre les plateformes, il existe encore quelques cas où le développeur doit procéder à des différences entre les plateformes.
C’est le cas de composants natifs ou encore de la gestion des ombres dans React Native, mais cela peut aller plus loin, comme des différences fondamentales d’architecture sur des fonctionnalités telles que les notifications push.
React Native utilise un outil qui permet de concentrer tous nos fichiers JavaScript en un seul et unique fichier qui sera lu par l’interpréteur JavaScript du téléphone, le moteur JavaScript.
Sur React Native, il y a deux outils qui sont en charge d’effectuer des traitements sur notre code lesquels ?
Babel un transpiler; Petite parenthèse : un transpiler de code tel que Babel est un outil qui prend du JavaScript en entrée et applique des transformations dessus. et metro le packager de React Native
Qu’est-ce qu’un transpiler de code ?
rendre compatible même avec des moteurs JavaScript qui ne le supportent pas encore nativement. C’est très largement utilisé sur le Web, notamment pour la compatibilité navigateur, mais ça l’est également avec React Native.
Qu’est-ce qu’un packager de code ?
Un packager de code est un outil responsable de gérer les imports et la résolution de modules au sein d’une base de code. De cette manière, le packager construit un seul fichier JavaScript, que l’on pourra distribuer et qui contiendra les dépendances du code natif.
Il existe globalement deux manières de procéder à une différenciation des plateformes :
Soit par une structure conditionnelle en évaluant la plateforme au runtime. Cette manière est simple et légère, et reste préférable quand il y a peu de changements.
Soit en préfixant les fichiers, ce qui aura pour effet de choisir le bon fichier à l’assemblage du JavaScript par le packager. Ici, on a une très grande liberté d’algorithmie, par contre cela induit toujours quelques duplications de code. À noter que cette technique s’applique également aux fichiers image et vidéo, ce qui est une très bonne chose !
Il incombe au développeur de bien estimer la quantité de code différent qu’il a dans son projet et de choisir la bonne méthode en fonction de cela. Ceci impactera notamment la maintenance de l’application, mais pourrait également impacter son poids en termes de mega-octets, notamment sur un paquetage conditionnel de fichiers vidéos/photos.
Explique le STORE au mieux.
L’état de l’application est accessible à tout composant qui génère la requête, mais la mutation des données n’est possible que par une action du répartiteur. Le store agit comme un point de vérité unique, stockant les données de l’application. Les props dans React fonctionnent de manière similaire, le parent étant le seul prop véridique et l’enfant le seul prop véridique. Une fois l’action de mutation effectuée, le magasin émet un événement indiquant tous les composants à l’écoute de la mise à jour. Plusieurs magasins peuvent être utilisés dans l’application, ce qui permet aux états de gérer les données d’une seule entité, comme les données utilisateur.
Définition du store ?
Là où le state représente les données, le concept de store ou datastore représente la structure qui va nous permettre d’interagir avec nos données. Une notion très importante à prendre en compte avec le state global de l’application est celle du point de vérité unique.
Définition Dispatcher
Le dispatcher est une entité qui va gérer les appels des composants à des actions de mutation du state global. L’appel à l’action est ensuite transmis au(x) store(s) enregistré(s) dans l’application, afin qu’elle puisse être traitée.
Définition Views
Les views représentent les composants de notre application React. Ils écoutent les mutations provenant du store et mettent à jour leur rendu en fonction de ces mises à jour. Ils sont connectés au dispatcher, qui va se charger de transmettre au store les appels aux actions. Jusqu’à présent, nous n’avons géré qu’un seul type de composant, ce que Flux définit comme des presentation views, responsables de l’affichage seulement. Flux définit un second type de composants, les container views, chargés de s’interfacer avec le store.
Définition Action
Une action est un objet contenant toute l’information nécessaire pour réaliser une mutation du state, en particulier le state impacté, et éventuellement un payload de données qui vont venir remplacer les données existantes.
Dessiner le Schema du pattern Flux
action >Dispatcher>store >view
^— action–^
Pourquoi il ne faut pas utiliser que les states global pour gérée les données générale d’une application ? Explique au mieux et donne une meilleurs options.
Le state global permet de gérer les données qui concernent toute une application SPA. Il serait possible de gérer ce state global avec les outils que nous avons à notre disposition actuellement, props et state local. Mais cela pourrait s’avérer fastidieux et d’autres outils sont plus adaptés à la situation, tels que diverses implémentations du pattern Flux mis au point par Facebook. Ce pattern définit une manière de gérer le state local à travers plusieurs entités reliées entre elles par un flux de données uni-directionnel.
qu’est-ce que redux pour react native ?
Redux est une implémentation React du pattern Flux qui est extrêmement populaire.
Redux est très inspiré du pattern Flux, mais ne reprend cependant pas toutes ses entités.
Nous retrouvons le store et les actions, mais ces actions sont définies dans un élément spécifique à Redux, les reducers.
Ce sont également ces reducers qui exposent le state.
Définition reducers
Un reducer est une fonction pure, qui prend en paramètres le state original, ainsi que l’action, et retourne un nouvel objet de state contenant la mutation effectuée. Il est fortement conseillé (c’est-à-dire nécessaire) avec Redux de faire en sorte que le state soit immutable : chaque action renverra un nouvel objet de state contenant les mises à jour.
A quoi sert le Dispatcher flux ?
Le dispatcher Flux est intégré à la librairie sous la forme de la fonction store.dispatch() qui permet d’émettre une action vers le ou les reducer(s). De la sorte, il est possible de définir plusieurs reducers qui seront combinés dans un reducer racine, passé à son tour en paramètre au store. Le state qui découlera de plusieurs reducers combinés est un objet dont les propriétés de premier niveau seront les reducers, chacune de ces propriétés portera ensuite le state du reducer associé.
Quels sont les deux grandes manière de ranger ces fichiers ?
- Les projets qui organisent le code par ce qu’il est (approche sémantique): par exemple, les composants dans un dossier components, les modèles de données avec les autres dans un dossier models, etc.
- Les projets qui organisent le code par entités métier: par exemple, nous aurons un module user qui contiendra des composants graphiques pour l’affichage des utilisateurs, le modèle de données des utilisateurs, etc.
On parle alors de Feature Driven Development (« Développement Guidé par les Fonctionnalités »).
Donne les inconvénients d’une organisation sémantique des dossiers .
Bien que de taille modeste, cette approche peut sembler pertinente, mais elle a des limites. Les importations de fichiers deviennent plus longues et les conflits avec Git augmentent. Les modules ne sont pas clairement identifiables, ne sont pas exportables et leur localisation dans un projet prend du temps.
Donne les avantages d’ une approche modulaire par fonctionnalité :
Chaque fonctionnalité est isolée dans un module, ce qui permet de l’exporter vers d’autres projets.
Cette architecture permet de gagner du temps dans la recherche de fichiers et de fonctionnalités.
L’ajout d’un fichier README.md spécifiant les dépendances des modules, ou l’utilisation d’un injecteur de dépendances comme le framework Angular est recommandé.
Il est essentiel d’établir une structure et de maintenir la communication entre les membres de l’équipe pour éviter les conflits et maintenir le projet.
En plus de prettier sur vs code comme extention il faut un linter mais …Qu’est-ce qu’un LINTER ?
Cet outil applique des règles qui seraient pour la plupart susceptibles de causer un dysfonctionnement dans l’application. il est très important !!
Qu’est-ce que npx ?
npx est livré avec npm et permet d’exécuter les outils installés localement. Nous allons laisser de côté la partie npx pour le moment, mais, en recherchant sur le Web, on obtient une documentation très explicite à son sujet.
Qu’elle library permet de gerer la navigation dans react native ?
La principale librairie pour cela est react-navigation, qui offre une grande liberté et propose notamment un navigateur en pile (StackNavigator) qui permet, comme son nom l’indique, d’empiler des écrans dans l’affichage
Que veux dire DUMB COMPONENT ?
- On parle de Dumb components (« composants bêtes »).Higher Order Component (HOC) Un type de composant également très populaire, notamment avant l’apparition des hooks pour les composants fonction, est le Higher Order Component (HOC).Ils sont généralement assez populaires dans les projets.
Explique simplement le concept de routing dans react native
À la différence des applications web, les applications mobiles ne se basent pas sur une URL pour présenter une page.
Par conséquent, la notion de route y est différente.
Dans une application React Native utilisant react-navigation, le routing se décompose entre plusieurs composants que l’on peut répartir en plusieurs catégories: le conteneur principal, les navigateurs, les écrans et les composants métier.
Définition Navigator ?
Un navigateur est un composant React qui possède une certaine logique permettant de décrire le fonctionnement de sa navigation.
Ces composants reçoivent des props qui leur permettent de définir la structure des écrans à afficher, ainsi qu’un ensemble de paramètres de configuration.
Définition d’un écran dans React Navigation?
Un écran est un composant React Native qui reçoit des accessoires de navigation, ce qui lui permet d’effectuer des actions liées à la navigation, comme changer le titre ou l’état de l’écran, et d’afficher des composants graphiques pour la représentation des données.
Que veux dire FILO ?
On parle de pile FILO (First in, Last Out, c’est-à-dire premier entré, dernier sorti). Les StackNavigators sont la colonne vertébrale d’une application React Native, nous les utiliserons très souvent afin d’afficher des modales ou de naviguer à travers les étapes d’un processus de paiement, par exemple.
Explique comment marche en générale la navigation dans react native ?
React Native ne peut pas utiliser la navigation par URL comme une application web. Des bibliothèques sont disponibles pour combler ce comportement et gérer les animations de navigation. La bibliothèque principale est react-navigation, qui propose un navigateur de pile (StackNavigator) pour émuler les écrans dans l’affichage.
Explique le navigateur par onglets Tabnavigator.
Le navigateur par onglets TabNavigator permet de mettre au point une autre expérience utilisateur très pratique pour une utilisation tactile.
Il se décline par défaut en deux versions: une bottom qui permet d’afficher la barre de navigation sous les écrans comme vu dans nos exemples, ou une version top pour les applications qui préfèrent le menu au-dessus des écrans.
Explique Le terme navigateur en panneau Pourquoi en faut -il qu’un seule par app ?
un panneau ou autrement “bouton burger” sortant d’un côté de l’écran pour venir se superposer à l’interface.
Il n’en faut qu’un seul dans toute une application, sous peine de créer des conflits de navigation, et s’assemble parfaitement avec n’importe quel autre type de navigateur.
Comment optimiser une navigation avancé dans son app react native ?
Les navigateurs combinant les 3 navigateur de react-navigation permettent une navigation avancée, la gestion de systèmes modaux et le contrôle de la superposition d’éléments.
La navigation conditionnelle à l’aide de structures simples permet de créer des scénarios complexes, tels que l’embarquement des utilisateurs ou le masquage des éléments d’interface pour les utilisateurs non payants.
Cite les 3 types de navigateur dans react-navigation ?
Le TabNavigator permet de masquer ou d’afficher des écrans.
Le DrawerNavigator, lui, permet d’utiliser un panneau qui sort d’un côté de l’application au swipe ou au déclenchement d’un bouton.
le StackNavigator, on peut définir un routeur qui servira à gérer des modales qui passeront par-dessus un potentiel TabNavigator.
Tous les navigateurs sont adaptables en cours d’exécution et peuvent être modifiés par l’utilisateur, ce qui permet des navigations dynamiques basées sur des données asynchrones ou la gestion de différents états de l’utilisateur.
Quel type d’animation peut -on créer avec React native ?
Animated API simplifie et optimise les modèles d’animation et d’interaction en utilisant une approche impérative et une grande variété de modèles d’animation. Elle se concentre sur les relations déclaratives entre les entrées et les sorties de données, avec des transformations configurables et des méthodes de démarrage et d’arrêt de l’animation contrôlées par le temps.
Qu’elles sont les deux choses a retenir pour Animé un élément dans react native ?
LayoutAnimation et Animated
Emulateur d’Android
programmes dont la fonction est de simuler le fonctionnement d’un téléphone.
Utiliser un émulateur permet de profiter de la puissance de calcul d’un ordinateur, qui dispose généralement d’un meilleur processeur et de plus de mémoire RAM. On peut également développer complètement hors-ligne, étant donné que tous les logiciels tournent sur l’ordinateur.
Comment remédier au problèmes e perte de données sur un mobile ?
Les applications mobiles peuvent nécessiter le stockage de données persistantes entre les cycles, car elles oscillent entre les cycles d’arrière-plan, d’avant-plan et de désactivation. La perte de contenu peut être un problème lorsque l’application est arrêtée. Pour y remédier, des bases de données locales telles que SQLite peuvent être utilisées pour stocker des données sur le téléphone et les réutiliser ultérieurement. Une syntaxe SQL performante est également utilisée pour interagir avec ces données.
Définition SQLITE
SQLite est une version embarquée d’un système de gestion de bases de données relationnelles, qui permet à une application d’interagir avec une faible latence avec un moteur de stockage.
Pourquoi utiliser SQLITE ?
Elle permet la persistance des données entre les cycles de l’application.
utile pour les applications hors-ligne et les données mises en cache pour économiser de la bande passante.
Les données sont définies dans des tables et identifiées à l’aide de clés primaires et étrangères.
Des transactions sont utilisées pour assurer l’intégrité de la base de données.
le respect de bonnes pratiques peut permettre d’éviter certains bugs, mais aussi d’en comprendre plus rapidement l’origine, et facilite la mise en place d’une solution corrective. Cite -les ;
D’écrire des spécifications claires : le comportement d’une fonctionnalité peut être considéré différemment d’une personne à l’autre selon les informations en leur possession sur la fonctionnalité attendue.
De respecter les principes de base pour coder proprement : cela passe par le nommage de variables claires et compréhensibles, l’écriture de fonctions n’ayant qu’une seule responsabilité, puis par des notions d’organisation de code, comme nous l’avons vu dans un autre chapitre.
que peut on utiliser comme technique pour afficher les erreurs de code directement ?
Lorsque l’application présente des défaillances, on peut traquer les comportements défectueux en utilisant des outils comme console.log() afin d’afficher des messages : console.warn() pour afficher un avertissement ou console.error() pour afficher une erreur.
Que veut dire breakpoints pendant un debugging?
Utiliser des breakpoints
Une nouvelle approche du debugging est l’utilisation de points d’arrêt (breakpoints) dans le debugger. Un point d’arrêt indique au debugger qu’il doit interrompre l’exécution du code sur une ligne spécifique.
Le mode pas à pas en debugging ?
il est possible, grâce au bouton Play, de reprendre l’exécution normale de l’application, tandis que les suivants permettent une gestion fine du suivi de l’exécution.
Il est donc possible de suivre l’avancement de l’exécution des instructions ligne par ligne, de décider si l’on souhaite entrer dans une fonction ou en sortir directement pour retourner à l’instruction appelante.
Qu’elle sont les panneau interessant pour le debugging en plus du mode pas à pas?
La pile d’appels et le scope
En résumer explique Debugging ?
Le debugger est un outil très pratique pour suivre le déroulement de ses algorithmes dans l’application. Le code ne s’exécute plus sur le terminal, mais directement dans la machine virtuelle JavaScript qui est embarquée dans le navigateur web.
Le debugger permet notamment de naviguer pas à pas et de récupérer la valeur des variables à l’endroit où l’on définit des points d’arrêt (breakpoints).
Explique le principes d’environnement dans REACT NATIVE?
- Lors de la création d’une application mobile, il est essentiel de tenir compte de l’environnement.
- Pendant le développement, certains outils sont activés et le code peut être débogué.
- Lors de la compilation pour la production, l’optimisation de tous les aspects est essentielle pour donner la priorité aux performances.
- React Native dispose de deux environnements: un environnement de développement avec des outils actifs et un environnement de release pour les déploiements en production.
- Chaque environnement dispose d’une configuration pour préparer une compilation adaptée à l’environnement.
- Gradle gère les séquences de scripts et les configurations pour Android, tandis que XCode est l’environnement de développement d’Apple.
- Les deux technologies abordent la même question de la certification de l’origine du paquet d’applications.
Qu’est-ce qu’un profil de provision pour iOS ?
Un profil de provisionnement se compose de trois éléments : un certificat de signature généré via l’interface d’Apple, un identifiant d’application unique, des capacités définies et une liste d’identifications de terminaux pour la distribution en dehors des magasins Apple. Ce profil est généré automatiquement par Xcode, et les valeurs sont stockées dans le fichier App.json, et non dans le CLI.
Le keystore d’Android?
Sur Android, le keystore est un fichier semblable pour certifier la provenance d’une application. En l’utilisant lors de la construction, nous signons notre application et confirmons sa paternité. Ceci est décrit dans la documentation de React Native pour les applications autonomes. Pour éviter que Google Play ne rejette l’application, nous devons signer les nouvelles versions avec le même keystore.
Comment rendre notre app disponible ?
Pour rendre notre application disponible, nous devons créer une image pour identifier l’application sur le téléphone et un titre. Nous devons connaître le nom, l’icône et la version de l’application dans le fichier App.json. Ensuite, nous devons configurer iOS et Android avec des noms de paquets et des identifiants de paquets, et noter les notions équivalentes de buildNumber et de versionCode. Nous devons les ajouter pour chaque version sur l’AppStore ou Google Play.
La liste exhaustive des configurations est disponible ici : https://docs.expo.io/versions/latest/config/app/.
En résumer Explique le déploiement d’une application sur les stores
Il existe au minimum deux environnements : celui de développement et celui de production.
C’est une tâche un peu complexe sur une application native classique, mais, grâce à Expo, tout cela est très simple.
Afin de déployer notre application, il faut également préparer un certains nombre d’éléments : une icône, un écran d’accueil et un lot de détails au sujet de l’application, qui seront demandés par les magasins d’applications afin de créer la fiche technique de l’application.
Que fait EXPO a notre place pour builder une app?
Sur Android, Gradle (le gestionnaire de tâches d’Android) va builder notre application en optimisant le code et, sur une application React Native classique, en copiant le bundle JavaScript du packager dans ses assets. Il signe également ce paquet applicatif avec notre keystore pour certifier la provenance de l’archive.
Sur iOS, XCode fait exactement la même chose en compilant le code Objective-C et en ajoutant le profil de provision à l’application afin de la signer.
Que se passe t-il lorsqu’on fait une mise à jour dans Expo ?
Expo, à chaque mise à jour, va générer une nouvelle version du bundle JavaScript et l’envoyer sur ce qu’il appelle un canal (channel en anglais) de distribution. Cette notion de canaux est très importante, car elle permet de gérer les environnements et les versions intermédiaires à tester avant d’envoyer du code en production.
Les assets EXPO?
Expo charger les assets sur un CDN (Amazon CloudFront) pour être récupérés lorsque les utilisateurs lanceron l’application. Il remplace automatiquement la référence pour pointer à l’URL sur le CDN. Cependant, les assets doivent être explicitement importés dans le code de l’application pour être chargés sur le CDN.
Tout asset qui ne se trouverait pas dans le ou les chemins autorisés serait alors omis. Une bonne pratique est d’utiliser la commande npx expo-optimize afin d’optimiser tous les fichiers de notre projet avec sharp, un programme de traitement d’images, comme décrit ici : https://docs.expo.io/guides/assets/#optimization.
Expo et le procédé de build explique ?
Les builds natifs peuvent être un peu complexes à prendre en main, mais, pour cette initiation, nous utilisons Expo. En utilisant les canaux de déploiement, on peut facilement mettre à jour une application à distance en esquivant le procédé de validation des magasins d’applications.
Enfin, le procédé de build est très simplifié et pris en très grande partie en main par la CLI, qui va nous guider dans la procédure de déploiement.
Creer une app sans expo ? comment on creer un projet alors ?
Créer un nouveau projet
La première chose à faire est donc d’utiliser la CLI : notons bien le mot « utiliser » et non pas « installer ». En effet, auparavant, il était recommandé de l’installer, mais pour plus de flexibilité, il est désormais recommandé d’utiliser toujours la dernière version en utilisant npx.
comment lancer une app sans expo ?
Une fois le projet initialisé, lancer les commandes npx react-native run-ios ou npx react-native run-android selon que l’on utilise iOS, Android, ou un téléphone branché. Xcode ou Gradle construira automatiquement l’application en mode développement et l’installera sur le terminal ou l’émulateur. Chaque projet possède sa propre application à partir du développement, les développeurs doivent donc arriver à l’écran et suivre une procédure d’installation spécifique.
Le concept d’auto-linking c’est quoi?
React Native propose un mécanisme pratique d’auto-liaison pour l’installation de nouvelles bibliothèques, permettant l’installation automatique de dépendances natives externes. La plupart des bibliothèques se conforment à cette technique, ce qui rend l’installation transparente. Pour installer un module natif, il faut suivre une procédure spécifique et détaillée dans la documentation de la bibliothèque. L’écosystème est ouvert et chaque bibliothèque a ses propres pratiques.
Doit-on signer nous même les paquets applicatifs ?
Signature de paquets applicatifs
Il nous incombe également de signer nous-mêmes les paquets applicatifs .ipa et .apk pour iOS et Android respectivement, avant l’envoi sur les stores.
Ce n’est pas une manipulation nécessaire en mode développement et nous ne nous y attarderons pas dans ce cours.
