React Native a devenit un instrument foarte important în lumea dezvoltării aplicațiilor mobile.

Ce nu este de iubit? Este rapid, multiplataforma, se cuplează nativ module și folosește limbaje și modele care sunt familiare dezvoltatorilor front-end.

În plus, tehnologia fără server a împuternicit dezvoltatorii cu capacitatea de a implementa aplicații la nivel de întreprindere fără cheltuielile generale ale unei infrastructuri tradiționale de server. Îndepărtează sarcinile administrative implicate în gestionarea backend-ului unei aplicații, crescând în același timp productivitatea.

Această infrastructură fără griji, plug-and-play se împerechează bine cu cadre precum React și React Native, deoarece face foarte ușor pentru indivizi și echipe mici să mărească aplicațiile de producție fără costuri generale.

Să parcurgem modul de creare a unei aplicații React Native cu autentificare de utilizator. Apoi voi acoperi modul de integrare a acestui proces cu o bază de date fără server.

Deocamdată, exemplul meu de aplicație va fi doar un demonstrație simplă de autentificare a utilizatorului de stat – dar creați-vă și construiți ceea ce vă interesează tu! Această demonstrație se va transforma în cele din urmă într-o aplicație mobilă de listă de sarcini colaborative fără server complet.

Cuprins:

  • Cum să vă configurați proiectul
  • Înscriere / Conectare flux de lucru
  • Cum să conectați back-end-ul
  • Concluzie

Cum să vă configurați proiectul

Există multe modalități diferite de a implementa fără server în proiectul dvs. React, dar vom folosi easybase-react bibliotecă pentru acest proiect. Funcțiile sunt de stare și sunt construite pentru React și React Native.

Mergeți la proiectul dvs. React Native și faceți npm install easybase-react.

Dacă nu știi cum să creezi un proiect React Native, poți folosi creați-reacționați-aplicația nativă facand npx create-react-native-app MyNativeApp în consolă. După ce aceasta se finalizează, instalați biblioteca așa cum s-a menționat mai sus.

În acest moment vă puteți deschide aplicația rulând npm run ios sau npm run android în funcție de platforma pe care doriți să testați. Punctul tău de plecare va arăta ceva asa:

Cum sa creati prima aplicatie nativa fara server React cu

Înscriere / Conectare flux de lucru

La stabilirea fluxului de lucru pentru aplicația noastră, această vizualizare ar trebui să fie afișată în mod implicit dacă un utilizator nu este conectat. Din motive de scurtă durată, stilul exemplului meu va fi foarte rudimentar, dar va fi unic cu stilul dvs.!

Să începem cu câteva rute de bază, astfel încât să putem distinge două vizualizări diferite în funcție de faptul dacă un utilizator este sau nu conectat. Deocamdată, vom reveni automat false până când implementăm cârligele corespunzătoare.

Dacă un utilizator nu este conectat, acesta este prezentat cu scopul de a se conecta sau de a se înscrie. Dacă un utilizator este conectat, vom afișa un mesaj de confirmare.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  return (
    <Router />
  );
}

function Router() {
  const isUserSignedIn = () => false;

  return (
    isUserSignedIn() ?
      <Text>Congrats! You're signed in.</Text>
      :
      <Account />
  )
}

Acest Account componenta va conține a Conecteaza-ta inscrie-te șablon care ar trebui să pară familiar. În React Native, această viziune ar putea arăta cam așa:

function Account() {
  const [userVal, setUserVal] = useState("");
  const [passVal, setPassVal] = useState("");

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput value={userVal} onChangeText={e => setUserVal(e)} style={styles.accountInput} placeholder="Username" />
      <TextInput value={passVal} onChangeText={e => setPassVal(e)} style={styles.accountInput} placeholder="Password"/>
      <View style={{ display: "flex", flexDirection: "row", marginTop: 30 }}>
        <Button title="Sign In" />
        <Button title="Sign Up" />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  accountInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: "75%",
    margin: 10,
    fontSize: 22,
    textAlign: "center"
  },
  title: {
    fontSize: 30,
    fontWeight: "500",
    fontStyle: "italic",
    marginBottom: 30
  }
});

Deși oarecum de bază, această vizualizare oferă tot ceea ce este necesar pentru o interfață sigură și funcțională de autentificare a utilizatorului. Pentru referință, iată o captură de ecran a aplicației în acest moment:

1612002847 632 Cum sa creati prima aplicatie nativa fara server React cu

Cum să conectați back-end-ul

Acum vom conecta aplicația noastră nativă la un back-end fără server pentru a gestiona autentificarea utilizatorului și administrarea simbolurilor.

Există diverse biblioteci care urmăresc să implementeze capabilități fără server pentru a React și React Native. Cel pe care îl vom folosi se numește Easybase. Printre altele, acest serviciu își propune să facă React + serverless extrem de intuitiv.

Dezvoltatorii pot utiliza interfața de gestionare a proiectelor serviciului pentru a-și scala aplicațiile cu ușurință și eficiență. Vom putea gestiona utilizatorii proiectelor noastre cu această interfață. Aplicația web a serviciului (capturi de ecran de mai jos) se integrează în mod excepțional cu easybase-react pachet npm.

Motivul pentru care am ales să folosesc acest pachet este dublu. În primul rând, procesul de instalare și configurare este extrem de simplu cu unul config fişier.

În al doilea rând, există o cheltuială semnificativă a implementării unui modul de autentificare a utilizatorului, cum ar fi stocarea jetonelor de sesiune și rețea. EasybaseProvider componenta manipulează cea mai mare parte a acestei cheltuieli generale, astfel încât să putem trece la muncă.

Conectați la Easybase și creați un nou tabel. Dacă nu aveți un cont, creați rapid unul (este gratuit). De acolo, creați un nou proiect așa:

1612002848 246 Cum sa creati prima aplicatie nativa fara server React cu

Apoi, descărcați jetonul de proiect aici (vom crea câteva tabele mai târziu):

1612002849 680 Cum sa creati prima aplicatie nativa fara server React cu

Plasați noua descărcare ebconfig.js în dosarul proiectului React Native de lângă App.js, așa:

├── android/
├── ios/
├── node_modules/
├── App.js
├── ebconfig.js <---
├── index.js
└── ...

Apoi, vom importa două lucruri în App.js:

  • import ebconfig from "./ebconfig"
  • import { EasybaseProvider, useEasybase } from "easybase-react"

Apoi, vom încheia aplicația noastră în acest sens EasybaseProvider componentă, trecând ebconfig ca o proprie corespunzătoare. Modificările vor arăta după cum urmează:

import ebconfig from "./ebconfig";
import { EasybaseProvider, useEasybase } from "easybase-react";

// ...

export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Router />
    </EasybaseProvider>
  )
}

// ...

În acest moment putem accesa o varietate de capabilități de aplicații fără server utilizând useEasybase() cârlig. Aceasta include funcții precum signIn, signUp, setUserAttributes, și așa mai departe. Utilizatorii creați și atributele asociate acestora vor apărea în secțiunea „Utilizatori” din Easybase.io.

Documentația pentru useEasybase cârligul este disponibil aici. Informații sunt, de asemenea, disponibile pe Repo Github.

Așa că acum putem termina Account componentă completând onPress accesorii butoanelor noastre cu funcția corespunzătoare oferită de useEasybase cârlig:

function Account() {
  const [userVal, setUserVal] = useState("");
  const [passVal, setPassVal] = useState("");

  const { signIn, signUp } = useEasybase();

  const clearInputs = () => {
    setUserVal("");
    setPassVal("");
  }

  const handleSignInPress = async () => {
    await signIn(userVal, passVal);
    clearInputs();
  }

  const handleSignUpPress = async () => {
    const res = await signUp(userVal, passVal, {
      created_at: new Date().toString
    });
    if (res.success) {
      await signIn(userVal, passVal);
    }
    clearInputs();
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput value={userVal} onChangeText={e => setUserVal(e)} style={styles.accountInput} placeholder="Username" />
      <TextInput value={passVal} onChangeText={e => setPassVal(e)} style={styles.accountInput} placeholder="Password"/>
      <View style={{ display: "flex", flexDirection: "row", marginTop: 30 }}>
        <Button title="Sign In" onPress={handleSignInPress} />
        <Button title="Sign Up" onPress={handleSignUpPress} />
      </View>
    </View>
  )
}

În cele din urmă, trebuie să ne ocupăm de isUserSignedIn funcție utilizată în Router componentă. Noroc pentru noi, useEasybase cârligul oferă și acest lucru funcționează cu același nume. Doar conectați-l și îl putem folosi pentru redarea condiționată.

function Router() {
  const { isUserSignedIn } = useEasybase();

  return (
    isUserSignedIn() ?
      <Text>Congrats! You're signed in.</Text>
      :
      <Account />
  )
}

La fel, am implementat un flux de lucru securizat pentru autentificarea utilizatorului în React Native. Înștiințare că, dacă închideți sau reîncărcați aplicația, utilizatorul dvs. va rămâne conectat așa cum este standard cu majoritatea platformelor mobile.

Cum se adaugă un buton de deconectare

În cele din urmă, voi adăuga un Sign out pentru utilizatorii care s-au conectat. Aceasta va necesita schimbarea curentului felicitări… element de text pentru utilizatorii conectați.

Din fericire, useEasybase hook are o funcție cu acest nume, astfel încât să putem edita Router componentă după cum urmează:

function Router() {
  const { isUserSignedIn, signOut } = useEasybase();

  return (
    isUserSignedIn() ?
      <View style={styles.container}>
        <Text>Congrats! You're signed in.</Text>
        <Button title="Sign Out" onPress={signOut} />
      </View>
      :
      <Account />
  )
}
1612002849 676 Cum sa creati prima aplicatie nativa fara server React cu

Dacă faceți clic pe acest buton nou, se va gestiona anularea autentificării utilizatorului curent. Acest lucru vă va schimba starea EasybaseProvider, iar acum aplicația va rula înapoi la Account componentă pentru că isUserSignedIn() va reveni fals.

Concluzie

Navigând la secțiunea „Utilizatori” din Easybase se vor afișa toți utilizatorii dvs. actuali. Pentru referință, iată cum arată după ce am creat o serie de utilizatori de exemplu:

1612002849 952 Cum sa creati prima aplicatie nativa fara server React cu

Rețineți că în acest meniu aveți opțiunile pentru ștergeți un utilizator sau modificați atributele corespunzătoare. De asemenea, puteți seta atributul unui utilizator utilizând individual setUserAttribute(). De acolo, atributele pot fi recuperate în front-end cu ajutorul getUserAttributes() funcţie.

Pentru mai multe informații despre serverless cu React și React Native, aruncați o privire Pagina React a Easybase. Are câteva detalii bune despre alte subiecte care nu au fost încă exprimate în demonstrația mea, dar vom ajunge la aceste lucruri mai târziu.

Mulțumesc mult pentru lectură! Sper că această metodă de implementare a autentificării utilizatorilor va fi de ajutor celor care caută dezvoltarea de software cu React Native.

În următorul meu articol, voi afla cum să folosesc acest flux de lucru de autentificare cu o bază de date fără server. Această bază de date va apărea permisiunile utilizatorului și interogarea înregistrărilor individuale.