t3 turbo and clerk

إنشاء T3 Turbo مع مصادقة الموظفين

إعداد لوحة القيادة

لكي يعمل هذا القالب ، تحتاج إلى تمكين Discord كمزود OAuth. يمكنك العثور على الخيارات الاجتماعية ضمن User & Authentication / Social Providers في لوحة معلومات الموظفين

إذا قمت بتغيير أي إعداد هنا خارج إضافة Discord ، فقد تحتاج إلى تحديث رمز المعرض الخاص بك للتعامل مع أي متطلبات تقوم بتغييرها.

يستخدم Turborepo ويحتوي على:

تخطيط الكود

 .github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  ├─ expo
  └─ next.js
      ├─ Next.js 13
      ├─ React 18
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 └─ db
     └─ typesafe db-calls using Prisma

بداية سريعة

لتشغيله ، اتبع الخطوات أدناه:

تبعيات الإعداد

 # Install dependencies
pnpm i


# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the Prisma schema to your database
pnpm db-push

تكوين تطبيق المعرض

لا يستخدم Expo .env للمفتاح القابل للنشر ، لذلك ستحتاج إلى الانتقال إلى apps/expo/app.config.ts وإضافته هناك.

 const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";

تكوين Expo dev -script

ملاحظة: إذا كنت ترغب في استخدام هاتف فعلي مع Expo Go ، فما عليك سوى تشغيل pnpm dev وفحص رمز QR.

استخدم محاكي iOS

1. تأكد من تثبيت أدوات خط XCode و XCommand كما هو موضح في مستندات المعرض.
2. قم بتغيير البرنامج النصي dev في apps/expo/package.json لفتح محاكي iOS.

 +  "dev": "expo start --ios",

3. قم بتشغيل pnpm dev في مجلد Root Project.

لنظام Android

1. قم بتثبيت أدوات Android Studio كما هو موضح في مستندات المعرض.
2. قم بتغيير البرنامج النصي dev في apps/expo/package.json لفتح محاكي Android.

 +  "dev": "expo start --android",

3. قم بتشغيل pnpm dev في مجلد Root Project.

النشر

Next.js

ملاحظة إذا كنت تقوم ببناء محلية ، فستحتاج إلى إدراج ENV الخاص بك بشكل صحيح ، على سبيل المثال باستخدام pnpm with-env next build

المتطلبات الأساسية

لا نوصي بنشر قاعدة بيانات SQLite على بيئات بدون خادم نظرًا لعدم استمرار البيانات. لقد قمت بتوفير قاعدة بيانات سريعة postgresql على السكك الحديدية ، ولكن يمكنك بالطبع استخدام أي مزود قاعدة بيانات أخرى. تأكد من تحديث مخطط Prisma لاستخدام قاعدة البيانات الصحيحة.

نشر إلى Vercel

دعنا ننشر تطبيق Next.js إلى Vercel. إذا كنت قد قمت بنشر تطبيق Turborepo هناك ، فإن الخطوات واضحة تمامًا. يمكنك أيضًا قراءة دليل Turborepo الرسمي حول النشر إلى Vercel.

1. قم بإنشاء مشروع جديد على Vercel ، وحدد مجلد apps/nextjs كدليل جذر وتطبيق إعدادات الإنشاء التالية:

يقوم أمر التثبيت بتصفية حزمة المعرض ويحفظ بضع ثوانٍ (وحجم ذاكرة التخزين المؤقت) لتركيب التبعية. يجعلنا الأمر البناء بناء التطبيق باستخدام Turbo.

2. أضف DATABASE_URL ، NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY و CLERK_SECRET_KEY متغير البيئة.

3. منتهي! يجب أن ينشر تطبيقك بنجاح. قم بتعيين مجالك واستخدمه بدلاً من localhost لعنوان url في تطبيق Expo حتى يتمكن تطبيق Expo الخاص بك من التواصل مع الواجهة الخلفية الخاصة بك عندما لا تكون قيد التطوير.

معرض

يعمل نشر تطبيق المعرض الخاص بك بشكل مختلف قليلاً مقارنة بـ next.js على الويب. بدلاً من "نشر" تطبيقك عبر الإنترنت ، تحتاج إلى إرسال بنيات الإنتاج من تطبيقك إلى متاجر التطبيق ، مثل Apple App Store و Google Play. يمكنك قراءة التوزيع الكامل لتطبيقك ، بما في ذلك أفضل الممارسات ، في مستندات المعرض.

1. لنبدأ بإعداد EAS Build ، وهو قصير لخدمات تطبيقات المعرض. تساعدك خدمة Build على إنشاء بنيات لتطبيقك ، دون الحاجة إلى إعداد تطوير محلي كامل. الأوامر أدناه هي ملخص لإنشاء أول بناء الخاص بك.

   // Install the EAS CLI
   $ pnpm add -g eas-cli
   
   // Log in with your Expo account
   $ eas login
   
   // Configure your Expo app
   $ cd apps/expo
   $ eas build:configure

