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 "Create a new Firebase 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

Kuna Firebase v9 kasutab ES mooduleid, peame scripti lisamisel kasutama atribuuti type="module".

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</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" 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>
    <!-- Lisame scripti kui mooduli -->
    <script type="module" src="../js/signup.js"></script>
</body>
</html>

Signup.js failis impordime vajalikud funktsioonid ja initsialiseerime äpi.

// Importime vajalikud funktsioonid (kasutame URL-e, et brauser neid leiaks)
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";

// Firebase'i konfiguratsioon; NB! siin peavad olema teie rakenduse andmed
const 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
const app = initializeApp(firebaseConfig);
// Autentimise teenuse käivitamine
const auth = getAuth(app);

// Ootame, et leht oleks laetud
document.addEventListener('DOMContentLoaded', () => {
    const signUpBtn = document.getElementById('sign_up_btn');
    if (signUpBtn) {
        // Seome nupu klikkimise funktsiooniga
        signUpBtn.addEventListener('click', mySignup);
    }
});

function mySignup() {
    // Saab sisendi, mille id on "email"
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

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

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

const firebaseConfig = { ... }: See osa sisaldab teie Firebase projekti konfiguratsiooni andmeid.
const app = initializeApp(firebaseConfig): See rida initsialiseerib Firebase'i teie projektis.
const auth = getAuth(app): See rida loob ühenduse autentimisteenusega, kasutades eelnevalt loodud app objekti.
function mySignup() { ... }: See on funktsioon, mis käivitub, kui kasutaja vajutab nuppu "Sign up".
const email = document.getElementById('email').value;: See rida võtab kasutaja sisestatud e-posti aadressi.
const password = document.getElementById('password').value;: See rida võtab kasutaja sisestatud parooli.
createUserWithEmailAndPassword(auth, email, password): See rida võtab esimese argumendina autentimise objekti (auth) ning loob uue kasutaja.
.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>
</head>
<body>
    <!-- Vormi element failide üleslaadimiseks -->
    <input type="file" id="fileButton"/>
    <!-- Koht, kuhu üles laaditud pildid kuvatakse -->
    <img id="image" src=""/>
    <script type="module" src="js/upload.js"></script>
</body>
</html>

JavaScripti Kood¶

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

// Importime vajalikud funktsioonid
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-storage.js";

// Firebase'i seadistamine
const 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
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

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

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

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

    // Laeme faili üles
    const uploadTask = uploadBytesResumable(storageRef, file);

    // Jälgime olekut
    uploadTask.on('state_changed',
        (snapshot) => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
        },
        (error) => {
            console.error('Error uploading file:', error);
        },
        () => {
            // Kui üleslaadimine on lõpetatud, küsime URL-i
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                console.log('File available at', downloadURL);
                // Kuvame pildi
                const imgElement = document.getElementById('image');
                imgElement.src = downloadURL;
                imgElement.style.display = 'block';
            });
        }
    );
});

const storage = getStorage(app);: See rida loob viite Firebase Storage'ile.
fileButton.addEventListener('change', ...);: See koodiplokk käivitub, kui kasutaja valib faili, ja alustab pildi üleslaadimise protsessi.
const storageRef = ref(storage, 'images/' + file.name);: See rida loob viite, kuhu pilt salvestatakse Firebase Storage'is, kasutades pildi nime.
const uploadTask = uploadBytesResumable(storageRef, file);: See rida alustab faili üleslaadimist Firebase Storage'i.
uploadTask.on('state_changed', ...);: See meetod jälgib üleslaadimise edenemist ja võimaldab reageerida vigadele või laadimise lõppemisele.
getDownloadURL(uploadTask.snapshot.ref).then(...): 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