CUA

لم يعد هذا الريبو لم يعد يتم الحفاظ عليه بنشاط. ❗

؟ Create-Universal-App (CUA)

Newdemo.mp4

؟ ما هذا؟

Create-Universal-App (CUA) هو قالب رأي لإنشاء تطبيقات عالمية كاملة (Mobile + Web Web) مع مصادقة مدمجة لكل من الهاتف المحمول والويب باستخدام Expo (Mobile) ، NextJS (Web) ، TRPC ، Prisma ، Tamagui (UI + styling) ، و Clerk (Mobile + Web Auth). يتم عرض العرض التوضيحي في https://cua-demo.vercel.app/.

إليك برنامج تعليمي لمدة 20 دقيقة على YouTube يتجاوز كل شيء إذا كان هذا أكثر من أسلوبك!

يمكنك أيضًا تشغيل npx create-t3-universal-app لبدء مشروعك (بواسطة Albbus). أضف أحد الأعلام التالية إذا كنت تريد تباينًا محددًا في CUA:

• --with-supabase
• --with-drizzle-pg
• --with-drizzle-sql

إذا كان لديك أي سؤال أثناء استخدام هذا ، فلا تتردد في الانضمام إلى؟ Discord؟ ، نحن جميعًا نشطون جدًا هناك!

هذا الريبو مصنوع فوق :

• Create-T3-Turbo: Expo ، Next ، TRPC ، Prisma ، Nextauth-No UI Code Share & No Auth Mobile Auth.
• T3-Turbo-and-Clerk: T3 Turbo مع Auth for Mobile + Web-لا يوجد أي رمز واجهة المستخدم.
• Tamagui + Solito Starter: Expo + Next Code Share - No TRPC ولا يوجد مصادقة مدمجة.

؟ كيف تعمل

هيكل المجلد

• التطبيقات
  • التالي
  • معرض
• حزم
  • واجهة المستخدم (مكوناتك القابلة لإعادة الاستخدام مع Tamagui)
  • ديسيبل (مخطط DB وأشياء PRISMA)
  • برنامج
    • الميزات (️ كل رمز الواجهة الأمامية الأصلية ستذهب هنا ️)
    • التنقل (توحيد الويب + التنقل المحمول)
    • مزود (مقدمي الموحد)
    • utils (utils مثل Auth & TRPC)
  • API (كل رمز TRPC & الخلفي الخاص بك)

بمزيد من التفاصيل قليلا

سيكون رمز الواجهة الأمامية في React Native ، مما يعني أنك ستكتب طرق العرض بدلاً من divs. نظرًا لأننا نستخدم Tamagui على وجه الخصوص ، سنقوم بكتابة مداخن بدلاً من ذلك.

• apps/expo والتطبيقات apps/next هي مجلدات فارغة عملياً تشير ببساطة إلى مجلد packages/app .
• إذا كنت على دراية بـ React Native ، فسيكون ذلك كما لو كنت تكتب تطبيق React Native ، وهذا ما يحدث أيضًا بشكل جيد على الويب (مع SSR وجميع هذه الأشياء الجيدة).
• سيتم تقديم الكود الخاص بك كـ HTML/CSS على الجانب التالي و React Natoral Native على الجانب الأصلي.

سيكون رمز الواجهة الخلفية في packages/api . ستقوم NextJS بتشغيل هذا الرمز في بيئة بدون خادم ، إذا كنت مرتبكًا قليلاً حول كيفية عمل ذلك ، فهذا مقطع فيديو جيد من قبل Theo يتحدث عن NextJS كإطار عمل خلفي.

• سوف تتصل الواجهة الخلفية والواجهة الأمامية مع TRPC.
• سيتواصل الواجهة الخلفية الخاصة بك و DB الخاص بك مع Prisma (ORM).
• يتم Auth Mobile Auth باستخدام Clerk Expo ، ويتم Auth Web Auth مع Clerk React و Clerk التالي.

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

؟ وراء القرارات

لماذا Tamagui لواجهة المستخدم والتصميم؟

ما هو تاماجوي؟

TLDR : إنه لجعل الأمور تبدو جميلة على الويب والجوال مع كونها سريعة وسهلة للغاية للعمل معها. بمزيد من التفصيل ، لدى Tamagui 3 أشياء:

• المترجم : طريقة فريدة لتحويل "الكود المتعلق بالأسلوب" إلى CSS النقي بشكل أسرع. أهم شيء هنا هو على الأرجح هو الشيء الذي يقومون به الشجرة.
• Core : مجموعة صغيرة من المكونات التي قاموا ببنائها تهدف إلى استبدال العرض والنص الذي تستخدمه في React Native ، مع بعض المزايا.
• واجهة المستخدم : مجموعة من مكونات واجهة المستخدم التي قام بها فريق Tama باستخدام Core.

تحقق من مستنداتهم لمزيد من المعلومات.

لماذا لا NativeWind & tailwind؟

ما يعجبني في Tamagui هو أنه في وقت واحد من الرياح الخلفية و Daisyui التي تم تصميمها من الألف إلى الياء المصممة للتطبيقات العالمية مع المترجم الخاص بها ومكوناتها الأساسية.

لا تتردد في استخدام NativeWind & Tailwind بدلاً من Tamagui ، يجب أن تكون قادرًا على إعداد الأمور بسهولة إلى حد ما (وإذا قمت بالمساهمة في هذا القالب إنشاء فرع مع تثبيت NativeWind).

لماذا كاتب لائحة؟

على مستوى عالٍ ، يعد الموظف حلاً إجماليًا لإدارة المستخدم بدلاً من المصادقة فقط مع أشياء مثل ملف تعريف المستخدم والحظر وإدارة الأجهزة المدمجة. في الممارسة العملية ، لديهم مكتبة متشابهة للغاية/مكتبة التالية مع خطافات مدمجة لطيفة للغاية للاستخدام! لقد قضيت وقتًا رائعًا في استخدام الموظف مقارنةً بالحلول الأخرى مثل Firebase أو Supabase.

أشياء عملية

• السنانير والمكونات الرائعة حقًا (signdin/signedout) التي تعمل مع كل من Expo و NextJs.
• SDKs لجميع المنصات الثلاثة: Expo Frontend ، NextJS Frontend ، NextJS Serverside.
• دعم رائع ومساعدة من فريقهم على Discord (من التجربة الشخصية).

سلبيات

• لا تفعل الرسائل القصيرة ما لم تدفع: سلبي كبير للجوال ولكن يعوضه عن طريق OAUTH السهل.
• خطة قسط باهظة الثمن مقارنة بالبدائل.
• سيف مزدوج الحواف من كونها ناشئة.

أي ديسيبل؟

أوصيك إما أن تدور حول مثيل Postgres على السكك الحديدية أو استخدام Supabase ، يمكنك إحضارها لأنها لا تهم كثيرًا.

؟ كيف تستخدم هذا؟

1. إعداد المشروع

• yarn install لتثبيت الحزم وبناء المشروع.
• قم بإعداد متغيرات البيئة الخاصة بك بشكل صحيح عن طريق تكرار ملف .env.example ، وإزالة .example ، وإدخال متغيرات البيئة الخاصة بك.
  • Clerk_secret_key & next_public_clerk_publishable_key : اشترك على كاتب للحصول على مفاتيح API الخاصة بك
  • database_url ( اختياري ): قم بتدوير مثيل postgres مع السكك الحديدية أو supabase (نحن نستخدم sqllite افتراضيًا الآن ، لذلك لا يتعين عليك القيام بذلك إلا إذا كنت مستعدًا للإنتاج!)
• yarn db-push لدفع مخططنا المنشور إلى ديسيبل لدينا.

2. ابدأ مشروعك

• yarn web لبدء خادم ويب ديف.
• yarn native لتشغيل على iOS أو Android. ملاحظة : لكي يعمل هذا ، ستحتاج إلى تطبيق الويب الخاص بك على LocalHost: 3000 ، تذكر أن تطبيق NextJS الخاص بك هو أيضًا الواجهة الخلفية الخاصة بك!
• yarn studio لبدء استوديو Prisma الخاص بك. PS : سيظهر استعلام TRPC مثال example_entry التي يمكنك حذفها مع example_user المتصل.
• yarn dev لبدء جميع الحزم والتطبيقات في وقت واحد.

3. إضافة شاشة جديدة

لأتمتة العملية الموضحة أدناه ، يمكنك استخدام T3-CUA Tools ، المتوفر أيضًا في Marketplace. سيقوم بإنشاء الملفات ويضيف لك رمز الواردات والملاحة اللازمة لك.

• قم بإنشاء شاشات جديدة في packages/app/features/ .
• بالنسبة للمكونات الأصغر لا تتردد في وضعها في packages/ui/ .
• بالنسبة للمسارات الجديدة ، أضف routeName.ts جديد في packages/api/src/router/ وتأكد من دمجه في جهاز توجيه تطبيق index.ts .
• عند إضافة صفحة أو شاشة جديدة ، ستحتاج إلى إضافة الصفحة إلى كل من Expo و NextJs:
  • معرض
    • انتقل إلى apps/expo/app/ وقم بإنشاء routeName.tsx جديد. TTSX يقوم باستيراد العنصر الخاص بك من /app/features/screenName/ .
  • التالي
    • انتقل إلى apps/next/pages/ ، قم بإنشاء مجلد جديد يحمل الاسم هو مسارك index.tsx /app/features/screenName/

الانتشار إلى Vercel

بعد أن تقوم بإنشاء مشروع جديد على Vercel وربطه مع Github Repo ، عليك إدخال متغيرات البيئة الخاصة بك:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(تجاهل أمر التثبيت واحد الآن)

التعليمات

1. أين يجب أن أقوم بتثبيت الحزم؟ إذا كان يحتوي على رمز أصلي ، فيجب عليك تثبيته في مجلد /expo .

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