2. بعد الإعداد الأولي ، يمكنك إنشاء أول بناء. يمكنك إنشاء منصات Android و iOS واستخدام ملفات تعريف EAS.JSON المختلفة لإنشاء تصميمات أو تطوير أو عمليات تنمية. لنجعل بناء إنتاج لنظام التشغيل iOS.

    $ eas build --platform ios --profile production
   

   إذا لم تقم بتحديد العلم --profile ، يستخدم EAS ملف تعريف production افتراضيًا.

3. الآن بعد أن حصلت على أول بناء إنتاج ، يمكنك إرسال هذا إلى المتاجر. يمكن أن تساعدك Seas Service في إرسال البناء إلى المتاجر.

    $ eas submit --platform ios --latest
   

   يمكنك أيضًا الجمع بين الإنشاء والإرسال في أمر واحد ، باستخدام eas build ... --auto-submit .

4. قبل أن تتمكن من الحصول على تطبيقك في أيدي المستخدمين ، يجب عليك تقديم معلومات إضافية لمتاجر التطبيق. يتضمن ذلك لقطات شاشة ومعلومات التطبيق وسياسات الخصوصية ، وما إلى ذلك ، بينما لا يزال في معاينة ، يمكن أن تساعدك Metadata في معظم هذه المعلومات.

5. إذا كنت تستخدم مقدمي الخدمات الاجتماعية OAUTH مع كاتب ، على سبيل المثال Google و Apple و Facebook و ETC ... ، يجب عليك تويتيلون UAUTH REDL URL لتطبيق Expo في لوحة معلومات CLERK.

   في apps/expo/app.config.ts ، أضف scheme سيتم استخدامه لتحديد تطبيقك المستقل.

    import { ExpoConfig , ConfigContext } from "@expo/config" ;
   
   const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key" ;
   
   const defineConfig = ( _ctx : ConfigContext ) : ExpoConfig => ( {
      name : "expo" ,
      slug : "expo" ,
      scheme : "your-app-scheme" ,
      // ...
   } ) ;

   ثم ، في لوحة معلومات الموظفين ، انتقل إلى المستخدم والمصادقة> الاتصالات الاجتماعية> الإعدادات وأضف مخطط التطبيق الخاص بك وإعادة توجيه عنوان URL إلى حقل Redirect URL

   your-app-scheme://oauth-native-callback

   هنا ، يتوافق your-app-scheme مع scheme المحدد في app.config.ts ، و oauth-native-callback يتوافق مع عنوان URL إعادة توجيه محدد عند المصادقة مع مقدمي الخدمات الاجتماعية. انظر signinwithoauth.tsx للرجوع إليها.

   يمكنك العثور على مزيد من المعلومات حول هذا في وثائق المعرض.

   يجب أن تكون قادرًا الآن على تسجيل الدخول مع مقدمي الخدمات الاجتماعية في بناء تطبيق TestFlight.

6. بمجرد الموافقة على كل شيء ، يمكن للمستخدمين في النهاية الاستمتاع بتطبيقك. دعنا نقول أنك رصدت خطأ مطبعيًا صغيرًا ؛ سيكون عليك إنشاء بناء جديد ، وإرساله إلى المتاجر ، وانتظار الموافقة قبل أن تتمكن من حل هذه المشكلة. في هذه الحالات ، يمكنك استخدام تحديث EAS لإرسال Bugfix الصغير بسرعة إلى المستخدمين دون المرور بهذه العملية الطويلة. لنبدأ بإعداد تحديث EAS.

   لتلخيص الخطوات أدناه لبدء البدء مع دليل تحديث EAS.

   // Add the ` expo-updates ` library to your Expo app
   $ cd apps/expo
   $ pnpm expo install expo-updates
   
   // Configure EAS Update
   $ eas update:configure

7. قبل أن نتمكن من إرسال تحديثات إلى تطبيقك ، يجب عليك إنشاء إنشاء جديد وإرساله إلى متاجر التطبيق. لكل تغيير يتضمن واجهات برمجة التطبيقات الأصلية ، يجب عليك إعادة بناء التطبيق وتقديم التحديث إلى متاجر التطبيق. انظر الخطوتين 2 و 3.

8. الآن بعد أن أصبح كل شيء جاهزًا للتحديثات ، دعنا ننشئ تحديثًا جديدًا لبناء production . باستخدام --auto Flag ، يستخدم UPATED UPDATE اسم فرع GIT الحالي ورسالة الالتزام بهذا التحديث. انظر كيف يعمل تحديث EAS لمزيد من المعلومات.

   $ cd apps/expo
   $ eas update --auto

   يجب أن تتبع تحديثات OTA (فوق الهواء) دائمًا قواعد متجر التطبيقات. لا يمكنك تغيير الوظيفة الأساسية لتطبيقك دون الحصول على موافقة متجر التطبيقات. ولكن هذه طريقة سريعة لتحديث تطبيقك للتغييرات الطفيفة وإصلاحات الأخطاء.

9. منتهي! الآن بعد أن قمت بإنشاء بناء الإنتاج الخاص بك ، وأرسلته إلى المتاجر ، وتثبيت تحديث EAS ، فأنت مستعد لأي شيء!

مراجع

نشأت المكدس من Create-T3-Turbo.