bareapp

Ionic 5/capacitor 3 + tailwind css + auth0 + graphql + react + typescript แอพมือถือมือถือจริง

แอพสาธิตสำหรับ Ionic 5 และตัวเก็บประจุ 3 ที่แสดงวิธีการสร้างแอพข้ามแพลตฟอร์มแบบจริงด้วยการตรวจสอบความถูกต้อง GraphQL และ React ทั้งหมดทำให้เป็นไปได้ด้วยปลั๊กอินชุมชนฟรีเท่านั้น

อาจเป็นไปได้ว่าคุณอยู่ที่นี่เพราะคุณไม่สามารถหาตัวอย่างอิออน/ตัวเก็บประจุที่ใช้ Tailwind CSS หรืออะไรก็ได้ด้วยการตรวจสอบ และใช่มันเป็นเหตุผลเดียวกับที่ฉันสร้างแอพสาธิตนี้ที่นี่ ขอให้สนุก!

คุณสมบัติ

• ⚡ Ionic 5 + ตัวเก็บประจุล่าสุด 3
• - ฟีดข้อมูลแบบเรียลไทม์ (dev.to) ผ่าน graphql
• - รักษาความปลอดภัย SSO/รหัสผ่านการรับรองความถูกต้องผ่าน auth0
• - จัดแต่งทรงผมด้วย tailwindcss
• - โหลดสด! การเปลี่ยนแปลงรหัสจะสะท้อนให้เห็นโดยอัตโนมัติในแอพ!
• ไม่ใช่เชิงมุม มันตอบสนอง!
• - ทุกอย่างเป็น typescript!
• - แอพเดียวสำหรับทั้ง iOS และ Android

เริ่มต้นอย่างรวดเร็ว

1. เพียงแค่โคลน repo และ bootstrap repository ผ่าน npm install !

npm install

2. เรียกใช้แอพบนเครื่องจำลองหรืออุปกรณ์จริง

npm run ios

หรือ

npm run android

3. เปิดตัวแก้ไขรหัสของคุณและเริ่มการเข้ารหัส! ไฟล์ต้นฉบับทั้งหมดอยู่ในไดเรกทอรี src

การกำหนดค่าแอปของคุณ

มีบางสิ่งที่คุณอาจต้องการเปลี่ยนเพื่อปรับแต่งแอปของคุณ ก่อนอื่นคุณจะต้องเปลี่ยนค่า APP_ID และ AUTH0_CLIENT_ID ในไฟล์ src/environments/environment.ts

นอกจากนี้ Checkout capacitor.config.ts และปรับแต่งให้เหมาะกับความต้องการของคุณ สำหรับรายละเอียดโปรดดู https://capacitorjs.com/docs/config

ทดสอบแอปของคุณเหมือนมืออาชีพ!

การเรียกใช้เครื่องจำลองมือถือบนเครื่องในเครื่องของคุณอาจช้า Orz อย่างเจ็บปวด ... ? ดี. มีวิธีเร่งความเร็ว: เรียกใช้บนคลาวด์และดีกว่าบน อุปกรณ์จริง !!!

มีอีมูเลเตอร์คลาวด์สองสามตัว ในกรณีของฉันฉันใช้ BrowserStack เพราะมีการทดสอบแบบเรียลไทม์บนอุปกรณ์จริง อีกทางเลือกหนึ่ง Lambdatest ยังเป็นตัวเลือกที่ดีในราคาที่ถูกกว่าแม้ว่าพวกเขาจะจัดหาอีมูเลเตอร์เท่านั้นไม่ใช่อุปกรณ์จริง แต่ Google จะช่วยคุณค้นหาสิ่งที่ดีที่สุดสำหรับคุณ

ฉันกำลังแบ่งปันการตั้งค่าของฉันที่นี่เพื่อให้คุณสามารถทำซ้ำประสบการณ์กับผู้ให้บริการของคุณ

1. ตั้งค่าอุโมงค์ท้องถิ่นไปยังผู้ให้บริการ ตัวอย่างเช่นการใช้อุโมงค์ Local Local หรือ Lambdatest

2. ให้บริการเว็บแอปจากเครื่องในพื้นที่ของคุณหรือแม้กระทั่งบนคลาวด์

   ตัวอย่างเช่นเรียกใช้ npm run start:web สำหรับให้บริการแอพจากเครื่องในพื้นที่ของคุณ (หมายเหตุ: HOST และ PORT สามารถกำหนดค่าได้ใน ionic:serve สคริปต์วงจรชีวิต)

3. ตั้งค่า URL ที่ให้บริการที่แอปสามารถเข้าถึงผ่านอุโมงค์ในตัวแปรสภาพแวดล้อม LIVE_RELOAD_URL และเปิดโครงการเพื่อรวบรวมแพ็คเกจแอพ: เช่น LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios

   ภายใต้ประทุน LIVE_RELOAD_URL โหลดใน capacitor.config.ts เพื่อสร้างการตั้งค่า การโหลดสด ที่เกี่ยวข้องด้านล่าง:

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

4. อัปโหลด Build ( .ipa สำหรับ iOS หรือ apk สำหรับ Android) ไปยังผู้ให้บริการของคุณ

5. เรียกใช้แอพบนอุปกรณ์คลาวด์และสนุก!

หมายเหตุ ขณะนี้แอพได้รับการทดสอบบน iOS และ Android เท่านั้น

บันทึกการพัฒนา

โหลดสดใหม่

