Merancang Seni Bina dan Timbunan Teknologi
Takrifkan idea aplikasi, pilih bahagian belakang (Supabase atau Firebase), pilih struktur navigasi, tentukan pendekatan pengurusan keadaan, dan bina rangka projek dengan susun atur folder yang sesuai.
Merancang Seni Bina dan Timbunan Teknologi ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Pengenalan Projek Kemuncak
Projek kemuncak ialah tempat anda menerapkan segala-galanya daripada aliran React Native untuk membina apl lengkap yang sedia untuk pengeluaran dari awal. Pelajaran ini merangkumi langkah pertama yang penting: merancang seni bina dan susunan teknologi sebelum menulis satu baris kod ciri pun. Keputusan yang dibuat di sini — bahagian belakang, corak navigasi, pengurusan keadaan dan struktur folder — mahal untuk diubah kemudian, jadi luangkan masa untuk merancang dari awal.
Menentukan Idea Apl
Mulakan dengan pernyataan masalah yang jelas: apakah masalah yang diselesaikan oleh apl itu dan untuk siapa? Skop yang ditakrifkan dengan baik menghalang pertambahan ciri yang tidak terkawal dan memastikan projek dapat disiapkan. Catatkan: cadangan nilai teras dalam satu ayat, tiga hingga lima ciri wajib untuk v1, dan senarai ciri yang ditangguhkan dengan jelas kepada v2. Apl yang melakukan tiga perkara dengan cemerlang akan diterbitkan; apl yang cuba melakukan segala-galanya tidak akan pernah diterbitkan.
// Example app: 'HabitTracker'
// Problem:
// People struggle to build daily habits because they
// have no lightweight way to track streaks on mobile.
// Core value: Visual streak tracking with daily check-ins
// V1 features:
// 1. Create/delete habits with name and icon
// 2. Mark habit as done each day
// 3. View streak count and calendar history
// 4. Push reminder notification at chosen time
// 5. Basic stats: longest streak, completion rate
// Deferred to V2:
// - Social sharing, friend challenges, premium themesMemilih Bahagian Belakang
Bagi pembangun tunggal atau pasukan kecil, Supabase dan Firebase ialah pilihan BaaS (Backend sebagai Perkhidmatan) yang terbaik. Supabase menawarkan pangkalan data PostgreSQL sebenar dengan pertanyaan SQL, keselamatan peringkat baris dan jenis TypeScript yang sangat baik. Firebase (Firestore) berasaskan dokumen dengan persediaan masa nyata yang lebih mudah tetapi penaipan yang lebih lemah. Untuk data hubungan yang kompleks (dengan cantuman), pilih Supabase. Untuk data dokumen yang hierarki dan fleksibel (seperti mesej sembang), Firebase ialah pilihan semula jadi. Kedua-duanya menyediakan pengesahan, storan dan fungsi.
// Decision matrix:
// Supabase:
// + Postgres SQL — complex queries and relationships
// + TypeScript generated types from schema
// + Open source — can self-host
// + Row Level Security (granular per-user access)
// - Slightly more setup for real-time subscriptions
// Firebase:
// + Simpler real-time listeners (onSnapshot)
// + Generous free tier
// + Google's CDN/auth infrastructure
// - NoSQL: no joins, schema migrations harder
// - Vendor lock-in
// For HabitTracker: Supabase (relational habits/completions)Struktur Navigasi
Sebelum membina skrin, reka bentuk pepohon navigasi. Kebanyakan aplikasi mempunyai dua keadaan peringkat teratas: skrin pengesahan (log masuk, pendaftaran, pengenalan — dipaparkan apabila tiada sesi wujud) dan skrin aplikasi (kandungan utama, dipaparkan apabila pengguna telah disahkan). Pertukaran antara pengesahan dan aplikasi ialah navigator akar. Dalam keadaan aplikasi, pilih antara navigator tab (bahagian utama) dan/atau navigator tindanan (aliran terperinci). Lukiskan pepohon ini sebelum menulis kod.
// HabitTracker navigation tree:
// Root Navigator (stack)
// ├── Auth Stack (shown when no session)
// │ ├── Onboarding Screen
// │ ├── Sign In Screen
// │ └── Sign Up Screen
// └── App Tab Navigator (shown when authenticated)
// ├── Home Tab (Stack)
// │ ├── Habit List Screen
// │ └── Habit Detail Screen
// ├── Stats Tab (Stack)
// │ └── Statistics Screen
// └── Settings Tab (Stack)
// └── Settings ScreenPemilihan Pengurusan Keadaan
Pilih pengurusan keadaan yang sesuai dengan kerumitan aplikasi anda. Aplikasi kecil hingga sederhana berfungsi dengan baik menggunakan React Context + useState untuk keadaan global (sesi pengesahan, tema), serta React Query untuk data pelayan. Aplikasi yang lebih besar dengan keadaan merentas komponen yang kompleks mendapat manfaat daripada Zustand (ringkas, kod sokongan minimum) atau Redux Toolkit (berkuasa, dengan alat pembangun). Elakkan memilih Redux untuk aplikasi kecil — kos tambahan itu tidak wajar sehingga anda mempunyai banyak bahagian keadaan yang saling berkaitan.
// HabitTracker state management plan:
// Authentication state:
// → Context API (AuthContext with session/user)
// Server data (habits, completions):
// → React Query (useQuery, useMutation)
// - Caches habits list
// - Invalidates cache on mutation
// - Works offline with persistence
// UI state (selected date, modal open):
// → Local useState in each component
// Theme preference (light/dark):
// → Context + AsyncStorage for persistence
// No Redux needed — RQ handles server state wellStruktur Folder
Struktur folder yang tersusun menjadikan pangkalan kod mudah dinavigasi apabila berkembang. Konvensyen React Native yang lazim: src/ mengandungi segala-galanya, dengan subfolder untuk screens/ (skrin), components/ (antara muka pengguna yang dikongsi), hooks/ (cangkuk tersuai), services/ (panggilan API/backend), store/ atau context/ (keadaan), navigation/ (navigator), dan utils/ (fungsi tulen). Kumpulkan mengikut ciri untuk aplikasi yang lebih besar, dan mengikut jenis untuk aplikasi yang lebih kecil.
// Recommended folder structure:
src/
screens/
auth/
SignInScreen.tsx
SignUpScreen.tsx
habits/
HabitListScreen.tsx
HabitDetailScreen.tsx
stats/
StatsScreen.tsx
components/
HabitCard.tsx
StreakBadge.tsx
CheckInButton.tsx
hooks/
useHabits.ts
useCompletions.ts
useAuth.ts
services/
supabase.ts
habitsApi.ts
navigation/
RootNavigator.tsx
AppTabNavigator.tsx
context/
AuthContext.tsx
ThemeContext.tsxReka Bentuk Skema Pangkalan Data
Reka bentuk skema pangkalan data anda sebelum menulis sebarang pertanyaan. Untuk Supabase (PostgreSQL), fikirkan tentang jadual dan hubungan. Untuk aplikasi HabitTracker, anda memerlukan: jadual habits (dimiliki oleh pengguna), jadual completions (satu baris bagi setiap tabiat pada setiap hari tabiat itu ditanda selesai), dan gunakan jadual terbina dalam auth.users milik Supabase Auth untuk pengguna. Dasar Keselamatan Peringkat Baris (RLS) memastikan pengguna hanya boleh melihat data mereka sendiri.
-- HabitTracker schema (PostgreSQL / Supabase)
CREATE TABLE habits (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
name TEXT NOT NULL,
icon TEXT DEFAULT 'star',
color TEXT DEFAULT '#007AFF',
reminder_time TIME,
created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE TABLE completions (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
habit_id UUID REFERENCES habits(id) ON DELETE CASCADE,
completed_date DATE NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW(),
UNIQUE(habit_id, completed_date)
);
-- RLS policies: users see only their own habits
ALTER TABLE habits ENABLE ROW LEVEL SECURITY;
CREATE POLICY 'Users can CRUD own habits' ON habits
FOR ALL USING (auth.uid() = user_id);Menyediakan Rangka Projek
Dengan pelan yang tersedia, sediakan rangka projek Expo dan konfigurasikan perkara penting dengan segera: TypeScript, ESLint, Prettier, struktur folder dan git. Pasang pustaka pilihan anda sebelum menulis sebarang kod ciri. Menyediakan pemformatan dan pemeriksaan kod lebih awal menghalang pangkalan kod yang berselerak daripada terkumpul — jauh lebih sukar untuk digunakan pada 1000 baris kod sedia ada berbanding menguatkuasakannya sejak baris 1.
# Create project with TypeScript template
npx create-expo-app HabitTracker --template expo-template-blank-typescript
cd HabitTracker
# Install core dependencies
npx expo install @react-navigation/native @react-navigation/bottom-tabs \
@react-navigation/stack react-native-screens react-native-safe-area-context
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
npm install @tanstack/react-query axios
# Linting and formatting
npm install -D eslint eslint-config-expo prettier
# Initialize git
git init && git add -A && git commit -m 'Initial scaffold'Pemboleh Ubah Persekitaran dan Konfigurasi
Sediakan pemboleh ubah persekitaran sebelum menulis sebarang kod yang menyentuh rahsia. Cipta fail .env untuk pembangunan setempat dan tambahkannya kepada .gitignore dengan segera. Gunakan awalan EXPO_PUBLIC_ untuk nilai yang selamat dimasukkan dalam himpunan klien (kunci API awam), dan simpan nilai yang benar-benar rahsia (kunci peranan perkhidmatan) dalam EAS Secrets sahaja. Jangan sekali-kali komitkan sebarang kunci API atau rahsia ke git.
// .env (create this, add to .gitignore)
EXPO_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5...
// src/services/supabase.ts
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
storage: AsyncStorage,
autoRefreshToken: true,
persistSession: true,
},
});Mentakrifkan Jenis TypeScript
Takrifkan jenis TypeScript teras anda dalam folder src/types/ sebelum menulis komponen atau perkhidmatan. Jenis untuk jadual pangkalan data anda (Habit, Completion), prop navigasi (senarai parameter skrin) dan respons API mewujudkan kontrak dikongsi antara semua bahagian pangkalan kod. Supabase CLI boleh menjana jenis secara automatik daripada skema anda dengan supabase gen types typescript, sekali gus menjimatkan banyak usaha manual.
// src/types/index.ts
export interface Habit {
id: string;
user_id: string;
name: string;
icon: string;
color: string;
reminder_time: string | null;
created_at: string;
}
export interface Completion {
id: string;
habit_id: string;
completed_date: string; // YYYY-MM-DD
created_at: string;
}
// Navigation param list
export type AppStackParamList = {
HabitList: undefined;
HabitDetail: { habitId: string };
CreateHabit: undefined;
};
// Generate from Supabase schema:
// npx supabase gen types typescript --project-id <id> > src/types/supabase.tsMerancang Urutan Pembangunan Ciri
Bina ciri mengikut urutan kebergantungan: pengesahan sebelum skrin data (skrin data memerlukan ID pengguna), rangka navigasi sebelum skrin individu, lapisan API sebelum antara muka pengguna (supaya anda boleh menguji aliran data sebelum menggayakannya), dan ciri teras sebelum penggilapan (penstriman + reka bentuk). Pelan minggu pertama yang baik: Hari 1 — aliran pengesahan; Hari 2 — rangka navigasi; Hari 3-4 — CRUD tabiat; Hari 5 — penyiapan dan logik rentetan; Hari 6-7 — pemberitahuan dan penggilapan.
// HabitTracker development order:
// Sprint 1 (Foundation):
// 1. Auth screens + Supabase auth
// 2. Root navigator (auth/app switch)
// 3. Tab navigator + placeholder screens
// 4. Supabase client + React Query setup
// Sprint 2 (Core Feature):
// 5. Habits API (create, read, delete)
// 6. HabitList screen + HabitCard component
// 7. Completions API (toggle check-in)
// 8. Streak calculation logic
// Sprint 3 (Polish):
// 9. Calendar view for habit history
// 10. Stats screen
// 11. Push notifications setup
// 12. Animations on check-inSemakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini anda telah mempelajari: cara mentakrifkan skop aplikasi yang jelas dan menangguhkan ciri yang tidak penting ke v2, cara memilih bahagian belakang, corak navigasi dan pendekatan pengurusan keadaan berdasarkan keperluan aplikasi, serta cara mereka bentuk skema pangkalan data dan struktur folder sebelum menulis kod ciri. Anda juga melihat cara menyediakan rangka projek dengan kebergantungan dan jenis yang betul sejak hari pertama. Seterusnya, kita akan melaksanakan aliran pengesahan dan laluan terlindung.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Merancang Seni Bina dan Timbunan Teknologi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Merancang Seni Bina dan Timbunan Teknologi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Merancang Seni Bina dan Timbunan Teknologi”?
Takrifkan idea aplikasi, pilih bahagian belakang (Supabase atau Firebase), pilih struktur navigasi, tentukan pendekatan pengurusan keadaan, dan bina rangka projek dengan susun atur folder yang sesuai. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Merancang Seni Bina dan Timbunan Teknologi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Merancang Seni Bina dan Timbunan Teknologi
- Aliran Pengesahan dan Laluan Dilindungi
- Ciri Teras: Suapan Data dengan Sokongan Luar Talian
- Pengemasan, Pengujian dan Penghantaran ke Kedua-dua Gedung