Buat pelacak github dengan pemberitahuan push di svelte

Dalam artikel ini, anda akan belajar bagaimana untuk membina pelacak GitHub yang memberitahu pengguna apabila terdapat isu baru/PR pada repositori yang dikesan dengan menghantar pemberitahuan push.

GitHub sudah menghantar pemberitahuan melalui e -mel jika anda telah memilih, tetapi banyak kajian telah menunjukkan bahawa pemberitahuan push mencapai pengguna lebih baik daripada e -mel. Selepas anda membina GitHub Tracker dengan mengikuti tutorial ini, anda akan belajar bagaimana untuk:

tambahkan pekerja perkhidmatan dan tukar pelacak ke PWA
melanggan pemberitahuan push
Gunakan GitHub Api
menghantar acara push melalui fungsi awan vercel
mengambil isu -isu baru secara berkala menggunakan EasyCron

Prasyarat

Terdapat beberapa kemahiran dan perkhidmatan yang anda perlukan untuk mengikuti artikel ini:

node.js dan npm dipasang
pengetahuan svelte sebelum
Akaun GitHub percuma, kerana kami menggunakan GitHub API
Akaun Atlas MongoDB percuma untuk menggunakan MongoDB di awan
akaun vercel percuma untuk menggunakan aplikasi dan fungsi awan

Apakah pemberitahuan push?

Mari kita lihat apa yang disebut "pemberitahuan push" ini.

Anda mesti biasa dengan pemberitahuan biasa. Ini adalah gelembung sedikit teks yang muncul di skrin anda untuk

memberitahu anda sesuatu. Pemberitahuan push adalah sama, kecuali bahawa mereka tidak dihasilkan atas permintaan , tetapi mereka dihasilkan apabila menerima peristiwa push . Pemberitahuan Push Work apabila aplikasi ditutup , sementara pemberitahuan biasa memerlukan anda membuka aplikasi.

Pemberitahuan push disokong dalam pelayar web moden seperti Chrome dengan menggunakan sesuatu yang dipanggil pekerja perkhidmatan. Pekerja perkhidmatan adalah sedikit kepingan JavaScript yang berjalan secara berasingan dari benang utama penyemak imbas, dan sebagai hasilnya, boleh berjalan di luar talian jika aplikasi anda dipasang sebagai PWA (Aplikasi Web Progresif).

Pemberitahuan push digunakan dalam aplikasi sembang untuk memberitahu pengguna apabila mereka mempunyai mesej yang belum dibaca, dalam permainan, untuk memberitahu pengguna acara permainan, di laman berita, untuk memberitahu pengguna untuk melanggar artikel, dan untuk banyak tujuan lain.

Terdapat empat langkah untuk menunjukkan pemberitahuan push di aplikasi anda:

Permintaan kebenaran dengan window.notification.requestpermission ()

Tukar aplikasi anda ke PWA dan pasangkannya
melanggan peristiwa menolak
Setelah menerima acara push, hantar pemberitahuan
4. Langkah 1: Membuat Tracker

mari kita gunakan svelte dengan vite.js dan bukannya rollup dalam artikel ini. Vite adalah, seperti namanya, lebih cepat daripada rollup, dan juga menyediakan sokongan terbina dalam untuk pembolehubah persekitaran. Untuk membuat projek baru dengan Svelte dan Vite, jalankan arahan ini:

Pilih rangka kerja untuk menjadi svelte. Anda boleh menggunakan TypeScript jika anda mahu. Saya akan menggunakan JavaScript biasa.

Seterusnya, CD ke dalam folder projek dan anda boleh menambah tailwindcss ke aplikasi anda dan memasang semua kebergantungan dengan arahan ini:

<span>npm init vite
</span>

Akhirnya, buka projek dalam editor kod kegemaran anda dan jalankan NPM Run Dev atau Benang Dev untuk memulakan aplikasi di http: // localhost: 3000.

bagaimana pelacak akan berfungsi

Kami akan menggunakan API GitHub untuk mendapatkan senarai isu dan menarik permintaan untuk repositori yang pengguna telah dikesan. Repositori yang dikesan oleh pengguna dan nama pengguna mereka akan disimpan dalam pangkalan data MongoDB.

Langkah pertama adalah untuk meminta pengguna untuk nama pengguna mereka. Buat src/lib/usernameprompt.svelte, yang akan menjadi komponen yang akan melakukannya. Inilah UI saya untuk borang ini, tetapi anda boleh merancangnya tetapi anda mahu:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

tambahkan komponen ini dalam app.svelt Like So:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Seterusnya, mari tambahkan UI Tracker utama. Buat fail src/lib/tracker.svelte dan tambahkan kod di bawah di dalamnya:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

untuk menguji komponen anda, sementara swap komponen penggunaPrompt untuk komponen pelacak baru dalam app.svelte:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

skrin anda sekarang kelihatan seperti ini:

