بناء تطبيق معرض أعمال باستخدام Vue.js

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

متطلبات العمل

لإنشاء التطبيق نحتاج إلى تثبيت بيئة نود جي إس Node.js ومدير الحزم npm على حاسوبنا المحلي، للقيام بذلك ننتقل إلى موقع Node.js الرسمي ونحمّل أحدث نسخة، بعد تنزيل وتثبيت Node.js سيثبت npm تلقائيًا.

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

node -v
npm -v

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

إنشاء بنية المشروع

يتوجب علينا بداية إنشاء مجلد جديد للمشروع، ثم ننشئ مشروع Vue.js جديد باستخدام الأمر التالي:

npm init vue@latest

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

cd <your-project-name>
npm install
npm run dev

يظهر لنا رابط الخادم المحلي localhost في الطرفية، ويمكن فتحه في المتصفح لعرض تطبيق Vue.js الخاص بنا كما في الصورة التالية:

بنية المشروع

إليك البنية التي سنتبعها لهذا المشروع:

يمثل App.vue المكوّن الجذر root component، الذي يحتوي بدوره على خمسة مكونات فرعية child components. من بين هذه المكونات كما تلاحظ المكوّن ProjectListComponent.vue الذي يمكن أن يحتوي بدوره على مكون فرعي آخر هو ProjectComponent.vue. لتشيكل هيكل متداخل بسيط ضمن التطبيق.

يمكننا استخدام البنية التي نريدها لتنظيم مكونات المشروع، فمثلًا، يمكن استخدام مكوّن رئيسي MainComponent يحتوي على القسم التعريفي، وقسم المهارات، وقسم النشرة الإخبارية، وقائمة المشاريع كمكوّنات أبناء child components، لجعل البنية أكثر تعقيدًا، كما يمكننا الجمع بين قسم التعريف والمهارات وقسم النشرة الإخبارية بمكوّن واحد، فإطار العمل Vue.js يمنحنا حرية هيكلة مشروعنا بالطريقة التي تريدها.

أولاً، علينا تعديل بعض المعلومات الوصفية meta information في ملفIndex.html، وهو نقطة الأساس في المشروع:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="My Portfolio" />
    <meta name="keywords" content="HTML, CSS, JavaScript" />
    <meta name="author" content="Hsoub Academy" />

    <title>My Portfolio</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

علينا وضع المكوّن الجذر App.vue في العنصر <div id="app"></div> ضمن الملف index.html.

إنشاء المكوّن الجذر ومكوّن الترويسة header component

بإمكاننا الآن إنشاء المكوّن الأول HeaderComponent.vue ببساطة، كل ما علينا هو نسخ شيفرة HTML من الملف index.html الذي أنشأناه في مقالنا السابق ولصقه في العنصر <template> ضمن هذا المكون على النحو التالي:

<script>
export default {
  props: ["websiteName"],
};
</script>

<template>
  <!--Header and Navigation Bar-->
  <div class="col-12 col-s-12 header-and-nav">
    <header class="col-4 col-s-4 header">
      <h1>{{ websiteName }}</h1>
    </header>
    <nav class="col-8 col-s-8">
      <ul class="nav-list">
        <li><a href="/">Root</a></li>
        <li><a href="portfolio.html">Home1</a></li>
        <li><a href="/portfolio.html">Home2</a></li>
        <li><a href="https://academy.hsoub.com/programming/">Lessons</a></li>
        <li><a href="#project">Projects</a></li>
      </ul>
    </nav>
  </div>
</template>

ثم نستورد هذا المكوّن الذي أنشأناه للتو داخل المكوّن الجذر App.vue كما يلي:

<script>
import HeaderComponent from "@/components/HeaderComponent.vue";

export default {
  data() {
    return {
      websiteName: "My Portfolio",
    };
  },
  components: {
    HeaderComponent,
  },
};
</script>

<template>
  <div class="container">
    <HeaderComponent></HeaderComponent>
  </div>
</template>

<style>
@import "./assets/style.css";
</style>

استوردنا أيضًا في نهاية الكود أعلاه شيفرة CSS التي كتباناها في المقال السابق داخل المكوّن الجذر، كي تُطبَّق التنسيقات على جميع المكوّنات، حيث وضعنا ملف CSS في مثالنا في المجلد /src/assets/. الآن إذا فتحنا رابط التطبيق في المتصفح فيجب أن نرى شريط التنقل الذي أضفناه.

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

على سبيل المثال لاحظ كيف كتبنا اسم الموقع وروابط التنقل في شريط التنقل من خلال إضافة الكود التالي للملف HeaderComponent.vue:

<script>
export default {
  data() {
    return {
      websiteName: "My Portfolio"
      navLinks: [
        { id: 1, name: "Home", link: "#" },
        { id: 2, name: "Features", link: "#" },
        { id: 3, name: "Pricing", link: "#" },
        { id: 4, name: "FAQs", link: "#" },
        { id: 5, name: "About", link: "#" },
      ],
    };
  },
};
</script>

