الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل
نظام تشغيل الوكالة - أكمل مشروع Nuxt3 + Directus

AgencyOS

AgencyOS هو كل ما تحتاجه لإطلاق وكالتك، أو تحسين الأدوات لشركتك الحالية. موقع / تطبيق Nuxt 3 + واجهة Directus الخلفية.

تم تقديمه لك من خلال الشراكة السحرية بين Directus وNuxtLabs.

مقدمة · الميزات · ؟ التثبيت والتطوير · ? النشر · ؟ مكدس التكنولوجيا · ؟ مساعدة المجتمع · ❤️ المساهمة



مقدمة

أحد أسهل أجزاء إدارة وكالة رقمية ناجحة هو القيام بالعمل الفعلي . أعني - من منا لا يحب أن يبذل قصارى جهده للتعاون والتصميم وبناء أشياء مذهلة للعملاء؟

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

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

AgencyOS هو نظام تشغيل مفتوح المصدر لمساعدتك في تشغيل (أو بدء) وكالتك الرقمية. إنه مبني على أدوات مفتوحة المصدر (Nuxt وDirectus) ومصمم ليكون قابلاً للاختراق بنسبة 100% حتى تتمكن من بناء الحل الخاص بك، وتطبيق إدارة المشروع الخاص بك، ونظام التشغيل الخاص بكالتك - في وقت قياسي.

لماذا؟

يتمتع عدد لا بأس به من الأشخاص في فريق Directus الأساسي بخبرة في إدارة الوكالات ونعلم أن الأمر ليس مجرد قوس قزح وأشعة الشمس. لقد أردنا إنشاء أداة يمكن لشركائنا من الوكالات (وأي وكالة أخرى) الحصول على قيمة كبيرة منها. تم إنشاؤه أيضًا كمثال كامل لعرض قوة ومرونة Directus كمنصة لإنشاء تطبيقاتك وأدواتك الخاصة بسرعة.

ابدء

  • → اقرأ تعليمات التثبيت
  • → عرض الموقع التجريبي
  • → شاهد دروس الفيديو

سمات

موقع إلكتروني

عندما تكون مجتهدًا في تقديم الخدمات للعملاء، فإن موقعك الإلكتروني يميل إلى المعاناة. يتضمن AgencyOS قالب موقع ويب جميلاً يمكن تخصيصه بسهولة ومتكامل بالفعل مع نظام إدارة المحتوى بدون رأس سهل الاستخدام.

إنه ليس قالب بداية. إنه مشروع موقع ويب كامل يمكنك تخصيصه أو إلهامك لبناء حل أفضل.

  • منشئ الصفحات الديناميكي مع المعاينة المباشرة
  • منشورات وفئات المدونة
  • إنشاء نموذج ديناميكي مع التحقق من الصحة
  • إنشاء صور OG الديناميكية
  • دعم كامل لتحسين محركات البحث (SEO) خارج الصندوق – (العلامات الوصفية، وخريطة الموقع، وعمليات إعادة التوجيه، وJSON-LD، والمزيد)
  • وظيفة البحث العالمية
  • أدوات مساعدة شائعة لذلك لا تحتاج إلى تضمين حزمة أخرى
  • دعم خطوط جوجل
  • تم تكوين ESLint وPrettier مسبقًا
  • دعم الوضع المظلم الكامل
  • موضوع مع ملف التكوين السهل

إدارة علاقات العملاء / تعقب المشروع

إن الحفاظ على العلاقات المهمة مع العملاء لا يقع على عاتق فريق المبيعات فقط. فلماذا الحفاظ على أدوات منفصلة لإدارة المشاريع وإدارة علاقات العملاء؟ يتضمن AgencyOS نظام إدارة علاقات العملاء (CRM) قابلاً للتخصيص بالكامل حتى تتمكن من العمل بالطريقة التي تريدها.

  • المنظمات والاتصالات
  • خط أنابيب المبيعات والأنشطة
  • منشئ مقترحات المشاريع الديناميكية
  • إدارة المشاريع والمهام
  • قوالب المشروع قابلة للتخصيص
  • الفواتير وتتبع النفقات
  • قم بتخصيص وإنشاء لوحات المعلومات الخاصة بك دون الحاجة إلى كتابة التعليمات البرمجية
  • أتمتة العمليات باستخدام Directus Flows

بوابة العميل

ربما يكون التواصل هو المحرك الأكبر لنجاح المشروع. من خلال بوابة العميل الخاصة بـ AgencyOS - يمكنك ضمان بقاء عملائك على اطلاع بأحدث المستجدات وحتى تحميلهم المسؤولية عن تسليم الملفات والمعلومات التي يحتاجونها لإكمال مشروعهم

  • بوابة خاصة معتمدة للعملاء للخدمة الذاتية
  • يمكن للعملاء عرض مشاريعهم ومهامهم وملفاتهم
  • يمكن للعملاء دفع الفواتير من خلال Stripe
  • تعيين المهام للعملاء كجزء من قوالب المشروع


؟ التثبيت والتطوير

هناك قسمان رئيسيان في AgencyOS - الواجهة الخلفية وواجهات برمجة التطبيقات المدعومة من Directus وموقع الويب الأمامي والتطبيق المدعوم من Nuxt.

؟ Directus - الواجهة الخلفية + نظام إدارة المحتوى بدون رأس

1 - إنشاء مشروع Directus

هناك طريقتان يمكنك من خلالهما إعداد مشروع Directus بسرعة لاستخدامه في AgencyOS.

1a - قم بالتسجيل للحصول على حساب Directus Cloud

https://directus.cloud/register

هذا هو الزر السهل. ليس عليك العبث مع Docker أو معرفة كيفية نشر مثيل Directus على AWS أو Digital Ocean أو مضيفين مشابهين. بضع نقرات وفي أقل من دقيقتين سيكون لديك مشروع Directus جاهز للانطلاق.

يقدم Directus نسخة تجريبية مجانية مدتها 14 يومًا للمشروعات السحابية، وهو ما يعد متسعًا من الوقت لمنح AgencyOS فرصة تجربة. ملاحظة: بعد انتهاء الفترة التجريبية التي تبلغ 14 يومًا، سيتعين عليك الدفع مقابل الخدمة. راجع صفحة تسعير Directus للحصول على أحدث معلومات التسعير.

أو

1ب - الاستضافة الذاتية لمثيل Directus

إذا كنت تفضل استضافة Directus ذاتيًا، فنوصيك بشدة بالقيام بذلك باستخدام Docker.

ملاحظة هامة : هذا إصدار مجتمعي مجاني ومفتوح المصدر. لذلك، لا يمكننا تقديم الدعم للمثيلات المستضافة ذاتيًا دون ترخيص Enterprise ذاتي الاستضافة أو اتفاقية دعم رسمية. تعرف على المزيد واتصل بفريقنا للحصول على تفاصيل حول Enterprise Self-Hosted.

ستجد docker-compose.yaml داخل الريبو الذي يمكنك استخدامه لتدوير نسخة محلية من Directus بسرعة للاختبار باستخدامها. يجب أن يكون Docker مثبتًا ويعمل على جهازك أولاً. يمكنك تحميله هنا .

PostgreSQL هو بائع قواعد البيانات المُختبر والمفضل لهذا المشروع. تم اختبار المشروع والتحقق من أنه يعمل مقابل ملف docker-compose.yaml المضمن في الريبو. يدعم Directus العديد من بائعي قواعد بيانات SQL المختلفين، لكننا نختبر هذا المشروع فقط مقابل PostgreSQL. 

 # Navigate to the .directus directory
$ cd .directus

# Run docker compose
$ docker compose up

# Docker does it's thing and your Directus project will be available at http://localhost:8055/ or http://0.0.0.0:8055/

يمكنك العثور على مزيد من تعليمات التثبيت باستخدام Docker هنا في وثائق Directus.

لنشر المشروع مباشرة، يرجى مراجعة قسم النشر.

2 - قم بإنشاء رمز مميز ثابت للمستخدم المسؤول

أنت بحاجة إلى الرمز الثابت لبذر المشروع.

  1. انتقل إلى دليل المستخدم
  2. اختر المستخدم الإداري
  3. قم بالتمرير لأسفل إلى حقل الرمز المميز
  4. إنشاء رمز مميز ونسخه
  5. احفظ المستخدم (لا تنس الحفظ لأنك ستحصل على خطأ يوضح أن الرمز المميز غير صالح!)

3 - تطبيق قالب AgencyOS

افتح جهازك، وقم بتشغيل الأمر التالي، واتبع التعليمات ببساطة.

npx directus-template-cli@latest apply

يضمن لك استخدام العلامة @latest تنزيل أحدث إصدار من قوالبنا - في حالة قيامك بتشغيل الأمر مسبقًا.

  1. اختر قالب Agency OS .
  2. الصق عنوان URL في مثيل Directus الخاص بك
  3. قم بلصق الرمز المميز الثابت للمستخدم المسؤول
  4. انتظر حتى ينتهي البرنامج النصي

يمكنك معرفة المزيد حول أداة Directus Template CLI هنا. ملاحظة : قد يستغرق تشغيل البرنامج النصي للقالب بضع دقائق إذا كنت تستخدم مثيل Directus مستضافًا عن بعد.



⛰️ Nuxt - الواجهة الأمامية

بالنسبة لموقع الويب الخاص بك وبوابة العميل، يستخدم AgencyOS Nuxt كإطار عمل الواجهة الأمامية المفضل.

1 - استنساخ الريبو

استخدم هذا القالب

أو من المحطة

git clone https://github.com/directus-community/agency-os.git your-project

انتقل إلى المشروع

cd your-project

2- قم بإصلاح ملف .env الخاص بك

  • قم بتغيير اسم الملف env.example إلى .env
  • أضف عنوان url إلى مثيل Directus الخاص بك
  • أضف الرمز المميز الثابت للمستخدم الإداري الذي قمت بإنشائه أعلاه

يجب أن يبدو ملف .env الخاص بك مشابهًا لهذا. 

 # Directus Setup
DIRECTUS_URL = " https://your-instance.directus.app "
DIRECTUS_SERVER_TOKEN = " your_directus_server_token_for_server_only_routes "
SITE_URL = " http://localhost:3000 "

# Stripe Setup (If you want to allow payments within the portal)
STRIPE_SECRET_KEY = sk_test_xxxxxxxxxxxxxxx
STRIPE_PUBLISHABLE_KEY = pk_xxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET = whsec_xxxxxxxxxxxxxxx

3 - تثبيت التبعيات الخاصة بك

pnpm i

4- قم بتشغيل خادم التطوير

pnpm dev

http://localhost:3000

5- قم بالبناء للإنتاج عندما تكون جاهزًا

pnpm build


؟ النشر

نشر Nuxt - الواجهة الأمامية

يرجى التحقق من وثائق نشر Nuxt الرسمية لمقدمي الخدمة المدعومين. إليك بعض المضيفين الأكثر شهرة الذين يعملون بشكل جيد مع Nuxt.

خيارات بنقرة واحدة

ملحوظة: Vercel هو هدف النشر الموصى به لنظام AgencyOS في الوقت الحالي بسبب بعض مشكلات الذاكرة في عملية الإنشاء على Netlify.

فيرسل

نيتليفي

نشر Directus - الواجهة الخلفية

إذا كنت لا ترغب في العبث مع DevOps أو تشغيل الخوادم، فيمكنك تشغيل مشروع جديد على Directus Cloud في حوالي 90 ثانية.

إذا كنت تفضل الاستضافة الذاتية، فإن Docker هي الطريقة الموصى بها لنشر Directus. يرجى مراجعة دليل Directus Docker الرسمي