NOTA: Ingatlah untuk memulihkan app.Svelte ke kod terdahulu!

Langkah 2: Menyediakan Fungsi Awan

Kami perlu mempunyai pelayan back-end untuk menghantar acara push ke aplikasi kami. Ini bermakna anda perlu membuat projek ExpressJS yang baru (mungkin), dan kemudian menggunakannya secara berasingan. Ini semua akan menjadi sakit kepala bagi seseorang yang hanya bereksperimen dengan pemberitahuan push.

Fungsi Cloud Vercel untuk menyelamatkan! Fungsi awan adalah seperti laluan ekspres. Mereka boleh menjalankan kod dan memberi anda respons apabila anda mengambil URLnya. Vercel mempunyai sokongan untuk fungsi awan; Anda hanya perlu membuat fail dalam folder API. Anda akan menggunakan fungsi awan untuk berinteraksi dengan MongoDB, kerana mendedahkan rahsia pelanggan tidak pernah menjadi perkara yang baik.

Pertama, pastikan anda mempunyai kelompok di Atlas MongoDB. MongoDB mempunyai pelan percuma (

m0 ), jadi pastikan anda membuat satu jika anda belum melakukannya. Sekarang, pergi ke tab Akses Pangkalan Data di bar sisi papan pemuka Atlas anda. Tambah pengguna pangkalan data baru dengan mengklik butang hijau di sebelah kanan. Masukkan butiran pengguna (jangan lupa kata laluan), dan buat pengguna.

Untuk menyambung ke pangkalan data, anda memerlukan rentetan sambungan. Simpan pengguna dan kata laluan baru di suatu tempat dan pergi ke gambaran keseluruhan kluster anda. Klik butang Sambung di sebelah kanan dan pilih Sambungkan Aplikasi anda sebagai kaedah sambungan. Anda harus melihat rentetan sambungan yang serupa dengan yang di bawah.

Sekarang anda mempunyai rentetan sambungan, anda boleh menyambung ke pangkalan data anda, tetapi pertama, anda perlu menggunakan aplikasi semasa ke Vercel. Cara paling mudah untuk melakukan ini adalah menggunakan GitHub.

Buat repositori GitHub baru dan tolak kod anda kepadanya. Seterusnya, pergi ke papan pemuka Vercel anda dan klik butang projek baru. Import repositori github anda, pastikan rangka kerja itu adalah Vite, dan tambahkan pembolehubah persekitaran yang dipanggil mongodb_url. Tetapkan nilainya ke rentetan sambungan pangkalan data MongoDB.

Setelah laman web anda telah digunakan, anda perlu menukar arahan pembangunan tempatan anda dari benang dev ke Vercel Dev. Apabila menjalankan arahan, jika anda diminta untuk menghubungkan ke projek yang sedia ada, klik ya.

NOTA: Pastikan untuk memasang Vercel CLI dengan NPM I -G Vercel jika anda belum lagi.

Seperti saya, jika anda menghadapi masalah dengan menggunakan Vite dengan Vercel Dev, pastikan anda menukar arahan pembangunan projek anda ke Vite --port $ port dari Vite di papan pemuka Vercel.

Ini akan membolehkan kita menggunakan fungsi awan dengan pembolehubah persekitaran yang betul di dalam negara.

Mari tambahkan fail penolong yang akan membolehkan kita mengakses MongoDB tanpa membuka terlalu banyak sambungan. Buat fail API/_mongo.js dan letakkan kod berikut di dalamnya. Fail dalam direktori API yang diawali dengan _ akan tidak dianggap sebagai fungsi awan. Ini membolehkan kami menambah pembantu dan logik lain dalam fail berasingan:

<span>npm init vite
</span>

Mengeksport Janji Sambungan dan bukannya pelanggan utama sendiri akan menghalang kami daripada mempunyai sambungan yang berlebihan, kerana kami bekerja di platform tanpa pelayan.

menggunakan commonjs dan bukannya esmodul

perhatikan bagaimana saya menggunakan memerlukan bukan import? Ini kerana, pada masa penulisan, fungsi awan Vercel tidak menyokong penyataan import esmodule dalam fail JavaScript. Sebaliknya, anda perlu menggunakan CommonJs memerlukan kenyataan.

Ada satu masalah di sini. Jika anda melihat pakej.json aplikasi kami, anda akan melihat bahawa ia mempunyai "jenis": "modul". Ini bermakna setiap fail JavaScript dalam projek adalah esmodule. Ini bukan apa yang kita mahu, jadi untuk menandakan semua fail dalam direktori API sebagai fail Commonjs, jadi kita boleh menggunakan pernyataan yang diperlukan, membuat API/Package.json dan tambahkan baris ini di dalamnya:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Ini sekarang akan membolehkan kami menggunakan memerlukan penyataan dalam direktori API. Pasang pemacu sambungan MongoDB dengan arahan ini:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Langkah 3: Menambah Fungsi

Tracker, setakat ini, tidak benar -benar berfungsi, jadi mari kita menetapkannya.

Pengesahan

Untuk pengesahan, kita perlu menyimpan nama pengguna bahawa pengguna mempunyai input dalam pangkalan data MongoDB.

Buat fail /API/Storeusername.js. Ini akan menjadi fungsi awan dan akan dipetakan ke http: // localhost: 3000/API/StoreUserName. Letakkan kod di bawah di dalamnya:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Seterusnya, dapatkan pelanggan MongoDB seperti:

<span>npm init vite
</span>

Ekstrak nama pengguna dari badan permintaan:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Seterusnya, anda perlu menyimpan nama pengguna ini dalam pangkalan data:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Akhirnya, ini adalah bagaimana fail API/StoreuserName.js harus kelihatan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Menyebarkan aplikasi anda ke Vercel dengan Vercel., Atau dengan menolak ke GitHub, dan fungsi tanpa pelayan anda harus hidup! Anda boleh mengujinya menggunakan curl dengan arahan ini:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Ini harus membuat dokumen baru dalam koleksi Pengguna dengan medan _id menjadi nama pengguna yang kami berikan.

Sekarang semua yang tersisa adalah untuk mengambil fungsi ini di hujung depan. Dalam src/lib/usernameprompt.svelte, dalam fungsi hantar, pertama anda perlu menghantar permintaan ke fungsi awan, dan kemudian letakkan nama pengguna di LocalStorage, jadi kami tahu bahawa pengguna disahkan. Anda boleh menghantar permintaan dengan fungsi pengambilan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Kami memuat semula halaman, kerana dalam app.svelte, apabila halaman dimuatkan, kami perlu menyemak sama ada terdapat nama pengguna di LocalStorage. Sekiranya ada, kita boleh melangkau skrin UsernamePrompt. Untuk berbuat demikian, tambahkan kod ini dalam tag skrip app.svelte:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

Kod di atas akan menyemak localStorage untuk nama pengguna dan menetapkan isloggedin menjadi benar jika ia wujud. Seterusnya, yang perlu kita lakukan ialah mengemas kini DOM. Betul -betul di bawah tag skrip app.svelte, tambahkan ini:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Penjejakan dan repositori yang tidak menentu

Sekarang mari kita tambahkan fungsi untuk ciri penjejakan sebenar pelacak. Jika anda membuka tracker.svelte, anda akan melihat terdapat dua fungsi - trek () dan untrack (). Fungsi -fungsi ini harus mengesan dan mengulangi repositori masing -masing, dengan menambahkannya ke pangkalan data.

Tetapi sebelum itu, anda perlu menambah beberapa fungsi awan lagi. Satu untuk mengesan repositori, yang lain untuk tidak menentu, dan yang terakhir untuk mendapatkan repositori yang dikesan oleh pengguna.

mari kita bekerjasama dengan mereka satu demi satu.

Penjejakan repositori

Buat fail API/trackrepo.js. Ini akan dipetakan ke /API /TrackRepo:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Apabila pengguna ingin mengesan repositori, mereka akan menghantar permintaan pos ke fungsi ini dengan nama repositori dan nama pengguna mereka di dalam badan. Fungsi ini akan menambah nama repositori dalam medan TrackedRepos koleksi Pengguna. Tambahkan beberapa kod untuk mendapatkan medan ini dari badan:

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

Dan akhirnya, tambahkan kod untuk mengesan repositori dengan menambahkannya ke pangkalan data:

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

dan ini adalah bagaimana API/trackrepo.js harus melihat:

<span>// ...
</span><span>const { username } = req.body;
</span>
<span>// Check if the username is valid
</span><span>if (typeof username !== "string" || !username.trim()) {
</span>  res<span>.status(400).json({ message: "Please send the username" });
</span>  <span>return;
</span><span>}
</span>

Sekarang sudah tiba masanya untuk menggunakan fungsi ini dalam pelacak. Buka src/lib/tracker.svelte dan tukar fungsi trek () untuk ini:

<span>// Get the collection
</span><span>const usersCol = mongo.db().collection("users");
</span><span>// Check if the username already exists in the database
</span><span>if (await usersCol.findOne({ _id: username })) {
</span>  res<span>.status(400).json({ message: "User already exists!" });
</span>  <span>return;
</span><span>}
</span><span>// We want the username to be the identifier of the user
</span><span>await usersCol.insertOne({ _id: username });
</span>
<span>// Everything went well :)
</span>res<span>.status(200).json({ message: "Username recorded" });
</span>

Sekarang, apabila anda memasukkan repositori dalam input dan klik trek, ia harus disimpan dalam pangkalan data.

repositori untracking

Mari tambahkan fungsi awan untuk melepaskan repositori. Buat fail API/untrackrepo.js. Ini akan dipetakan ke /API /UntrackRepo:

<span>npm init vite
</span>

Badan permintaan fungsi awan ini akan sama dengan fungsi TrackRepo - nama pengguna pengguna dan repo:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Seterusnya, di sini datang kod untuk memadam repositori dari TrackedRepos pengguna:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

dan ini adalah bagaimana API/untrackrepo.js harus melihat:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Sekarang sudah tiba masanya untuk menggunakan fungsi awan ini di hujung depan. Dalam fungsi untrack () src/lib/tracker.svelte, tambahkan kod ini:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Anda akan melihat bahawa ia sangat mirip dengan fungsi trek (), kerana ia secara harfiah sama; Hanya URL telah dikemas kini. Anda tidak boleh menguji ini lagi, kerana kami tidak memaparkan senarai repositori yang dikesan, jadi mari kita selesaikannya.

Penyenaraian Repositori yang dikesan

Bahagian ini cukup mudah. Anda hanya perlu mengambil repositori yang dikesan oleh pengguna dari pangkalan data dan memaparkannya di hujung depan. Buat fungsi awan API/listrepos.js dan tambahkan kod berikut kepadanya:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Oleh kerana fungsi awan akan dipanggil menggunakan permintaan HTTP GET, anda tidak boleh meletakkan badan di dalamnya, jadi kami menggunakan rentetan pertanyaan untuk lulus nama pengguna; Dan sejak user.trackedrepos boleh menjadi batal, kami pastikan untuk mengembalikan array. Seterusnya, sudah tiba masanya untuk menggunakan fungsi awan ini di hujung depan! Buat fungsi async yang dipanggil FetchRepos dalam fail Src/lib/tracker.svelte. Fungsi ini akan bertanggungjawab untuk mengambil repositori yang dikesan pengguna dari pangkalan data menggunakan fungsi awan yang baru saja kami buat:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

kita perlu mengambil fungsi ini apabila komponen dipasang. Ini boleh dilakukan menggunakan Onmount Hook di Svelte. Apabila komponen dipasang, saya ingin menetapkan nilai yang dikembalikan fungsi di atas kepada pembolehubah yang dipanggil TrackedRepos, jadi kita boleh menggunakannya di DOM:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Sekarang kita mempunyai akses ke repositori yang dikesan pengguna, mari kita mengemas kini templat HTML di Tracker.Svelte untuk menunjukkan senarai tepat repositori yang dikesan:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

kita masih perlu memuatkan semula halaman untuk melihat sebarang perubahan. Mari kita membetulkannya dengan mengemas kini DOM setiap kali butang trek atau untrack diklik:

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

Dan inilah cara tracker.svelte harus melihat:

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

Dan inilah tangkapan skrin bagaimana aplikasinya sekarang muncul.

Langkah 4: Membuat Apl Dipasang

Pemberitahuan push hanya disokong pada aplikasi yang dipasang

. Ya, anda boleh memasang aplikasi web sebagai aplikasi biasa menggunakan penyemak imbas yang disokong -iaitu, Chrome dan pelayar berasaskan kromium lain.

Untuk membuat aplikasi boleh dipasang, anda perlu mengubahnya menjadi aplikasi web progresif. Ini adalah proses tiga langkah:

1. tambahkan pekerja perkhidmatan
2. Buat aplikasi anda berfungsi di luar talian
3. tambahkan fail manifest.json

Jika ketiga -tiga langkah selesai, butang pemasangan akan muncul di bar alamat apabila anda melawat aplikasi.

Menambah Pekerja Perkhidmatan

Pekerja perkhidmatan adalah fail JavaScript yang boleh berjalan di latar belakang, dari benang utama penyemak imbas. Ini membolehkan mereka melakukan perkara seperti Run Offline, berjalan di latar belakang dan memuat turun fail besar. Mereka kebanyakannya digunakan untuk permintaan caching dan untuk mendengar peristiwa, kedua -duanya akan kita lakukan.

Untuk menambah pekerja perkhidmatan, anda perlu menambah fail JavaScript yang tersedia secara terbuka, seperti mana -mana fail CSS. Nama itu tidak begitu penting, tetapi ia biasanya dinamakan Service-worker.js atau Sw.Js. Fail ini hendaklah disampaikan secara terbuka seperti CSS anda, jadi masukkannya ke dalam direktori awam.

pekerja perkhidmatan bekerja dengan mendengar acara. Untuk fail caching, jadi aplikasi anda berfungsi di luar talian, anda akan mendengar pemasangan, mengaktifkan dan mengambil acara. Acara pemasangan akan dipanggil apabila pekerja perkhidmatan dipasang. Acara Aktifkan dipanggil apabila pekerja perkhidmatan sedang berjalan, dan acara Fetch akan dipanggil apabila permintaan rangkaian dibuat. Pendengar acara boleh ditambah menggunakan self.addeventListener (). Mari buat fail awam/service-worker.js dan tambahkan kod berikut kepadanya:

<span>npm init vite
</span>

Semua yang tersisa adalah untuk mendaftarkan pekerja perkhidmatan ini. Kami akan melakukannya dalam fungsi onmount app.svelte. Tambahkan kod ini pada akhir panggilan balik di dalam Onmount:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Kod di atas cek pertama untuk sokongan pekerja perkhidmatan dalam penyemak imbas, dan kemudian mendaftarkan pekerja perkhidmatan kami. Perlu diingatkan bahawa laluan dalam fungsi daftar () adalah jalan berbanding domain anda , tidak ke folder projek - yang bermaksud bahawa pekerja perkhidmatan harus diakses di HTTP : // localhost: 3000/service-worker.js, yang mana, kerana ia berada di direktori awam.

Sekarang jika anda Muat semula halaman dan buka konsol, anda harus melihat mesej di atas.

Membuat aplikasi kami berfungsi di luar talian

Untuk membuat aplikasi berfungsi di luar talian, anda perlu cache kandungannya menggunakan pekerja perkhidmatan. Oleh kerana aplikasi kami membuat permintaan untuk fungsi awan, ia tidak boleh benar -benar berbuat banyak apabila tiada rangkaian. Oleh itu, bukannya memaparkan versi yang tidak berfungsi, tanpa fungsi aplikasi, mari kita paparkan halaman yang menunjukkan bahawa kita berada di luar talian. Buat fail awam/luar talian.html dan letakkan kod berikut di dalamnya:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Jangan ragu untuk menyesuaikan halaman ini tetapi anda mahu. Anda kini perlu cache halaman ini. Caching juga merupakan proses tiga langkah yang menggunakan tiga acara pekerja perkhidmatan di atas yang kami dengar. Begini cara ia berfungsi:

1. Cache dibuka dan laluan yang dikehendaki ditambah ke cache menggunakan cache.add. Ini berlaku semasa pemasangan.

2. Cache yang lebih tua dipadam, jadi hanya yang terbaru disimpan ke komputer pengguna. Ini menggunakan kurang simpanan. Ini berlaku semasa mengaktifkan.

3. Kami memintas sebarang permintaan rangkaian dan periksa sama ada permintaan tersebut adalah Page Navigations - iaitu, mengubah laluan. Sekiranya permintaan itu berjaya, semuanya baik dan baik, tetapi jika permintaan gagal, kami menyampaikan halaman luar talian.html untuk dipaparkan kepada pengguna. Ini berlaku semasa pengambilan.

mari kita melaksanakan langkah pertama. Buka fail pekerja perkhidmatan dan tukar pengendali acara pemasangan seperti:

<span>npm init vite
</span>

event.waituntil () adalah fungsi yang serupa dengan kata kunci menunggu. Panggilan balik AddEventListener tidak boleh menjadi tidak segerak, jadi untuk melaksanakan fungsi itu, kita harus menggunakan event.waituntil () dan lulus janji supaya janji itu akan ditunggu -tunggu.

self.skipwaiting () memberitahu penyemak imbas bahawa kami telah selesai dengan proses pemasangan, jadi aktifkan pekerja perkhidmatan. Bercakap tentang Aktifkan, mari kita tambahkan kod untuk memadam mana -mana cache lama:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Dan dengan itu, halaman luar talian.html harus di -cache. Untuk menyemak semula, buka alat pemaju dengan menekan

f12 dan pilih tab Aplikasi. Di bar sisi, perlu ada tab penyimpanan cache. Klik padanya dan anda harus notis /fline.html.

Sekarang semua yang perlu dilakukan adalah untuk menyampaikan fail ini apabila tiada rangkaian:

Fungsi Event.respondenwith () akan bertindak balas terhadap permintaan Rangkaian dengan apa jua objek respons yang dihantar kepadanya. Dalam kes ini, kami mengambil permintaan itu terlebih dahulu, dan jika permintaan gagal, yang kemungkinan besar akan disebabkan oleh masalah Internet, kami menghantar halaman luar talian.html, yang di -cache oleh pekerja perkhidmatan.

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

sekarang menyegarkan halaman dan matikan Wi-Fi atau Ethernet anda. Anda kini harus melihat halaman luar talian kami dan bukannya halaman Chrome "No Network" lalai apabila anda menyegarkan semula. Halaman luar talian ini malangnya tidak mempunyai permainan dinosaur, tetapi ia membolehkan kami memasang aplikasi sebagai PWA.

inilah cara pekerja perkhidmatan harus melihat:

Menambah fail manifest.json

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

manifest.json, atau manifes web, mengandungi beberapa maklumat berguna mengenai aplikasi anda - perkara seperti nama aplikasinya, warna temanya, penerangan, ikonnya dan banyak lagi. Fail ini biasanya dipanggil manifest.json dan mesti

dihubungkan

ke laman web anda menggunakan tag dalam HTML, seperti bagaimana anda menghubungkan fail CSS. Mari tambahkan manifes untuk permohonan kami. Jangan ragu untuk menggunakan penjana untuk yang satu ini:

Anda perlu memuat turun sekumpulan ikon untuk aplikasi itu. Ikon ini mempunyai saiz yang berbeza dan digunakan oleh sistem operasi yang berbeza. Anda boleh memuat turunnya dari repositori kod sumber atau dengan menggunakan pautan ini. Pastikan untuk mengekstrak fail zip ke awam/ikon.

Seterusnya, anda perlu menambah manifes dan ikon ke fail index.html. Anda boleh melakukannya dengan meletakkan kod berikut di dalamnya:

<span>npm init vite
</span>

Buka alat pemaju Chrome'd dengan menekan f12 dan pergi ke tab Lighthouse dan buat audit baru. Anda kini perlu mendapatkan skor "Dipasang" pada bahagian PWA. Ini bermakna anda telah berjaya menukar laman web anda ke WebApp, dan kini anda boleh memasangnya dengan mengklik butang pada bar alamat.

Langkah 5: Melanggan Pemberitahuan Menolak

Sebelum kita boleh menghantar pemberitahuan push, kita perlu mendapatkan kebenaran daripada pengguna. Anda boleh menggunakan kaedah pemberitahuan.requestPermission () untuk berbuat demikian. Kaedah ini

asynchronous dan mengembalikan rentetan yang boleh sama dengan lalai, ditolak dan diberikan. Ini dikembalikan apabila pengguna sama ada menekan x, menekan menafikan atau menekan pada prompt pemberitahuan, masing -masing. Kami akan menggunakan OnMount Hook di App.Svelte untuk memanggil fungsi ini:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Anda kini harus mendapatkan pop timbul meminta anda untuk membenarkan pemberitahuan dalam aplikasinya. Sekarang kita mempunyai kebenaran untuk menghantar pemberitahuan, mari kita gunakan pekerja perkhidmatan untuk melanggan untuk menolak acara. Ini boleh dilakukan menggunakan fungsi PushManager.Subscribe () pekerja perkhidmatan. Anda boleh melakukan ini dalam pekerja perkhidmatan itu sendiri, atau selepas mendaftarkan pekerja perkhidmatan di app.svelte. Saya akan pergi dengan yang terakhir, jadi jika anda mahu melakukan perkara yang sama, gantikan Navigator.ServiceWorker.Register Fungsi di Onmount dengan kod di bawah:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Jika anda membuka konsol, anda akan melihat ralat yang mengatakan bahawa ApplicationserVerKey hilang. Pemberitahuan tolak memerlukan pelayan untuk menghantar mereka mesej push, dan pelayan ini disahkan dengan kekunci VAPID. Kekunci ini mengenal pasti pelayan dan biarkan penyemak imbas tahu bahawa mesej push adalah sah. Kami akan menggunakan fungsi Vercel Cloud untuk menghantar mesej push, jadi kami perlu menetapkannya.

Membuat pelayan mesej push

Kami akan menggunakan pakej NPM Web-PUSH untuk membantu kami menjana kunci dan menghantar acara push. Untuk memasangnya, CD ke folder API dan jalankan yang berikut:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

ingat ke CD ke folder API, kerana sebaliknya pakej web-push akan dipasang dalam aplikasi Svelte.

Untuk menghantar pemberitahuan push, anda perlu menjana pasangan kunci vapid awam dan swasta. Untuk berbuat demikian, buka Node Repl menggunakan arahan nod dan jalankan arahan berikut:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Salin kedua -dua kunci ini dan simpannya sebagai pembolehubah persekitaran pada Vercel. Pastikan anda memanggil mereka sesuatu yang tidak dapat dilupakan seperti vapid_private_key dan vapid_public_key.

Sekarang, kita boleh mula bekerja pada fungsi awan. Buat fail API/VapidKeys.js. Fail ini akan bertanggungjawab untuk menghantar kunci awam vapid kepada pelanggan. Anda harus tidak pernah kongsi kunci vapid peribadi. Dalam API/Vapidkeys.js, pertama kita perlu memulakan Web-PUSH:

<span>npm init vite
</span>

Pastikan anda menggantikan domain aplikasi Vercel anda. Seterusnya, mari kita mengeksport fungsi untuk mengembalikan kunci vapid awam kepada pemohon:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Dengan yang dilakukan, kini anda boleh mengemas kini fungsi OnMount di App.Svelte untuk mengambil fungsi awan terlebih dahulu untuk mendapatkan kunci awam, dan kemudian gunakan kunci awam dalam fungsi langgan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Perhatikan bagaimana kita hanya mengambil kekunci vapid

jika kita tidak melanggan pemberitahuan. Jika anda membuka konsol, anda harus melihat langganan yang dilog masuk ke konsol.

Titik akhir yang disediakan sangat penting kepada kami. Titik akhir ini akan membolehkan kami memaklumkan pengguna ini menggunakan Web-PUSH. Mari buat fungsi awan untuk menyimpan titik akhir ini dalam pangkalan data. Buat Fail API/StoreEndpoint.js:

Mari ambil langganan dan nama pengguna dari badan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

dan mari tambahkannya ke pangkalan data:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Dan inilah cara fungsi awan akhir harus kelihatan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Fungsi ini harus dipanggil setiap kali kita melanggan untuk menolak pemberitahuan. Mari kita gunakan blok reaktif svelte untuk memanggil fungsi awan ini setiap kali pembolehubah sub mempunyai nilai

dan

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

pembolehubah isloggedin adalah benar. Tambahkan kod ini sebelum berakhirnya tag dalam app.svelte:

Refresh halaman, dan anda harus melihat bahawa titik akhir dan kunci push pelayar semasa disimpan dalam pangkalan data MongoDB dalam objek langganan.

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

semua yang anda perlu lakukan ialah mengendalikan acara push di pekerja perkhidmatan dan membuat fungsi awan untuk memeriksa GitHub untuk isu -isu baru dan PR.

mari kita buat yang pertama. Buat fungsi awan baru API/Fetchgh.js. Fungsi ini akan bertanggungjawab untuk memeriksa GitHub dan menghantar pemberitahuan push:

mari kita dapatkan semua pengguna dari pangkalan data, jadi kita tahu apa repos yang akan diambil:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Seterusnya, buat dua pembolehubah untuk menyimpan repositori yang sedang diambil, dan repositori dengan sebarang isu baru atau PRS:

<span>npm init vite
</span>

Bagi setiap pengguna, mari kita periksa repositori yang dikesan untuk sebarang isu baru. Untuk memastikan bahawa satu repositori hanya diperiksa sekali, kami akan menambah repositori kepada yang sudah ada, dan kami akan menambah sebarang repositori yang mempunyai masalah baru untuk reposwithisssues. Untuk berbuat demikian, kita perlu gelung ke atas setiap pengguna dalam array pengguna dan mendapatkan senarai repositori untuk diambil. Ini akan dilakukan dengan memeriksa TrackedRepos mereka untuk sebarang pendua. Setelah itu selesai, kami akan memanggil fungsi FetchRepo untuk setiap repositori. FetchRepo akan mengembalikan boolean - benar jika ada isu baru, palsu sebaliknya:

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

Sejak FetchRepo akan menjadi tidak segerak, saya telah menggunakan peta untuk mengembalikan janji setiap kali dan menanti mereka semua menggunakan janji. Semua. Ini berfungsi kerana gelung untuk tidak segerak. Sekiranya janji tidak ditunggu -tunggu, pembolehubah tidak dapat ditentukan, jadi pastikan anda menanti janji -janji!

Sekarang untuk fungsi FetchRepo. Fungsi ini akan mendapat kali terakhir kami memeriksa API GitHub dari pangkalan data. Ini hanya mendapat isu terkini dari GitHub. Ia kemudian mengambil API GitHub untuk sebarang isu baru, dan mengembalikan nilai boolean jika ada:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

Setelah itu, kita perlu menghantar pemberitahuan push kepada mana -mana pengguna yang telah mengesan repositori yang mempunyai masalah baru. Ini boleh dilakukan dengan menggunakan web-push. Tambahkan baris kod ini ke hujung fungsi yang dieksport:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

Pertama, kita perlu menyemak sama ada mana -mana repos yang dikesan oleh pengguna mempunyai masalah baru. Ini boleh dilakukan dengan kaedah array.some. Array.some () menentukan sama ada fungsi panggil balik yang ditentukan kembali benar untuk mana -mana elemen array, jadi kami boleh menggunakannya dengan mudah untuk memeriksa:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

Dan akhirnya, kami menghantar pemberitahuan:

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

Dan inilah cara fungsi awan harus kelihatan:

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

mendengar peristiwa push

Semua yang perlu dilakukan adalah mendengar peristiwa push di pekerja perkhidmatan. Buka pekerja perkhidmatan dan tambahkan kod di bawah:

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

Apabila anda memanggil fungsi awan, mungkin menggunakan curl, anda harus melihat isu baru yang dilog masuk dalam konsol penyemak imbas. Itu tidak sangat membantu, jadi mari kita hantar pemberitahuan:

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

Padamkan koleksi yang diambil dari MongoDB dan panggil fungsi awan sekali lagi. Anda kini harus menerima pemberitahuan dari penyemak imbas web.

menggunakan aplikasi menggunakan Vercel. Atau dengan menolak ke GitHub, pasang aplikasi sebagai PWA, dan jalankan fungsi awan dengan pergi ke https: // your_vercel_app/api/fetchgh dan anda harus menerima pemberitahuan, walaupun anda belum membuka aplikasi!

Jika anda tidak menerima pemberitahuan, atau anda mendapat ralat 410 dari push web, pastikan anda membenarkan pemberitahuan selama -lamanya dalam prompt apabila anda bertanya.

Langkah 6: Mewujudkan pekerjaan Cron

Tracker tidak benar -benar pelacak jika kita perlu memanggil fungsi awan secara manual, bukan? Mari kita gunakan EasyCron untuk memanggil fungsi awan secara automatik setiap jam.

Kepala ke papan pemuka EasyCron anda dan buat pekerjaan cron baru. Untuk URL, masukkan https: // your_vercel_domain/api/fetchgh, dan pilih selang. Saya akan pergi dengan setiap jam, tetapi berasa bebas untuk menyesuaikannya tetapi anda suka.

Kesimpulan

Dan dengan itu, anda harus mendapat pemberitahuan setiap kali terdapat isu baru/PR dalam mana -mana repositori yang dikesan anda. Jangan ragu untuk menyemak kod sumber atau versi langsung jika anda telah terjebak di mana -mana sahaja.

Soalan Lazim (Soalan Lazim) Mengenai Mencipta Tracker GitHub dengan Pemberitahuan Push di Svelte

Apa itu Svelte dan mengapa saya harus menggunakannya untuk membuat tracker GitHub? Itu berjalan terus dalam penyemak imbas. Ia menawarkan model pengaturcaraan yang lebih mudah dan lebih intuitif daripada kerangka JavaScript lain seperti React atau Vue, dan menghasilkan masa beban yang lebih cepat dan prestasi yang lebih baik. Apabila membuat tracker GitHub, menggunakan Svelte boleh menjadikan kod anda lebih bersih, lebih mudah untuk dikekalkan, dan lebih cekap. Sistem kereaktifan terbina dalam. Sistem ini membolehkan anda menentukan kenyataan reaktif yang secara automatik mengemaskini apabila keadaan aplikasi anda berubah. Apabila perubahan berlaku, seperti komit baru yang ditolak ke repositori github, pernyataan reaktif dapat mencetuskan pemberitahuan tolak untuk memaklumkan pengguna perubahan. 🎜>

Ya, anda boleh menggunakan Svelte untuk mengesan pelbagai repositori GitHub. Anda perlu membuat contoh berasingan GitHub Tracker untuk setiap repositori yang anda ingin menjejaki. Setiap contoh akan mempunyai pernyataan keadaan dan reaktif sendiri, yang membolehkannya untuk mengesan perubahan secara bebas dan menghantar pemberitahuan push. Pemberitahuan di Svelte boleh disesuaikan menggunakan CSS. Svelte membolehkan anda menulis CSS scoped yang hanya digunakan untuk komponen di mana ia ditakrifkan. Ini bermakna anda boleh membuat gaya unik untuk pemberitahuan push anda tanpa menjejaskan seluruh aplikasi anda. Rangka kerja atau perpustakaan JavaScript. Walau bagaimanapun, salah satu kelebihan utama Svelte adalah kesederhanaan dan kecekapannya, jadi menggunakannya dengan rangka kerja atau perpustakaan lain mungkin menafikan beberapa manfaat ini. Lebih baik menggunakan Svelte sendiri jika boleh.

Bagaimana saya mengendalikan kesilapan apabila membuat pelacak github di Svelte? Jika ralat berlaku semasa mengambil data dari API GitHub, sebagai contoh, anda boleh menangkap ralat dan memaparkan mesej yang berguna kepada pengguna. > Ya, anda boleh menggunakan Svelte untuk membuat pelacak GitHub untuk repositori peribadi. Anda perlu mengesahkan dengan API GitHub menggunakan token akses peribadi, yang boleh dihasilkan dari tetapan akaun GitHub anda. Boleh dilakukan menggunakan pelbagai perpustakaan ujian JavaScript, seperti Jest atau Mocha. Perpustakaan ini membolehkan anda menulis ujian untuk komponen dan pernyataan reaktif anda untuk memastikan ia berfungsi dengan betul. Github Tracker ke pelayan. Svelte menyusun kod anda kepada JavaScript, CSS, dan HTML biasa, yang boleh disampaikan oleh mana -mana pelayan fail statik. Apabila Svelte atau perubahan API GitHub, anda perlu mengemas kini tracker GitHub anda dengan sewajarnya. Ini mungkin melibatkan mengemas kini kod Svelte anda untuk menggunakan ciri -ciri baru atau sintaks, atau mengemas kini panggilan API anda untuk memadankan perubahan dalam API GitHub. Adalah penting untuk menyemak kemas kini secara kerap untuk memastikan pelacak GitHub anda terus berfungsi dengan betul.

Atas ialah kandungan terperinci Buat pelacak github dengan pemberitahuan push di svelte. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!