NgSysV.Mencipta Sistem Maklumat Svelte yang ringkas dengan Google's Firestore

Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.

Semakan terakhir: Nov '24

1. Pengenalan

Kebanyakan apl web wujud semata-mata untuk mencipta dan mengakses maklumat yang dikongsi. Pertimbangkan, laman web https://www.amazon.co.uk/ Amazon. Tujuan penting sistem ini adalah untuk membolehkan anda menyemak imbas koleksi pusat butiran produk, membuat pesanan dan memantau kemajuan penghantaran. Untuk membuat ini berfungsi, Amazon mesti:

• Kekalkan maklumat ini di tempat yang boleh diakses melalui web
• Struktur dan uruskannya untuk memastikan akses hampir serta-merta dan integriti menyeluruh.

Siaran ini adalah mengenai teknologi "pangkalan data" yang digunakan untuk mencapai matlamat ini.

Amaran - ini adalah siaran panjang kerana pangkalan data membaca dan menulis dalam Svelte menarik anda tanpa rasa menyesal menggunakan seni bina pelayan-pelayan SvelteKit. Sebelum ini, kod anda dijalankan secara eksklusif "sebelah pelanggan" dalam penyemak imbas web anda. Kini anda juga akan menjalankan kod pada pelayan tempatan yang dilancarkan oleh npm run dev. Ini ada akibatnya...

Saya telah melihat cara untuk membahagikan siaran tetapi ia tidak berkesan. Lebih memburukkan lagi keadaan, Javascript yang anda akan gunakan mengandungi banyak ciri baharu. Jadi, saya minta maaf - anda hanya perlu menyedutnya.

Tetapi lihat pada sisi terangnya. Sebaik sahaja anda melalui ini, perkara akan mula menjadi lebih mudah. Ambil perlahan-lahan. Gunakan chatGPT di mana anda rasa saya tidak menerangkan sesuatu dengan jelas. Anda akan mendapati bot amat membantu apabila anda memerlukan nasihat tentang sintaks JavaScript. Bertenang. Ini pasti menyeronokkan!

2. Mengkonfigurasikan projek anda untuk menggunakan Firestore Google

Terdapat banyak cara untuk menyimpan data yang dikongsi di web. Siri siaran ini menggunakan sistem Firestore Google kerana ia sesuai untuk pemula. Ia memerlukan persediaan minimum dan sesuai dengan selesa dalam struktur aplikasi web Svelte.

Anda perlu melakukan empat langkah awal:

1. Dapatkan akaun Google
2. Buat projek Firebase di bawah akaun ini
3. Daftar "apl web" anda
4. Mulakan Pangkalan Data Firestore untuk projek Firebase anda

Firebase ialah istilah umum Google untuk banyak perkhidmatan berbeza yang mungkin anda gunakan untuk memasang projek ringkas di web. Perkhidmatan untuk akaun tertentu diuruskan melalui "Firebase console" Google di https://console.firebase.google.com/. Ia termasuk kedua-dua perkhidmatan "Storan" yang membolehkan anda memuat naik fail ke dalam Google Cloud dan perkhidmatan "Pangkalan Data Firestore". Pangkalan data berbeza daripada fail kerana ia mempunyai struktur yang boleh dikonfigurasikan. Ia membolehkan anda mengakses dan mengemas kini elemen diskret set data yang dikonfigurasikan.

2.1 Mendapatkan akaun Google

Jika anda mempunyai alamat Gmail, anda sudah dilindungi kerana ini secara automatik dikira sebagai akaun Google. Jika tidak, ikut arahan di Buat Akaun Google untuk mendapatkannya.

2.2 Mencipta projek Firebase untuk kod anda

Lancarkan Google Firebase console dan log masuk dengan Akaun Google anda (perhatikan bahawa, jika anda log masuk ke Gmail dengan ini, anda sudah pun log masuk ke Firebase Console). Sekarang klik kotak "Buat Projek" untuk melancarkan proses.

Google akan mahu anda membekalkan nama untuk projek anda (saya cadangkan anda menggunakan nama projek yang anda gunakan dalam VSCode), dan akan mencadangkan sambungan yang menjadikan ini sebagai "Pengecam Projek" yang unik dalam dunia Firebase. Jadi, contohnya, versi my projek "Svelte-dev" yang digunakan dalam siri siaran ini dikenali oleh Google sebagai "Svelte-dev-afbaf".

