Créez des applications multiplateformes avec React Native

Il fut un temps où les développeurs devaient apprendre Swift / Objective C pour créer une application iOS, ou Java s'ils voulaient créer une application Android. Nous avons maintenant atteint une période passionnante où les développeurs Web peuvent utiliser leurs compétences existantes pour créer à la fois des sites Web et des applications sans avoir à apprendre une toute nouvelle langue (et un site peut être construit simplement avec un Générateur de site Web ).

React Native est une bibliothèque JavaScript développée par Facebook. Il a été publié en 2013 et a aidé à façonner des applications comme Skype, Bloomberg, Wix et beaucoup plus . Non seulement vous pouvez utiliser vos connaissances existantes en JavaScript, mais vous pouvez également utiliser la même base de code pour créer à la fois pour iOS et Android.

Créer une application dans React Native avec ce didacticiel est un excellent point de départ pour votre propre application, et il pourrait facilement être amélioré en ajoutant plus d'écrans, en affichant des erreurs sur le front-end et bien plus encore. Vous pouvez obtenir les fichiers de projet dont vous avez besoin sur Github .



les logos de la marque doivent être placés sur le dessus 2k18

Pas tout à fait ce que vous cherchez? Voir notre article plein de différents tutoriels sur comment créer une application , notre sélection des meilleurs stockage en ligne , ou, pour ceux qui gèrent un site, consultez ces Générateur de site Web options.

01. Commencer

Pour commencer à créer votre projet React Native, vous devez vous assurer que vous disposez Node.js installée. Vous pouvez ensuite installer le create-react-native-app utilitaire de ligne de commande en ouvrant une nouvelle fenêtre de terminal et en exécutant la commande suivante:

npm install -g create-react-native-app

Vous pouvez ensuite créer votre nouveau projet en exécutant la commande suivante:

create-react-native-app YourAppName

Vous devrez ensuite accéder à votre dossier via la ligne de commande et démarrer le serveur de développement.

cd myNewApp npm start

Vous pouvez ensuite commencer à travailler sur votre application en ouvrant le fichier App.js à l'aide d'un éditeur de code.

02. Exécutez votre application

QR Code

Puisque vous avez utilisé create-react-native-app via la ligne de commande, vous pouvez utiliser l'application cliente Expo pour tester votre application

Depuis que vous avez utilisé create-react-native-app via la ligne de commande pour créer votre projet, vous pouvez utiliser l'application cliente Expo pour tester votre application. Tout ce que vous avez à faire est de télécharger l'application depuis l'App Store iOS ou le Google Play Store, puis de scanner le code QR depuis l'intérieur du terminal. Vous devrez vous assurer que votre appareil est sur le même réseau Wi-Fi que votre ordinateur. Vous pouvez également utiliser le simulateur iPhone ou Android, si vous avez Xcode ou Studio Android installée.

03. Créez une connexion de base

Menu de connexion à 3 boutons

Nous allons maintenant créer un écran de connexion entièrement fonctionnel afin que les utilisateurs puissent se connecter, s'inscrire et se déconnecter

Commençons par ajouter quelque chose de très basique. Pour ajouter du texte à votre application, vous devrez taper:

Login Page

Travailler avec des styles est très similaire au CSS. Si vous souhaitez ajouter un style à la ligne de texte que vous venez de créer, vous devez simplement modifier cette ligne de texte pour:

My Login App

Vous pouvez ensuite ajouter le style de texte sous Feuille de style.create.

