دليل شامل لتعلم Vuetify: دورة مجانية من 15 جزءًا مقدمة من Gwen Faraday
Aldawsari 
إذا كنت من محبي بناء التطبيقات باستخدام Vue.js ولكنك تجد صعوبة في البدء بتصميم واجهة المستخدم (UI design)، فلا داعي للبحث بعيدًا؛ فمكتبة Vuetify هي الحل الأمثل لك. إنها مكتبة واجهة مستخدم متكاملة تحتوي على مكونات Material Design مصممة بعناية فائقة، تمنح تطبيقاتك مظهرًا احترافيًا وجذابًا للغاية.
لماذا يجب أن تتعلم Vuetify؟
تُعد Vuetify مكتبة المكونات الأكثر شعبية ضمن بيئة Vue.js، وهي تمكنك من إنشاء تطبيقات رائعة المظهر وسهلة الوصول، حتى لو لم يكن تصميم واجهة المستخدم هو مجال تخصصك الأساسي. على الرغم من أن المكتبة توفر أكثر من 80 عنصرًا جاهزًا للاستخدام الفوري، إلا أنها تتيح لك أيضًا إنشاء عناصر مخصصة، مما يمنح تطبيقاتك لمسة فريدة وشخصية مع الحفاظ على النظافة والاحترافية.
تأخذك هذه المقالة في جولة عبر دورة Vuetify المجانية التي تقدمها منصة Scrimba، والتي تستغرق ساعتين ويقدمها الخبيرة Gwen Faraday. تعلمك الدورة جميع المهارات الأساسية اللازمة للبدء مع Vuetify، بما في ذلك:
Typography(الطباعة والخطوط)Spacing(المسافات)Buttons(الأزرار)Navigation(التنقل)Grid(الشبكة)Card(البطاقات)
في النصف الأول من الدورة، تقدم Gwen جميع عناصر Vuetify الأساسية اللازمة لبناء تطبيق متميز. وكما هو الحال في جميع دورات Scrimba، يمكنك إيقاف الشروحات التفاعلية واستكشاف الكود البرمجي بنفسك. أما النصف الثاني، فيتيح لك تطبيق ما تعلمته عمليًا من خلال بناء متجر إلكتروني متكامل، مما يعزز من مهاراتك المكتسبة ويساعدك على ترسيخ معرفتك الجديدة. بحلول نهاية الدورة، ستكون متمكنًا تمامًا من بناء تطبيقات ذات تصميم احترافي باستخدام Vuetify.
تعرف على المدربة: Gwen Faraday
Gwen Faraday هي مهندسة برمجيات، مؤلفة، متحدثة، ومنشئة محتوى متميزة. تدير أيضًا قناة على YouTube باسم Faraday Academy، حيث تقوم بتدريس مجموعة واسعة من المواضيع التقنية، بما في ذلك Vue.js و Vuetify. هذه الخلفية الغنية تجعلها المعلمة المثالية لتأخذك في رحلة التعلم هذه وترتقي بمهاراتك في Vuetify إلى المستوى التالي.
المتطلبات الأساسية للدورة
لتحقيق أقصى استفادة من هذا الدليل التعليمي والدورة، ستحتاج إلى فهم جيد لأساسيات HTML و CSS و JavaScript و Vue.js. إذا لم تكن قد وصلت إلى هذا المستوى بعد، يمكنك مراجعة الدورات المجانية الممتازة التي تقدمها Scrimba لمساعدتك على اكتساب هذه المهارات بسرعة:
إذا كنت مستعدًا للانطلاق بقوة في عالم Vuetify، فلنبدأ!
الغوص في عالم Vuetify
مقدمة إلى Vuetify
في الجزء الأول من الدورة، تقدم لنا Gwen مكتبة Vuetify وتشاركنا رابطي مستودعات Github حيث قامت بتخزين جميع الأكواد البرمجية للدورة: basic-components و vuetify-responsive. يتيح لنا هذا تنزيل الكود وتجربته بأنفسنا، مما يوفر تجربة تعلم عملية وثرية.
ما هو Material Design؟
بعد ذلك، نتعرف على Material Design، وهو معيار تصميم واجهات مستخدم متطور طورته Google بهدف إنشاء واجهات سهلة الاستخدام ومرنة ومتوافقة مع معايير الوصول العالمية. يوفر معيار Material Design مجموعة من القواعد والإرشادات للعناصر الأكثر شيوعًا الموجودة في صفحات الويب، بما في ذلك الأزرار، النصوص، قوائم التنقل، والميزات المتقدمة مثل الحركة والارتفاع (elevation). تتولى Vuetify مهمة تطبيق هذا المعيار المعقد من خلال توفير مجموعة من عناصر واجهة المستخدم الجاهزة والمتوافقة تمامًا، والتي يمكننا إضافتها إلى تطبيق Vue.js الخاص بنا مباشرة دون عناء.
نظرة أولى على كود Vuetify
في الجزء التالي، تقدم لنا Gwen أول نظرة على كود Vuetify من خلال إنشاء تطبيق Vue، وإضافة خاصية Vuetify، وإنشاء كائن Vuetify جديد:
new Vue({
el : "#app" ,
vuetify : new Vuetify({}),
data : {
message : "Using Single File Components" ,
},
});بعد ذلك، توضح Gwen لنا عنصر <v-app>، وهو المكون الجذري (root component) لجميع عناصر Vuetify. يجب أن تقع جميع مكونات Vuetify داخل <v-app> لتعمل بشكل صحيح:
<v-app>
<v-content>
<playground></playground>
</v-content>
</v-app>مكونات وميزات Vuetify الأساسية
التعامل مع الطباعة (Typography)
في هذا الجزء، نستعرض بعض الخيارات التي تقدمها Vuetify للتعامل مع الطباعة، بما في ذلك العناوين الرئيسية (headings)، العناوين الفرعية (titles و subtitles)، ونصوص الجسم (body text). كما نتعلم كيفية تغيير لون النص ولون الخلفية بسهولة باستخدام الفئات المخصصة (classes) التي توفرها Vuetify.
<v-card-text>
<h1 class="display-4 purple yellow--text">Heading 1</h1>
<h2 class="display-3">Heading 2</h2>
<h3 class="display-2">Heading 3</h3>
<h4 class="title">Title</h4>
<h5 class="subtitle-1">Subtitle</h5>
<p class="body-1">Body</p>
</v-card-text>أخيرًا، نرى كيفية استخدام فئات Vuetify لتعديل وزن الخط (font weight) ونمطه (style)، مما يمنحك تحكمًا كاملاً في مظهر النص:
<h1 class="font-italic font-weight-light">Heading 1</h1>ملاحظة هامة: فئات Vuetify تتجاوز (override) أي أنماط أخرى قد يطبقها المتصفح على وسوم HTML الأصلية، مما يضمن اتساق التصميم.
التحكم بالمسافات (Spacing)
بعد ذلك، نستكشف بعض فئات المسافات في Vuetify، والتي تتيح لنا إضافة هوامش (margins) وحشوات (padding) حول العناصر. نتعلم أيضًا كيفية تغيير حجم المسافات لتناسب احتياجات التصميم المختلفة. هذه الفئات ضرورية لإنشاء تخطيطات متوازنة وجذابة.
<h3 class="ml-5">Spacing</h3>والأفضل من ذلك كله، توضح لنا Gwen كيف يمكن لفئات Vuetify أن تساعد في تحقيق الهدف الأسمى في تصميم التطبيقات: توسيط العناصر بسهولة! انقر على الدورة لمعرفة المزيد من التفاصيل حول هذه الميزة القوية.
مكون الأزرار (Buttons)
في هذا الجزء، نلقي نظرة على بعض الخيارات المتاحة مع مكون الأزرار في Vuetify، بما في ذلك الأزرار التي تحتوي على نصوص فقط، أو أيقونات فقط، أو كليهما معًا. هذه المرونة تتيح لك تصميم أزرار وظيفية وجمالية تتناسب مع سياق تطبيقك.
<v-btn large block>Submit</v-btn>أخيرًا، نتعلم كيفية بناء أزرار مخصصة باستخدام الفئات التي تعرفنا عليها سابقًا، مما يفتح الباب أمام إمكانيات تصميم لا حصر لها.
<button v-ripple class="elevation-2 py-2 px-4">
Submit
</button>عناصر التنقل (Navigation)
بعد ذلك، نستعرض خياري التنقل الرئيسيين المتاحين في Vuetify: <v-app-bar> و <v-toolbar>. يوفر كلا العنصرين ميزات متقدمة مثل التحديد التلقائي لحجم الأزرار والأيقونات، ودعم أيقونات التنقل، والقدرة على التعامل مع القوائم المنسدلة (list dropdowns)، مما يسهل بناء أشرطة تنقل احترافية ومتجاوبة.
<v-toolbar color="deep-purple accent-4" dense dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App Title</v-toolbar-title></v-toolbar>انقر على الدورة لترى كل هذا قيد التنفيذ!
نظام الشبكة (Grid System)
في هذا الجزء، تأخذنا Gwen عبر نظام الشبكة (grid system) في Vuetify، والذي ينقسم إلى 12 عمودًا، مع خمس نقاط توقف مدمجة (media breakpoints) للتعامل مع أحجام الشاشات المختلفة. هذا النظام المرن يضمن أن تبدو تطبيقاتك رائعة على أي جهاز، من الهواتف الذكية إلى شاشات سطح المكتب الكبيرة.
<v-row>
<v-col cols="12" sm="6">
<v-card class="pa-2" outlined tile > Column </v-card>
</v-col>
</v-row>مكون البطاقة (Card)
في هذا الجزء، تشرح Gwen أن Vuetify تستخدم مكون <v-card> كغلاف لأي بطاقة واجهة مستخدم. يمكن لهذا المكون أن يستقبل خصائص (props)، فئات (classes)، وفتحات (slots)، ولديه أحداث مخصصة (custom events)، مما يتيح إنشاء بطاقات أنيقة ومتناسقة في أي حالة استخدام.
<v-card-title>
<v-icon large left > mdi-twitter </v-icon>
</v-card-title>
<v-card-text class="headline font-weight-bold">
"Vue Rocks!"
</v-card-text>
</v-card>تقدم لنا Gwen أيضًا عنصر <v-spacer>، الذي يتيح لنا إضافة مسافات بيضاء (whitespace) بين العناصر بسهولة، وهو مفيد جدًا لتنظيم التخطيطات. أخيرًا، نلقي نظرة على ملف Playground.vue، وهو مساحة مخصصة لنا لاستكشاف ميزات Vuetify التي عرضتها Gwen حتى الآن. توجه إلى الدورة لتجربتها بنفسك وترى ما يمكن أن تقدمه Vuetify.
بناء متجر إلكتروني باستخدام Vuetify
تنقل المتجر (Store Navigation)
الآن، حان الوقت للبدء في بناء تطبيق المتجر الخاص بنا. تبدأ Gwen بإضافة شريط تنقل يتضمن استجابة (responsiveness) وقائمة جانبية قابلة للسحب (drawer menu). كما نستعرض بعض الخيارات المتاحة للتصميم، بما في ذلك الأيقونات وقائمة مدمجة (dense menu)، لإنشاء تجربة مستخدم سلسة وجذابة.
الصفحة الرئيسية (Home Page)
بعد ذلك، حان الوقت لإضافة صفحة رئيسية. تضيف Gwen رأس الصفحة (header) وتذييلها (footer)، ثم تحدد لنا تحديًا لبرمجة القسم الأوسط باستخدام النماذج الأولية (mock-ups) المقدمة. توجه إلى الشرح المرئي لاختبار مهاراتك الجديدة في Vuetify ومقارنة عملك بحل Gwen. لإنهاء هذا الجزء، تعرض لنا Gwen عنصر <v-snackbar>، والذي يمكن استخدامه لإعلام المستخدم عند إضافة منتج إلى سلة التسوق، مما يعزز من تفاعلية التطبيق.
<v-snackbar v-model="$store.state.snackbar.show"
:multi-line="true"
:right="true"
:top="true"
:timeout="6000"
:color="$store.state.snackbar.variant"
>
{{ $store.state.snackbar.message }}
<v-btn dark text @click="$store.commit('updateSnackbar', { show: false })"
>
Close
</v-btn>
</v-snackbar>صفحة المتجر (Store Page)
في هذا الجزء، نقوم ببناء صفحة المتجر باستخدام عناصر الشبكة (grid elements) من Vuetify. نبدأ بإضافة بطاقات المنتجات عن طريق إعادة استخدام البطاقات التي بنيناها لصفحتنا الرئيسية. بعد ذلك، تتحدانا Gwen لبناء شريط جانبي (sidebar) باستخدام عنصري <v-sheet> و <v-expansion-panels>. توجه إلى الشرح المرئي لتجربة هذا التحدي وتطوير مهاراتك.
صفحة سلة التسوق (Cart Page)
بعد ذلك، نضيف صفحة سلة التسوق إلى تطبيقنا. مرة أخرى، تحدد لنا Gwen تحديًا لبرمجة الصفحة وفقًا لنماذجها الأولية، وهي ممارسة رائعة للبرمجة في العالم الحقيقي وتساعد على بناء الذاكرة العضلية اللازمة لتصبح خبيرًا في Vuetify. انقر لتجربة التحدي بأفضل ما لديك قبل مقارنة عملك بكود Gwen النهائي. لا تنسَ أنه يمكنك دائمًا العودة إلى الأجزاء السابقة أو مراجعة وثائق Vuetify إذا واجهت أي صعوبة.
شاشة الدفع (Checkout Screen)
في الجزء الأخير من الكود، نقوم ببناء تدفق دفع بسيط باستخدام عنصر <v-stepper>، الذي يوفر واجهة خطوة بخطوة لعمليات متعددة المراحل.
<v-stepper-header>
<v-stepper-step step="1" :complete="step > 1" />
<v-divider />
<v-stepper-step step="2" :complete="step > 2" />
<v-divider />
<v-stepper-step step="3" />
</v-stepper-header>لإنهاء الدورة، تشير Gwen إلى وجود بعض الميزات في النماذج الأولية لم يتم تغطيتها في الدورة، وتشجعنا على محاولة برمجتها بأنفسنا باستخدام واجهة Scrimba التفاعلية، مما يعزز من قدراتنا على التعلم الذاتي وحل المشكلات.
الخلاصة
تهانينا على إكمال الدورة! نأمل أن تكون قد وجدتها مفيدة وأنك الآن تمتلك الثقة اللازمة لبناء تطبيقات مذهلة باستخدام Vuetify. لماذا لا تستمر في رحلة التعلم الخاصة بك عن طريق استكشاف المجموعة الواسعة من المواضيع الأخرى المتاحة على منصة Scrimba؟ أينما ذهبت بعد ذلك، نتمنى لك برمجة سعيدة!
الخلاصة التقنية
يمثل Vuetify إضافة استراتيجية لأي مطور Vue.js يسعى لإنشاء واجهات مستخدم احترافية وجذابة بكفاءة عالية. تلتزم هذه المكتبة بمعايير Material Design من Google، مما يضمن ليس فقط جمالية التصميم بل أيضًا سهولة الاستخدام والتوافقية عبر الأجهزة المختلفة. ما يميز Vuetify هو مجموعتها الغنية من المكونات الجاهزة، والتي تختصر بشكل كبير وقت التطوير وتقلل من الحاجة إلى تصميم الواجهة من الصفر. الدورة المجانية المقدمة من Gwen Faraday عبر Scrimba هي مورد لا يقدر بثمن، حيث تجمع بين الشرح النظري والتطبيق العملي لبناء متجر إلكتروني، مما يوفر للمتعلمين فهمًا عميقًا وقدرة عملية على استخدام Vuetify في مشاريعهم الحقيقية. إن إتقان Vuetify لا يعزز فقط المهارات التقنية، بل يفتح آفاقًا واسعة لبناء تطبيقات ويب حديثة وذات جودة عالية.