Uporabite Firebase za shranjevanje podatkov v ozadju in z lahkoto razvijajte preproste aplikacije.
Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.
Glede na raziskavo Stack Overflow iz leta 2022 21,14 odstotka razvijalcev uporablja Firebase, zaradi česar je četrta najbolj priljubljena platforma v oblaku. To je razvijajoča se tehnologija za brezhibno integracijo ozadja.
S Firebase lahko razvijete aplikacijo s polnim skladom, ne da bi napisali eno vrstico zaledne kode. Naučite se, kako svojo aplikacijo React.js povezati s Firebase še danes in graditi na poti.
Namestite paket Firebase
Po ustvarjanje vaše aplikacije React, spremenite imenik v korensko mapo vašega projekta in namestite paket Firebase tako, da zaženete:
npm namestite požarna baza
Dodajte svojo aplikacijo React projektu Firebase
Naslednji korak je ustvariti projekt Firebase in ga povezati s svojo aplikacijo React. Pojdi na Konzola Firebase:
- Kliknite Dodajte projekt za začetek novega projekta Firebase.
- Vnesite ime projekta in kliknite Nadaljuj.
- Kliknite Nadaljuj na naslednji strani.
- V spustnem meniju izberite svoj račun Firebase ali kliknite Ustvari nov račun če ga še nimate.
- Na koncu kliknite Ustvari projekt.
- Kliknite Nadaljuj ko je postopek končan.
- Nato kliknite ikono spleta () v zgornjem levem kotu naslednje strani, da nastavite Firebase za splet.
- V ustrezno polje vnesite vzdevek za svojo aplikacijo. Nato kliknite Registrirajte aplikacijo.
- Kopirajte ustvarjeno kodo in jo shranite za naslednji korak (o katerem razpravljamo v naslednjem razdelku).
- Kliknite Nadaljujte do konzole.
- Na naslednji strani je veliko možnosti. Pomaknite se navzdol in izberite Cloud Firestore ker morate v tem primeru samo nastaviti bazo podatkov.
- Nato kliknite Ustvari bazo podatkov.
- Kliknite Naslednji. V spustnem meniju izberite želeno lokacijo Firestore.
- Nato kliknite Omogoči ustvariti bazo podatkov Firestore.
Inicializirajte Firebase v svoji aplikaciji React
Ustvarite novo mapo v svojem projektu src imenik. To lahko pokličete firebase_setup. Nato ustvarite a firebase.js datoteko v tej mapi. Nato prilepite prej ustvarjeno kodo v to datoteko.
Za zdaj lahko konfiguracijski objekt (firebaseConfig) shranite znotraj a .env mapa. Toda razmislite o uporabi varnejšega način za prikrivanje skrivnosti React v izdelavi. Podatki, ki jih shranite v a .env datoteka lahko zlahka uhaja v gradnjo vaše aplikacije.
Če uporabljate možnost .env, pripnite »REACT_APP« vsakemu imenu spremenljivke znotraj .env. V nasprotnem primeru vaša aplikacija ne bo prebrala nizov. Poleg tega znova zaženite strežnik React vsakič, ko spremenite podrobnosti v .env mapa.
Če želite na primer vnesti skrivni ključ Firebase vaše aplikacije v .env mapa:
REACT_APP_apiKey = yourFirebaseAccessKey
Tako lahko ustvarjeno kodo natančno prilagodite na naslednji način:
uvoz {initializeApp} od "firebase/aplikacija";
uvoz { getFirestore } od "@firebase/firestore"
konst firebaseConfig = {
apiKey: postopek.env.REACT_APP_apiKey,
authDomain: postopek.env.REACT_APP_authDomain,
projectId: postopek.env.REACT_APP_projectId,
StorageBucket: postopek.env.REACT_APP_storageBucket,
messagingSenderId: postopek.env.REACT_APP_messagingSenderId,
appId: postopek.env.REACT_APP_appId,
izmerjeniId: postopek.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
izvozkonst firestore = getFirestore (aplikacija)Preizkusite svojo povezavo Firebase
Povezavo lahko preizkusite tako, da v Firestore pošljete lažne podatke. Začnite z ustvarjanjem a ročaji znotraj vašega projekta src imenik. V tej datoteki ustvarite upravljalnik oddaje. Lahko pokličeš tega handlesubmit.js, na primer:
uvoz { addDoc, zbirka } od "@firebase/firestore"
uvoz { gasilska } od "../firebase_setup/firebase"konst handleSubmit = (testni podatki) => {
konst ref = zbirka (firestore, "test_data") // Firebase to ustvari samodejnopustiti podatki = {
testData: testni podatki
}poskusi {
addDoc (ref, podatki)
} ulov(napaka) {
konzola.log (napaka)
}
}
izvozprivzeto handleSubmit
Potem notri App.js:
uvoz './App.css';
uvoz handleSubmit od './handles/handlesubmit';
uvoz {useRef} od 'reagirati';funkcijoaplikacija() {
konst dataRef = useRef()konst submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.trenutno.vrednost)
dataRef.current.value = ""
}vrnitev (
<div className="aplikacija">
<obrazec onSubmit={submithandler}>
<vrsta vnosa= "besedilo" ref={dataRef} />
<tip gumba = "predložiti">Shrani</button>
</form>
</div>
);
}
izvozprivzeto aplikacija;
Zaženite aplikacijo React in poskusite oddati podatke prek obrazca. Osvežite konzolo baze podatkov Firebase, da si ogledate poslane informacije v svoji zbirki. Z osnovami lahko raziskujete še veliko drugih stvari, ki jih lahko naredi Firebase da vidimo, kako ga najbolje uporabiti.
Gradite na poti s Firebase in React
Firebase je vsestranska rešitev zaledja kot storitev, ki vam omogoča učinkovito prilagajanje velikosti aplikacije. Ko povežete svojo aplikacijo React, lahko izkoristite njene številne funkcije za izdelavo spletnega mesta po svojih željah.
Na primer, komplet orodij za preverjanje pristnosti Firebase je ena od funkcij, ki bi jo morda želeli raziskati.