Firebase’i andmete lisamine lehelt

Selle juhendi järgimiseks on vaja:

Programmeerimise keskkonna seadistamine

index.html lehe vaade

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

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.

Andmete talletamine andmebaasis

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!`.

firebase-rules andmete talletamine

Cloudinary keskkonna seadistamine

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

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

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

cloudinary secret
  1. Vali vasakult “Upload Presets” ning vajuta “Add Upload Preset”.

cloudinary present
  1. 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.

cloudinary fill

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

konsoolis teade “Clicked on add logo button!”

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

konsoolis kasutaja andmed

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

konsoolis näha lisatud pilti

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

errorite puudus

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

Firebase’i tekkis uus dokument

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

mõlemad dokumendid ekraanil näha

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

Allikad