Firebase kasutamine HTMLi ja Javascriptiga¶

Note

Näidetes kasutame HTMLi, Firebase-i ja Javascripti ilma front-end raamustikudeta.

Google Firebase on arendustööriistade komplekt, mis aitab arendajatel oma rakendusi luua. Meie kasutame Firebase Database-i, et hoida oma andmeid JSON kujul pilves.

Firebase'i paigaldamine¶

Minge lehele Firebase.
Vajutage “Go to console” (asub tavaliselt lehe paremal üleval).
Logige sisse oma Google'i kontoga.
Vajutage "Add project". Kui kasutate Firebase esimest korda, siis on teil selle asemel hoopis ees "Get started with a Firebase project", vajutage seda.
Sisestage oma projekti nimi ja vajutage "Continue”. Seejärel võtke "Enable Google Analytics for this project" valik maha ja vajutage "Create project".
Lõpetage projekti loomine järgides ekraanil kuvatavaid juhiseid.
Projekti overview all valige “Project settings”.
Your apps all vajutage <> sümboli peale, et luua uus veebirakendus.
Pange oma veebirakendusele nimi. Vaadake, et "Also set up Firebase Hosting for this app" linnuke EI OLEKS märgitud. Vajutage "Register app".
Terminalis laadige Firebase SDK alla. Selle jaoks avage terminal ja kirjutage "npm install firebase" ning seejärel vajutage Enter.
Oma projekti tuleb luua uus fail .js laiendusega. Nimeks võime panna nt signup.js. See fail sisaldab JavaScripti koodi, mis võimaldab veebilehel erinevaid toiminguid teha.
Sinna faili lisame teises sammus saadud koodijupp oma configiga. See kood ühendab teie veebirakenduse Firebase'iga.
Vajutage nuppu “Continue to the console”.

Abiks: Firebase Web Setup

Meili ja parooliga sisselogimise funktsionaalsuse loomine¶

Enne alustamist¶

Ühendage oma veebirakendus Firebase projektiga (vaata eelmist peatükki).
Luba meili/parooliga sisselogimine:
1. Valige Firebase'i konsoolis vasakul Product categories all Build -> Authentication. Vajutage "Get started"
2. Sign in method tabis lubage Email/password sisselogimismeetod ja vajutage nuppu Save.

Sisselogimisakna lisamine¶

Loome HTML faili ja lisame sinna vajaliku koodi, et luua aken, kus kasutaja saab endale profiili luua. Näites loome HTML vormi, kuhu lisame kolm input-akent: email, password ja nupp. Kui nuppu vajutatakse, käivitatakse funktsioon, mis asub failis signup.js, nimega mySignup.

Note

Ära unusta lisada script koodiplokki, mis loob .js failiga ühenduse.

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
    <!-- Impordib Firebase-i projekti -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
</head>
<body>
    <div id="formContent">
        <!-- Registreerimisvorm -->
        <form id="myForm">
            <p>Sign up</p>
            <!-- Kasutajanime sisestusväli, mille id on "email" -->
            <input type="text" id="email" name="signup" placeholder="username"/>
            <!-- Parooli sisestusväli, mille id on "password" -->
            <input type="password" id="password" name="signup" placeholder="password"/>
            <!-- Nupp, mis käivitab JavaScripti funktsiooni, mis asub failis “signup.js”, "mySignup" klikkimisel -->
            <input id="sign_up_btn" type="button" onclick="mySignup();" value="Sign up"/>
        </form>
        <!-- Koht, kuhu ilmub võimalik vea sõnum; alguses on klass "error" määratud, kuid sisu on tühi -->
        <p id="error" class="error"></p>
    </div>
    <!-- Väliskript, mis sisaldab funktsioone ja loogikat, mida kasutatakse registreerimisvormis -->
    <script src="../js/signup.js"></script>
</body>
</html>

Signup.js failis jätame firebaseConfig oma andmetega alles ning lisame mySignup funktsiooni. See peaks umbes selline välja nägema.

// Firebase'i konfiguratsioon; NB! siin peavad olema teie rakenduse andmed
var firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_AUTH_DOMAIN",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_STORAGE_BUCKET",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

// Firebase'i initsialiseerimine
firebase.initializeApp(firebaseConfig);

function mySignup() {
    // Saab sisendi, mille id on "email", väärtuse mis on kasutaja sisestatud
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;

    // Leiab elemendi, kuhu kuvatakse veateated
    var errorElement = document.getElementById('error');

    // Kasutaja loomine emaili ja parooliga
    firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((userCredential) => {
            // Kasutaja registreeritud
            var user = userCredential.user;
            console.log('Kasutaja registreeritud:', user);
            // Saate suunata kasutaja teisele lehel
        })
        .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            console.error('Registreerimise viga:', errorCode, errorMessage);
            // Kuvage kasutajale veateade
            errorElement.textContent = errorMessage;
            errorElement.style.color = 'red';
        });
}

