? ??? ???? ??? NgateSystems.com? ????. ???? ?? ??? ??? ?? ??? ?? ? ????.

?? ???: 2024? 11?

1. ??

???? ??? ??? ?? ??? ???? ????? ?? ?????. Amazon? https://www.amazon.co.uk/ ????? ??? ???. ? ???? ?? ??? ???? ?? ?? ??? ????, ????, ?? ?? ??? ????? ? ??? ?? ????. ?? ????? Amazon? ??? ???? ???.

• ? ??? ?? ?? ???? ? ?? ?? ?????
• ?? ???? ???? ??? ???? ????? ???? ?????.

? ???? ??? ??? ???? ? ???? "??????" ??? ?? ????.

?? - Svelte? ?????? ?? ? ??? ???? SvelteKit? ?????-?? ????? ????? ???? ??? ??? ? ??????. ???? ??? ? ?????? "????? ?"??? ???????. ?? npm run dev? ?? ??? ?? ????? ??? ??? ? ????. ?? ?? ??? ?????...

???? ???? ??? ????? ???? ????. ??????, ???? ??? Javascript?? ?? ??? ??? ???? ????. ???? ????. ?? ??? ? ? ???.

??? ???? ?? ???. ? ??? ??? ??? ? ???? ??? ????. ??? ?????. ?? ???? ???? ???? ???? ???? chatGPT? ?????. JavaScript ??? ?? ??? ??? ? ?? ?? ????? ?? ?? ? ????. ????. ???? ? ???!

2. Google? Firestore? ????? ???? ??

?? ?? ???? ???? ??? ??? ????. ? ??? ?????? ????? ???? ??? Google? Firestore ???? ?????. ???? ??? ???? Svelte ?? ??? ???? ????.

?? ? ?? ?? ??? ???? ???.

1. Google ?? ??
2. ? ???? Firebase ???? ???
3. "??" ??
4. Firebase ????? Firestore ?????? ???

Firebase? ?? ??? ????? ???? ? ??? ? ?? ??? ???? ???? Google? ???? ?????. ?? ??? ???? https://console.firebase.google.com/?? Google? 'Firebase ??'? ?? ?????. ???? Google Cloud? ??? ???? ? ?? '????' ???? 'Firestore ??????' ???? ?? ???? ????. ??????? ?? ??? ??? ??? ??? ??? ??? ????. ?? ?? ??? ??? ??? ?? ??? ????? ????? ? ????.

2.1 Google ?? ??

Gmail ??? ?? ?? ???? Google ???? ????? ?? ?? ?????. ??? ?? ?? Google ?? ???? ??? ?? ??? ????.

2.2 ??? Firebase ???? ???

Google Firebase ??? ???? Google ???? ??????(? ???? Gmail? ?????? ?? Firebase ???? ????? ?? ????). ?? "???? ???" ??? ???? ????? ?????.

Google??? ???? ??? ????? ???(VSCode?? ?? ?? ???? ??? ???? ?? ????) ?? Firebase ?? ??? ??? '???? ???'? ??? ?? ????? ??? ????. ?? ??, ? ??? ???? ??? "Svelte-dev" ????? my ??? Google?? "Svelte-dev-afbaf"? ??? ????.

?????, ???? ???? ????? ??? ?? ??? URL? ??? ???? Google?? ?? '??? ??' ??? ??? ? ???? ?? ???? ?? ??? ?? ?? ????. ?? ?? ??. ??? ? ??? ?????? ????. ??, ?? ???? ??? ???? ????? ?????. ??, ? ??? ??? '?? URL'? Google?? ??? ???? ????. ??? ?? URL? ?? ?? ?? ??? ???? ???? ???? ??? ?? ? ?? URL? ???? "?? URL"???.

?? '??'? ???? 'Google Analytics' ?? ???? ?????. ??? ?? ?? ???? ????? ???? ???? ???. ????? ???? ??? ???? ????? "???? ???" ??? ?????.

?? Google?? ????? ???? ??? ?? ??????. ????? "??" ??? ?? ? ???? ????? Firebase ?? ?? ?????. ??? "svelte-dev" ????? ?? Firestore ?? ???????.

? ???? ?? ???? ??? ?? ??? ?? ????? ?? ????. ?? ??? ???? ?? ??? ???? ??? ???? ??? "?? ??"? ?????. ??? ??? "???"?? ?? ??? ???? "???? ?? ??" ??? ????? ????. ????? ??? ? ??? ??? ??? ??? ? ????! ??? ? ??? ???? ?? ?? ?? ? ?????. ?? ?? ??? ?? "?? ????" ?? ??? "??", "??" ? "??" ?? ?? ?? ??? ????. "??" ???? ?? ??? ?? ?? ???? ????.

?? ???? ?? ?? ??? ?????.