<template>
  <!--Header and Navigation Bar-->
  <div class="col-12 col-s-12 header-and-nav">
    <header class="col-4 col-s-4 header">
      <h1>{{ websiteName }}</h1>
    </header>
    <nav class="col-8 col-s-8">
      <ul class="nav-list">
        <li
          class="nav-item"
          v-for="navLink in navLinks"
          v-bind:key="navLink.id"
        >
          <a href="/portfolio.html" v-bind:href="navLink.link">{{
            navLink.name
          }}</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

ولكن هل هذا هو الحل الأمثل؟ سيظهر اسم الموقع مرة أخرى في المكون FooterComponent، وبما أن المكوّنات المختلفة تُعرض منفصلة، فهذا يعني أن اسم الموقع سيُسترد من قاعدة البيانات مرتين، وذلك مضيعة للموارد. الحل البديل هو وضع اسم الموقع websiteName داخل المكوّن الجذر App.vue على شكل خاصية وتمريره إلى المكوّنات الأبناء التي تحتاج إلى استخدامه كما يلي:

<script>
import HeaderComponent from "@/components/HeaderComponent.vue";

export default {
  data() {
    return {
      websiteName: "My Portfolio",
    };
  },
  components: {
    HeaderComponent,
  },
};
</script>

<template>
  <div class="container">
    <HeaderComponent v-bind:websiteName="websiteName"></HeaderComponent>
  </div>
</template>


<style>
@import "./assets/style.css";
</style>

الآن نحصل على اسم الموقع في شيفرة HeaderComponent.vue كما يلي:

<script>
export default {
  data() {
    return {
      navLinks: [
        { id: 1, name: "Home", link: "#" },
        { id: 2, name: "Features", link: "#" },
        { id: 3, name: "Pricing", link: "#" },
        { id: 4, name: "FAQs", link: "#" },
        { id: 5, name: "About", link: "#" },
      ],
    };
  },
  props: ["websiteName"],
};
</script>


<template>
  <div class="col-12 col-s-12 header-and-nav">
    <header class="col-4 col-s-4 header">
      <h1>{{ websiteName }}</h1>
    </header>
    <nav class="col-8 col-s-8">
      <ul class="nav-list">
        <li class="nav-item" v-for="navLink in navLinks" :key="navLink.id">
          <a :href="navLink.link">{{ navLink.name }}</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

مكونات التطبيق

شرحنا في الفقرات السابقة طريقة تحقيق مكون الترويسة، ويمكن إنشاء باقي مكونات التطبيق وتخصيصها بنفس الطريقة التي أضفنا فيها الترويسة حيث سيتضمن تطبيقنا المكونات التالية:

مكون الترويسة HeaderComponent.vue
مكون التعريف IntroComponent.vue
مكون النشرة البريدية NewsletterComponent.vue
مكون المهارات SkillsComponent.vue
مكون المشاريع ProjectsComponent.vue
مكون التذييل FooterComponent.vue

بعد إنشاء المكونات المطلوبة نعرضها في المكون الجذر App.vue كما يلي:

<script>
import HeaderComponent from './components/HeaderComponent.vue'
import IntroComponent from './components/IntroComponent.vue'
import NewsletterComponent from './components/NewsletterComponent.vue'
import SkillsComponent from './components/SkillsComponent.vue'
import ProjectsComponent from './components/ProjectsComponent.vue'
import FooterComponent from './components/FooterComponent.vue'

export default {
  data() {
    return {
      websiteName: 'My Portfolio'
    }
  },
  components: {
    HeaderComponent,
    IntroComponent,
    NewsletterComponent,
    SkillsComponent,
    ProjectsComponent,
    FooterComponent
  }
}
</script>

<template>
  <div class="container">
    <HeaderComponent :websiteName="websiteName" />
    <IntroComponent />
    <NewsletterComponent />
    <SkillsComponent />
    <ProjectsComponent />
    <FooterComponent />
  </div>
</template>

<style>
@import './assets/style.css';
</style>

ملاحظة: هنالك عدة طرق لإضافة الصور للتطبيق، وفي حالتنا سنضيف مجلد الصور images في المجلد public ضمن المشروع لسهولة الوصول لها مباشرة.

عند الانتهاء من إضافة كافة الأقسام والصور والتنسيقات سيظهر تطبيقنا كما في الصورة التالية:

الخاتمة

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

ترجمة، وبتصرّف للمقال Create a portfolio Website لكاتبه Eric Hu.

أفضل التعليقات

لا توجد أية تعليقات بعد

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

أضف تعليق

× لقد أضفت محتوى بخط أو تنسيق مختلف. Restore formatting

Only 75 emoji are allowed.

× Your link has been automatically embedded. Display as a link instead

× جرى استعادة المحتوى السابق.. امسح المحرر

× You cannot paste images directly. Upload or insert images from URL.

أضف صورة من رابط خارجي

بناء تطبيق معرض أعمال باستخدام Vue.js

متطلبات العمل

إنشاء بنية المشروع

بنية المشروع

إنشاء المكوّن الجذر ومكوّن الترويسة header component

مكونات التطبيق

الخاتمة

اقرأ أيضًا

تفاعل الأعضاء

أفضل التعليقات

انضم إلى النقاش

التصنيفات

إعلانات

أحدث أسئلة البرمجة

تابعنا على

إعلانات

أحدث مشاريع التطوير على مستقل

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية