Dans un
article précédent, j'ai parlé en détail de notre expérience dans la création d'un service web / application mobile pour tenir un journal personnel. La version actuelle de l'application (la version minimale réalisable est déjà disponible sur Google Play) est en cours de développement sur React Native, et nous y reviendrons ici en détail aujourd'hui.
Nous parlons de notre propre expérience avec le framework, des moyens d'étendre la fonctionnalité, des «pièges» (où êtes-vous sans eux!) Et comment nous les avons contournés.
À propos de l'ensemble du cadre
Un peu sur le héros de l'occasion -
React Native . Il est toujours bon!
Pour ceux qui connaissent assez JavaScript et surtout NodeJS - c'est très bien. Si vous avez de l'expérience avec React, eh bien, ou du moins avez une idée de son idée, le mécanisme - c'est tout simplement magnifique!
L'essentiel est que la sortie soit une application vraiment native. Les extensions et plugins couvrent près de 99% des tâches typiques. Le pourcentage restant en cas de besoin urgent peut être ajouté dans les langues natives (java, object-c) et connecté à l'application React Native.
Mais assez parlé des pros, ils ne leur sont d'aucune utilité, même si la liste sera impressionnante. Tous les goodies et goodies sont vides de sens si l'application ne démarre pas, et c'est la première chose que nous «satisfaisons» avec React Native.
Au début, il n'aimait pas la version de NodeJS. Puis la version npm. Ensuite, la version du SDK Android, puis la version des outils Android, puis ... Il est inutile d'écrire comment tous les problèmes ont été résolus, car à partir de ce moment, tous les logiciels ci-dessus ont mis à jour leurs versions et les instructions ne seront plus pertinentes.
Sachez simplement que le goulot d'étranglement React Native est l'environnement de génération. Préparez-vous à l'apprentissage de Google, à la lecture des forums et au stackoverflow. En conséquence, nous avons passé sur le déploiement: Ubuntu - 3 jours, Win10 - 2 jours. Aussi étrange que cela puisse paraître, tout s'est avéré plus simple sous Windows, enfin, ou tout simplement sur Ubuntu, ils se sont débarrassés des cônes et ont déjà compris quoi et où décoller.
Remarque, tout à coup, quelqu'un est utile: le code présenté ci-dessous a résolu tous les problèmes de compatibilité des versions sdk des modules complémentaires lors de la compilation du projet.
subprojects { afterEvaluate {project -> if (project.hasProperty("android")) { android { compileSdkVersion 26 buildToolsVersion '26.0.3' } } } }
Il est écrit dans le fichier /android/build.gradle à la toute fin. Sans cette «directive», apparemment, chacun des plugins / extensions a essayé de compiler selon leurs propres versions du SDK Android, ce qui a conduit à l'assemblage du projet dans un assortiment chaotique d'erreurs féroces et d'avertissements désagréables. Personne ne sait à quel point la recommandation sera pertinente à l'avenir. Mais aujourd'hui, en particulier après que Google a interdit de force d'utiliser les SDK en dessous de la 26e révision pour la compilation, cela aide beaucoup.
Le deuxième goulot d'étranglement - la douleur n'est pas tant React Native que, apparemment, l'ensemble de l'Open Source dans son ensemble - un support limité. Les référentiels ont des tonnes de problèmes non résolus. Les bots féroces "intelligents" ferment les bogues en l'absence d'activité, parfois même après 7 jours ... Et tout semble aller bien. Personne ne doit rien à personne. Tout le monde y est habitué.
La patience s'est cassée lorsqu'un "biseau" a été découvert lors de la saisie banale de texte dans un TextInput normal. Juste une zone de texte. Il suffit de saisir du texte à partir du clavier à l'écran. Après quelques minutes d'impression, les terribles retards et freins du système commencent. Nous nous sommes précipités pour chercher un problème - oui, il y en a un, il a commencé avec la version RN 5x.xx Résolvez-vous le problème? Non. Deux ou trois numéros sur le sujet sont simplement clos. Quelques autres ont fusionné en
un seul grand .
J'ai dû creuser à l'intérieur, découvrir, essayer différentes options, changer les versions de RN, dans l'espoir qu'il n'y avait pas de jambage là-bas. En conséquence, il a été possible expérimentalement de minimiser les écarts de performances - ils ont complètement supprimé toute mise en forme et réécrit le gestionnaire d'entrée. Mais le résidu désagréable est resté. Le problème avec les développeurs du framework, en passant, n'a pas été résolu jusqu'à présent, six mois se sont écoulés ...
Base de données
Realm est une base de données rapide avec des fonctionnalités impressionnantes et fonctionnant sur Android, IOS, Windows.
Au début, il y avait un double sentiment, disent-ils, il n'y a pas d'ORM pour vous, il n'y a vraiment pas de sql, l'enregistrement n'est qu'à l'intérieur du rappel. Insolite et étrange, surtout pour un développeur web originaire de PHP, qui a grandi sur ActiveRecord et Doctrine. Mais en fait, la rédaction de votre ensemble minimal de fonctions pour CRUD s'est avérée assez simple et rapide. Et toutes les questions de goût et d'habitudes ont été résolues en lisant les informations officielles, concises, concises et compréhensibles.
Et puis le carrousel de cadeaux a commencé:
- Chiffrement des données, prêt à l'emploi
- Chargement paresseux des données (extrait de la base de données uniquement ce qui est nécessaire pour le moment)
- De vraies relations entre entités (salut mongo!
- Version de la structure de la base de données, avec migrations - prêt à l'emploi
- Et un tas de petites mais jolies petites choses.
Il semblait que le problème avec la base de données était complètement résolu. Nous travaillons! L'affaire a été débattue jusqu'à ce qu'ils atteignent la perquisition. Plutôt, à la recherche en texte intégral. Plus précisément, à la recherche plein texte en russe, pas sensible à la casse. Il n'a pas travaillé. Absolument. En anglais - travaillé. La casse a également fonctionné. Mais sans registre, mais en russe - même pleurer. Après avoir fouillé dans l'aide, le
bugtracker et Internet, il s'est avéré que pour certaines raisons techniques, il était très gênant pour le développeur de "penser" à la prise en charge des encodages multi-octets et de tout ce qui va au-delà de l'alphabet latin. Et bien non. Pourquoi pas?
Rien à faire, j'ai dû chercher une solution de contournement. À la suite d'un bref assaut, une décision "volontaire" a été prise - nous faisons un champ séparé "fulltext_index". Dans ce document, nous dupliquons tout le texte en majuscules, "supprimant" simultanément les signes de ponctuation inutiles, les problèmes inutiles et toutes sortes de déchets. Après cela, il est logique de supposer que nous effectuons une recherche avec des majuscules forcées.
Victoire! La recherche fonctionne désormais comme une horloge en russe, même en anglais!
Total: malgré les problèmes avec le registre, la base de données fonctionne très rapidement, la commodité est de niveau, un tas de chips prêts à l'emploi - en général, je le recommande.
Navigation à l'écran
wix / react-native-navigation est un navigateur simple et stable (un routeur, comme dirait un programmeur web).
Il a été choisi uniquement parce qu'il a réussi tous les tests internes nécessaires (ouverture de l'écran, pile des appels, retour, barre latérale). En général, le minimum requis minimum.
Contrairement à la
navigation de réaction très appréciée, wix a 100% de nativité. Il en est ainsi - toutes les transitions entre les écrans sont traduites en code d'application java et fonctionnent au niveau du système.
En cours de développement, ils ont rencontré un terrible bug de «l'écran blanc» qui ne se produit que dans certains cas et sur des appareils individuels. Il arrive que lorsque vous quittez le mode "veille", le processus de démarrage se bloque simplement. Le débogueur et le débogage sont silencieux. Sur github sur ce problème, il n'y avait que des indices étranges de "... essayez de jouer" avec l'ordre de chargement des écrans et d'autres grâces. On ne sait même pas à quel niveau le problème est enterré: le code java de l'androïde ou déjà dans la machine JavaScript. Après avoir dansé avec un tambourin, l'erreur a commencé à apparaître moins souvent, mais n'a pas disparu du tout, accrochée à la liste des problèmes non résolus. Hélas.
À l'exclusion de ce «montant» - tout est plus ou moins tolérable et lisse. Et, surtout, natif!
Système de fichiers
À partir du système de fichiers, nous devions stocker des photos personnalisées, ainsi que travailler avec quelques fichiers liés à la sauvegarde. À la suite du choix entre deux options possibles, le choix s'est
porté sur
react-native-fs
"Accès au système de fichiers natif" - il est écrit à l'entrée du référentiel. Eh bien, probablement, mais avec quelques modifications et limitations.
1. L'accès est asynchrone uniquement. Par conséquent, vous devez parfois vous souvenir de travailler avec Promise / async / wait. Bien que dans React, vous commencez à l'oublier.
L'exécution synchrone d'une fonction asynchrone (en attente) nécessite que la fonction actuelle soit asynchrone (async). Pour ce faire, ajoutez simplement async devant le nom de la fonction. Et oui, pour la méthode de classe React.Component, cela fonctionne aussi. (dans l'aide de React, ReactNative est silencieux à ce sujet, bien que cela soit implicite en soi).
export default class CloudIndex extends BasePage { async setupBackupFolders(init = false) {
Il est important de se rappeler qu'après cela, la fonction devient également asynchrone! S'il a déjà été utilisé quelque part auparavant, revérifiez son appel.
2. L'accès multiplateforme complet n'est qu'une partie du système de fichiers. Essentiellement un seul répertoire: DocumentDirectoryPath. Et c'est en fait le répertoire dans lequel se trouve l'application. Oubliez l'analyse du répertoire racine, la recherche d'images dans la galerie, l'audio, etc. Rien de tout cela n'est disponible.
Mais en général, il résout ses tâches à 100%. Dans la tirelire mât hev.
Accès au cloud
La tâche est à la fois simple et complexe. Simple, car tout le monde a une API - prenez-la et utilisez-la. C’est difficile - je ne veux pas aller dans les profondeurs, et le format de l’heure ne me permettait pas de m’asseoir et de fouiner dans des méthodes «éventuellement fonctionnelles». Nous avons décidé de trouver quelque chose qui fonctionne à 100% et qui est implémenté dans une extension prête à l'emploi pour React Native.
Il y en avait exactement un: Google Drive. Le travail avec le disque est compréhensible et est motivé par des demandes d'API banales. Mais obtenir l'accès des applications au disque est une toute autre histoire.
React-native-google-signin - système de gestion des autorisations
Google .
C'est là que nous «nous sommes amusés». Ils le voulaient plus simple et plus fiable, mais ils ont obtenu ...
Tout a commencé avec l'obtention de la clé de développeur. Auparavant, Google lui-même faisait tout cela. Mais après le rachat de FireBase, il a été décidé de transférer cette fonction sur sa magnifique console.
Donc, pour obtenir la clé, vous avez besoin de:
- Enregistrez l'application sur la console développeur de Google afin d'y «activer» l'accès au service Drive.
- Enregistrez l'application sur la console Firebase.
- Créez un fichier google-services.json dans la console Firebase - dans lequel les clés de service sont protégées.
- Glissez ce fichier dans le projet avec l'extension installée react-native-google-signin.
Et puis, oui. Quelque chose commence à fonctionner. Au contraire, les codes d'erreur dans les réponses de service commencent à être significatifs.
Il est particulièrement important de noter que la clé API obtenue directement par l'application lors de la connexion au service n'est pas du tout éternelle. Parfois, cela change une fois par jour, parfois une fois par minute. Par conséquent, avant d'accéder au service, il est toujours préférable de vérifier d'abord si la clé actuelle a expiré. Et si elle est expirée - pour recevoir à nouveau.
Le processus d'obtention de la clé API de Google est le suivant:
await GoogleSignin.hasPlayServices() const userInfo = await GoogleSignin.signIn() this.setState({ userInfo: userInfo, }) settings.set('google.drive.key', userInfo.accessToken) trace('>> Key obtained:', userInfo.accessToken) this.apiKey = userInfo.accessToken
Ainsi, par exemple, dans notre application, lorsque nous ouvrons l'écran de sauvegarde, nous essayons d'obtenir des dossiers de sauvegarde à partir de Google id. Si tout réussit, nous obtenons id.
backupRootID = await Storage.safeCreateFolder({ name: backupFolder, parents: ["root"], }).catch((e)=>{ if(e.status == 401) { trace(' >> Google signin unauthorized', e) signGoogle() return false } else { trace(' >> Google signin failed', e) } })
Sinon (l'erreur 401 est survenue) - nous essayons d'obtenir une nouvelle clé API et répétons la demande pour obtenir à nouveau l'ID du dossier de sauvegarde.
Et quelques choses plus agréables
Travailler avec des dates et des heures
Honneur et louange
moment.jsLa connaissance de ce miracle a commencé il y a longtemps et c'était vraiment bien qu'il fonctionne aussi bien dans l'environnement React Native.
Un tas de formats, magique + - jour / mois / année. Prise en charge du multilinguisme et des formats nationaux. La beauté!
Il est possible de nous arroser de tomates, ce qui indique que tout cela est facilement «gouverné» à la main avec la date ordinaire, mais dans des conditions de développement rapide, NE pensez PAS à de telles choses est très, très utile!
Graphiques et graphiques
React-native-charts-wrapper - wrapper JavaScript pour MPAndroidCharts Android natif.
J'ai aimé la présence d'une abondance de différents types de graphiques (bien qu'à ce stade, nous n'en avons utilisé que deux - linéaire et «tarte»).
Gâté l'impression par une maigre référence d'API presque manquante. L'auteur recommande de consulter la documentation des MPAndroidCharts d'origine. En fait, le conseil s'est avéré difficile à mettre en œuvre, car ce dernier est en développement continu et surpasse la mise en œuvre du wrapper par plusieurs versions. De plus, MPAndroidCharts est écrit en Java. Vrapper - en JavaScript. Vous devez rapidement penser à ce qui est difficile.
Multilinguisme et traductions
Réagissez-natif-i18n - travaillez comme un charme, les gars!
Bien que ce composant se bloque sur github marqué Obsolète, mais il fonctionne sans échecs et jambages. Toutes les traductions sont soigneusement dispersées sur des fichiers avec des langues.
L'utilisation des paramètres du traducteur fonctionne également avec un bang:
Dans le résidu sec
React Native a répondu à presque toutes ses attentes. Avec son aide, vous pouvez assembler relativement rapidement une application prototype, déterminer la structure et la convivialité. Tous les outils nécessaires pour la "base" sont.
D'un autre côté, il y a toujours un risque d'être dans un «vide» lorsqu'il n'y a tout simplement pas de solutions toutes faites. Ainsi, par exemple, nous l'avons obtenu lors du téléchargement de photos vers l'application - un composant qui peut normalement couper et pincer des images - un seul. Et cela n'a pas commencé dans notre version actuelle. Si le besoin sera très "aigu" - vous devrez mettre à jour près de la moitié du système, ce qui entraînera probablement une nouvelle recherche d'erreurs.
Comme le montrera notre produit assemblé sur le React Native sur le marché, nous le saurons dans les prochains mois. Mais c'est une histoire complètement différente.