var firebaseConfig = { ... }: See osa sisaldab teie Firebase projekti konfiguratsiooni andmeid.
firebase.initializeApp(firebaseConfig): See rida initsialiseerib Firebase'i teie projektis.
function mySignup() { ... }: See on funktsioon, mis käivitub, kui kasutaja vajutab nuppu "Sign up".
var email = document.getElementById('email').value;: See rida võtab kasutaja sisestatud e-posti aadressi.
var password = document.getElementById('password').value;: See rida võtab kasutaja sisestatud parooli.
firebase.auth().createUserWithEmailAndPassword(email, password): See rida üritab luua uue kasutaja Firebase autentimise süsteemis.
.then((userCredential) => { ... }): Kui kasutaja loomine õnnestub, käivitatakse see plokk.
.catch((error) => { ... }): Kui kasutaja loomisel tekib viga, käivitatakse see plokk.

Kui soovite uurida rohkem Firebase kohta ning lisada sisselogimise: Firebase Auth

Firebase Storage'i kasutamine: piltide üleslaadimine ja kuvamine veebilehel¶

Eesmärk: Luua lihtne veebirakendus, kus kasutajad saavad üles laadida pilte Firebase Storage'i ja seejärel kuvada need pildid veebilehel.

Firebase projekti seadistamine:¶

Firebase Storage'i lubamine¶

Pärast projekti loomist valige vasakul menüüs "Build" ja seejärel "Storage".
Vajutage "Get started" ja järgige juhiseid, et lubada Firebase Storage oma projektis.
Valige "Start in test mode".
Seejärel Firebase storage lehel minge ja minge “Rules” lehele.
Veenduge, et teie ja pildil olevad reeglid on samad. Kui ei ole, siis muutke neid ära ja ärge unustage neid publishida.

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//   /databases/$(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Firebase SDK allalaadimine (kui te pole seda juba teinud)¶

Avage terminal (vaata eelmist juhendit terminali avamiseks).
Kirjutage järgmine käsk: npm install firebase ja vajutage Enter, et installida Firebase'i SDK.

Lihtsa veebilehe loomine¶

HTML kood¶

Loome HTML faili, kus kasutajad saavad valida ja üles laadida pildi ning seejärel kuvada selle veebilehel:

<!DOCTYPE html>
<html>
<head>
    <title>Upload and Display Image</title>
    <!-- Impordib Firebase'i -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-storage.js"></script>
</head>
<body>
    <!-- Vormi element failide üleslaadimiseks -->
    <input type="file" id="fileButton"/>
    <!-- Koht, kuhu üles laaditud pildid kuvatakse -->
    <img id="image" src=""/>
    <script src="js/upload.js"></script>
</body>
</html>

JavaScripti Kood¶

Seejärel lisame upload.js faili, mis sisaldab JavaScripti koodi failide üleslaadimiseks:

// Firebase'i seadistamine
var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Firebase'i initsialiseerimine
firebase.initializeApp(firebaseConfig);

// Failinupu elemendi valimine
var fileButton = document.getElementById('fileButton');

// Lisame sündmuse kuulaja failinupule
fileButton.addEventListener('change', function(e) {
    // Valime faili üleslaadimiseks
    var file = e.target.files[0];

    // Loome viite Firebase Storage'i asukohale
    var storageRef = firebase.storage().ref('images/' + file.name);

    // Laeme faili üles
    var task = storageRef.put(file);

    // Pärast üleslaadimist
    task.on('state_changed',
        function progress(snapshot) {
            // Saate jälgida faili üleslaadimise protsessi
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
        },
        function error(err) {
            // Veateate käsitlemine
            console.error('Error uploading file:', err);
        },
        function complete() {
            // Kui üleslaadimine on lõpetatud, saate pildi kuvada
            storageRef.getDownloadURL().then(function(url) {
                // Seame pildi elemendi src atribuudiks allalaadimise URL
                document.getElementById('image').src = url;
            });
        }
    );
});

var storage = firebase.storage();: See rida loob viite Firebase Storage'ile.
function uploadImage() { ... }: See funktsioon loeb kasutaja valitud pildi ja laadib selle Firebase Storage'i.
var storageRef = storage.ref('images/' + file.name);: See rida loob viite, kuhu pilt salvestatakse Firebase Storage'is, kasutades pildi nime.
var uploadTask = storageRef.put(file);: See rida alustab faili üleslaadimist Firebase Storage'i.
uploadTask.on('state_changed', function(snapshot) { ... });: See osa koodist jälgib üleslaadimise edenemist ja värskendab kasutajat üleslaadimise olekust.
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) { ... });: See rida saab üleslaaditud pildi URL-i ja kuvab pildi veebilehel.

Kõik üleslaetud pildid on nüüd saadaval Firebase storage-is.

Abiks: Firebase Storage