Jamstack dengan React, Serverless, dan Airtable

Belajar dengan membina! Tutorial ini menunjukkan seni bina Jamstack dengan membuat aplikasi React dengan Netlify Functions Tanpa Server dan Airtable. Walaupun Jamstack menekankan hosting statik, projek ini mempamerkan keupayaan dinamik, termasuk fungsi CRUD penuh.

Pilihan teknologi

Jamstack, yang mewakili JavaScript, API, dan markup, memanfaatkan teknologi sedia ada dengan cara yang baru. Tumpukan teknologi tutorial ini mengutamakan kemudahan penempatan dan hosting. Fungsi Netlify Mengendalikan operasi CRUD backend dengan Airtable, membolehkan penempatan lancar di Netlify. Airtable memudahkan pengurusan pangkalan data, menawarkan antara muka mesra pengguna dan SDK JavaScript, menghapuskan keperluan untuk hosting dan pengurusan pangkalan data berasingan.

Gambaran Keseluruhan Permohonan

Aplikasi ini menjejaki kursus dalam talian, bertindak seperti barisan pembelajaran peribadi. Ia membolehkan pengguna menambah, mengemas kini, menandakan sebagai dibeli, dan memadam kursus.

Kod Sumber: Saya membuat kursus dalam talian, termasuk yang baru untuk membina aplikasi jamStack yang selamat dan siap sedia menggunakan fungsi React dan Netlify. Kursus ini meliputi pengesahan, penyimpanan data udara, komponen gaya, Netlify CI, dan banyak lagi. Ketahui lebih lanjut →

Persediaan Airtable

Kabel udara menggunakan "pangkalan" untuk pangkalan data. Ikuti langkah -langkah ini:

1. Buat Akaun Airtable Percuma.
2. Buat asas baru (saya menamakan saya "Jamstack Demos").
3. Buat jadual yang dinamakan "kursus" dengan lajur ini:
   • name (Teks Talian Tunggal)
   • link (teks talian tunggal)
   • tags (Multiple Select - Tambah Tag seperti "Node," "React," "Javascak," "JavaScript")
   • purchased (kotak semak)
4. Tambah beberapa data kursus sampel.

Mendapatkan kelayakan udara

Sebelum pengekodan, kumpulkan kelayakan udara ini:

1. Kunci API: Ditemui di halaman Gambaran Keseluruhan Akaun Airtable anda.
2. ID Pangkalan: Terletak di halaman API Airtable, dalam butiran asas anda.
3. Nama Jadual: (misalnya, "Kursus")

Persediaan Projek

Projek starter boleh didapati di GitHub. Ikuti langkah -langkah ini:

1. Garpu repositori.
2. Klon repositori yang bercabang di dalam negara.
3. Semak cawangan starter ( git checkout starter ).

Projek ini merangkumi struktur create-react-app , direktori functions untuk fungsi tanpa pelayan, dan fail konfigurasi netlify.toml . Pasang pakej dotenv :

 NPM Pasang Dotenv

Buat fail .env dalam root projek dengan kelayakan udara anda:

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

Fungsi tanpa pelayan

Fungsi Netlify adalah fail JavaScript dalam direktori /functions . Fail courses.js bertindak sebagai titik akhir API utama. Ia menggunakan fungsi penolong ( getCourses , createCourse , updateCourse , deleteCourse ) berdasarkan kaedah HTTP:

 eksports.handler = async (event) => {
  jika (event.httpmethod === 'get') {
    pulangan menanti getCourses (acara);
  } // ... kaedah http lain
};

Fail airtable.js mengkonfigurasi sambungan Airtable:

 memerlukan ('dotenv'). config ();
var Airtable = memerlukan ('Airtable');
// ... pangkalan udara dan persediaan meja ...

Operasi CRUD

Fungsi pembantu berinteraksi dengan kabel udara:

• getCourses.js : Mendapatkan kursus menggunakan table.select().firstPage() , mengendalikan kesilapan, dan format respons.
• createCourse.js : Mencipta kursus baru menggunakan table.create() .
• updateCourse.js : Kemas kini kursus menggunakan table.update() .
• deleteCourse.js : Menghapus kursus menggunakan table.destroy() .

Ujian: Gunakan netlify dev untuk menjalankan fungsi secara tempatan. Titik akhir ujian menggunakan alat seperti Postman atau Insomnia.

React Frontend

Aplikasi React berinteraksi dengan fungsi tanpa pelayan:

• App.js : loadCourses mengambil kursus menggunakan fetch('/api/courses') .
• CourseForm.js : submitCourse menghantar permintaan pos untuk membuat kursus baru.
• Course.js : markCoursePurchased menghantar permintaan meletakkan, dan deleteCourse menghantar permintaan padam.

Penempatan ke Netlify

Sediakan untuk Netlify dengan menyambungkan repositori GitHub anda. Nyatakan:

• Membina Perintah: npm run build
• Terbitkan direktori: build
• Tambah pembolehubah persekitaran dari fail .env anda.

Kesimpulan

Tutorial ini menunjukkan kesederhanaan dan kuasa seni bina Jamstack. Gabungan Fungsi React, Netlify, dan Airtable menyediakan aplikasi stack penuh yang mantap dan mudah digunakan. Terokai perkhidmatan dan teknologi Jamstack lain untuk meningkatkan lagi aliran kerja pembangunan anda.

Atas ialah kandungan terperinci Jamstack dengan React, Serverless, dan Airtable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!