Selain itu, memandangkan Pengecam Projek akhirnya akan menjadi sebahagian daripada URL langsung lalai untuk apl web anda, dan memandangkan Google membenarkan anda mengedit cadangan "sambungan keunikan" awalnya, anda mungkin tergoda untuk cuba mengubahnya kepada sesuatu yang bermakna. Walau bagaimanapun, saya cadangkan anda melupakan idea ini. Pertama, anda akan mendapati sukar untuk memilih pengecam yang sesuai dengan kedua-dua pihak. Kedua, dalam pengalaman saya, "URL lalai" ini tidak pernah diindeks oleh Google. "URL tersuai" yang dibeli pada kos minimum dan dipautkan ke URL lalai anda apabila anda menyiarkan secara langsung ialah cara terbaik untuk mendapatkan URL yang tidak dapat dilupakan.

Sekarang klik "Teruskan" untuk mendedahkan halaman pendaftaran "Google Analitis". Anda boleh mengabaikan perkara ini dengan selamat di sini kerana ia hanya berkaitan dengan isu prestasi pada apl langsung. Gunakan bar peluncur untuk menolaknya dan klik butang "Buat Projek" untuk meneruskan.

Lampu kini malap sedikit apabila Google mendaftarkan projek anda. Akhir sekali, sebaik sahaja anda mengklik satu lagi butang "Teruskan", anda akan mendapati diri anda dalam tetingkap Firebase Console projek anda. Berikut ialah tangkapan skrin tab Firestore untuk projek "svelte-dev":

Adalah berbaloi memberi diri anda sedikit masa untuk membiasakan diri dengan halaman ini kerana ia agak rumit. Struktur asas terdiri daripada "menu alatan" di sebelah kiri yang menentukan perkara yang akan dipaparkan dalam panel utama di sebelah kanan. Masalahnya ialah menu itu "adaptif" dan mengekalkan bahagian "Pintasan projek" yang mengingati tempat anda pernah pergi. Akibatnya, menu kelihatan berbeza setiap kali anda membuka konsol! Walau bagaimanapun, sebaik sahaja anda memahami ciri ini, semuanya berfungsi dengan baik. Ambil perhatian bahawa set alat lengkap tersembunyi dalam submenu "Bina", "Jalankan" dan "Analitik" item menu "Kategori Produk" induknya. Set "Bina" mengandungi semua yang anda perlukan pada masa ini.

Sebelum anda meneruskan lebih jauh, perhatikan perkara berikut:

• maklumat di bahagian atas skrin mengesahkan bahawa projek ujian ramping sedang didaftarkan pada pelan "Spark". Ini bermakna semua yang anda lakukan pada masa ini adalah percuma. Akhirnya, dalam siri siaran ini, anda akan sampai ke tahap di mana anda perlu mula membayar Google dan perlu meningkatkan projek anda kepada tarif "Blaze". Tetapi jangan risau - ini masih jauh, anda tidak akan membayar banyak dan anda boleh membuat belanjawan bulanan untuk mengehadkan jumlah yang mungkin cuba dicaj oleh Google kepada anda.
• butiran projek didedahkan dengan mengklik butang "Gambaran Keseluruhan Projek" di bahagian atas bar alat. Butiran yang tersedia di sini termasuk peringatan Pengecam Projek dan butang untuk memadamkan projek. Jika segala-galanya menjadi salah, anda sentiasa boleh menggunakan ini untuk menghapuskan kekacauan dan mulakan semula. Ini tidak akan membebankan anda

2.3 Mendaftarkan apl web anda

Firebase perlu mengetahui nama apl web anda:

• Klik ikon di bawah mesej "Bermula" dan berikan nama panggilan apabila diminta. Saya cadangkan anda menggunakan nama projek anda sekali lagi di sini (cth "svelte-dev").
• Abaikan tawaran untuk "Sediakan Pengehosan Firebase untuk apl ini" kerana, apabila kami akhirnya mencapai kelancaran, semua keperluan pengehosan anda akan dikendalikan oleh App Engine.
• Akhir sekali, klik "Daftar" dan "Teruskan ke konsol" untuk kembali ke skrin konsol awal.

2.4 - Memulakan pangkalan data Firestore

Pilih "Pangkalan Data Firestore" daripada tindanan "Bina" dalam menu alatan untuk mendapatkan paparan konsol Firebase yang ditunjukkan di bawah:

Sebaik sahaja anda mengklik butang "Buat Pangkalan Data", konsol akan mahu anda:

1. Tetapkan pangkalan data anda "Nama dan Lokasi". "Nama" ialah pengecam untuk pangkalan data dan hanya akan relevan jika anda merancang untuk mencipta beberapa pangkalan data yang berbeza dalam projek anda. Biarkan ini kosong, buat masa ini, supaya Google menggunakan tetapan "lalai"nya. "Lokasi" menentukan tempat pangkalan data anda akan ditempatkan secara fizikal. Senarai tarik-turun pilihan yang tersedia di sini mungkin merupakan pandangan pertama anda tentang skala perkhidmatan Google Cloud. Ladang pelayannya tersedia di seluruh dunia. Anda mungkin mahu memilih pelayan yang berdekatan dengan lokasi anda. Sebagai contoh, saya biasanya menggunakan "europe-west2 : Heathrow" kerana saya berpangkalan di UK. Halaman di tempat lain dalam konsol Google Cloud membolehkan anda menentukan ciri prestasi dan ketersediaan, tetapi anda tidak perlu melihatnya buat masa ini.

2. Lindungi pangkalan data anda dengan "Peraturan". Skrin di sini menawarkan anda pilihan antara menetapkan "pengeluaran" awal dan "ujian" "peraturan". Ini hanya masuk akal, sudah tentu, jika anda tahu apa "peraturan" pada mulanya - dan ini bukan masa yang sesuai untuk saya menerangkannya. Melainkan anda tahu lebih baik, saya ingin anda menyemak pilihan "mod ujian" di sini. Yakinlah, saya akan kembali kepada perkara ini kemudian apabila saya bercakap tentang "keizinan" (dan, oh budak, adakah banyak yang perlu dibincangkan!).

Setelah anda melalui dua peringkat ini, halaman Cloud Firestore dibuka dalam Firebase Console. Apa sekarang?

3. Bekerja dengan Pangkalan Data Firestore

Bahagian ini bertujuan untuk menjawab soalan berikut:

1. Apakah pangkalan data?
2. Apakah rupa pangkalan data Firestore?
3. Bagaimanakah saya boleh memulakan pangkalan data dalam konsol Firestore?
4. Bagaimanakah saya boleh mengakses pangkalan data Firestore dalam Javascript?
5. Bagaimanakah saya boleh mendapatkan fail page.svelte Svelte untuk memuatkan data daripada pangkalan data Firestore?
6. Bagaimanakah saya boleh mendapatkan fail page.svelte Svelte untuk menambah data pada pangkalan data Firestore?

3.1 Apakah pangkalan data?

Untuk tujuan segera kami, pangkalan data ialah satu set jadual yang mengandungi baris nilai untuk "medan" data bernama. Jadi, sebagai contoh, pangkalan data Pesanan Pelanggan" mungkin mengandungi

• jadual "Pelanggan" penuh dengan nilai medan "Id Pelanggan" dan "Butiran Alamat Pelanggan"
• jadual "Produk" penuh dengan medan "Nombor Produk" dan "Butiran Produk"
• jadual "Pesanan Pelanggan" dengan butiran pesanan untuk "Nombor Produk" yang diletakkan oleh "Id Pelanggan"

Perkara yang penting ialah susunan sedemikian berstruktur dengan piawaian yang konsisten untuk penamaan dan pemformatan kandungan data

3.2 Apakah rupa pangkalan data Firestore?

Dalam Firestore, jadual dipanggil "koleksi" dan baris di dalamnya dipanggil "dokumen". Dokumen yang disimpan dalam koleksi tidak semua perlu mempunyai medan yang sama, tetapi nama medan dan kandungan dijangka mengikut corak yang konsisten sepanjang koleksi.

Ciri penting dokumen Firestore ialah dokumen itu harus mempunyai pengecam unik atau "kunci". Kadangkala akan terdapat medan seperti "Alamat E-mel" dalam setiap dokumen yang boleh anda gunakan untuk menyediakan kunci unik "semula jadi". Jika tidak, Firestore boleh diminta untuk mencipta kunci tiruan secara automatik.

Reka bentuk pangkalan data mungkin merupakan bahagian yang paling mencabar dalam pembangunan sistem dan, sekali lagi, saya akan mengelak perkara ini kerana isu yang terlibat hanya akan menjadi jelas apabila anda mempunyai pengalaman praktikal. Walau bagaimanapun, apabila anda mempunyai masa, anda akan mendapati ia berguna untuk menyemak halaman model Cloud Firestore Data.

3.3 Bagaimanakah saya boleh memulakan pangkalan data dalam konsol Firestore?

Dalam siaran ini, saya merancang untuk menunjukkan kepada anda cara membuat koleksi produk tunggal dalam pangkalan data Firestore lalai anda. Ini akan mengandungi dokumen ringkas yang mengandungi medan nombor produk dengan kunci yang dijana secara automatik oleh Firestore.

Pada halaman Firestore pada konsol Firebase, klik butang "Mulakan koleksi" dan masukkan nama "produk" dalam medan "ID Koleksi" pada pop timbul yang kini muncul.

Sekarang gunakan halaman kemasukan data untuk mencipta dokumen produk ujian yang mengandungi medan "productNumber" dengan nilai angka "1" dan medan "productDetails" dengan nilai teks "Produk 1".

• Taip "productNumber" dalam kotak masukan "Field" untuk menetapkan nama medan, tetapkan kotak "Jenis" kepada "nombor" dan masukkan "1" (tanpa aksara petikan) dalam kotak "Nilai".
• Klik "tambah medan dan taip "productDetails" dalam kotak masukan "Field" untuk menetapkan nama medan, biarkan kotak "Jenis" ditetapkan kepada tetapan "rentetan" lalainya dan masukkan "Produk 1" (tanpa aksara petikan ) dalam kotak "Nilai".

Sekarang tandatangani dokumen dengan mengklik butang "Auto Id" dahulu dan kemudian "Menyimpan"nya Berikut ialah rupa konsol sekarang:

Jika anda ingin menambah dokumen lagi, anda akan mengklik "tambah dokumen" pada ketika ini, tetapi itu tidak perlu dalam kes ini - anda hanya memerlukan satu dokumen untuk menunjukkan keupayaan aplikasi web anda untuk membacanya.

Anda telah selesai di sini buat masa ini, tetapi ambil perhatian bahawa "paparan panel" konsol membolehkan anda mengedit atau memadamkan dokumen yang baru anda buat. Jika anda berada dalam keadaan huru-hara, anda juga boleh memadamkan keseluruhan koleksi dan mulakan semula.

3.4 Bagaimanakah saya boleh mengakses pangkalan data Firestore dalam Javascript?

Di sinilah perkara mula menjadi

sangat menarik!

Google menyediakan perpustakaan fungsi Javascript untuk membolehkan anda membaca dan menulis dokumen Firestore. Perpustakaan sedemikian dirujuk sebagai "API" (Antara Muka Program Aplikasi). Lihat kod berikut yang menunjukkan cara pustaka firebase/firestore akan digunakan untuk membaca semua dokumen dalam koleksi produk svelte-dev:

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

Tumpu pada bahagian yang memulakan const productsCollRef = collection(db, "products");. Ini menggunakan panggilan API Firestore untuk memuatkan salinan diisih semua dokumen dalam koleksi produk ke dalam pembolehubah State currentProducts.

Pertama, fungsi pengumpulan dan pertanyaan, yang diambil daripada pustaka API Klien Firestore, digunakan untuk menunjukkan Firebase pada koleksi produk dan menentukan pertanyaan untuk dijalankan padanya. Kemudian pertanyaan dilancarkan oleh panggilan API getDocs.

Saya tidak akan cuba menerangkan mekanik urutan panggilan API Firestore ini. Anggap ini sebagai sekeping "kod plat dandang" - kod - jenis perkara yang anda tulis sekali dan, selepas itu, hanya salin. Memandangkan anda akan mendapati anda memerlukan keseluruhan pustaka templat untuk merangkumi tatasusunan penuh operasi "baca", "kemas kini" dan "padam" Firestore, anda mungkin mendapati ia berguna untuk melihat templat arahan Post 10.1 - Firestore CRUD. Jika anda ingin menyemak perihalan API Google sendiri, anda akan menemui pautan kepada ini di penghujung Post 10.1.

"CRUD" di sini adalah singkatan untuk "create", "read", "update" dan "delete".

Hasil getDocs dikembalikan sebagai susunan dokumen yang secara konvensional dipanggil "snapshot". Walau bagaimanapun, ambil perhatian bahawa panggilan fungsi getDocs didahului oleh kata kunci menunggu.

Kata kunci menunggu diperlukan di sini kerana, secara lalai dalam Javascript, arahan yang merujuk sumber data luaran yang mungkin mengambil masa yang tidak dapat diramalkan untuk diselesaikan dikendalikan tak segerak. Kata kunci "menunggu" pada asasnya (walaupun ini adalah penyederhanaan kasar) membolehkan anda mengatasi pengaturan ini. Apabila anda mempunyai lebih banyak masa, anda mungkin mendapati ia berguna untuk melihat Panduan ringkas untuk Javascript fetch() API dan kata kunci "menunggu"

Tetapi sekarang, kembali ke coretan kod kami di atas, lihat bahagian yang bermula dengan pernyataan const firebaseConfig.

Pengisytiharan firebaseConfig memulakan objek yang mengandungi butiran konfigurasi yang diperlukan untuk menyambungkan apl web anda kepada projek Firebase khusus anda. Ia termasuk pelbagai kunci dan pengecam yang Firebase gunakan untuk mencari dan mengesahkan apl anda. Anda akan menemui tetapan untuk apl web tertentu anda dalam "Gambaran Keseluruhan Projek/Tetapan Projek" pada konsol Firebase. Tetapan firebaseConfig dalam sampel kod di bawah telah "dikelirukan" kerana ia unik untuk projek saya dan tidak boleh disebarkan dengan mudah (lebih lanjut mengenai perkara ini sebentar lagi). Apabila mencuba kod sampel di bawah, anda perlu menyalin dalam tetapan firebaseConfig daripada projek anda sendiri.

Dengan firebaseConfig dimulakan, apl web boleh memulakan pembolehubah db yang diperlukan oleh const productsCollRef = collection(db, "products"); kenyataan:

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

Akhir sekali, anda mungkin tertanya-tanya dari mana datangnya fungsi API ini. Jawapannya ialah ia diimport dari lokasi dalam projek anda dengan tiga pernyataan di bahagian atas blok kod:

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

Di sini "perpustakaan modular" sedang diakses untuk membekalkan fungsi untuk kod anda. Fungsi bernama seperti koleksi diekstrak daripada modul induk untuk memenuhi rujukan yang diperlukan kemudian dalam kod.

Tetapi ini membawa kepada soalan "Dan bagaimanakah perpustakaan modular masuk ke dalam projek saya pada mulanya?" Jawapannya, sudah tentu, anda perlu meletakkannya di sana, dan alat yang anda gunakan untuk melakukan ini ialah npm lama yang setia.

Kembali dalam sesi terminal VSCode svelte-test (menamatkan pelayan dev jika perlu dengan beberapa ketukan kekunci ctrl-C) dan jalankan arahan berikut'

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

Selepas seminit atau dua (pemasangan melibatkan muat turun yang besar), anda akan bersedia untuk menjalankan kod yang memuat turun koleksi pangkalan data Firestore. Tetapi, anda masih tidak tahu cara untuk membenamkan ini dalam aplikasi web Svelte. Jadi, ke soalan seterusnya...

3.5 Bagaimanakah saya boleh mendapatkan fail page.svelte Svelte untuk memuatkan data daripada pangkalan data Firestore?

Perjalanan ini sudah lama tetapi, bersabarlah, anda hampir selesai.

Pada masa ini, dalam bahagian fail src/routes/ page.svelte anda, anda mempunyai pernyataan berikut:

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

Seperti yang anda ketahui, ini mengisytiharkan medan produk anda sebagai pembolehubah Negeri dan memulakannya sebagai tatasusunan kosong. Apa yang anda mahu lakukan sekarang ialah menggantikan "kosong" dengan kandungan produk koleksi Firestore.

Malangnya, seperti yang anda lihat, ini melibatkan operasi tak segerak. Ini agak merumitkan keadaan kerana Svelte tidak mahu apa-apa memperlahankan pemuatan awal halaman - gembira untuk melihat maklumat yang ditambahkan kemudian tetapi, tanggapan pengguna yang pertama harus merupakan tindak balas serta-merta. Svelte mempunyai susunan standard untuk memuatkan data awal ke dalam fail page.svelte. Ia berlaku seperti ini:

Mula-mula, anda mencipta fail src/routes/ page.server.js baharu yang membungkus semua kod tak segerak anda di dalam fungsi load() (nama mandatori) dan mengembalikan hasilnya sebagai objek.

Ini kodnya

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

Fungsi beban di atas mengembalikan objek dengan satu sifat produk yang nilainya ialah tatasusunan currentProducts yang dibina oleh panggilan API Firestore.

Ini semua sangat baik, tetapi bagaimana ini hendak disampaikan kepada pembolehubah keadaan produk dalam page.svelte?

Langkah pertama ialah mengiklankan pembolehubah keadaan data baharu (nama mandatori) sebagai prop (singkatan daripada "property") page.svelteAnda melakukan ini dengan mengisytiharkannya dengan kata kunci eksport, dengan itu:

npm install firebase

Props tidak akan diliputi dalam siri ini sehingga anda sampai ke Post 3.1 dalam siri ini dan mempelajari tentang "komponen". Buat masa ini, fikirkan fail page.svelte anda sebagai fungsi dengan data sebagai parameternya.

Apabila anda menjalankan fail page.svelte anda sekarang, rangka kerja SvelteKit melihat pengisytiharan data biarkan eksport dengan kata kunci data simpanannya dan berfikir, "ah, saya perlu menjalankan fungsi load() yang dikaitkan dengan halaman ini". Data produk dikembalikan dengan sewajarnya ke dalam prop data page.svelte dan sekarang, memandangkan ini adalah pembolehubah reaktif, halaman tersebut dimuat semula.

Apa yang anda perlu lakukan untuk menjadikan kod "templat" sedia ada anda berfungsi dengan susunan baharu ialah menggantikan rujukan produk dengan data.products

Fail page.server.js ialah pandangan pertama anda tentang kod "sebelah pelayan" dalam Svelte - iaitu, kod yang dijalankan dalam pelayan. Semua kod page.svelte yang anda lihat setakat ini menjalankan "sebelah pelanggan" dalam penyemak imbas. Fail page.server.js, sebaliknya, berjalan sama ada dalam pelayan tempatan yang dilancarkan oleh npm run dev atau, selepas penggunaan, dalam persekitaran Node.js pelayan App Engine. Kod sebelah pelayan berjalan lebih pantas daripada kod sebelah klien dan selamat. Satu-satunya orang yang boleh melihat atau mengubahnya ialah anda - pemiliknya.

Berikut ialah kod lengkap untuk versi ubah suai fail page.svelte daripada Post 2.2:

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

Di manakah kod ini sepatutnya diletakkan? Pada masa ini, kod yang dicetuskan oleh "Tambah Produk Lain" 's on:click button berada dalam fail page.svelte anda. Tetapi Svelte menasihatkan bahawa, atas sebab keselamatan dan kecekapan, kemas kini pangkalan data harus dilakukan "sebelah pelayan" dalam page.server.js dalam fungsi actions() yang selari dengan fungsi load() yang telah anda buat di sini. Fungsi ini dicetuskan oleh "menyiarkan" data daripada .

Berikut ialah susunan dalam page.svelte sepatutnya kelihatan seperti:

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

Objek yang dikembalikan oleh fungsi "tindakan" tersedia untuk fail page.svelte melalui prop borang yang diisytiharkan dalam bahagian. Di sini, borang kebenaran eksport; pernyataan selari dengan penggunaan awal prop data untuk mengembalikan hasil fungsi load().

Berikut ialah versi lengkap page.svelte dan page.server.js:

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

Jika anda menyalin kod ini, ingat untuk menetapkan semula data firestoreConfig sekali lagi. Jika anda menghadapi masalah untuk menjalankannya, ingat juga nasihat dalam siaran sebelumnya tentang menyahpepijat kod sisi klien dan lihat "Bahagian Posskrip" di bawah untuk mendapatkan nasihat tentang menyelesaikan masalah sisi pelayan. Semoga berjaya!

Perhatikan bahawa API FireStore mengimport dan pernyataan konfigurasi db dalam page.server.js telah diberikan "skop fail" dengan mengalihkannya keluar daripada fungsi yang mereka sediakan dan menempatkannya semula di bahagian atas bahagian. Dalam projek yang lebih kompleks, adalah menjadi amalan biasa untuk mengkonfigurasi db dalam folder lib yang berasingan untuk membolehkannya dikongsi dengan lebih meluas sebagai import.

Anda juga akan ambil perhatian bahawa kod baharu melepaskan tetapan semula medan popupVisible yang sebelum ini muncul dalam page.svelte fail lama pada: fungsi klik. Tindakan lalai Svelte pada penyerahan borang adalah untuk memuatkan semula halaman. Akibatnya, apabila borang telah diproses, popupVisible dimulakan semula sebagai palsu, tatasusunan "Produk yang didaftarkan pada masa ini:" dimuat semula daripada koleksi produk Firestore yang dikemas kini dan pop timbul hilang. Sebagai bonus, Nombor Produk baharu akan dimasukkan dalam susunan diisih yang betul, ihsan daripada kelayakan orderBy("productNumber", "asc") dalam getDocs produk.

Kaveat: kod seperti ini hanya akan berfungsi semasa pangkalan data Firestore anda terbuka. Apabila anda menambah peraturan untuk menyekat akses koleksi kepada pengguna yang dibenarkan (iaitu pengguna yang telah "log masuk"), templat Firestore yang anda gunakan di sini akan gagal. Siaran dalam bahagian seterusnya siri ini akan menerangkan sebabnya dan Post 3.4 khususnya akan menerangkan cara anda boleh kembali kepada kod berdasarkan semata-mata pada fail page.svelte sisi klien. Walau bagaimanapun, memandangkan perkara ini akan mengorbankan keselamatan dan prestasi, saya harap anda akan berusaha mengatasi "kerengsaan kecil" ini dan terus membangunkan kod pelayan pelanggan. Buat masa ini, pastikan peraturan pangkalan data anda kelihatan seperti:

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

4. Rumusan

Saya bayangkan bahawa siaran ini akan meletihkan kesabaran anda sehingga ke hadnya. Jika anda telah mencapai tahap ini dengan aplikasi web yang berfungsi dan kewarasan anda masih utuh, berikan diri anda bintang emas - anda telah membincangkan kebanyakan topik teras Svelte dan menguasai kemahiran penting!

Maksudnya, masih banyak yang perlu dipelajari. Sebagai contoh, siaran ini telah mengelak daripada menerangkan pengendalian ralat asas, dan pengaturan pengesahan borang. Selain itu, saya juga ingin memperkenalkan anda kepada laluan Svelte (iaitu halaman), susun atur (pengepala halaman dan treler), komponen, dan isu rumit yang mengelilingi keselamatan (reka bentuk log masuk dan peraturan pangkalan data). Akhir sekali, terdapat persoalan menarik tentang cara anda menggunakan aplikasi web anda untuk operasi langsung di web. Saya harap anda akan terus membaca!

Postscript: Apabila berlaku masalah

Pengenalan pemprosesan "sebelah pelayan" dalam apl web anda telah menjejaki anda dengan pantas terus ke liga pembangun senior. Ini kerana teknik "Pemeriksa Chrome" yang saya harap anda suka menggunakan pada fail page.svelte anda tidak berfungsi pada fail page.server.js. Tetapi semuanya tidak hilang. Berikut ialah pengenalan kepada teknik yang akan digunakan oleh pembangun kanan:

Postscript (a): Menyahpepijat kod sisi Pelayan dalam Sesi Terminal

Walaupun editor VSCode akan melakukan yang terbaik untuk membantu anda menghasilkan kod bunyi, beberapa ralat asas hanya akan kelihatan apabila pelayan SvelteKit cuba menjalankan aplikasi web anda. Pada ketika ini, skrin anda mungkin memaparkan mesej "500 - Ralat Dalaman" (jika ia memaparkan apa-apa sahaja!). Penyemak imbas tidak dapat banyak membantu anda di sini kerana fail page.server.js pada dasarnya tidak kelihatan di sini. Walaupun hierarki storan Halaman/hos tempatan tab Sumber terus menunjukkan fail page.svelte anda, ia tidak boleh dikatakan tentang page.server.js.

Tetapi Inspektor tahu bahawa ralat telah berlaku dan kadangkala boleh memberi anda petunjuk berguna tentang puncanya. Hujung kanan bar menu akan menunjukkan ikon merah dengan salib di tengah. Klik ini dan konsol Inspektor akan membuka dan memaparkan butiran ralat ringkasan. Tetapi jika anda memerlukan butiran penuh, anda akan menemui ini dalam sesi terminal tempat anda melancarkan pelayan dengan npm run dev.

Masalahnya di sini ialah anda mungkin akan merasakan tahap perincian mungkin agak terlalu penuh. Setiap ralat dilaporkan dengan "timbunan panggilan" yang memperincikan urutan penuh panggilan fungsi pelayan yang mendahului titik kegagalan Berikut ialah ralat pendek yang dicetuskan oleh pengisytiharan nama medan yang salah (saya sengaja salah taip const db= sebagai const dba =

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

Tingkap terminal bukan tempat yang baik untuk melihat maklumat seperti ini. Kadangkala anda perlu menatal ke atas atau ke bawah untuk mencari perkara yang anda mahukan, dan maklumat mungkin juga dikaburkan oleh output daripada aktiviti lain. Namun begitu, itu sahaja yang anda ada jadi anda perlu memanfaatkannya dengan sebaik mungkin.

Tetapi ambil perhatian bahawa, dalam contoh yang ditunjukkan di atas, punca ralat ditandakan dengan sangat jelas - pelayan telah menemui rujukan kepada pembolehubah db dalam page.server.js pada baris 18 lajur 38 dan db belum diisytiharkan. Itu memberi anda semua yang anda perlukan, saya rasa.

Tetingkap terminal boleh membantu anda menyelesaikan masalah dengan logik anda juga. Pada masa lalu, "penyahpepijatan" biasanya dilakukan dengan meletakkan mesej console.log pada titik strategik dalam kod dan cukup mudah untuk menggunakan pendekatan ini di sini. Mesej log biasa ialah:

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

Mesej log seperti ini yang diletakkan dalam fail page.server.js akan dipaparkan dalam tetingkap terminal VSCode (sebaliknya, kenyataan log dalam kod page.svelte sisi klien akan terus dipaparkan dalam tetingkap konsol penyemak imbas).

Postscript (b): Menyahpepijat kod sisi Pelayan dalam penyahpepijat VSCode

Mesej Console.log baik untuk membetulkan isu kecil, tetapi sekarang anda menjangkakan dapat menggunakan sesuatu dengan kecanggihan alat penyahpepijat "breakpoint" penyemak imbas. jangan takut. Anda kini boleh mencari ini dalam VSCode. editor. Inilah yang anda lakukan:

1. Buka fail page.server.js yang ingin anda nyahpepijat dan tetapkan titik putus pada titik yang anda ingin periksa. Anda melakukan ini dengan menuding tetikus pada baris sumber yang anda mahu gunakan sebagai titik putus dan mengklik pada titik merah pucat yang akan muncul di sebelah kirinya. Titik merah pucat kini bertukar kepada merah terang.
2. Dalam palet arahan VSCode (pintasan "ctrl shift p") pilih Nyahpepijat: Lampirkan pada proses nod dan dapatkan senarai projek dalam ruang kerja anda. Pilih yang anda mahu nyahpepijat.
3. Perhatikan bahawa sesi terminal yang baru anda lancarkan dilabelkan sebagai "Terminal Nyahpepijat Javascript". Taip 'npm run dev` ke dalam terminal ini dan perhatikan bagaimana output Vite biasa yang muncul termasuk baris tambahan "Debugger attached". Perhatikan juga bagaimana bar aktiviti VSCode telah bertukar menjadi jingga
4. Sekarang tetikus ke atas alamat http://localhost yang dipaparkan oleh Vite dan lancarkan aplikasi web dengan "ctrl-click". Apl web anda kini dibuka dalam tetingkap timbul.
5. Kini anda akan mendapati halaman editor untuk fail page.server.js anda telah menjadi sesi penyahpepijatan aktif dengan pelaksanaan dihentikan pada titik putus pertama. Panel di bahagian atas tetingkap editor memaparkan butang "majukan ke titik putus seterusnya" dsb yang biasa, dan tetikus pada nama medan akan mendedahkan petua alat yang memaparkan nilainya. Seperti sebelum ini, jika sesi nyahpepijat dihentikan pada pernyataan tugasan berubah-ubah, anda hanya akan melihat keputusan ini apabila anda maju ke pernyataan seterusnya.
6. Tamatkan sesi nyahpepijat dengan menuding tetikus pada ikon di hujung panel kawalan nyahpepijat. Ini bertukar antara tindakan "putus sambungan" dan "berhenti" apabila anda menekan kekunci "alt". Klik ini apabila ia memaparkan "putus sambungan" dan bar aktiviti VSCode oren akan bertukar biru sekali lagi. Jika anda ingin menyambung semula penyahpepijatan, "ctrl click" pada URL apl web dalam tetingkap terminal penyahpepijatan sekali lagi (yang akan kekal aktif sehingga anda "bin" secara eksplisit)

Tangkapan skrin di bawah menunjukkan fail page.server.js untuk siaran ini dihentikan semasa pemulangan daripada fungsi load(). "Tukang tetikus" pada harta produk untuk pemulangan pada ketika ini memaparkan hasil pembacaan koleksi produk Firestore.

Untuk butiran penuh kemudahan yang tersedia dalam penyahpepijat VSCode, lihat dokumentasi di penyahpepijatan VSCode

Atas ialah kandungan terperinci NgSysV.Mencipta Sistem Maklumat Svelte yang ringkas dengan Google's Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!