موارد للاستضافة الذاتية Directus

  • انشر Directus على DigitalOcean باستخدام Docker
  • نشر Directus على السكك الحديدية


؟ مكدس التكنولوجيا

نوكست

أنشئ تطبيق Vue.js التالي بثقة باستخدام Nuxt. إطار عمل مفتوح المصدر بموجب ترخيص MIT يجعل تطوير الويب بسيطًا وقويًا. إطار عمل Vue الرائد الذي يتعامل مع التوجيه والعرض من جانب الخادم والمزيد.

اعرف المزيد عن نوكست


مباشر

Directus عبارة عن نظام إدارة محتوى بدون رأس يعمل على تحويل قاعدة بيانات SQL الخاصة بك على الفور إلى واجهات برمجة تطبيقات REST وGraphQL ويمنحك تطبيقًا جميلاً وبديهيًا بدون تعليمات برمجية لإدارة كل المحتوى والبيانات الخاصة بك. ولكنه أيضًا أكثر من مجرد نظام إدارة محتوى بدون رأس. إنها منصة بيانات مفتوحة تحتوي على جميع الأدوات التي تحتاجها لإنشاء بياناتك وإدارتها وتقديمها وتصورها وحتى أتمتتها لمشروعك التالي على الويب أو الهاتف المحمول أو الرقمي.

اعرف المزيد عن Directus

واجهة المستخدم

  • Nuxt UI - مكونات مصممة بالكامل وقابلة للتخصيص لـ Nuxt. Nuxt UI هي مكتبة مكونات واجهة المستخدم الرسمية لـ Nuxt.
  • Tailwind CSS – إطار عمل Utility-first CSS الذي يسمح لك ببناء المواقع بسرعة والحفاظ على الاتساق بين أعضاء الفريق. هناك العديد من مكونات Tailwind الإضافية المثبتة والجاهزة للاستخدام أيضًا - الطباعة والنماذج.
  • واجهة مستخدم مقطوعة الرأس - مكونات واجهة مستخدم غير مصممة تمامًا ويمكن الوصول إليها بالكامل.
  • FormKit – مكتبة نماذج لـ Vue توفر لك ساعات من الوقت عن طريق تبسيط عملية إنشاء النموذج. يتضمن معالجة الأخطاء، والتحقق من الصحة، والموضوعات، وحتى إنشاء مخطط خارج الصندوق.
  • Nuxt Icon - يضيف مكون <Icon> الذي يسمح لك باستخدام الكثير من الرموز. انظر الرموز المتاحة هنا.

المرافق

  • VueUse – مجموعة من الأدوات المساعدة لتكوين Vue. تم تثبيته وتهيئته بالفعل حتى تتمكن من استيراد أي من العناصر القابلة للتركيب في مكتبتهم على الفور.
  • VueUse Motion – العناصر المركبة التي تحرك مكوناتك. يجعل من السهل تقديم رسوم متحركة رائعة بجهد أقل.

؟ مساعدة المجتمع

للحصول على مساعدة المجتمع أو الدعم، يرجى مراجعة خادم Directus Discord.

  • Directus Discord – انضم إلى أكثر من 10 آلاف من المطورين وأعضاء المجتمع لطرح الأسئلة والمناقشة المباشرة حول Directus.
  • نوكست الخلاف

❤️ المساهمة

AgencyOS هو مشروع موجه نحو المجتمع، لذا نود أن نحصل على مساهماتك.

وإليك كيف يمكنك المساهمة:

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

شكرا ل

تم إنشاء AgencyOS بواسطة Bryant Gillespie (@bryantgillespie). ولكن الشكر الجزيل واجب عليك ...

  • @rijkvanzanten و@benhaynes لبناء Directus وإشراكي في الرحلة.
  • @atinux و@alexchopin لإنشاء إطار عمل Nuxt.
  • @intevel و@becem-gharbi لكل من وحدات nuxt-directus المنفصلة التي كانت بمثابة مصدر للإلهام.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل