Tutorial

Menengah

25 menit

Yang Akan Anda Pelajari

  • Persyaratan aplikasi mobile
  • Pembuatan React Native
  • Integrasi fitur native
  • Pengujian berbasis Docker
  • Penerapan ke toko aplikasi
  • Penerbitan Ekonomi Kreator

Bangun Aplikasi Mobile

Buat aplikasi iOS dan Android yang siap produksi dalam 25 menit

Ingin menjangkau pengguna di ponsel mereka? Dalam tutorial ini, Anda akan membangun aplikasi kebugaran mobile lengkap untuk iOS dan Android. Lihat saat Conductor merencanakan dan Virtuoso membangun aplikasi React Native Anda dalam kontainer Docker asli - dengan build dan pengujian yang sebenarnya.

Apa yang Akan Kita Bangun

Aplikasi pelacakan kebugaran dengan: pencatatan latihan, grafik kemajuan, notifikasi push, integrasi health kit, dukungan offline, dan berbagi sosial - siap produksi untuk App Store dan Google Play.

Prasyarat

  • Menyelesaikan tutorial Memulai
  • Akun Nxcode (Lite atau Pro)
  • Tidak memerlukan pengalaman pengembangan mobile

Pengembangan Mobile dengan Nxcode

Nxcode menghasilkan aplikasi React Native yang berjalan secara native di iOS dan Android. Inilah yang membuatnya berbeda:

Kode Native Asli

Bukan pembungkus web - melainkan React Native asli yang dikompilasi ke biner native iOS dan Android.

Pengujian Docker

Aplikasi Anda dibangun dan dijalankan di Docker. Jika tidak dapat dikompilasi, Virtuoso akan memperbaikinya secara otomatis.

Fitur Native

Kamera, notifikasi, health kit, geolokasi - semuanya berfungsi langsung setelah jadi.

Satu Basis Kode

Kode tunggal untuk kedua platform, dengan optimalisasi khusus platform jika diperlukan.

Mendeskripsikan Aplikasi Mobile Anda

Beri tahu Conductor apa yang Anda inginkan. Berikan spesifikasi tentang fitur native:

Bangun aplikasi pelacakan kebugaran untuk iOS dan Android:

Fitur Utama:
- Pencatatan latihan dengan latihan, set, repetisi, beban
- Pelacakan kardio dengan GPS untuk lari di luar ruangan
- Grafik kemajuan yang menunjukkan peningkatan kekuatan dari waktu ke waktu
- Timer istirahat antar set dengan notifikasi
- Riwayat latihan dan rekor pribadi

Integrasi Kesehatan:
- Sinkronisasi Apple Health / Google Fit
- Penghitungan langkah dan aktivitas harian
- Detak jantung selama latihan (jika tersedia)

Fitur Sosial:
- Bagikan ringkasan latihan ke media sosial
- Tantangan teman dan papan peringkat
- Templat latihan komunitas

Dukungan Offline:
- Fungsionalitas offline penuh
- Sinkronisasi saat kembali online

Desain:
- Mode gelap secara default
- Tombol besar yang ramah sentuhan
- Animasi yang mulus

Conductor Merencanakan Aplikasi Mobile Anda

Untuk aplikasi mobile, Conductor membuat rencana yang menangani perbedaan platform:

Fase 1: Penyiapan Inti

  • 1Inisialisasi React Native dengan TypeScript
  • 2Konfigurasi navigasi (tab + stack)
  • 3Siapkan manajemen status (Redux)
  • 4Buat lapisan data offline-first

Fase 2: Fitur Latihan

  • 1Bangun layar pencatatan latihan
  • 2Buat basis data latihan
  • 3Implementasikan timer istirahat dengan notifikasi
  • 4Tambahkan grafik kemajuan

Fase 3: Integrasi Native

  • 1Integrasi Apple Health / Google Fit
  • 2Pelacakan GPS untuk kardio
  • 3Penyiapan notifikasi push
  • 4Kamera untuk foto kemajuan

Fase 4: Sosial & Pemolesan

  • 1Integrasi berbagi sosial
  • 2Sistem teman dan tantangan
  • 3Animasi dan umpan balik haptik
  • 4Pembuatan aset toko aplikasi
C

Conductor

Saya sedang merencanakan aplikasi kebugaran Anda. Pertanyaan cepat: 1. Apakah pelacakan GPS harus berjalan di latar belakang saat lari? 2. Apakah Anda ingin aplikasi pendamping Apple Watch / Wear OS? 3. Apakah data latihan harus disinkronkan antar perangkat? 4. Ada basis data latihan tertentu (atau saya akan buatkan yang komprehensif)?

U

User

Ya untuk GPS latar belakang. Tidak untuk aplikasi jam tangan saat ini. Ya untuk sinkronisasi antar perangkat. Buat basis data default yang bagus.

C

Conductor

Sempurna! Saya telah membuat 18 tugas dalam 4 fase. Virtuoso akan membangun dan menguji pada simulator iOS dan Android di Docker. Ini memakan waktu sekitar 12-15 menit. Memulai!

Melihat Build Mobile di Docker

Virtuoso menjalankan build mobile yang sebenarnya - bukan sekadar pembuatan kode:

1Metro Bundler

Bundel JavaScript dibuat dan divalidasi

2Build iOS

Xcode membangun di Docker, kesalahan terdeteksi lebih awal

3Build Android

Build Gradle dengan Android SDK asli

4Pengujian Simulator

Aplikasi diluncurkan dan alur dasar diuji

5Pemeriksaan Modul Native

Izin health kit, GPS, dan kamera diverifikasi

Berbeda dengan alat yang hanya mengeluarkan kode, Nxcode benar-benar membangun aplikasi Anda. Jika React Native memunculkan kesalahan build, Virtuoso memperbaikinya secara otomatis. Anda mendapatkan aplikasi yang berfungsi, bukan proyek yang rusak.

Integrasi Fitur Native

Virtuoso menangani penyiapan native yang kompleks:

Health Kit / Google Fit

Baca langkah, latihan, detak jantung. Tulis sesi latihan. Penanganan izin yang tepat.

GPS & Lokasi Latar Belakang

Lacak lari di luar ruangan bahkan saat aplikasi berada di latar belakang. Implementasi yang dioptimalkan untuk baterai.

Notifikasi Push

Notifikasi lokal untuk timer istirahat. Notifikasi jarak jauh untuk aktivitas teman.

Offline-First

SQLite untuk penyimpanan lokal. Sinkronisasi latar belakang saat online. Termasuk resolusi konflik.

Menguji Aplikasi Mobile Anda

Berbagai cara untuk menguji sebelum pengiriman ke toko aplikasi:

Pratinjau Web

Pratinjau cepat di browser. Bagus untuk UI, tetapi tanpa fitur native.

Expo Go

Pindai kode QR, uji di ponsel Anda. Sebagian besar fitur berfungsi.

Build Pengembangan

Build native penuh untuk menguji semua fitur termasuk health kit.

TestFlight / Pengujian Internal

Bagikan dengan penguji beta sebelum rilis publik.

Penerapan ke Toko Aplikasi

Nxcode menyederhanakan proses pengiriman ke toko aplikasi:

  1. Klik "Build for Production"
  2. IPA (iOS) dan AAB (Android) yang ditandatangani telah dibuat
  3. Screenshot toko aplikasi dibuat otomatis
  4. Kebijakan privasi dan teks listing dibuat
  5. Unggah ke App Store Connect / Google Play Console

Apa yang Termasuk

  • Penandatanganan kode ditangani secara otomatis
  • Pembuatan screenshot untuk semua ukuran perangkat
  • Saran konten listing App Store
  • Generator kebijakan privasi
  • Manajemen versi

Uangkan Aplikasi Mobile Anda

Ubah aplikasi Anda menjadi pendapatan berulang:

1

Langganan Dalam Aplikasi

Virtuoso dapat menambahkan tingkatan langganan (gratis, pro) dengan penagihan App Store / Play Store.

2

Ekonomi Kreator

Daftarkan di marketplace Nxcode. Pengguna membayar melalui platform kami, Anda menyimpan 70%.

3

Penjualan Langsung

Jual fitur premium secara langsung melalui akun Stripe Anda sendiri.

Banyak aplikasi kebugaran mengenakan biaya $9.99/bulan. Dengan 200 pelanggan, itu berarti $1,400/bulan (setelah bagi hasil 70% Ekonomi Kreator).

Apa yang Telah Anda Bangun

  • Aplikasi React Native siap produksi
  • Dukungan native iOS and Android
  • Integrasi health kit dan GPS
  • Arsitektur offline-first
  • Notifikasi push
  • Build siap toko aplikasi

Aplikasi mobile Anda tidak hanya sekadar dibuat - aplikasi tersebut dibangun, diuji pada simulator iOS dan Android, dan diverifikasi benar-benar dapat dikompilasi. Itulah perbedaan Nxcode.

Langkah Berikutnya

Pendamping Aplikasi Web

Tambahkan dasbor web untuk aplikasi mobile Anda

Pendamping Aplikasi Web →

Ekonomi Kreator

Pelajari strategi monetisasi

Ekonomi Kreator →

Konsep Inti

Pahami Conductor dan Virtuoso

Konsep Inti →

Siap Membangun Aplikasi Mobile Anda?

Mulai bangun aplikasi iOS dan Android Anda sekarang.

Mulai MembangunTutorial Lainnya

Continue Learning

React Native App

Cross-platform mobile development

Mobile E-commerce

Build a mobile shopping app

Publishing Your App

Deploy to App Store & Play Store

Location-Based App

Maps and geolocation features

Browse All Tutorials →