إنشاء تطبيق ثابت باستخدام Gatsby

  • 2 دقائق

مواقع الويب الثابتة موجودة منذ بداية شبكة الإنترنت. وتتكون مواقع الويب الثابتة، في جوهرها، من HTML وCSS وJavaScript، والتي يتم تقديمها للمستخدم. منشئ موقع ثابت (SSG) هو أداة يمكنها استخدام الأدوات من المستوى الأعلى وإنشاء هذه الأصول الثابتة.

Gatsby هي واحدة من هذه الأدوات التي يمكننا استخدامها لإنشاء موقع ويب ثابت. وتستخدم React كطبقة واجهة مستخدم وGraphQL كلغة استعلام للوصول إلى البيانات المتوفرة داخل الموقع.

تم بناء Gatsby اعتمادًا على React وReact Router، مما يسمح لك بخلط الأجزاء الديناميكية والثابتة معًا. وهكذا، حتى إذا كانت أداة لإنتاج المواقع الثابتة في المقام الأول، فإنها قادرة تمامًا على التحويل البرمجي لمشروع React. وبالتالي، يمكن أن يحل Gatsby محل الإعداد العادي لإنتاج التطبيقات باستخدام React، شريطة أن يتوفر لك جزء من تطبيق React الذي تريد جعله ثابتًا.

Gatsby لديه نظام ذكي من المكونات الإضافية التي يمكن أن تساعد على استيراد البيانات من أنواع مختلفة من مصادر البيانات. يمكن أن تتنوع مصادر البيانات بدايةً من قواعد البيانات إلى JSON ووصولاً إلى نظام الملفات المحلي الخاص بك. يمكن عندئذٍ إقران كل هذه البيانات المستوردة بأصول ثابتة مثل HTML وCSS لإنتاج الصفحات الثابتة التي تريد أن تقدمها لأي مستخدم. بفضل نظام المكون الإضافي، يمكن دعم المزيد والمزيد من أنواع مختلفة من مصادر البيانات ويتم دعمها بمجرد أن يكتب فريق Gatsby أو المجتمع مكونًا إضافيًا جديدًا.

كيف يفعل Gatsby هذا؟ في مرحلة ما قبل التحويل البرمجي، يقوم كل مكون إضافي بفحص مصدر. يمكن أن يكون المصدر نظام ملفات أو قاعدة بيانات أو، على سبيل المثال، مجموعة من ملفات JSON. تتم قراءة البيانات وإضافتها إلى رسم بياني للبيانات. الرسم البياني هو شجرة من العقد داخل الذاكرة يمكنك الاستعلام عنها. يسمح لك Gatsby عندئذٍ بالاستعلام عن هذه العقد عند المتابعة إلى تأليف صفحاتك الثابتة في تطبيقك.

تثبيت Gatsby واستخدامه

Gatsby متاح عبر حزمة gatsby-cli JavaScript. لديك طريقتان لاستخدامه:

  • تثبيت عمومي، قم بتشغيل npm install gatsby-cli -g، وهذا سيقوم بتثبيت الملف التنفيذي gatsby على الجهاز الخاص بك. يمكنك الآن استخدام Gatsby بهذه الطريقة، gatsby <command>.
  • استخدام npx، npx هو أداة تجعل من الممكن تشغيل الملفات التنفيذية دون تثبيتها أولاً على الجهاز الخاص بك. إذا استخدمت هذه الطريقة للتثبيت، تحتاج إلى إضافة بادئة للاستدعاءات الخاصة بك إلى Gatsby بهذه الطريقة npx gatsby <command>.

هذه الأوامر الثلاثة تتيح لك بدء العمل باستخدام تطبيق Gatsby الجديد:

  • gatsby new <project name> <optional GitHub URL>: استخدم هذا الأمر لإنشاء مشروع جديد. يستخدم اسمًا كوسيطة إلزامية واختياريًا URL GitHub كوسيطة ثانوية. يؤدي استخدام الوسيطة الأخيرة إلى إنشاء مشروع Gatsby استنادًا إلى مشروع Gatsby الموجود بالفعل على GitHub.
  • gatsby develop: ابدأ تشغيل خادم تطوير حيث يمكن الوصول إلى المشروع الخاص بك. خادم التطوير هو خادم HTTP قادر على استضافة ملفاتك حتى تتمكن من الوصول إليها من المستعرض لديك. سوف تجد تطبيق Gatsby الخاص بك يعمل على العنوان http://localhost:8000. كما سيبدأ تشغيل مثيل من GraphiQL، وهو أداة تطوير رسومية يمكنك استخدامها لاستكشاف البيانات المتاحة لتطبيقك وبناء الاستعلامات. يمكنك استخدام GraphiQL عن طريق الاستعراض إلى http://localhost:8000/___graphql.
  • gatsby build: قم بإنشاء تمثيل ثابت قابل للنشر للتطبيق الخاص بك. كل ما ينتج من HTML، وJavaScript، وCSS سينتهي في الدليل الفرعي public.

تشريح المشروع

يتكون أي مشروع Gatsby مدعوم من بعض الأجزاء التي يجب عليك فهمها للعمل باستخدام Gatsby بفعالية وكفاءة.

  • /pages: ستصبح مكونات React الموضوعة في هذا الدليل مسارات وصفحات.
  • gatsby-config.js: ملف تكوين. سيتم استخدام جزء من التكوين لإعداد المكونات الإضافية وتكوينها وجزء منه هو البيانات العمومية التي يمكنك عرضها على صفحاتك.
  • gatsby-node.js: ملف يستخدم لتنفيذ أساليب دورة الحياة لواجهة برمجة التطبيقات في Gatsby. يمكنك هنا أن تفعل أشياء، مثل توريد الملفات، وإضافة/تحديث العقد على رسم Gatsby البياني، وحتى جلب البيانات من الخارج التي ينبغي أن تكون جزءًا من موقع الويب.
  • /styles: يتيح لك Gatsby تطبيق الأساليب بعدة طرق، كل شيء بدايةً من CSS المستوردة، وSASS، وLESS إلى وحدات CSS.
  • /components: خاصة بمكونات React المقصود أن تكون مكونات المساعد مثل العنوان والتخطيط والمزيد.