Hogyan készíthetünk egy-egy csevegő rendszert a firebase-rel a natív expo reakciójában (2. rész).

Bejelentkezés képernyő + regisztráció képernyő + Firebase API-konfiguráció

Ideje kódolni

A Firebase fiókot, a hitelesítést és az adatbázist eddig a sorozat első részében állítottuk be. Ebben a részben előkészítjük a funkcionális regisztrációs és bejelentkezési képernyőket, mielőtt beállítanunk kell az alkalmazás képernyőinket.

Innen nyissa meg az indító snacket

Első lépés:-

Az alkalmazások képernyőihez fájlokat hozunk létre, amelyek: -

  • signup.js
  • login.js
  • users.js
  • chatRoom.js

Második lépés: -

Most összekapcsoljuk ezeket a képernyőket. Először hozzá kell adnunk a „reagál-navigáció” elemet, hogy navigálhassunk a képernyők között, és a „reagál-navigáció-verem”, amely lehetőséget nyújt az alkalmazásod számára a képernyők közötti átmenethez és a navigációs előzmények kezeléséhez. Kezdetben ezek a képernyők üresek lesznek, egyenként megvizsgáljuk az egyes képernyők funkcióit és felhasználói felületét.

import React, {Component} az 'react' importból {View, StyleSheet} az 'react-natív' export alapértelmezett osztályból az Basic kiterjeszti az összetevőt {render () {return ; }} const stílusok = StyleSheet.create ({})

Adja hozzá a kód ezt a részét minden elemhez a választott osztálynévvel. Ez fontos, különben a hibák felbukkannak.

App.js

import React, {Component} a 'react' importból {createStackNavigator} a 'react-navigation-stack' import {createAppContainer} 'react-navigation'
import Bejelentkezés a './components/login' import Sinup from './components/sinup' import Users from './components/users' import ChatRoom from './components/chatRoom'
const AppNavigator = createStackNavigator ({Bejelentkezés: Bejelentkezés, Belépés: Szingup, Felhasználók: Felhasználók, ChatRoom: ChatRoom,}, {headerMode: 'nincs', navigationOptions: {headerVisible: false,}}, {InitRouteName: 'Login'}).
const AppContainer = createAppContainer (AppNavigator) export alapértelmezett osztály Az alkalmazás kiterjeszti az összetevőt {render () {return }}

Az App.js alkalmazásban összekapcsoltuk az összes képernyőt. Itt az ideje, hogy megvitassák az egyes képernyők funkcióit és alapvető felhasználói felületét.

Harmadik lépés: -

firebaseSDK.js

import firebase from 'firebase' import '@ firebase / firerestore'
const config = {apiKey: "*********************************", authDomain: "****** ********************** ", databaseURL:" ********************** ************* ", projectId:" ********** ", storageBucket:" ***************** ***** ", messagingSenderId:" ************ ",}
osztály FirebaseSvc {konstruktor () {if (! firebase.apps.length) {firebase.initializeApp (config); } else {console.log ("a firebase alkalmazások már futnak ...")}}}

Adja hozzá a kód ezt a részét a firebaseSDK.js fájlhoz, és cserélje ki a „*************” felhasználót a firebase konfigurációjára. Most már csatlakozik a firebase-hez, és hozzáférhet annak összes tulajdonságához (például adatbázisához, tárolásához, hitelesítéséhez stb.). Megírjuk a képernyőnk minden olyan funkcióját, amelyhez hozzáférést kell biztosítani a firebase tulajdonságokhoz. Ez a rész itt készül, térjünk át a regisztrációs képernyő funkcióira.

Negyedik lépés: -

firebaseSDK.js

createAccount = async (felhasználó) => {új ígéret visszaadása ((megoldani, elutasítani) => {firebase.auth () .createUserWithEmailAndPassword (user.email, user.password) .then (function (pass) {
var userf = firebase.auth (). currentUser; userf.updateProfile ({displayName: user.name}) .then (function () {firebase.firestore (). collection ("chatie_user"). doc (pass.user.uid) .set ({uid: pass.user. uid, email: pass.user.email, név: user.name, emailVerified: pass.user.emailVerified}) .then (function () {console.log ("A dokumentum sikeresen elkészült!")}) .catch (function (function ( hiba) {console.error ("Hiba a dokumentum írásakor:", hiba)}) figyelmeztetés ("Felhasználó" + felhasználónév + "sikeresen létrejött. Kérjük, jelentkezzen be.")}, funkció (hiba) {console.warn (" Hiba a displayName frissítésekor. ");})}, Funkció (hiba) {console.error (" kapott hiba: "+ typeof (hiba) +" karakterlánc: "+ hiba.üzenet) figyelmeztetés (" Fiók létrehozása sikertelen. Hiba: " + error.message); })})}

A kód ezen részében összetevőket írunk, hogy létrehozhassunk egy felhasználónevet, e-mailt és jelszót a firebase.auth () használatával, és ezzel egyidejűleg ezeket a felhasználói adatokat a firebase felhő tűzoltóba mentjük a firebase.firestore () használatával. Ezeket az adatokat a következő felhasználó képernyőjén fogják használni, amelyben kiválaszthatja azt a felhasználót, akivel csevegni szeretne.

Signup.js

import React, {Component} a 'react' importálásból {View, Text, StyleSheet, TouchableOpacity, TextInput, Image, ImageBackground, ScrollView} a 'react-native' import firebaseSvc fájlból a '../firebaseSDK' fájlból
alapértelmezett osztály exportálása A Bejelentkezés kiterjeszti az {
kivitelező () {állapot = {név: '', e-mail: '', jelszó: '',}}
onPressCreate = async () => {this.sinupData ()}
sinupData = () => {const user = {név: this.state.name, email: this.state.email, jelszó: this.state.password,}
 firebaseSvc.createAccount (felhasználó) .szerint ((megoldás) => {console.log ('ez egységi adat ==>' + JSON.stringify (megoldás))})). fogás ((hiba) => {console.log ('nem kap adatokat .....................')})}
onChangeTextEmail = email => this.setState ({email}) onChangeTextPassword = password => this.setState ({password}) onChangeTextName = name => this.setState ({name})
render () {return ( 
            
               
                
                 
                  
FIÓK LÉTREHOZÁSA )}}

