Firebase’i andmete lisamine lehelt¶

Selle juhendi järgimiseks on vaja:¶

Programmeerimise keskkonna seadistamine¶

index.html lehe vaade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Legod</title>
</head>
<body>

<div id="allLegos" style="display: flex">
</div>

<button onclick="window.location.href = './addLego.html'">Add lego</button>

</body>
<script type="module">
    import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
    import {getFirestore, getDocs, collection} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";

    const firebaseConfig = {};

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    getDataFromFirebase();

    async function getDataFromFirebase() {
        const legos = await getDocs(collection(db, 'legos'));
        legos.docs.forEach((lego) => {
            console.log(lego.data());

            const container = document.createElement('div');
            const subContainer = document.createElement('div');
            const textContainer = document.createElement('div');

            container.classList.add('lego');
            subContainer.classList.add('legoInner');

            const title = document.createElement('h1');
            const image = document.createElement('img');
            const amountOfParts = document.createElement('p');
            const isAvaliable = document.createElement('p');
            const dateAdded = document.createElement('p');

            title.innerHTML = lego.data().title;
            image.src = lego.data().imageUrl;
            image.style.width = '15vw';
            amountOfParts.innerHTML = lego.data().amountOfParts;
            isAvaliable.innerHTML = lego.data().isAvailable;
            const milliseconds = lego.data().dateAdded.seconds * 1000 + lego.data().dateAdded.nanoseconds / 1e6;

            dateAdded.innerHTML = new Date(milliseconds).toDateString();

            textContainer.appendChild(amountOfParts);
            textContainer.appendChild(isAvaliable);
            textContainer.appendChild(dateAdded);

            subContainer.appendChild(image);
            subContainer.appendChild(textContainer);

            container.appendChild(title);
            container.appendChild(subContainer);

            document.getElementById('allLegos').appendChild(container);
        });
    }
</script>

<style>
    .lego {
        display: flex;
        flex-direction: column;
        width: 30vw;
    }
    .legoInner {
        display: flex;
        flex-direction: row;
    }
</style>
</html>

index.html

addLego.html lehe vaade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lisa lego</title>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center">
    <label>
        Title
        <input id="title">
    </label>
    <label>
        Parts amount
        <input id="parts">
    </label>
    <label>
        Upload image
        <input type="file" id="file">
    </label>

    <button id="uploadData">Add lego</button>
</div>
<script src="script.js" type="module"></script>
</body>
</html>

addLego.html

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getFirestore} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";

const firebaseConfig = {};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app)

script.js

Firebase’i seadistamine¶

Kontrolli oma andmebaasi, kuidas andmed on talletatud.

Antud juhul on andmed talletatud järgneval kujul

{
    "title": "string",
    "amountOfParts": "number",
    "imageUrl": "string",
    "isAvaliable": "boolean",
    "dateAdded": "timestamp"
}

Vaata ka Cloud Firestore > Rules all, et `allow read, write` oleks `if true!`.

Cloudinary keskkonna seadistamine¶

Mine Cloudinary console’i ja vali vasakult “Settings”.

Vali vasakult “Api Keys”. Sealt on vaja cloud name’i, mis asub kohe “API Keys” teksti kõrval ning “API Secret”’it

“API Secret”’it näed vajutades teksti kõrval silmakese ikooni

Vali vasakult “Upload Presets” ning vajuta “Add Upload Preset”.

Täida väli Upload preset name nimega, mida tahad sellele anda. Vali Sign mode’iks “Unsigned” ja kui soovid salvestada pildid kindlasse kausta, siis lisa ka kausta nimi.

Kogu eelnev info soovitan taletada muutujasse clodinaryConfig

const clodinaryConfig = {
    cloud_name: 'SINU PILVE NIMI',
    api_key: 'SINU API VÕTI',
    api_secret: 'SINU API SECRET KEY',
    secure: true,
    upload_preset: 'SINU UPLOAD PRESET NIMI'
};

Teeme handleUpload() funktsiooni ning lisame selle nupule¶

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getFirestore} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";

const firebaseConfig = {};
const clodinaryConfig = {}


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Lisame add lego nupule funktsiooni, mille välja kutsume, kui vajutatakse nupu peale
document.getElementById("uploadData").addEventListener('click', handleUpload);

// Funktsioon, millega laeme info Firebase'i
function handleUpload() {
    console.log('Clicked on add lego button!');
}

script.js

Nupule klikkides kuvab konsoolis “Clicked on add logo button!”

Teeme muutujad, mida on vaja uue dokumendi Firebase’i saatmiseks¶

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getFirestore} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";

const firebaseConfig = {};

const clodinaryConfig = {}


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

document.getElementById("uploadData").addEventListener('click', handleUpload);

function handleUpload() {

    // Andmed, mis saame kasutaja poolt
    const title = document.getElementById('title').value;
    const amountOfParts = document.getElementById('parts').value;

    // Küsime üleslaetud faili, mitte väärtust
    const imageUrl = document.getElementById('file').files[0];

    // Andmed, mille defineerime ise
    const isAvaliable = true;
    const dateAdded = new Date();

    console.log('Clicked on add lego button!');

    console.log(title);
    console.log(amountOfParts);
    console.log(imageUrl);
}

script.js

Saame kasutaja poolt sisestatud andmed kenasti kätte

Pildi üles laadimine Cloudinary¶

Kuna me ei talleta andmebaasis pilti, vaid pildi URL-i, siis peame pildi enne kuhugi üles laadima. Selles õpetuses kasutame Cloudinary.

Teeme createImageURL() funktsiooni¶

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getFirestore} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";

const firebaseConfig = {};
const clodinaryConfig = {};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

document.getElementById("uploadData").addEventListener('click', handleUpload);

function handleUpload() {

    const title = document.getElementById('title').value;
    const amountOfParts = document.getElementById('parts').value;
            // Kutsume välja meetodi, et saada URL'i
    const imageUrl = createImageURL();

    const isAvaliable = true;
    const dateAdded = new Date();

    console.log('Clicked on add lego button!');

    console.log(title);
    console.log(amountOfParts);
    console.log(imageUrl);
}

async function createImageURL() {
            // Küsime üleslaetud faili
    const imageFile = document.getElementById('file').files[0];

            // Loome API jaoks body, kus on file, api võti ning upload preset
    const formdata = new FormData();
    formdata.append("file", imageFile);
    formdata.append("api_key", clodinaryConfig.api_key);
    formdata.append("upload_preset", clodinaryConfig.upload_preset);

            // Loome API käsu, kus anname sisse meetodi ning API body
    const request = {
        method: 'POST',
        body: formdata,
    }

    try {
                // Kutsume API POST meetodi välja
        const response = await fetch(`https://api.cloudinary.com/v1_1/${clodinaryConfig.cloud_name}/image/upload`, request);

        // API meetodi käest saadud vastus
        const result = await response.json();

        // URL meie pildile
        console.log('Image url: ', result.secure_url);

        // Tagastame URL'i
        return result.secure_url;
    } catch (error) {
                // Kui juhtub mingi viga, siis
        console.error('Error uploading image:', error);
    }
}

script.js

Pilti lisades ja siis “Add lego” nuppu vajutades näeme konsoolis meie üles laetud pilti.

konsoolis lisatud pildi kontrollimine URLis

URL’i avades näeme, et üles on laetud õige pilt.

Loome uue dokumendi ja laeme selle Firebase’i üles kasutades handleUpload()’i¶

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
// Lisame juurde vajalikud importid
import {getFirestore, collection, doc, setDoc} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";


const firebaseConfig = {};

const clodinaryConfig = {};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

document.getElementById("uploadData").addEventListener('click', handleUpload);

// muudame funktsiooni async
async function handleUpload() {

    const title = document.getElementById('title').value;
    const amountOfParts = document.getElementById('parts').value;

    const imageUrl = await createImageURL();

    const isAvaliable = true;
    const dateAdded = new Date();

    // Kogume kokku kõik andmed, mida tahame Firebase'i saata
    const data = {
        "title": title,
        "amountOfParts": amountOfParts,
        "imageUrl": imageUrl,
        "isAvaliable": isAvaliable,
        "dateAdded": dateAdded,
    }

    // Näitame andmed konsoolis
    console.log(data);

    // Loome uue dokumendi
    const newDocumentRef = doc(collection(db, 'legos'));

    // Sisestame uude dokumenti meiele antud andmed
    await setDoc(newDocumentRef, data);
}

async function createImageURL() {
    const imageFile = document.getElementById('file').files[0];
    console.log(imageFile);

    const formdata = new FormData();
    formdata.append("file", imageFile);
    formdata.append("api_key", clodinaryConfig.api_key);
    formdata.append("upload_preset", clodinaryConfig.upload_preset);

    const request = {
        method: 'POST',
        body: formdata,
    }

    try {
        const response = await fetch(`https://api.cloudinary.com/v1_1/${clodinaryConfig.cloud_name}/image/upload`, request);
        const result = await response.json();
        console.log('Image url:', result.secure_url);
        return result.secure_url;
    } catch (error) {
        console.error('Error uploading image:', error);
    }
}

script.js

konsoolis kood tegi POST API requesti Firebase’i

Näeme konsoolis enda üles laetud dokumenti ning, et meie kood on teinud POST API requesti Firebase’i

Näeme “Network” tab’i alt, et erroreid ei olnud ehk kõik staatused on 200.

Näeme, et Firebase’i on tekkinud uus dokument

Kui lähme nüüd index.html lehele, siis näeme, et mõlemad dokumendid on ekraanil näha.

Kogu kood¶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Legod</title>
</head>
<body>

<div id="allLegos" style="display: flex">
</div>

<button onclick="window.location.href = './addLego.html'">Add lego</button>


</body>
<script type="module">
    import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
    import {getFirestore, getDocs, collection} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";


    const firebaseConfig = {};

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    getDataFromFirebase();

    async function getDataFromFirebase() {
        const legos = await getDocs(collection(db, 'legos'));
        legos.docs.forEach((lego) => {
            console.log(lego.data()); // Correctly calls the .data() method

            const container = document.createElement('div');
            const subContainer = document.createElement('div');
            const textContainer = document.createElement('div');

            container.classList.add('lego');
            subContainer.classList.add('legoInner');

            const title = document.createElement('h1');
            const image = document.createElement('img');
            const amountOfParts = document.createElement('p');
            const isAvaliable = document.createElement('p');
            const dateAdded = document.createElement('p');

            title.innerHTML = lego.data().title;
            image.src = lego.data().imageUrl;
            image.style.width = '15vw';
            amountOfParts.innerHTML = lego.data().amountOfParts;
            isAvaliable.innerHTML = lego.data().isAvailable;
            const milliseconds = lego.data().dateAdded.seconds * 1000 + lego.data().dateAdded.nanoseconds / 1e6;
            console.log(milliseconds)
            dateAdded.innerHTML = new Date(milliseconds).toDateString();

            textContainer.appendChild(amountOfParts);
            textContainer.appendChild(isAvaliable);
            textContainer.appendChild(dateAdded);

            subContainer.appendChild(image);
            subContainer.appendChild(textContainer);

            container.appendChild(title);
            container.appendChild(subContainer);

            document.getElementById('allLegos').appendChild(container);
        });
    }
</script>

<style>
    .lego {
        display: flex;
        flex-direction: column;
        width: 30vw;
    }
    .legoInner {
        display: flex;
        flex-direction: row;
    }

</style>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lisa lego</title>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center">
    <label>
        Title
        <input id="title">
    </label>
    <label>
        Parts amount
        <input id="parts">
    </label>
    <label>
        Upload image
        <input type="file" id="file">
    </label>

    <button id="uploadData">Add lego</button>
</div>
<script src="script.js" type="module"></script>
</body>
</html>

addLego.html

import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getFirestore, collection, doc, setDoc} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";


const firebaseConfig = {};

const clodinaryConfig = {};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

document.getElementById("uploadData").addEventListener('click', handleUpload);

async function handleUpload() {
    const title = document.getElementById('title').value;
    const amountOfParts = document.getElementById('parts').value;

    const imageUrl = await createImageURL();

    const isAvaliable = true;
    const dateAdded = new Date();

    const data = {
        "title": title,
        "amountOfParts": amountOfParts,
        "imageUrl": imageUrl,
        "isAvaliable": isAvaliable,
        "dateAdded": dateAdded,
    }

    const newDocumentRef = doc(collection(db, 'legos'));

    await setDoc(newDocumentRef, data);
}

async function createImageURL() {
    const imageFile = document.getElementById('file').files[0];
    console.log(imageFile);

    const formdata = new FormData();
    formdata.append("file", imageFile);
    formdata.append("api_key", clodinaryConfig.api_key);
    formdata.append("upload_preset", clodinaryConfig.upload_preset);

    const request = {
        method: 'POST',
        body: formdata,
    }

    try {
        const response = await fetch(`https://api.cloudinary.com/v1_1/${clodinaryConfig.cloud_name}/image/upload`, request);
        const result = await response.json();
        return result.secure_url;
    } catch (error) {
        console.error('Error uploading image:', error);
    }
}

script.js

Firebase’i andmete lisamine lehelt¶

Selle juhendi järgimiseks on vaja:¶

Programmeerimise keskkonna seadistamine¶

Firebase’i seadistamine¶

Cloudinary keskkonna seadistamine¶

Teeme handleUpload() funktsiooni ning lisame selle nupule¶

Teeme muutujad, mida on vaja uue dokumendi Firebase’i saatmiseks¶

Pildi üles laadimine Cloudinary¶

Teeme createImageURL() funktsiooni¶

Loome uue dokumendi ja laeme selle Firebase’i üles kasutades handleUpload()’i¶

Kogu kood¶

Allikad¶