Membina Tracker Kebiasaan dengan Prisma 2, Chakra UI, dan React

Prisma 2: Menyelaraskan interaksi pangkalan data dalam aplikasi React anda

Prisma 2 (dahulunya Prisma 2 Preview) merevolusikan pengurusan pangkalan data, menawarkan peningkatan yang signifikan dari pendahulunya. Tidak seperti Prisma 1, yang memerlukan pelayan Prisma yang berasingan, Prisma 2 mengintegrasikan terus ke backend anda, berfungsi sebagai perpustakaan. Senibina yang diselaraskan ini, yang dibina dengan karat untuk kecekapan memori yang dipertingkatkan, memudahkan interaksi pangkalan data dengan ketara.

Rangka Kerja Prisma terdiri daripada tiga alat utama:

Photon:
1. Pelanggan pangkalan data yang dijana, auto-dihasilkan secara automatik, dengan berkesan menggantikan Orms tradisional.
angkat:
2. Sistem penghijrahan deklaratif yang membolehkan kemas kini skema pangkalan data lancar.
Prisma Studio:
3. IDE pangkalan data mesra pengguna yang menawarkan antara muka visual untuk pengurusan pangkalan data.
Tutorial ini menunjukkan membina aplikasi Tracker Kebiasaan ("Streaks") menggunakan Prisma 2, Chakra UI (untuk pembangunan UI yang pesat), dan React Hooks untuk pengurusan negara. Frontend menggunakan URQL untuk interaksi GraphQL.

Kelebihan Utama Prisma:

Akses pangkalan data yang dipermudahkan:
• menghapuskan pertanyaan SQL kompleks, memudahkan interaksi pangkalan data dalam aplikasi anda.
pangkalan data agnostisisme:
• memudahkan sistem pangkalan data menukar tanpa pengubahsuaian kod yang luas. Pada masa ini menyokong MySQL, SQLite, dan PostgreSQL.
Keselamatan Jenis:
• Menyediakan klien Prisma yang dijana secara automatik untuk akses pangkalan data jenis-selamat, meningkatkan kebolehpercayaan kod dan pengalaman pemaju.
Pengurusan Data Visual:
• Prisma Studio menawarkan antara muka visual yang kuat untuk menguruskan pangkalan data anda.
Migrasi automatik (pilihan):
• mengangkat memudahkan migrasi skema pangkalan data menggunakan model data deklaratif.

Bermula:

Tutorial ini menganggap kebiasaan asas dengan cangkuk React dan React. Benang digunakan untuk pengurusan pakej. Versi berikut digunakan:

Node v12.11.1

• npm v6.11.3
• npx v6.11.3
• benang v1.19.1
• prisma2 v2.0.0-preview016.2
• React v16.11.0

Persediaan Projek:

1. Buat direktori streaks-app.
2. Inisialisasi projek Prisma 2: npx prisma2 init server (atau gunakan Global prisma2 CLI). Pilih JavaScript, Graphql API, dan SQLite.
3. Buat projek React dalam streaks-app: npx create-react-app client (atau gunakan Global create-react-app CLI).

Struktur projek akan menjadi: streaks-app/client/ dan streaks-app/server/.

Pembangunan backend:

Backend menggunakan graphQl dan prisma 2. Fail schema.prisma memaparkan pangkalan data dengan data awal. Pelayan GraphQL disediakan menggunakan Habit dan id. name streak seed.js pembangunan frontend: graphql-yoga nexus

Frontend menggunakan Chakra UI untuk Styling dan URQL untuk pertanyaan GraphQL. Komponen dicipta untuk memaparkan tabiat, mewujudkan tabiat baru, memadam tabiat, dan peningkatan coretan. Pengendalian ralat dan penunjuk pemuatan dilaksanakan menggunakan komponen UI Chakra.

(contoh kod terperinci untuk persediaan backend dan frontend, pertanyaan, dan mutasi ditinggalkan untuk keringkasan tetapi hadir dalam input asal.)

Kesimpulan:

Tutorial ini menunjukkan membina aplikasi pelacak kebiasaan yang mantap menggunakan pengurusan pangkalan data yang cekap Prisma 2, pembangunan UI Chakra UI yang diselaraskan, dan ciri -ciri kuat React. Permohonan yang dihasilkan adalah jenis selamat, boleh dipelihara, dan menarik secara visual.

(bahagian Soalan Lazim dari input asal juga ditinggalkan untuk keringkasan, kerana ia adalah pengulangan amalan dan konsep biasa yang sudah dilindungi.)

Atas ialah kandungan terperinci Membina Tracker Kebiasaan dengan Prisma 2, Chakra UI, dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!