A kód ezen részében létrehozunk egy alap felhasználói felületet a képernyőhöz, és átadjuk a szükséges adatokat a függvény paraméterének, amelyet az oldal firebaseSDK.js fájljában készítettünk.

Ez a regisztrációs képernyő alapvető felhasználói felülete, amelyen keresztül elegendő adatot fogunk kapni alkalmazásunk hitelesítésének fenntartásához. A képernyő kissé így néz ki. A képernyő felhasználói felületét a kívánt módon manipulálhatja. Most menjünk az utolsó és utolsó lépéshez.

Ötödik lépés: -

firebaseSDK.js

login = async (felhasználó, sikeres visszahívás, sikertelen visszahívás) => {const output = várnak firebase.auth () .signInWithEmailAndPassword (felhasználó e-mail, felhasználó. jelszó). majd (siker_ visszahívás, sikertelen visszahívás)}
loginData = () => {új ígéret visszaadása ((megoldás, elutasítás) => {firebase.auth (). onAuthStateChanged (függvény (felhasználó) {if (felhasználó) {//console.log("user: ", felhasználó) ; feloldás (felhasználó) // A felhasználó be van jelentkezve.} egyébként {// Nincs bejelentkezve felhasználó.}})})}

Ez a kódrészlet, amelyet a bejelentkezés hitelesítésére használunk a google firebase-en keresztül, amely csak akkor ad pozitív választ, ha a felhasználót sikeresen regisztrálták az alkalmazáson keresztül.

App.js

import React, {Component} a 'react' importálásból {View, Text, StyleSheet, TouchableOpacity, TextInput, Image, ImageBackground, ScrollView, AsyncStorage} a 'react-native' import firebaseSvc fájlból a '../firebaseSDK' fájlból
Az alapértelmezett osztály exportálása A Bejelentkezés kiterjeszti a {{konstruktor () {super () this.state = {jelszó: '', felhasználói_adatok: '', uid: '', felhasználónév: '', e-mail: ''}} onPressLogin = async () összetevőt => {const user = {email: this.state.uemail, jelszó: this.state.password,} const response = firebaseSvc.login (felhasználó, this.loginSuccess, this.loginFailed,) this.Data_match ()} Data_match = () => {firebaseSvc.loginData () .then ((sol)) => {this.setState ({user_Data: lahen})})). then (() => {let userData = this.state.user_Data this.setState ({uid: userData.uid, userName: userData.displayName, e-mail: userData.email})}). catch ((fail) => {console.log ('nem kap adatokat .......... ........... ')})} loginSuccess = async () => {this.props.navigation.navigate (' Felhasználók ', {uid: this.state.uid, userName: this.state .userName, e-mail: this.state.email})} loginFailed = () => {console.log ('bejelentkezés nem sikerült ***'); alert ('Bejelentkezés sikertelen. Kérjük, próbálkozzon újra.'); } onChangeTextEmail = email => this.setState ({email}); onChangeTextPassword = jelszó => this.setState ({jelszó}) render () {return (
/> BELÉPÉS this.props.navigation.navigate ( "Sinup")}> Készítse el a számlát most )}}

A kódrészlet ez a része nagy (további részletek a GitHub repo-ban), de sok mindent megtalál az oldal hátoldalán, annak oka, hogy ezen az oldalon a felhasználót felismerik, akinek az adatait a honlapunkon használjuk. . Ezen az oldalon átadjuk a szükséges adatokat a firebaseSDK.js fájlban létrehozott függvény paraméterének, ahogyan azt korábban tettük a signup.js fájlban.

A bejelentkezési képernyő nagyjából így néz ki. A LOGIN gombon felhívtam a hitelesítésért felelős funkciót. Ha az eredmény pozitív, akkor a Honlapra lép, vagy ha az eredmény negatív, akkor a hibaüzenetet riasztás formájában jeleníti meg. Ezen felül van egy feliratkozási képernyő az új felhasználók számára, amelyhez a SZÁMÍTÁS MOST létrehozása gombra kattintva lehet hozzáférni. Nem néz ki elég szépen? Ez a rész egészen sikeresen létrehozta alkalmazásunk hitelesítését, és alkalmazásunk 60% -át is kitöltöttük.

Ennek az alkalmazásnak a fő része, amely különbözik a többi csevegőrendszertől, a következő részben kezdődik. Ebben a részben a felhasználó kiválaszthatja barátját vagy idegenét, akivel beszélgetni szeretne, így maradjon velünk…

LINKEK

A teljes projekt: https // github.com / alphaq1205 / Chatie