bareapp

Ionic 5/kapasitor 3 + tailwind CSS + auth0 + graphql + react + typeScript Demo aplikasi seluler dunia nyata

Aplikasi demo untuk Ionic 5 dan Capacitor 3 yang menunjukkan cara membangun aplikasi lintas-platform dunia nyata dengan otentikasi, graphql, dan bereaksi. Semua dimungkinkan dengan hanya plugin komunitas gratis.

Mungkin Anda di sini karena Anda tidak dapat menemukan contoh ionik/kapasitor yang menggunakan CSS tailwind atau apa pun dengan otentikasi. Dan ya, itu alasan yang sama saya membangun aplikasi demo ini di sini. Jadi, bersenang -senanglah!

Fitur

• ⚡ Kapasitor Ionik 5 + terbaru 3
• ? Umpan Data Real-Time (dev.to) melalui GraphQL
• ? Amankan otentikasi SSO/kata sandi melalui auth0
• ? Styling dengan tailwindcss
• ? Muat ulang! Perubahan kode secara otomatis tercermin dalam aplikasi!
• ⚛️ Tidak bersudut , bereaksi!
• ? Semuanya di TypeScript!
• ? Aplikasi tunggal untuk iOS dan android

Awal yang cepat

1. Cukup klon repo dan bootstrap repositori melalui npm install !

npm install

2. Jalankan aplikasi pada simulator atau perangkat nyata

npm run ios

atau

npm run android

3. Buka Editor Kode Anda dan Mulai Coding! Semua file sumber ada di direktori src .

Mengkonfigurasi aplikasi Anda

Ada beberapa hal yang mungkin ingin Anda ubah untuk menyesuaikan aplikasi Anda. Pertama, Anda ingin mengubah nilai APP_ID dan AUTH0_CLIENT_ID di file src/environments/environment.ts .

Juga, checkout capacitor.config.ts dan menyesuaikannya sesuai dengan kebutuhan Anda. Untuk detail, lihat https://capacitorjs.com/docs/config

Uji aplikasi Anda seperti pro! ⚡⚡⚡

Menjalankan emulator seluler di mesin lokal Anda bisa sangat lambat orz ...? Dengan baik. Ada cara untuk mempercepatnya: jalankan di cloud, dan bahkan lebih baik, di perangkat nyata !!!

Ada beberapa emulator cloud yang tersedia. Dalam kasus saya, saya menggunakan BrowserStack karena menawarkan pengujian real-time pada perangkat nyata. Atau, Lambdatest juga merupakan pilihan yang baik dengan harga yang lebih murah, meskipun mereka hanya menyediakan emulator, bukan perangkat nyata. Tetapi Google akan membantu Anda menemukan yang terbaik untuk Anda.

Saya berbagi pengaturan saya di sini, sehingga Anda dapat meniru pengalaman di penyedia Anda.

1. Siapkan terowongan lokal ke penyedia. Misalnya, menggunakan BrowserStack Local atau Lambdatest Tunnel.

2. Sajikan aplikasi web dari mesin lokal Anda atau bahkan di cloud.

   Misalnya, jalankan npm run start:web untuk melayani aplikasi dari mesin lokal Anda. (Catatan: HOST dan PORT dapat dikonfigurasi dalam ionic:serve skrip siklus hidup).

3. Atur URL penyajian yang dapat dijangkau oleh aplikasi melalui variabel terowongan di lingkungan LIVE_RELOAD_URL dan buka proyek untuk mengkompilasi paket aplikasi: misalnya LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios Jika Anda mengikuti pengaturan default untuk uji Lambda.

   Di bawah kapnya, LIVE_RELOAD_URL dimuat di capacitor.config.ts untuk menghasilkan pengaturan reload langsung yang relevan di bawah ini:

{
  "server" : {
    "url" : " <LIVE_RELOAD_URL> " ,
    "cleartext" : true
  }
}

4. Unggah build (A .ipa untuk iOS atau apk untuk Android) ke penyedia Anda.

5. Jalankan aplikasi di perangkat cloud dan bersenang -senang!

Catatan saat ini, aplikasi hanya diuji di iOS dan Android.

Catatan Pembangunan

Reload langsung

Ada beberapa tutorial di luar sana yang menyarankan Anda secara manual menempatkan alamat IP eksternal Anda ke capacitor.config.ts untuk menggunakan muat ulang langsung.