• ?? ??? ??? svelte-test ????? ?? "Spark" ??? ???? ??? ???? ???. ?? ?? ?? ?? ?? ??? ???? ?????. ?? ? ??? ?????? Google? ??? ???? ?? ????? "Blaze" ???? ??????? ?? ??? ???? ???. ??? ???? ???. ?? ? ?? ?? ??? ??? ?? ???? ?? ??? ???? ??? Google?? ????? ??? ??? ? ????. ?? ??? '???? ??' ??? ???? ???? ????? ?????. ???? ??? ? ?? ?????? ???? ??? ??? ???? ?? ??? ?????. ?? ?? ???? ???? ? ??? ???? ??? ???? ?? ??? ? ????. ??? ?? ?? ????
2.3 ?? ??

Firebase? ? ?? ??? ??? ???.

"????" ??? ??? ???? ???? ?? ? ???? ?????. ???? ???? ??? ?? ???? ?? ????(?: "svelte-dev").

• '? ?? Firebase ???? ?????'?? ??? ?????. ????? ??? ???? ?? ??? ?? ??? App Engine?? ???? ?????.
• ????? "??"? "??? ??"? ???? ?? ?? ???? ?????.
2.4 - Firestore ?????? ???

?? ??? '??' ???? 'Firestore ??????'? ???? ??? ?? Firebase ?? ??? ?????.

"?????? ??" ??? ???? ???? ??? ?????.

?????? "?? ? ??"? ?????. "??"? ??????? ????? ?????? ?? ?? ??????? ????? ???? ?????. ??? Google? '??' ??? ??? ? ??? ? ??? ?? ???. "??"? ??????? ????? ??? ??? ?????. ???? ??? ? ?? ??? ??? ??? ??? Google Cloud ??? ??? ?? ?? ??? ? ?? ????. ?? ?? ? ???? ?? ??? ? ????. ??? ??? ??? ??? ??? ???? ?? ????. ?? ?? ?? ??? ???? ?? ??? ????? "europe-west2 : Heathrow"? ?????. Google Cloud ??? ?? ????? ?? ? ??? ??? ??? ? ??? ??? ??? ??? ? ??? ????.

2. "??"?? ??????? ?????. ?? ????? ?? "??" ??? "???" "??" ?? ??? ??? ? ????. ?? ??? "??"? ???? ?? ???? ??? ????. ??? ??? ?? ?? ?? ??? ??? ??? ????. ? ? ??? ?? ???? ??? '??? ??' ??? ??? ??? ????. ??? "??"? ?? ???? ? ? ??? ?? ?? ???????(?, ? ??? ?? ???!).

? ? ??? ???? Firebase ??? Cloud Firestore ???? ????. ?? ????

3. Firestore ?????? ??

? ??? ?? ??? ??? ?? ??? ???.

1. ??????? ??????
2. Firestore ??????? ?? ??????
3. Firestore ???? ??????? ??? ???? ? ????
4. Javascript? Firestore ??????? ??? ???? ? ????
5. Firestore ???????? ???? ???? ?? Svelte page.svelte ??? ??? ?? ? ????
6. Firestore ??????? ???? ???? ?? Svelte page.svelte ??? ??? ?? ? ????

3.1 ??????? ?????

?? ??? ?? ??????? ??? ??? "??"? ?? ? ?? ???? ??? ?????. ?? ?? ?? ??" ????????

? ??? ? ????.

• "?? ID" ? "?? ?? ?? ??" ?? ??? ?? ? "??" ???
• "?? ??" ? "?? ?? ??" ??? ??? "??" ???
• "?? ID"? ?? "?? ??" ?? ????? ??? "?? ??" ???

??? ?? ??? ??? ??? ???? ?? ?? ? ?? ??? ?? ??? ??? ?? ???

??? ????.

3.2 Firestore ??????? ?? ??????

Firestore??? ???? '???'??? ?? ? ?? ?? '??'?? ???. ??? ?? ??? ??? ?? ??? ??? ?? ??? ??? ?? ??? ???? ??? ???? ??? ??? ??? ???.

Firestore ??? ??? ??? ?? ??? ?? '?'? ??? ??? ????. ??? "?????" ?? ?? ???? ? ??? ? ?? "??? ??"? ?? ??? ? ?? ?? ?? ? ????. ??? ?? ?? Firestore?? ???? ?? ?? ????? ??? ? ????.

?????? ??? ??? ??? ???? ?? ??? ??? ????. ?? ? ? ??????, ??? ??? ?? ??? ??? ??? ???? ? ?? ??? ? ?? ??????. ??? ??? ?? Cloud Firestore ??? ?? ???? ??? ?? ?? ??? ? ????.

3.3 Firestore ???? ??????? ??? ???? ? ????

? ?????? ?? Firestore ??????? ?? ?? ???? ???? ??? ???? ?????. ???? Firestore?? ???? ??? ?? ?? ?? ?? ??? ??? ??? ??? ?????.

Firebase ??? Firestore ????? '??? ??' ??? ???? ???? ??? '??? ID' ??? 'products' ??? ?????.

?? ??? ?? ???? ???? ?? ?? "1"? "productNumber" ??? ??? ?? "Product 1"? "productDetails" ??? ??? ??? ?? ??? ????.

• ?? ??? ????? "??" ?? ??? "productNumber"? ????, "??" ??? "??"? ??? ?? "?" ??? "1"(??? ??)? ?????.
• "?? ??"? ???? "??" ?? ??? "productDetails"? ???? ?? ??? ?????. "??" ??? ?? "???" ???? ?? "?? 1"? ?????(??? ??). )? '?' ??? ?????.

?? ?? "?? ID" ??? ??? ?? "??"?? ??? ???????. ?? ??? ??? ????.

? ?? ??? ????? ? ???? "?? ??"? ???? ??? ? ???? ?? ??? ????. ??? ??? ?? ? ??? ???? ?? ?? ??? ??? ???.

?? ?????. ??? '?? ??'? ???? ?? ?? ??? ????? ??? ? ????. ??? ??? ? ?? ?? ???? ???? ?? ??? ?? ????.

3.4 ??????? Firestore ??????? ??? ???????

????? ?? ?????? ?????!

Google? Firestore ??? ?? ? ? ?? ?????? ?? ?????? ?????. ??? ?????? "API"(?? ???? ?????)?? ???. svelte-dev ?? ???? ?? ??? ?? ? firebase/firestore ?????? ???? ??? ???? ?? ??? ?????.

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

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

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

const productsCollRef = collection(db, "products");? ???? ??? ?????. ?? Firestore API ??? ???? ?? ??? ? ?? ??? ??? ???? State currentProducts ??? ?????.

??, Firestore ????? API ??????? ??? ?? ? ?? ??? Firebase? ?? ????? ???? ???? ??? ??? ???? ? ?????. ?? ?? getDocs API ??? ?? ??? ?????.

? Firestore API ?? ???? ????? ????? ?????. ??? "??? ???? ??"(??)? ??????. ?, ? ? ???? ???? ??? ???? ??? ????. Firestore? ?? "??", "????" ? "??" ??? ????? ?? ??? ?????? ????? 10.1 ?? - Firestore CRUD ?? ???? ???? ?? ??? ? ????. API? ?? Google? ?? ??? ????? Post 10.1 ????? ?? ?? ??? ?? ? ????.

??? "CRUD"? "???", "??", "????", "??"? ?????.

getDocs ??? ????? "???"??? ??? ?? ??? ?????. ??? getDocs ?? ?? ??? wait ???? ???.

????? Javascript??? ???? ? ??? ? ?? ??? ?? ? ?? ?? ??? ??? ???? ??? ?????? ???? ??? ??? wait ???? ?????. ????? "await" ???? ????(??? ?????? ????) ? ??? ???? ? ????. ??? ? ??? Javascript fetch() API ? "await" ???? ?? ??? ???

? ???? ?? ??? ? ????.

??? ??? ?? ?? ???? ???? const firebaseConfig ??? ???? ??? ?????.

firebaseConfig ??? ? ?? ?? Firebase ????? ???? ? ??? ?? ????? ??? ??? ??????. ???? Firebase? ?? ?? ???? ? ???? ??? ?? ???? ???? ????. Firebase ??? '???? ??/???? ??'?? ??? ?? ??? ?? ??? ?? ? ????. ?? ?? ??? firebaseConfig ??? my ????? ???? ??? ?????? ? ?? ??? '???'?????(??? ??? ? ??). ?? ?? ??? ??? ?? ??? ?????? firebaseConfig ??? ???? ???.

firebaseConfig? ????? ? ?? ??? const productsCollRef = collection(db, "products");? ??? db ??? ???? ? ????. ??:

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

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

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

????? ??? API ??? ??? ??? ???? ????. ??? ?? ?? ??? ?? ? ?? ?? ?? ????? ???? ??????? ????.

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

??? "??? ?????"? ??? ?? ??? ???? ?? ??????. ???? ?? ??? ??? ??? ???? ??? ??? ???? ?? ?? ???? ?????.

??? ?? "??? ??? ??? ?????? ? ????? ??? ??????"?? ???? ?????. ?? ??? ???? ??? ??? ??? ???, ?? ?? ???? ??? ??? ??? npm???.

VSCode svelte-test ??? ???? ????(??? ?? Ctrl-C ?? ? ? ?? ?? ?? ??) ?? ??? ?????.'

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

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

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

1~2? ??(???? ??? ??? ????? ???) Firestore ?????? ???? ?????? ??? ??? ??? ???. ??? Svelte ??? ?? ???? ??? ??? ????. ?? ?? ???? ???????...

3.5 Firestore ???????? ???? ???? ?? Svelte page.svelte ??? ???? ??? ?? ????

?? ??? ???? ??? ??????. ?? ?? ? ?????.

??