mainheader: { color: ‘#000066’, textAlign: ‘center’, fontSize: 16 },

Nous allons maintenant créer un écran de connexion entièrement fonctionnel afin que les utilisateurs puissent se connecter, créer un nouveau compte, se déconnecter et même réinitialiser leur mot de passe. C'est quelque chose que vous verrez beaucoup dans les applications mobiles, donc cela pose une bonne base pour les projets futurs.

04. Configurer Firebase et NativeBase

Écran d

Firebase est ce que nous utiliserons pour l'authentification de nos utilisateurs. Nous aurons besoin de configurer la configuration Firebase juste en dessous des commandes d'importation

Nous allons commencer par installer trois autres bibliothèques. Le premier s'appelle Firebase , qui est ce que nous utiliserons pour notre authentification utilisateur, et le second s'appelle NativeBase, qui est une bibliothèque de composants d'interface utilisateur. Le dernier est appelé React Native Dialog Input, ce qui nous permet d'afficher une boîte de dialogue dans laquelle les utilisateurs peuvent saisir du texte. Accédez au dossier de votre projet à l'aide de la ligne de commande et entrez ce qui suit:

npm install firebase npm install native-base npm install --save react-native-dialog-input

Assurez-vous d'importer Firebase, NativeBase et React Native Dialog Input en haut du fichier App.js.

import * as firebase from ‘firebase’; import { Container, Content, Header, Form, Input, Item, Button, Label } from ‘native-base’ import DialogInput from ‘react-native-dialog-input’;

Ensuite, nous devrons configurer la configuration Firebase juste sous les commandes d'importation. Vous devrez aller créer un compte avec Firebase pour obtenir vos différents paramètres. Vous pouvez le faire en vous inscrivant à Firebase et créer un nouveau projet. N'oubliez pas que vous devrez activer l'authentification par e-mail et par mot de passe à partir du tableau de bord.

var config = { apiKey: “”, authDomain: “.firebaseapp.com”, databaseURL: “https://.firebaseio. com”, projectId: “”, storageBucket: “.appspot.com”, messagingSenderId: “” }; firebase.initializeApp(config);

05. Construisez le conteneur

Menu de connexion à trois boutons

Nous allons également créer trois boutons: un pour se connecter, un pour s'inscrire et le dernier bouton sert lorsqu'un utilisateur souhaite réinitialiser son mot de passe

La prochaine étape consiste à supprimer le section en dessous rendre() , qui y a été automatiquement placé par React lors de la création du projet, et remplacez-le par le conteneur suivant pour configurer le formulaire de connexion. Le formulaire contiendra une étiquette et un champ de saisie pour une adresse e-mail et un mot de passe. Nous allons également créer trois boutons: un pour se connecter, un pour s'inscrire et le dernier bouton sert lorsqu'un utilisateur souhaite réinitialiser son mot de passe. Nous allons définir une marge en haut de chaque bouton à 10 pixels et définir la couleur de la police sur le blanc.

microsoft surface pro 6 vs surface ordinateur portable 2
Login Page Email Password Login Sign Up Forgot Password

06. Mettre en place les événements

Tout d'abord, nous devons configurer un constructeur pour configurer l'état par défaut. Le e-mail et le mot de passe les valeurs par défaut seront vides. Nous définirons également la valeur de isDialogVisible à faux : cela sera utilisé pour notre boîte de dialogue de réinitialisation de mot de passe plus tard.

constructor(props) { super(props) this.state=({ email: ‘’, password: ‘’, isDialogVisible: false }) }

Nous allons maintenant ajouter onChangeText événements à nos deux entrées de texte, de sorte que chaque fois que l'utilisateur tape quelque chose dans les champs e-mail ou mot de passe, il met à jour l'état des deux e-mail et le mot de passe à cette valeur.

onChangeText={(email) => this.setState({ email })} onChangeText={(password) => this.setState({ password })}

Nous devons également ajouter onPress fonctions à nos boutons de connexion, d'inscription et de mot de passe oublié. Chacun appellera une fonction différente. Le bouton de connexion appelle une fonction appelée loginUser , le bouton d'inscription appellera signUpUser et le bouton de mot de passe oublié appellera mot de passe oublié .

onPress={() => this.loginUser(this.state.email, this.state. password)}’ onPress={() => this.signUpUser(this.state.email, this.state. password)} onPress={() => this.forgotPassword()}

07. Fonction d'inscription

Il est maintenant temps de commencer à développer nos fonctions. Nous commencerons par la fonction d'inscription ( signUpUser ), qui tentera de créer un nouvel utilisateur dans Firebase; s'il réussit, nous afficherons une alerte à l'écran pour informer l'utilisateur que son compte a été configuré. Cependant, si l'utilisateur choisit un mot de passe de moins de six caractères, il l'invitera à entrer quelque chose de six caractères au minimum. Enfin, nous devons ajouter le gestionnaire d'erreurs catch, de sorte que si la tentative d'inscription échoue via Firebase, nous afficherons le message d'erreur sur la console.

signUpUser = (email, password) => { try { if(this.state.password.length<6) { alert(“Please enter at least 6 characters”) return; } firebase.auth().createUserWithEmailAndPassword(ema il, password) alert(“Congratulations, your account has been setup”) } catch(error){ console.log(error.toString()) } }

07. Ajouter une fonction de connexion

Alerte de connexion

Si l'utilisateur se connecte avec succès, il affichera une alerte indiquant que la connexion a réussi, ainsi qu'un bouton de déconnexion

Ensuite, nous ajouterons le login ( loginUser ) fonction. Cela tentera de connecter l'utilisateur avec son email et son mot de passe. Si l'utilisateur se connecte avec succès, il affichera une alerte indiquant que la connexion a réussi, ainsi qu'un bouton de déconnexion. Encore une fois, nous devrons nous assurer que nous ajoutons un gestionnaire d'erreurs catch au cas où il y aurait une erreur avec la tentative de connexion.

vue de face et de côté du visage
loginUser = (email, password) => { try { firebase.auth().signInWithEmailAndPassword(email, password).then((user) =>{ Alert.alert( ‘Signed In’, ‘You have signed in. Well done!’, [ {text: ‘Sign Out’, onPress: this.signOutUser}, ], { cancelable: false } ) }) } catch(error) { console.log(error.toString()) } }

08. Ajouter une fonction de déconnexion

Il passe maintenant à la fonction de déconnexion, qui garantit que l'utilisateur est déconnecté une fois qu'il clique sur le bouton de déconnexion de l'alerte.

signOutUser = () => { firebase.auth().signOut().then(function (user){ }).catch(function(error) { console.log(error) }); }

09. Créer une fonction de mot de passe oublié

Pour terminer notre projet, nous allons créer une fonction qui permettra à l'utilisateur de réinitialiser facilement son mot de passe au cas où il l'aurait oublié ou voudrait le changer pour une autre raison. Tout d'abord, nous devons créer la boîte de dialogue juste à l'extérieur de notre Mots clés.

{this. sendReset(useremail)} } closeDialog={ () => { this.setState({ isDialogVisible: this.state.isDialogVisible = false })}}>

Nous devons maintenant faire apparaître la boîte de dialogue, nous allons donc créer le mot de passe oublié fonction, qui changera l'état de isDialogVisible à vrai.

forgotPassword = () => { this.setState({ isDialogVisible: this.state.isDialogVisible = true }) }

La boîte de dialogue invite l'utilisateur à saisir son adresse e-mail. Si l'utilisateur clique sur le bouton d'annulation, la boîte se fermera, car elle modifie l'état du isDialogVisible retour à faux . Si l'utilisateur clique sur le bouton de soumission, il appellera une fonction appelée sendReset avec l'adresse e-mail.

À l'intérieur de notre sendReset , nous utiliserons l'adresse e-mail pour créer Firebase sendPasswordResetEmail demander.

sendReset = (useremail) => { var auth = firebase.auth(); auth.sendPasswordResetEmail(useremail).then(function() { alert(“Password reset email has been sent”) }).catch(function(error) { console.log(error) }); }

Cet article a été initialement publié dans le numéro 312 de rapporter magazine. Acheter numéro 312 ou abonnez-vous ici .

Articles Liés: