كيفية إنشاء تطبيق Nuxt ونشره؟

Nuxt.js هو إطار عمل مفتوح المصدر مصنوع على رأس Vue.js و Nitro و Vite، والذي يسمح لك بتطوير تطبيقات الويب.

يمكّن Nuxt.js المستوحى من Next.js (إطار عمل React للتقديم من جانب الخادم)، يمكّن Nuxt.js المطورين من تصميم تطبيقات ويب سريعة من خلال تطبيق أوضاع عرض مختلفة.

تم إصدار Nuxt.js في عام 2016، وقد حظي بقبول واسع بين المطورين نظرًا لفلسفته الصديقة للمطورين وميزاته الغنية.

مزايا Nuxt.js

يقدم Nuxt.js العديد من المزايا التي تجعله خيارًا مقنعًا لتطوير Vue.js:

التقديم العالمي

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

يساعد ذلك محركات البحث على الزحف إلى موقعك الإلكتروني بشكل أسرع، مما يؤدي إلى تحسين تحسين محركات البحث.

ثم يتحول Nuxt.js بسلاسة إلى عرض من جانب العميل (SPA) للتنقل بين الصفحات داخل تطبيقك. وهذا يجعل الأمور سريعة وسريعة الاستجابة، تمامًا كما تتوقع من موقع إلكتروني حديث.

أداء مُحسَّن من خلال الترطيب وتقسيم الشفرة

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

على غرار Next.js، يقوم Nuxt بتقسيم الملفات تلقائيًا إلى حزم أصغر بناءً على المسارات.

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

وهذا يعني تقليل استخدام موارد النطاق الترددي وتحسين تجربة المستخدم.

توجيه مدمج

يتعامل Nuxt.js، بشكل افتراضي، مع المسارات من خلال التوجيه المستند إلى الملفات، مما يبسّط التنقل وإدارة المسار داخل تطبيقك.

كما يتيح لك أيضاً اختيار تكوين مساراتك ديناميكياً لسيناريوهات توجيه أكثر تعقيداً.

مسارات واجهة برمجة التطبيقات

يتيح لك Nuxt.js تخطي إعداد خادم منفصل بالكامل للمهام البسيطة! يحتوي على اختصارات مدمجة تسمى مسارات API.

يمكن لمسارات واجهة برمجة التطبيقات التعامل مع جلب البيانات أثناء العرض من جانب الخادم، ودعم واجهات برمجة تطبيقات RESTful و GraphQL. هذا يجعل تطبيقك يبدو سريعًا ويساعد محركات البحث على فهم محتوى تطبيقك بشكل أفضل.

حدود Nuxt.js

على الرغم من أن Nuxt.js يقدم تجربة تطوير قوية، إلا أن هناك بعض القيود التي يجب مراعاتها:

منحنى التعلم

يقدم Nuxt.js مفاهيم تختلف عن تطوير Vue.js التقليدي. كونك جديدًا على Nuxt.js يتطلب وقتًا للتكيف مع بنيته وميزاته الخاصة.

يوفر Nuxt أيضًا نظامًا بيئيًا واسعًا من الأدوات والمكتبات والإضافات. يمكن أن يضيف التعرف على هذه الخيارات إلى منحنى التعلم الأولي.

النظام البيئي المحدود

على عكس أطر العمل الرئيسية الأخرى مثل React و Angular، فإن Nuxt حديثة العهد نسبيًا. ونتيجة لذلك، لا يزال نظامها البيئي للمكتبات والإضافات الخارجية ينمو.

ستحتاج إلى إنشاء حلول مخصصة لتلبية متطلبات معينة في مواقف محددة.

التعقيد في التقديم من جانب الخادم

على الرغم من أن التصيير من جانب الخادم (SSR) ميزة قوية في Nuxt.js، إلا أنه يمكن أن يجعل تطوير التطبيق أكثر تعقيدًا. بالمقارنة مع طرق التصيير الأكثر مباشرة، فإن SSR لديها منحنى تعليمي أكثر حدة.

كما أن تنفيذ SSR بفعالية يتطلب تخطيطًا دقيقًا وإدارة دقيقة لجلب البيانات وحالة التطبيق.

يمكن أن يؤدي ذلك إلى أخطاء أو تناقضات محتملة بين المحتوى الذي تم عرضه في البداية على الخادم والإصدار النهائي التفاعلي الذي تم عرضه على العميل.

إنشاء تطبيق Nuxt.js ونشره على Back4app

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

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

بالنسبة للواجهة الخلفية لهذا المشروع، سنستخدم قاعدة بيانات PostgreSQL المدمجة في Back4app لتخزين معلومات الاتصال مثل الاسم والبريد الإلكتروني وأرقام الهواتف والشركة.

ستصبح هذه العملية أسهل بمساعدة وكيل الذكاء الاصطناعي الخاص بـ Back4App.

بالنسبة للواجهة الأمامية للمشروع، سنستخدم Nuxt.js لإنشاء واجهة مستخدم التطبيق. بعد ذلك، سنقوم بتوصيل الواجهة الأمامية والخلفية باستخدام Parse SDK قبل نشر واجهة Nuxt الأمامية باستخدام حاويات Back4App.

هيا بنا نبدأ.

إنشاء الواجهة الخلفية لتطبيق Nuxt.js الخاص بك

الخطوة الأولى لإنشاء تطبيق Nuxt هي تجهيز الواجهة الخلفية.

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

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

أعط تطبيقك اسمًا وحدد خيار PostgreSQL، والذي سنستخدمه لقاعدة البيانات.

بعد النقر على زر “إنشاء“، سيستغرق Back4app بعض الوقت لإعداد تطبيقك، بما في ذلك قاعدة البيانات.

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

لهيكلة تصميم قاعدة بيانات PostgreSQL التي ستستخدمها للتطبيق، انتقل إلى وكيل الذكاء الاصطناعي في Back4app واكتب في المطالبة التالية.

Create database tables in my Back4app app; do you need me to provide any information?

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

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

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

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

بعد ذلك، اطلب من وكيل الذكاء الاصطناعي ملء قاعدة بياناتك ببيانات الاختبار باستخدام المطالبة أدناه.

Populate my contact database with some test data with around 10 test contacts with variations in their information.

الآن، لديك الآن بيانات اختبار لتعمل عليها.

إنشاء الرمز السحابي

تتيح لك ميزة التعليمات البرمجية السحابية في Back4App تشغيل كود JavaScript المخصص مباشرةً على خوادم Back4App.

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

الآن لديك قاعدة بيانات اختبارية مملوءة بجهات الاتصال، حان الوقت لتنفيذ ميزات نظام إدارة جهات الاتصال الخاص بك.

في هذا القسم، ستتعلم في هذا القسم كيفية إنشاء شيفرة سحابية لتنفيذ ميزات معينة لتطبيقك، مثل:

• عرض جميع جهات الاتصال
• إنشاء جهات اتصال جديدة
• حذف جهات الاتصال

ستنفذ هذه الميزات باستخدام وكيل Back4App AI Agent. دعنا نبدأ.

لجلب جميع الكتب من المكتبة، قم بتزويد وكيل Back4App AI بالمطالبة التالية لإنشاء الرمز السحابي المطلوب.

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.

بعد ذلك، ستقوم أيضًا بتكليف وكيل الذكاء الاصطناعي Back4App بإنشاء جهات اتصال جديدة عن طريق تمرير المطالبة التالية:

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.

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

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.

للتحقق مما إذا كان الوكيل قد أنشأ وظائف السحابة بشكل صحيح، راجع ملف main.js الموجود في نهاية مسار التنقل هذا.

لوحة تحكم Back4app ← كود السحابة ← الوظائف واستضافة الويب ← السحابة ← main.js.

يجب أن ترى الدوال الثلاث التي حددتها في نفس الملف main.js للتأكد من إنشاء الدوال السحابية بشكل صحيح.

بناء الواجهة الأمامية للتطبيق الخاص بك

سنُنشئ واجهة أمامية للتفاعل مع جميع وظائف التعليمات البرمجية السحابية التي أنشأناها. سننشئ الواجهة الأمامية باستخدام Nuxt.js.

للبدء في تطوير الواجهة الأمامية، قم بتشغيل التعليمات البرمجية التالية بشكل تسلسلي في طرفية الدليل المفضل لديك:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

ستعمل هذه الأسطر من التعليمات البرمجية على تهيئة تطبيق Nuxt باستخدام b4a_nuxt_app كاسم له، وبعد ذلك سيتم تثبيت جميع الحزم والتبعيات اللازمة لكي يعمل تطبيقك بشكل صحيح.

بعد تشغيل الأوامر المذكورة أعلاه في جهازك الطرفي، يمكنك تثبيت بعض حزم npm للمساعدة في تصميم تطبيقك. قم بتشغيل أوامر npm التالية بشكل متسلسل في جهازك الطرفي لتثبيت هذه الحزم:

npm install sass
npm install -D tailwindcss postcss autoprefixer

ستعمل الأسطر البرمجية المذكورة أعلاه على تثبيت SASS، وهو معالج CSS المسبق، و TailwindCSS، وهو إطار عمل CSS مفيد. ستستخدم هذه الحزم لتصميم تطبيقك بسرعة.

بعد ذلك، ستقوم بتهيئة TailwindCSS في تطبيقك عن طريق تشغيل الأمر التالي:

npx tailwindcss init

يقوم الرمز أعلاه بإنشاء ملف tailwind.config.js في الدليل الجذر لتطبيق Nuxt الخاص بك.

يعد ملف tailwind.config.js هذا هو نقطة التكوين المركزية لتكامل Tailwind CSS الخاص بك داخل Nuxt.js. فهو يسمح لك بتخصيص جوانب مختلفة من Tailwind CSS لتناسب متطلبات مشروعك المحددة.

افتح تطبيقك في محرر النصوص المفضل لديك (VSCode، Eclipse، Sublime Text). انتقل إلى ملف tailwind.config.js وبنيته ليبدو مثل كتلة التعليمات البرمجية أدناه:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

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

بعد ذلك، أنشئ مجلد أصول في الدليل الجذر لتطبيقك. في المجلد، أنشئ ملف main.scss لإضافة أنماط إلى تطبيقك. الصق الشيفرة أدناه في الملف main.scss:

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

تستورد كتلة التعليمات البرمجية أعلاه مختلفين من Google Fonts، وتدمج Tailwind CSS لعناصر التصميم، وتعيِّن لون خلفية رمادي فاتح لتطبيق الويب الخاص بك، وتحدد فئات مخصصة لتطبيق الخطوط المستوردة بكفاءة.

يوفر ملف main.scss هذا قاعدة صلبة لبناء النمط المرئي لتطبيق الويب الخاص بك.

في ملف nuxt.config.ts الخاص بك، والذي يضم تكوينات تطبيق Nuxt الخاص بك، الصق الشيفرة التالية أدناه:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

في ملف تكوين Nuxt الخاص بك، قمت بتحديد ملف main.scss كملف CSS الوحيد الذي سيستخدمه تطبيق Nuxt الخاص بك. لقد قمت أيضًا بتعطيل التقديم من جانب الخادم لتطبيق Nuxt الخاص بك.

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

لبناء واجهة المستخدم لهذا التطبيق، سننشئ ثلاث صفحات داخل مجلد صفحات في جذر المشروع. هذه الصفحات ستكون:

• index.vue: هذه هي الصفحة الرئيسية التي تقدم الغرض من التطبيق.
• contactForm.vue: تتيح هذه الصفحة للمستخدمين إنشاء جهات اتصال جديدة وحفظها في قاعدة البيانات.
• قائمة جهات الاتصال: تسرد هذه الصفحة جميع جهات الاتصال المخزنة في قاعدة البيانات.

والآن، في ملف index.vue الخاص بك، الصق الشيفرة التالية:

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

تقوم كتلة التعليمات البرمجية هذه بإنشاء صفحة الترحيب لتطبيق إدارة جهات الاتصال الخاص بك.

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

أيضًا، في ملف contactForm.vue.vue الخاص بك، الصق الكود التالي:

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

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

يلتقط عنصر النموذج تفاصيل جهة الاتصال (الاسم، البريد الإلكتروني، الهاتف، العنوان، الشركة) باستخدام حقول إدخال مختلفة.

يرتبط كل حقل إدخال بخاصية في كائن جهة الاتصال(النموذج الافتراضي) ويستخدم أنواع الإدخال المناسبة للتحقق من الصحة.

سيؤدي زر الإرسال إلى تشغيل دالة createContact، والتي سنقوم بتنفيذها في القسم التالي. ستعرض منطقة الرسائل أيضًا ملاحظات (نجاح أو خطأ) بناءً على متغيري الرسالة و isError.

تستخدم كتلة الشيفرة البرمجية مرجع Vue لإنشاء 3 متغيرات تفاعلية:

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

تحدد قاعدة نمط بسيطة مظهر رسائل الخطأ باستخدام فئة .error في كتلة التعليمات البرمجية.

أيضًا، في ملف contactsList.vue الخاص بك، الصق الشيفرة التالية:

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

تعرض كتلة التعليمات البرمجية أعلاه قائمة بجهات الاتصال في تطبيقك. فيما يلي النقاط الرئيسية:

ينشئ مكوِّن الكود قسمًا بعنوان “جهات الاتصال الخاصة بك” ويستخدم تخطيط شبكة متجاوب (3 أعمدة) لعرض جهات الاتصال.

يقوم بالتمرير عبر مصفوفة جهات الاتصال باستخدام v-for ويعرض معلومات كل جهة اتصال (الاسم، البريد الإلكتروني، الهاتف، العنوان، الشركة).

يحتوي كل إدخال لجهة اتصال على زر “حذف” الذي سيؤدي إلى تشغيل دالة DeleteContact، والتي سنقوم بتنفيذها لاحقًا.

تستخدم كتلة التعليمات البرمجية مصفوفة تفاعلية(جهات الاتصال) لتخزين قائمة جهات الاتصال. يضمن ذلك تحديث واجهة المستخدم ديناميكيًا مع تغير البيانات. ستخزن مصفوفة جهات الاتصال البيانات التي جلبتها من قاعدة بيانات Back4app

الصق الشيفرة أدناه في ملف app.vue في الدليل الجذري لتضمين المسارات إلى جميع هذه الصفحات.

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

تحدد كتلة التعليمات البرمجية التخطيط العام لتطبيق Nuxt مع المكون المكوّن.

يحتوي مكوِّن التعليمات البرمجية على قائمة تنقل أفقية مع روابط لصفحة contactsList.vue وصفحة contactForm.vue.

تتضمّن كتلة الشيفرة أيضًا المكوّن وهو مكوِّن أساسي في Nuxt.js يُصيِّر محتوى الصفحة الحالية ديناميكيًا.

يضمن ذلك أن يعرض تطبيقك المحتوى المناسب بناءً على تنقل المستخدم داخل التطبيق.

توصيل أجزاء الواجهة الأمامية والخلفية لتطبيقك

لتوصيل تطبيق جهات اتصال Nuxt الخاص بك بقاعدة بيانات Back4app ومثيل الواجهة الخلفية، ستحتاج إلى تثبيت Parse SDK.

تعمل Parse SDK على الربط بين تطبيق الواجهة الأمامية (واجهة المستخدم) والواجهة الخلفية ل Back4App، مما يسمح لك بالتفاعل مع قواعد بيانات Back4App ووظائف السحابة.

لتثبيت Parse SDK، قم بتشغيل الأمر التالي في طرفية الدليل الجذر الخاص بك:

npm install parse

بعد التثبيت، تحتاج إلى تهيئة Parse من خلال الحصول على المعلومات التالية:

• معرّف التطبيق
• مفتاح JavaScript
• عنوان URL لخادم Back4app

يمكنك الحصول على هذه المعلومات بالانتقال إلى الأمان والمفاتيح في لوحة تحكم تطبيق Back4app الخاص بك. احتفظ بمعرف التطبيق ومفتاح JavaScript بأمان في تطبيقك.

والآن، عدِّل ملف app.vue لتهيئة Parse في تطبيقك:

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>

قم أيضًا بتعديل ملفي contactForm.vue و contactsList.vue لربط وظائف التعليمات البرمجية السحابية بالواجهة الأمامية لتطبيقك.

في صفحة contactForm.vue.vue الخاصة بك، الصق الكود التالي:

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

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

يتفاعل مع الواجهة الخلفية لتخزين معلومات الاتصال ويقدم ملاحظات للمستخدم بناءً على نجاح أو فشل العملية.

تحاول كتلة التعليمات البرمجية (مع كتلة محاولة الإمساك) تنفيذ دالة باسم createContact على خادم Back4App باستخدام Parse SDK(في انتظار Parse.Cloud.run('createContact، {...contact.value})). هذا يرسل معلومات جهة الاتصال(contact.value) إلى خادم Back4App للتخزين.

عند نجاح التخزين بنجاح، تظهر رسالة “تم إنشاء جهة الاتصال بنجاح!”، ويتم مسح النموذج، وإعادة تعيين كائن جهة الاتصال والسماح بإدخالات جديدة.

ومع ذلك، في حالة ظهور خطأ، تظهر رسالة خطأ غنية بالمعلومات، بما في ذلك تفاصيل من الخادم مع حروف القالب(${error.message}).

الصق الشيفرة التالية في ملف contactsList.vue الخاص بك:

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

يدير الرمز أعلاه جلب جهات الاتصال وحذفها لتطبيقك. يتفاعل مع Back4App Backend للتعامل مع تخزين البيانات واسترجاعها.

تحدد كتلة التعليمات البرمجية وظيفتين أساسيتين:

• جلب جهات الاتصال: تسترجع هذه الدالة غير المتزامنة قائمة جهات الاتصال من الواجهة الخلفية. تستخدم الدالة Parse.Cloud.run('getContacts')، وتستدعي الدالة البرمجية السحابية “getContacts” على خادم Back4App الخاص بك. يتم تخزين جهات الاتصال التي تم استرجاعها في مصفوفة تفاعلية باسم جهات الاتصال.

• حذف جهة اتصال: تتعامل هذه الدالة غير المتزامنة مع حذف جهة اتصال معينة. تأخذ معرف الكائن كوسيطة، وهو معرّف فريد لجهة الاتصال داخل قاعدة البيانات الخلفية. تستخدم الدالة Parse.Cloud.run('deleteContact، { objectId }) لاستدعاء الدالة البرمجية السحابية المسماة “حذف جهة اتصال”، وتمرير معرف الكائن المراد حذفه. عند النجاح، يقوم الرمز بتصفية مصفوفة جهات الاتصال المحلية لإزالة جهات الاتصال المحذوفة.

الآن بعد أن انتهيت من ربط الواجهة الأمامية والخلفية للتطبيق، يمكنك معاينة التطبيق عن طريق تشغيل الأمر npm أدناه.

npm run dev

ستلاحظ تحميل خادم Nuxt Nitro. بعد التحميل، يجب أن يكون التطبيق متاحاً على عنوان URL http://localhost:3000/. يجب أن ترى شاشة مشابهة للصورة أدناه عند الانتقال إلى عنوان URL.

بالانتقال إلى صفحة جهات الاتصال، يجب أن ترى مجموعة من جهات الاتصال. جهات الاتصال هذه هي البيانات الوهمية التي أنشأها لك وكيل Back4app AI أثناء إنشاء الواجهة الخلفية لـ Back4app.

بالنقر على رابط إضافة جهة اتصال، يجب أن ترى نموذجاً لإدخال تفاصيل جهة الاتصال الجديدة. على سبيل المثال:

يجب أن تلاحظ الحقول بوضوح بالنقر على زر “إرسال”. بالانتقال إلى صفحة جهات الاتصال، سترى جهة الاتصال التي تم إنشاؤها حديثاً.

نشر تطبيق الويب المدمج بالكامل

فيما يلي خطوات نشر تطبيق Nuxt. الآن بعد أن انتهيت من بناء التطبيق واختباره، يمكنك بعد ذلك نشر تطبيق Nuxt باستخدام حاويات Back4app لجعل تطبيقك عام.

لتسريع عملية النشر، اطلب من وكيل الذكاء الاصطناعي Back4app AI Agent التعليمات التالية:

Give me simplified steps to deploy my Nuxt application with Back4app containers

يجب أن ترى خطوات مشابهة للخطوات الموضحة أدناه.

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

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

في ملف Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]

أيضًا، في ملف .dockerignore:

node_modules
.nuxt

يحتوي ملف D ockerfile على تعليمات لبناء صورة Docker. يتضمن ملف Dockerfile خطوات التثبيت لتبعيات التطبيق الضرورية.

ملف .dockerignore هو ملف نصي بسيط يسرد أنماطًا لتوجيه Docker حول الملفات والمجلدات التي يجب استبعادها عند بناء الصورة.

والآن، لإنشاء صورة docker للتطبيق الخاص بك، قم بتشغيل أمر docker التالي في جهازك الطرفي:

docker build -t b4a_contacts_app .

تأكد من دفع تطبيقك إلى حساب GitHub الخاص بك قبل محاولة نشر التطبيق على Back4app. بمجرد دفع التطبيق، قم بدمج حساب GitHub الخاص بك مع Back4app.

يمكنك القيام بذلك باستخدام تطبيق Back4app Github. بعد دمج GitHub مع تطبيق Back4app، يمكنك الآن نشر تطبيقك.

انتقل إلى صفحة الحاويات من لوحة تحكم Back4app الخاصة بك.

ثم تنقر على زر “إنشاء تطبيق جديد” على الشاشة. ستقوم بعد ذلك بتحديد المستودع الذي تريد نشره، وتمنحه اسم b4a_contacts_app، ثم تقوم بإنشاء التطبيق. يجب أن يستغرق الأمر بعض الوقت لإنهاء النشر.

بعد النشر، يجب أن يكون تطبيقك المباشر متاحًا على عنوان URL هذا، https://b4acontactsapp1-5990olnw.b4a.run/.

الخاتمة

في هذه المقالة، تعلمت كيفية إنشاء تطبيق Nuxt.js ونشره مع قاعدة بيانات PostgreSQL، كل ذلك ضمن نظام Back4app البيئي.

تعلمت أيضًا مزايا وعيوب إنشاء تطبيقات الويب باستخدام Nuxt.js.

بدءًا من بناء وظائف التعليمات البرمجية السحابية وتصميم قاعدة البيانات باستخدام وكيل الذكاء الاصطناعي الخاص بـ Back4App إلى فهم الواجهة الخلفية للواجهة الخلفية لـ Back4App ذات التعليمات البرمجية المنخفضة وسهلة الاستخدام.

لقد قمت أيضًا بنشر تطبيق Nuxt باستخدام حاويات Back4App وأصبحت على دراية بمجموعة الأدوات التي يوفرها Back4App لتبسيط تطوير التطبيق.

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

يمكنك معرفة المزيد حول كيفية عمل وكيل الذكاء الاصطناعي للتعرف على كيفية تبسيط عملية تطوير تطبيقك.