Meskipun benar bahwa konfigurasi diperlukan untuk terhubung ke server web eksternal untuk memuat aplikasi web, jika Anda menggunakan pengaturan saya, konfigurasi ini secara otomatis dimuat saat Anda menyediakan LIVE_RELOAD_URL .

Anda tidak perlu menambahkannya secara manual untuk pengembangan atau menghapusnya untuk pembangunan produksi.

Otentikasi

Konfigurasi AUTH0

Untuk detail lebih lanjut, lihat panduan di AUTH0

1. Konfigurasikan URL Callback A Callback URL adalah URL di aplikasi Anda di mana AUTH0 mengarahkan pengguna setelah mereka diautentikasi.

URL panggilan balik untuk aplikasi Anda harus masuk daftar putih di bidang URL Callback yang diizinkan di pengaturan aplikasi Anda. Jika bidang ini tidak diatur, pengguna tidak akan dapat masuk ke aplikasi dan akan mendapatkan kesalahan. Your_package_id: // your_domain/cordova/your_package_id/callback

2. Konfigurasikan asal yang diizinkan (CORS) Tambahkan file sebagai asal yang diizinkan ke kotak Origins (CORS) yang diizinkan.

file://*

Jika Anda menguji aplikasi pada browser melalui npm run start:web atau ionic serve yang setara, ketahuilah bahwa pengaturan untuk Allowed Origins dan Callback URLs mungkin berbeda. Secara default, itu harus dari http://localhost:8100 .

Konfigurasi Aplikasi

Untuk dapat membuka aplikasi dari skema khusus, Anda perlu mendaftarkan skema terlebih dahulu. Dengan asumsi skema kustom Anda adalah custom.scheme sehingga aplikasi akan membuka tautan custom.scheme://<url> , ikuti instruksi di bawah ini untuk dua platform.

Lihat https://capacitorjs.com/docs/apis/app untuk lebih detail.

Untuk iOS,

1. Di ios/App/App/Info.plist Tambahkan sesuatu yang mirip dengan yang berikut:

< key >CFBundleURLTypes</ key >
< array >
  < dict >
    < key >CFBundleURLName</ key >
    < string >custom.scheme</ string >
    < key >CFBundleURLSchemes</ key >
    < array >
      < string >custom.scheme</ string >
    </ array >
  </ dict >
</ array >

Ubah penting custom.scheme ke skema khusus Anda.

Untuk Android,

1. Di android/app/src/main/AndroidManifest.xml , di dalam bagian aktivitas, tambahkan yang berikut:

< intent-filter >
    < action android : name = " android.intent.action.VIEW " />
    < category android : name = " android.intent.category.DEFAULT " />
    < category android : name = " android.intent.category.BROWSABLE " />
    < data android : scheme = " @string/custom_url_scheme " />
</ intent-filter >

2. Kemudian di android/app/src/main/res/values/strings.xml , ubah nilai custom_url_scheme ke skema khusus Anda.

3. Akhirnya di android/app/src/main/res/xml/config.xml , tambahkan yang berikut ini pada root sehingga hanya satu contoh aplikasi Anda yang akan diluncurkan dan karenanya setelah otentikasi panggilan balik akan selalu dikirim ke aplikasi yang tepat.

< preference name = " AndroidLaunchMode " value = " singleTask " />

Tautan yang dalam

Tautan dalam memungkinkan Anda untuk mengirim seseorang tautan yang akan dibuka di aplikasi yang telah mereka instal di ponsel mereka. Untuk mengaturnya, ikuti panduan resmi di sini https://capacitorjs.com/docs/guides/deep-links

FAQ

1. Bagaimana cara menjalankan aplikasi di perangkat?

   Buka Xcode atau Android Studio dengan perintah di bawah ini dan pilih target perangkat sebelum mulai berjalan.

npm run open ios

atau

npm run open android

Kredit

1. Terima kasih khusus kepada OneGraph https://www.onegraph.com karena menyediakan data demo. Mereka adalah salah satu layanan yang menghubungkan banyak orang lain seperti Stripe, GitHub, Twitter dll. Semua dalam satu. Lihatlah.

Demo & starter keren lainnya

• NEXTJS-TAILWIND-IONIC-CAPACITOR-STARTER: Demo serupa dengan TailwindCSS, tetapi dicapai melalui Next.js dan JS saja.

Lisensi

Hak Cipta © 2021, Alvis Tang. Dirilis di bawah lisensi MIT.