มีบทเรียนบางอย่างที่แนะนำให้คุณวางที่อยู่ IP ภายนอกของคุณด้วยตนเองเพื่อ capacitor.config.ts เพื่อใช้การโหลดสด

ในขณะที่มันเป็นความจริงที่จำเป็นต้องมีการกำหนดค่าเพื่อเชื่อมต่อกับเว็บเซิร์ฟเวอร์ภายนอกสำหรับการโหลดเว็บแอพหากคุณใช้การตั้งค่าของฉันการกำหนดค่านี้จะถูกโหลดโดยอัตโนมัติเมื่อคุณจัดหา LIVE_RELOAD_URL

คุณไม่จำเป็นต้องเพิ่มด้วยตนเองเพื่อการพัฒนาหรือลบออกเพื่อสร้างการผลิต

การรับรองความถูกต้อง

การกำหนดค่า Auth0

สำหรับรายละเอียดเพิ่มเติมลองดูคำแนะนำที่ Auth0

1. กำหนดค่า URL การโทรกลับ URL การโทรกลับเป็น URL ในแอปพลิเคชันของคุณที่ Auth0 เปลี่ยนเส้นทางผู้ใช้หลังจากที่พวกเขาได้รับการรับรองความถูกต้องแล้ว

URL การโทรกลับสำหรับแอปของคุณจะต้องได้รับการอนุญาตในฟิลด์ URL การโทรกลับที่อนุญาตในการตั้งค่าแอปพลิเคชันของคุณ หากไม่ได้ตั้งค่าฟิลด์นี้ผู้ใช้จะไม่สามารถเข้าสู่แอปพลิเคชันและจะได้รับข้อผิดพลาด your_package_id: // your_domain/cordova/your_package_id/การโทรกลับ

2. กำหนดค่า Origins (CORS) เพิ่มไฟล์เป็นแหล่งกำเนิดที่อนุญาตในกล่อง Origins (CORS) ที่อนุญาต

file://*

หากคุณกำลังทดสอบแอพบนเบราว์เซอร์ผ่าน npm run start:web หรือ ionic serve ที่เทียบเท่าโปรดทราบว่าการตั้งค่าสำหรับ Allowed Origins และ Callback URLs อาจแตกต่างกัน โดยค่าเริ่มต้นควรมาจาก http://localhost:8100

การกำหนดค่าแอพ

สำหรับความสามารถในการเปิดแอพจากโครงการที่กำหนดเองคุณต้องลงทะเบียนโครงการก่อน สมมติว่ารูปแบบที่กำหนดเองของคุณเป็น custom.scheme เพื่อให้แอปจะเปิดลิงค์ custom.scheme://<url> ให้ทำตามคำสั่งด้านล่างสำหรับสองแพลตฟอร์ม

ตรวจสอบ https://capacitorjs.com/docs/apis/app สำหรับรายละเอียดเพิ่มเติม

สำหรับ iOS

1. ใน ios/App/App/Info.plist เพิ่มสิ่งที่คล้ายกับสิ่งต่อไปนี้:

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

การเปลี่ยนแปลง ที่สำคัญ custom.scheme ไปยังรูปแบบที่กำหนดเองของคุณ

สำหรับ Android

1. ใน android/app/src/main/AndroidManifest.xml ภายในส่วนกิจกรรมเพิ่มสิ่งต่อไปนี้:

< 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. จากนั้นใน android/app/src/main/res/values/strings.xml เปลี่ยนค่าของ custom_url_scheme เป็นรูปแบบที่กำหนดเองของคุณ

3. ในที่สุดใน android/app/src/main/res/xml/config.xml ให้เพิ่มสิ่งต่อไปนี้ที่รูทเพื่อให้มีเพียงหนึ่งอินสแตนซ์ของแอปของคุณเท่านั้นที่จะเปิดตัวและหลังจากการตรวจสอบสิทธิ์การโทรกลับจะถูกส่งไปยังแอพที่เหมาะสมเสมอ

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

ลิงค์ลึก

ลิงก์ลึกช่วยให้คุณสามารถส่งลิงค์ที่จะเปิดในแอพที่ติดตั้งบนโทรศัพท์ สำหรับการตั้งค่าให้ทำตามคำแนะนำอย่างเป็นทางการที่นี่ https://capacitorjs.com/docs/guides/deep-links

คำถามที่พบบ่อย

1. วิธีเรียกใช้แอพบนอุปกรณ์?

   เปิด Xcode หรือ Android Studio ด้วยคำสั่งด้านล่างและเลือกเป้าหมายอุปกรณ์ก่อนเริ่มทำงาน

npm run open ios

หรือ

npm run open android

การให้เครดิต

1. ขอขอบคุณเป็นพิเศษสำหรับ OneGraph https://www.onegraph.com สำหรับการให้ข้อมูลตัวอย่าง พวกเขาเป็นหนึ่งในบริการที่เชื่อมต่อกับคนอื่น ๆ เช่น Stripe, GitHub, Twitter ฯลฯ ทั้งหมดในที่เดียว ตรวจสอบพวกเขา

การสาธิตและผู้เริ่มต้นที่ยอดเยี่ยมอื่น ๆ

• Nextjs-tailwind-ionic-capacitor-starter: การสาธิตที่คล้ายกันกับ tailwindcss แต่ทำได้ผ่าน Next.js และ JS เท่านั้น

ใบอนุญาต

ลิขสิทธิ์© 2021, Alvis Tang ปล่อยภายใต้ใบอนุญาต MIT