Bina aplikasi dengan Claude Code: tutorial iPhone
Oleh Mehdi Azizi
Dikemas kini pada , 15 min
Pasang Claude Code, cipta projek Expo, tulis CLAUDE.md, beri prompt satu skrin demi satu skrin, kemudian hantar ke TestFlight dengan EAS: tutorial lengkap.
Bina aplikasi dengan Claude Code: jawapan ringkas
Untuk membina aplikasi dengan Claude Code, anda perlukan akses berbayar ke Claude Code (langganan yang serasi atau Console dengan bayaran ikut penggunaan), Node.js, iPhone dengan Expo Go dan sebuah projek Expo. Anda tulis fail CLAUDE.md yang menerangkan stack dan peraturan anda, minta satu skrin pada satu masa, uji setiap skrin pada iPhone anda, kemudian hantar aplikasi ke TestFlight dengan EAS.
Tutorial ini melengkapkan panduan saya bina aplikasi iOS dengan AI, yang menerangkan apa yang AI buat dengan baik dan apa yang ia terlepas. Di sini, kita terus ke praktik: arahan, fail, prompt.
Saya kod aplikasi iOS saya dengan Claude Code dan Cursor setiap hari. Stack saya: React Native, Expo, EAS, RevenueCat dan Supabase. Solys, jam loceng dengan permainan mini, dan TradaZen, aplikasi latihan trading, sudah diterbitkan di App Store. Nolera dan Clic pernah ditolak oleh Apple, kemudian diperbetulkan. Semua yang berikut datang daripada kerja ini.
Untuk melihat kaedah ini digunakan pada aplikasi yang sudah diterbitkan, saya telah mendokumentasikan perjalanan TradaZen, dari commit pertama hingga penolakan Apple dan perubahan hala tuju. Pengalaman ini melengkapkan langkah-langkah tutorial.
Langkah 1: kumpulkan prasyarat
Sebelum arahan pertama, pastikan anda ada semua ini.
Akaun Claude berbayar
Claude Code tidak termasuk dalam pelan percuma claude.ai. Menurut dokumentasi Anthropic, anda perlukan akaun Pro, Max, Team, Enterprise atau Console. Pelan Pro cukup untuk bermula, dalam had penggunaannya.
Node.js dan terminal
Expo memerlukan Node.js versi LTS, pada macOS, Windows atau Linux. Claude Code berjalan pada macOS 13 ke atas, Windows 10 ke atas dan distribusi Linux utama.
iPhone dan Expo Go
Pasang Expo Go dari App Store pada iPhone anda untuk mencuba skrin pertama tanpa mengompil aplikasi anda sendiri. Sebelum mencipta projek, semak versi SDK yang serasi dengan pemasangan anda di halaman Expo Go. SDK terkini dan versi yang diedarkan di App Store tidak selalu tersedia pada masa yang sama: Expo antaranya telah mendokumentasikan jurang ini pada Mei 2026. Jadi jangan bermula dengan nombor versi yang anda jumpa dalam tutorial lama. Untuk menggunakan modul native anda sendiri, rancang satu development build.
Mac? Tidak wajib
Build iOS dikompil di pelayan Expo dengan EAS Build, menggunakan versi Xcode yang dipilih oleh SDK Expo anda (ITMS-90725), dan EAS Submit berfungsi pada macOS, Linux dan Windows. Jadi anda boleh sampai ke TestFlight dari PC. Panduan terbitkan aplikasi iOS tanpa Mac memperincikan rantaian ini.
Akaun Apple Developer, nanti
Anda tidak memerlukannya untuk mengekod dan menguji dalam Expo Go dari App Store. Ia menjadi wajib apabila anda mahu menghantar aplikasi ke TestFlight. Kita akan kembali kepadanya di langkah 7.
Langkah 2: pasang Claude Code
Pada macOS, Linux atau WSL, kaedah yang disyorkan oleh Anthropic ialah pemasang native:
curl -fsSL https://claude.ai/install.sh | bash
Pada Windows, dalam PowerShell:
irm https://claude.ai/install.ps1 | iex
Kemudian pastikan pemasangan berjaya:
claude --version
Jika anda lebih suka npm, arahannya ialah npm install -g @anthropic-ai/claude-code. Jangan letak sudo di depan, dokumentasi secara jelas tidak menggalakkannya.
Kali pertama anda jalankan claude, pelayar akan terbuka untuk anda log masuk ke akaun anda. Selepas itu, anda boleh menulis dalam bahasa Melayu: Claude membaca fail anda, mencadangkan perubahan dan menjalankan arahan, dengan persetujuan anda.
Langkah 3: cipta projek Expo
Pergi ke folder tempat anda simpan projek anda dan jalankan:
npx create-expo-app@latest my-app
cd my-app
npx expo start
Jika alat itu menawarkan pilihan antara keserasian dengan Expo Go dari App Store dan SDK terkini, pilih keserasian untuk latihan ini. Walau apa pun, pastikan versi yang dicipta disokong oleh Expo Go yang dipasang pada iPhone anda sebelum meneruskan. Anda boleh sediakan development build apabila projek anda memerlukannya.
Satu kod QR muncul di terminal. Imbas dengan kamera iPhone anda: aplikasi akan terbuka dalam Expo Go. Satu perkara kecil sering menyekat kali pertama: Expo Go hanya membuka projek anda jika Expo CLI dan Expo Go disambungkan ke akaun Expo yang sama. Jalankan npx expo login pada komputer anda dan log masuk dengan akaun yang sama dalam aplikasi.
Kenapa Expo dan bukan Swift? Claude sangat mahir dengan React Native, dan anda boleh menguji tanpa Mac. Saya terangkan pilihan ini di halaman React Native dan Expo untuk aplikasi mudah alih.
Ingat satu had Expo Go: ia hanya mengandungi modul native yang sudah dibawanya. Sebaik sahaja anda menambah library native yang tidak dikenalinya, contohnya pembelian dalam aplikasi, anda perlukan development build. Ini bukan masalah untuk skrin-skrin pertama.
Pilih persekitaran ujian yang betul
Expo Go, development build dan TestFlight tidak membuktikan perkara yang sama. Expo menerangkan development build sebagai aplikasi ujian anda sendiri, dengan modul native yang diperlukan oleh projek anda.
| Apa yang anda mahu semak | Di mana untuk menguji | Had ujian |
|---|---|---|
| Paparkan skrin pertama dan cuba navigasinya | Expo Go, dengan SDK yang serasi | Tingkah laku modul native yang tiada dalam Expo Go |
| Gunakan library native yang ditambah ke projek | Development build yang mengandungi library tersebut | Versi yang diedarkan atau penerimaannya oleh Apple |
| Teroka aplikasi untuk penguji, kemudian uji pembeliannya | Build yang dihantar ke TestFlight dan produk yang dikonfigurasi dengan betul | Pembayaran sebenar pelanggan atau pengesahan untuk dijual |
Sebelum menambah dependency, tanya Claude: "Adakah ia serasi dengan SDK dan persekitaran ujian saya sekarang? Perlukah aplikasi dikompil semula? Sokong jawapan anda dengan dokumentasi." Anda elak menghabiskan satu malam membetulkan modul yang Expo Go memang tidak boleh muatkan, atau SDK yang ditolak semasa penghantaran kerana API bukan awam.
Langkah 4: tulis fail CLAUDE.md projek
Inilah langkah yang paling berbaloi. Claude Code boleh menyimpan memori projek, tetapi anda perlu menyatakan peraturannya dengan jelas. Fail CLAUDE.md, diletakkan di akar projek, memberikan arahan yang sama kepada setiap sesi. Di situlah anda tulis apa yang Claude tidak boleh teka.
Dalam folder projek, jalankan claude, kemudian taip /init. Menurut dokumentasi, Claude menganalisis projek dan menjana CLAUDE.md pertama dengan arahan dan konvensyen yang dijumpainya. Kemudian anda lengkapkan dengan peraturan anda. Anthropic mengesyorkan supaya kekal di bawah 200 baris: semakin panjang fail, semakin kurang arahan dipatuhi.
Ini contoh ringkas, hampir sama dengan apa yang saya guna:
# Aplikasi saya
## Stack
- Expo (SDK dari create-expo-app), React Native, TypeScript strict
- Navigasi: Expo Router, satu fail setiap skrin dalam app/
- Data: Supabase (nanti), jangan sekali-kali letak kunci rahsia dalam aplikasi
## Peraturan
- Satu skrin pada satu masa. Jangan sentuh fail di luar permintaan.
- Tiada ketinggian tetap dalam point: saiz relatif kepada skrin,
ScrollView jika kandungan boleh melimpah.
- Setiap skrin mengurus 3 keadaan: memuatkan, kosong, ralat.
- Teks antara muka dalam bahasa Melayu.
- Sebelum mengekod lebih daripada 2 fail: cadangkan pelan dan tunggu persetujuan saya.
## Arahan
- Jalankan: npx expo start
- Ujian: guna skrip yang benar-benar ada dalam package.json.
Jika belum ada, maklumkan; jangan umumkan ujian berjaya.
- Jenis: npx tsc --noEmit
- Selepas setiap perubahan: jalankan ujian dan jenis, kemudian beritahu saya
apa yang berubah dan cara menyemaknya pada iPhone.
Peraturan tentang ketinggian tetap bukan ada secara kebetulan. Kita akan kembali kepadanya di langkah 6.
Langkah 5: beri prompt satu skrin pada satu masa
"Buatkan saya aplikasi penjejak tabiat dengan langganan" menghasilkan projek yang besar, rapuh dan mustahil disemak. Kaedah yang berkesan adalah sebaliknya: satu permintaan, satu skrin, satu hasil yang boleh anda uji dalam lima minit.
Mulakan dengan pelan
Untuk apa sahaja yang melibatkan beberapa fail, tukar ke mod pelan. Tekan Shift+Tab sehingga anda nampak plan mode on di bar status. Dalam mod ini, Claude membaca fail dan mencadangkan pelan, tetapi tidak mengubah apa-apa sebelum anda setuju. Anda baca, betulkan, kemudian sahkan.
Prompt pertama untuk menetapkan skop kelihatan begini:
Saya mahu aplikasi penjejak tabiat. Versi 1: satu fungsi sahaja,
tanda tabiat hari ini. Cadangkan senarai skrin dan struktur
folder. Jangan kod apa-apa dulu.
Terangkan skrin, keadaan dan hadnya
Kemudian, satu prompt untuk setiap skrin. Semakin banyak kes had yang anda namakan, semakin kurang Claude terlupa:
Cipta skrin app/index.tsx yang menyenaraikan tabiat hari ini.
- Setiap baris: nama tabiat, kotak semak, siri semasa.
- Keadaan kosong: satu teks dan butang "Tambah tabiat".
- Keadaan memuatkan dan keadaan ralat dengan butang "Cuba lagi".
- Data datang dari tatasusunan tempatan buat masa ini.
- Mesti muat pada iPhone SE dan juga iPhone paling besar:
tiada ketinggian tetap, senarai boleh ditatal.
Jalankan ujian dan jenis di akhir.
Betulkan tanpa biarkan semuanya ditulis semula
Apabila ada butiran yang tidak kena, kekal tepat dan hadkan skop:
Pada iPhone saya, butang "Tambah tabiat" masuk ke bawah bar
bawah apabila senarai panjang. Betulkan masalah ini sahaja dalam
app/index.tsx, tanpa menyentuh fail lain. Terangkan puncanya.
Anda juga boleh tampal tangkapan skrin dalam terminal: Claude boleh membacanya.
Latihan: tabiat yang kekal ditanda selepas dibuka semula
Ini latihan pembelajaran untuk dibuat dalam projek anda, bukan tangkapan fungsi yang sudah siap. Tujuannya ialah beralih daripada skrin yang dijana kepada tingkah laku yang boleh disahkan. Ia tidak memerlukan akaun pengguna atau pembelian dalam aplikasi.
- Kekalkan satu tabiat tempatan sahaja bernama "Baca 10 minit".
- Minta kotak semak dan simpanan tempatan yang serasi dengan projek Expo anda.
- Minta ejen menyatakan fail yang diubah, dependency yang mungkin ditambah dan arahan yang benar-benar dijalankan.
- Pasang atau buka aplikasi anda pada iPhone, kemudian buat semakan di bawah.
Berdasarkan skrin sedia ada, jadikan tabiat "Baca 10 minit"
boleh ditanda dan kekalkan keadaannya selepas aplikasi ditutup dan dibuka semula.
Gunakan storan tempatan yang serasi dengan dependency projek.
Jangan cipta akaun, pelayan, langganan atau statistik tambahan.
Sebelum mengekod, terangkan cara anda akan mengurus pemuatan dan kegagalan
membaca atau menyimpan. Kemudian, buat perubahan yang terhad.
Di akhir: fail yang diubah, arahan yang dijalankan, had yang tidak diuji
dan langkah tepat untuk menyemak hasilnya pada iPhone.
| Tindakan pada iPhone anda | Hasil yang dijangka | Jika gagal |
|---|---|---|
| Buka aplikasi buat kali pertama | Tabiat dan kotaknya kelihatan, tanpa ralat | Semak keadaan awal dan pemuatan storan |
| Tanda, kemudian tutup dan buka semula | Tabiat kekal ditanda | Periksa penulisan dan kemudian pembacaan kunci yang sama |
| Nyahtanda, kemudian buka semula | Tabiat kekal tidak ditanda | Pastikan nilai false juga disimpan |
| Ulang laluan dalam mod pesawat | Fungsi tempatan kekal tersedia | Kesan dependency rangkaian yang ditambah tanpa sebab |
| Besarkan saiz teks | Nama dan kawalan kekal boleh diakses | Buang kekangan yang memotong atau menyembunyikan tindakan |
Jangan minta "tulis semula semuanya" jika satu baris gagal. Terangkan tindakan, hasil yang dijangka dan hasil yang diperhatikan. Contohnya: "Selepas dibuka semula, kotak kembali kosong walaupun saya sudah menandanya. Terangkan puncanya dan betulkan penyimpanan tanpa mengubah reka bentuk."
Muat turun templat CLAUDE.md dan senarai semak (.md). Buka dalam editor anda atau aplikasi nota. Sesuaikan arahan dengan projek anda sebelum menyerahkannya kepada ejen.
Langkah 6: minta semakan dan uji
Claude Code menulis kod yang nampak betul. Hanya ujian anda dan iPhone anda yang boleh memberitahu sama ada ia betul.
Ujian supaya tidak merosakkan apa yang sudah berfungsi
Semakin besar aplikasi anda, semakin tinggi risiko setiap permintaan merosakkan skrin yang sudah disahkan. Projek yang dicipta oleh Expo tiada ujian: minta Claude pasang Jest dengan jest-expo dahulu, seperti yang disyorkan oleh dokumentasi Expo. Kemudian minta ujian untuk logik penting (pengiraan siri, pengesahan borang) dan suruh ia jalankan selepas setiap perubahan. Sebab itulah arahan ujian ditulis dalam CLAUDE.md: Claude menjalankannya tanpa anda perlu mengingatkannya. Dengan fail peraturan dan ujian, AI jauh kurang merosakkan apa yang sudah berfungsi.
Semak setiap perubahan
Anda tidak perlu faham setiap baris. Anda perlu tahu fail mana yang berubah, dan kenapa. Jika Claude menyentuh fail yang tiada kaitan, tanya sebabnya sebelum menerima. Kemudian tanya: "apa yang boleh rosak di sini?".
Semak pada iPhone kecil dan besar
Inilah pengajaran yang paling mahal bagi saya. Solys ditolak oleh Apple di bawah garis panduan 2.1: demo onboarding mustahil dimenangi pada iPad Air, di mana aplikasi berjalan dalam mod keserasian iPhone. Puncanya: ketinggian dikod dalam point tetap, bukan relatif kepada saiz skrin. Pada iPhone saya, semuanya okey. Kod sudah disemak, ujian semuanya lulus. Tiada alat yang melihat skrin pada saiz lain.
Sejak itu, saya semak setiap skrin sekurang-kurangnya pada iPhone paling kecil dan paling besar. Jika anda hanya ada satu telefon, simulator Xcode pada Mac atau kawan yang ada model lain sudah memadai. Perhatikan terutamanya teks panjang, papan kekunci terbuka pada borang dan butang yang dilekatkan di bawah.
Apa yang Claude Code tidak buat dengan baik
Claude Code cemerlang untuk skrin dan logik. Di luar folder anda, ia jauh kurang boleh dipercayai.
Tandatangan dan sijil
Tanpa sambungan yang dibenarkan ke akaun Apple anda, Claude tidak tahu keadaannya. Ia boleh mereka prosedur sijil yang mencampurkan Xcode dan Expo. Biarkan EAS mengurus tandatangan: dokumentasi Expo menerangkan bahawa EAS CLI boleh menjana dan menyimpan fail-fail ini untuk anda, selepas disambungkan ke akaun Apple Developer anda.
App Store Connect
Halaman aplikasi, pengisytiharan privasi, tangkapan skrin dan pautan undang-undang ialah data yang perlu disemak dalam App Store Connect. Claude Code kini boleh bertindak dalam pelayar yang log masuk melalui integrasi Chrome, dengan akses yang diperlukan. Ini tidak menjamin medan-medan itu tepat: baca semula maklumat, semak akaun yang digunakan dan sahkan sendiri komitmen serta penghantaran untuk semakan.
Langganan
Menulis paywall ambil masa sepuluh minit. Menyelaraskan produk App Store Connect, konfigurasinya dalam RevenueCat dan kod, itu cerita lain. Satu pengecam berbeza satu aksara dan paywall kekal kosong bagi reviewer. Perangkap paling biasa disenaraikan dalam kesilapan paywall iOS pemula.
Kes had
Tanpa arahan, Claude mengurus kes biasa sahaja. Tiada rangkaian, senarai kosong, pembelian terganggu: anda yang perlu menamakannya.
Keselamatan Supabase
Apabila Claude mencipta jadual dalam Supabase, pastikan keselamatan peringkat baris (RLS) diaktifkan, dengan polisi yang mengehadkan setiap pengguna kepada data mereka sendiri. Pastikan juga tiada kunci rahsia dalam kod aplikasi. Tulis dua larangan ini dalam CLAUDE.md anda sebaik sahaja anda menyambungkan pangkalan data.
Langkah 7: ke TestFlight dengan EAS
Skrin anda sudah disemak dalam Expo Go atau dalam development build, bergantung pada modul yang digunakan. Sekarang beralih ke build yang akan diedarkan kepada penguji.
Sediakan EAS
Sekarang anda perlukan akaun Apple Developer berbayar: Expo mengingatkan bahawa ia wajib untuk menghantar aplikasi ke App Store. Kemudian, pasang alat Expo dan konfigurasikan projek:
npm install --global eas-cli
eas login
eas build:configure
Tambah bundle identifier yang unik dalam app.json, di bawah ios.bundleIdentifier, contohnya com.yourname.myapp.
Kompil dan hantar
eas build --platform ios --profile production
eas submit --platform ios
Arahan pertama mengompil aplikasi di pelayan Expo. Kali pertama, EAS menawarkan untuk menyambung ke akaun Apple anda bagi mencipta sijil. Arahan kedua menghantar build ke App Store Connect. Anda juga boleh buat semuanya sekali gus dengan eas build --platform ios --auto-submit.
Build mesti diproses oleh Apple sebelum muncul dalam TestFlight, dan pemprosesan ini boleh menolaknya, contohnya dengan ITMS-90717 untuk ikon lutsinar. Jadi penghantaran yang berjaya tidak bermakna ia sudah boleh dipasang: semak statusnya dalam App Store Connect. Penguji dalaman, luaran dan semakan beta diterangkan dalam panduan saya TestFlight untuk menguji aplikasi iPhone anda.
Ulang semakan langkah 6 pada build ini. Aplikasi yang berfungsi dalam Expo Go masih boleh ranap dalam production, contohnya apabila modul native tiada.
Berapa kos sebenarnya
Ini harga yang dipaparkan oleh perkhidmatan dan disemak pada 27 September 2026, dalam dolar. Jumlah yang dicaj juga bergantung pada wilayah, cukai dan penggunaan anda: semak pelan sebelum melanggan.
- Langganan Claude: pelan Pro ialah 20 $ sebulan, atau 17 $ sebulan dengan bayaran tahunan. Pelan Max bermula dari 100 $ sebulan, untuk penggunaan lebih banyak.
- Akaun Apple Developer: 99 $ setahun, wajib untuk TestFlight dan App Store.
- EAS: pelan percuma Expo termasuk 15 build iOS sebulan, dalam barisan menunggu keutamaan rendah. Pelan Starter berharga 19 $ sebulan, ditambah penggunaan tambahan.
Untuk prototaip kecil, Pro dan pelan percuma EAS boleh menjadi asas, jika anda kekal dalam kuotanya. Tambah akaun Apple sebelum TestFlight, kemudian kira secara berasingan perkhidmatan yang benar-benar diperlukan: pangkalan data, storan atau API berbayar. Templat bajet aplikasi pertama membantu menyusun perkara-perkara ini. Masa anda untuk konfigurasi dan semakan juga perlu diambil kira.
Had yang jujur, dan di mana orang tersekat
Claude Code telah mengubah siapa yang boleh membina aplikasi iPhone. Ia tidak mengubah apa yang Apple tuntut untuk menerbitkannya. Penolakan datang dengan cepat: Solys pernah kena, Nolera dan Clic juga. Sebab paling kerap diceritakan dalam kenapa Apple menolak aplikasi.
Anda boleh sampai ke TestFlight sendiri dengan tutorial ini. Tempat orang paling kerap tersekat ialah selepas itu: menyambungkan langganan, menyediakan dokumen untuk reviewer, memahami penolakan. Untuk gambaran keseluruhan perjalanan, baca halaman bina aplikasi iPhone.
Untuk bahagian ini, iOS Kit menghimpunkan kod permulaan aplikasi saya, termasuk langganan, skill Claude Code untuk setiap langkah dan Apple Review Kit. Perjalanan lengkap ada di halaman kursus Claude Code untuk membina aplikasi iOS.
Anda sudah tersekat dan tidak tahu kenapa? Diagnostik percuma memberitahu apa yang benar-benar menghalang anda dan menghantar senarai semak anti-penolakan Apple saya.
Soalan lazim
Bolehkah saya bina aplikasi iPhone dengan Claude Code tanpa tahu mengekod?
Ya untuk skrin dan logik mudah, jika anda semak dan uji setiap langkah. Tidak jika anda harap tidak perlu faham apa-apa langsung. Anda perlu tahu membaca mesej ralat, menjalankan arahan dan menyemak apa yang Claude ubah. Ia cepat dipelajari sambil membina.
Adakah Claude Code percuma?
Tidak. Claude Code memerlukan akaun Pro, Max, Team, Enterprise atau Console. Pelan percuma claude.ai tidak termasuk. Pelan Pro cukup untuk bermula, dengan had penggunaan yang perlu dipantau.
Perlukah Mac untuk bina aplikasi iOS dengan Claude Code?
Tidak. Anda kod pada mana-mana komputer, uji dalam Expo Go pada iPhone anda, dan EAS mengompil serta menghantar aplikasi di pelayan Expo. Mac tetap berguna untuk simulator, tetapi tidak wajib.
Claude Code atau Cursor untuk aplikasi React Native?
Saya guna kedua-duanya, setiap hari. Claude Code bekerja dalam terminal dan menjalankan perubahan serta ujian sendiri secara berturutan. Cursor ialah editor. Kaedah lebih penting daripada alat: peraturan, satu skrin pada satu masa, ujian.
Berapa lama untuk menerbitkan aplikasi pertama dengan Claude Code?
Ia bergantung pada saiz aplikasi dan masa anda. Aplikasi dengan satu fungsi sahaja jauh lebih cepat. Bahagian yang paling sukar dijangka tetap semakan Apple.
Bolehkah Claude Code mengkonfigurasi langganan dalam aplikasi?
Ia boleh menulis kod paywall dan RevenueCat. Dengan alat yang disambungkan dan kebenaran yang diperlukan, ia juga boleh bertindak dalam konsol. Jangan sekali-kali anggap produk sudah dikonfigurasi hanya kerana kodnya ada: semak pengecam, harga dan hak akses selepas pembelian, kemudian uji pembelian dan pemulihan (restore) di TestFlight. Kesilapan biasa paywall iOS memberikan anda perkara-perkara yang perlu diperiksa.