Rumah >hujung hadapan web >tutorial js >Projek GitHub Mingguan: NewsNow - Membaca dengan Anggun Berita Arah Aliran Masa Nyata

Projek GitHub Mingguan: NewsNow - Membaca dengan Anggun Berita Arah Aliran Masa Nyata

Barbara Streisand
Barbara Streisandasal
2024-10-27 06:13:30476semak imbas

*Projek GitHub Mingguan: NewsNow - Arah Aliran Masa Nyata Membaca dengan Anggun *

Pengenalan Projek

Minggu ini, kami memperkenalkan NewsNow, platform pengagregatan berita yang membolehkan anda membaca berita arah aliran masa nyata dengan elegan. NewsNow dengan cepat mengagregatkan berita masa nyata daripada pelbagai sumber data, menawarkan pengalaman membaca lancar yang membantu pengguna mengakses maklumat arah aliran terkini dengan mudah. Projek ini menyokong log masuk GitHub OAuth dan menggunakan pangkalan data Cloudflare D1 untuk mengurus dan menyimpan data.

Dalam panduan ini, saya akan membimbing anda melalui proses langkah demi langkah untuk menggunakan projek sumber terbuka ini pada Cloudflare Pages. Anda akan belajar cara menyediakan log masuk GitHub OAuth, mengkonfigurasi pangkalan data Cloudflare D1 dan berjaya menggunakan projek.

Panduan Penggunaan

1. Persediaan

1.1 Akaun Diperlukan

  • Akaun GitHub: Untuk memotong dan mengurus kod projek.
  • Akaun Cloudflare: Untuk menggunakan dan mengehoskan projek.

Persediaan Aplikasi OAuth 1.2 GitHub

Untuk mendayakan log masuk GitHub, anda perlu mencipta aplikasi OAuth pada GitHub.

  1. Log masuk ke GitHub dan pergi ke Tetapan Pembangun.
  2. Pilih Apl OAuth dan klik Apl OAuth Baharu.
  3. Isi butiran permohonan:
    • Nama aplikasi: NewsNow (atau mana-mana nama yang anda suka).
    • URL Halaman Utama: Gunakan URL repositori GitHub bercabang anda buat masa ini, mis., https://github.com/your-username/newsnow. Anda boleh menukarnya kemudian kepada URL yang digunakan.
    • URL panggil balik kebenaran: Gunakan format https://your-cloudflare-pages-url/api/auth/callback, gantikan-cloudflare-pages-url anda dengan URL Cloudflare Pages anda selepas penggunaan.
  4. Selepas pendaftaran, simpan ID Pelanggan dan Rahsia Pelanggan.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

2. Fork Projek GitHub

  1. Pergi ke halaman projek asal di GitHub: Projek NewsNow.
  2. Klik butang Fork di bahagian atas sebelah kanan untuk memindahkan projek ke akaun GitHub anda.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

3. Cloudflare Pages Deployment

3.1 Sambungkan GitHub

  1. Log masuk ke akaun Cloudflare anda.
  2. Dalam papan pemuka Cloudflare, pergi ke "Workers & Pages" pada menu sebelah kiri.
  3. Klik "Buat Projek" dan pilih “Sambung ke Git”.
  4. Izinkan Cloudflare untuk mengakses akaun GitHub anda dan pilih repositori newsnow yang anda buat.

3.2 Konfigurasikan Projek Halaman Cloudflare

  1. Pilih repositori newsnow dan teruskan ke halaman tetapan binaan.
  2. Sediakan parameter binaan:
    • Praset rangka kerja: Pilih Tiada.
    • Arahan bina: Masukkan pnpm install && pnpm build.
    • Bina direktori output: Masukkan dist.

3.3 Konfigurasi Pembolehubah Persekitaran

  1. Pada halaman tetapan binaan, klik "Pembolehubah persekitaran (lanjutan)".
  2. Tambah pembolehubah persekitaran berikut:
    • G_CLIENT_ID: ID Pelanggan aplikasi GitHub OAuth anda.
    • G_CLIENT_SECRET: Rahsia Pelanggan aplikasi GitHub OAuth anda.
    • JWT_SECRET: Adalah disyorkan untuk menggunakan nilai yang sama seperti G_CLIENT_SECRET.
    • INIT_TABLE: Tetapkan kepada benar untuk penggunaan pertama untuk memulakan pangkalan data.

4. Cipta Pangkalan Data Cloudflare D1

4.1 Cipta Pangkalan Data

  1. Dalam papan pemuka Cloudflare, navigasi ke "Pekerja & Halaman" -> "Pangkalan Data SQL D1".
  2. Klik “Buat Pangkalan Data” dan masukkan nama, mis., newsnow_db.
  3. Catat ID Pangkalan Data dan Nama Pangkalan Data.

4.2 Konfigurasikan Fail wrangler.toml

  1. Dalam repositori GitHub anda, cipta atau edit fail wrangler.toml dalam direktori akar projek.
  2. Tambah konfigurasi berikut pada fail wrangler.toml:
   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID
  1. Serahkan perubahan pada GitHub.

4.3 Letakkan Semula Projek

  1. Kembali ke halaman projek Cloudflare Pages.
  2. Klik butang “Deploy” untuk mengatur semula projek.

5. Pengesahan Penggunaan

5.1 Akses Projek

  1. Tunggu penyebaran selesai.
  2. Lawati URL yang disediakan oleh Cloudflare Pages untuk memastikan halaman dimuatkan dengan betul.

Weekly GitHub Project: NewsNow - Elegantly Reading Real-Time Trending News

5.2 Laraskan Tetapan Permulaan Pangkalan Data

  1. Jika projek berjaya digunakan dan data dimuatkan dengan betul, kembali ke tetapan projek Cloudflare Pages.
  2. Tukar pembolehubah persekitaran INIT_TABLE daripada benar kepada palsu untuk mengelakkan pangkalan data daripada dimulakan semula pada penggunaan masa hadapan.

5.3 Uji Log Masuk OAuth GitHub

  1. Cuba log masuk dengan akaun GitHub anda.
  2. Jika log masuk gagal, semak sama ada URL panggil balik Kebenaran dalam tetapan OAuth GitHub sepadan dengan URL Halaman Cloudflare.

6. Konfigurasi dan Sambungan Pilihan

6.1 Domain Tersuai

  • Jika anda mempunyai domain anda sendiri, anda boleh menyediakan domain tersuai dalam Cloudflare Pages.

6.2 Memanjangkan Sumber Data

  • Ubah suai atau tambah sumber data baharu dengan mengedit direktori kongsi/metadata, kongsi/sumber dan pelayan/sumber mengikut keperluan anda.

6.3 Penyahpepijatan dan Log

  • Gunakan alat penyahpepijat dan log yang disediakan oleh Cloudflare untuk memantau prestasi projek.

Atas ialah kandungan terperinci Projek GitHub Mingguan: NewsNow - Membaca dengan Anggun Berita Arah Aliran Masa Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn