لم يعد إنشاء موقع إلكتروني يتطلب بالضرورة البدء من صفحة فارغة وكتابة كل جزء من المشروع يدويًا، فيمكنك بناء موقع باستخدام ChatGPT، بداية من تطوير فكرة الموقع وحتى كتابة الأكواد ومراجعتها، كما يمكن استخدامه في تخطيط الواجهات، وإنشاء الصفحات، واقتراح الوظائف، وتحسين تجربة المستخدم والأداء، وفي هذا المقال نستعرض 10 برومبتات عملية تساعدك على تحويل فكرة بسيطة إلى مشروع ويب متكامل بطريقة أكثر تنظيمًا.
ما الذي يمكنك إنجازه عند بناء موقع باستخدام ChatGPT؟
عند استخدام ChatGPT في تطوير المواقع، لا يقتصر دوره على كتابة أكواد HTML أو CSS فقط، بل يمكن توظيفه كمساعد في مراحل مختلفة من المشروع.
ويمكنك البدء معه من مرحلة تحديد فكرة الموقع والجمهور المستهدف، ثم الانتقال إلى هيكل الصفحات وتصميم الواجهة وتجربة المستخدم.
بعد ذلك يمكن الاستعانة به لإنشاء أجزاء من الكود، وتطوير الوظائف التفاعلية، واقتراح بنية قاعدة البيانات وواجهات API.
ثم مراجعة المشروع واكتشاف بعض المشكلات التي تحتاج إلى معالجة.
لكن من المهم التعامل مع المخرجات البرمجية باعتبارها نقطة بداية تحتاج إلى اختبار ومراجعة.
وذلك بشكل خاص في الأجزاء المتعلقة بالأمان، وتسجيل الدخول، وقواعد البيانات، وبيانات المستخدمين.
١- ابدأ بفكرة الموقع
تبدأ عملية بناء موقع باستخدام ChatGPT بتحويل الفكرة الأولية إلى خطة واضحة تحدد الهدف والجمهور والصفحات والوظائف المطلوبة.
فبدلًا من طلب كتابة الموقع مباشرة، ابدأ بتوضيح فكرتك واترك ل ChatGPT مهمة تنظيمها واقتراح الهيكل المناسب.
البرومبت:
تصرف كخبير في تطوير الويب وتخطيط المنتجات الرقمية، وحول فكرة الموقع التالية إلى تصور متكامل لمشروع ويب:
[اكتب فكرة الموقع]
حلل الفكرة وحدد:
- الهدف الرئيسي من الموقع
- الجمهور المستهدف
- أهم احتياجات المستخدمين
- الصفحات الأساسية التي يحتاج إليها الموقع
- الوظائف الرئيسية في كل صفحة
- رحلة المستخدم من دخول الموقع حتى تحقيق الهدف
- الأقسام التي يجب أن تظهر في الصفحة الرئيسية
- الخصائص التي يمكن إضافتها مستقبلًا
- التقنيات المناسبة لتنفيذ المشروع
ثم اقترح هيكلًا واضحًا للموقع، ووضح العلاقة بين الصفحات والوظائف المختلفة، مع ترتيب الأولويات حسب أهمية كل وظيفة للمشروع.
٢- صمم واجهة الموقع وتجربة المستخدم
بعد تحديد هيكل الموقع، يمكنك الانتقال إلى تصميم الواجهة.
ويساعدك ChatGPT في تحديد الألوان والخطوط وتوزيع الأقسام والأزرار والعناصر المختلفة، مع مراعاة تجربة المستخدم على الهاتف والحاسوب.
البرومبت:
تصرف كمصمم UI/UX محترف، وصمم تصورًا لواجهة الموقع التالي:
[اكتب وصف الموقع]
أريد تصميمًا عصريًا وبسيطًا وسهل الاستخدام، ومتوافقًا مع الهاتف واللوحي والحاسوب.
حدد بالتفصيل:
- الألوان الأساسية والثانوية
- نوع الخطوط المناسبة
- شكل القائمة الرئيسية
- تصميم الصفحة الرئيسية
- أماكن الأزرار الرئيسية
- توزيع الأقسام
- شكل البطاقات والنماذج
- طريقة عرض الصور
- المسافات بين العناصر
- تجربة المستخدم في التنقل بين الصفحات
- التصميم المناسب لشاشات الهاتف
- أسلوب عرض رسائل الخطأ والنجاح
ثم اقترح Design System موحدًا يمكن استخدامه في جميع صفحات الموقع للحفاظ على تناسق التصميم.
٣- أنشئ الصفحة الرئيسية
الصفحة الرئيسية هي الواجهة الأولى للموقع؛ ولذلك يجب أن تكون واضحة وسهلة الاستخدام.
ويمكنك طلب إنشاءها باستخدام HTML وCSS وJavaScript، مع تحديد الأقسام التي تريد ظهورها فيها.
البرومبت:
«أنشئ صفحة رئيسية كاملة للموقع التالي باستخدام HTML وCSS وJavaScript:
[اكتب وصف الموقع]
متطلبات الصفحة:
- تصميم احترافي وعصري
- متجاوب مع الهاتف واللوحي والحاسوب
- قائمة تنقل واضحة
- قسم Hero في بداية الصفحة
- عنوان رئيسي واضح
- وصف مختصر للموقع
- زر CTA رئيسي
- الأقسام الأساسية للموقع
- قسم للخدمات أو المميزات
- قسم لآراء العملاء إذا كان مناسبًا
- قسم FAQ
- Footer متكامل
اكتب الكود بطريقة منظمة وقابلة للتطوير، وافصل HTML وCSS وJavaScript في ملفات مستقلة.
استخدم أسماء واضحة للعناصر والكلاسات، واشرح لي وظيفة كل ملف ومكان وضعه في المشروع.
٤- ابنِ صفحات الموقع المختلفة
لا يقتصر بناء موقع باستخدام ChatGPT على الصفحة الرئيسية.
يمكنك استخدامه لإنشاء الصفحات الأخرى مع الحفاظ على التصميم نفسه.
وقد تشمل هذه الصفحات “من نحن”، و”الخدمات”، و”المدون”، و”تواصل معنا” وغيرها بحسب طبيعة المشروع.
البرومبت:
«لدي موقع إلكتروني بالمواصفات التالية:
[اكتب وصف الموقع]
أنشئ جميع الصفحات الأساسية التي يحتاج إليها الموقع، مع الحفاظ على نفس Design System المستخدم في الصفحة الرئيسية.
الصفحات المطلوبة:
[اكتب الصفحات]
لكل صفحة حدد:
- الهدف منها
- الأقسام الموجودة بها
- المحتوى المطلوب
- الأزرار والإجراءات
- الروابط التي تربطها بباقي الصفحات
ثم أنشئ الكود لكل صفحة مع الحفاظ على نفس الألوان والخطوط والقائمة الرئيسية والتذييل والتنسيق العام.
تأكد من أن التنقل بين الصفحات واضح وسهل، وأن التصميم متجاوب مع جميع أحجام الشاشات.
٥- أضف الوظائف التفاعلية
بعد بناء الصفحات الأساسية، يمكنك إضافة الوظائف التي تجعل الموقع أكثر تفاعلًا.
مثل: النوافذ المنبثقة، والقوائم المنسدلة، ونماذج التواصل، والبحث، والفلاتر وغيرها.
البرومبت:
لدي الموقع التالي:
[اكتب وصف المشروع]
أريد إضافة الوظائف التفاعلية التالية:
[اكتب الوظائف]
لكل وظيفة:
- اشرح طريقة عملها
- حدد الملفات التي تحتاج إلى تعديلها
- اكتب الكود المطلوب كاملًا
- وضح مكان إضافة كل جزء من الكود
- اجعل الوظيفة متوافقة مع الهاتف والحاسوب
- أضف التحقق المناسب من المدخلات
- وضح كيفية اختبار الوظيفة بعد تنفيذها
حافظ على الكود الحالي ولا تحذف أي وظيفة موجودة بالفعل إلا إذا كانت تتعارض مع الوظيفة الجديدة.
٦- أنشئ نظام تسجيل الدخول
إذا كان الموقع يعتمد على حسابات المستخدمين، فستحتاج إلى نظام لتسجيل الحسابات وتسجيل الدخول والخروج والتحقق من البيانات.
ويمكن ل ChatGPT مساعدتك في وضع تصور لهذا النظام وكتابة أجزاء من الكود، مع ضرورة اختبار الحل ومراجعته قبل استخدامه فعليًا.
البرومبت:
أنشئ نظام تسجيل وإنشاء حساب للمستخدمين يتضمن التحقق من المدخلات، وتسجيل الدخول والخروج، وإدارة الجلسات، ورسائل الخطأ المناسبة.
وضح الملفات المطلوبة وراجع الحل من ناحية الأمان قبل استخدامه في بيئة الإنتاج.
٧- اربط الموقع بقاعدة البيانات
تحتاج المواقع التي تتعامل مع بيانات المستخدمين أو المنتجات أو الطلبات إلى قاعدة بيانات منظمة.
ويمكن الاستعانة ب ChatGPT لتحديد الجداول والعلاقات والحقول المناسبة، إلى جانب اقتراح واجهات API التي تربط قاعدة البيانات بالموقع.
البرومبت:
صمم بنية قاعدة البيانات المناسبة لهذا المشروع: [وصف المشروع].
حدد الجداول والحقول والمفاتيح الأساسية والعلاقات بينها.
ثم اقترح واجهات API اللازمة للتعامل مع البيانات واشرح طريقة ربطها بالموقع.
٨- حسن الموقع للهواتف
قد يعمل الموقع بصورة جيدة على الحاسوب، لكنه يحتاج إلى تعديلات عند استخدامه على الهاتف.
ولذلك من المهم مراجعة التصميم المتجاوب واكتشاف المشكلات المتعلقة بحجم النصوص والصور والقوائم والأزرار.
البرومبت:
راجع الموقع التالي على شاشات الهاتف واللوحي والحاسوب: [الصق الكود].
اكتشف مشكلات التصميم المتجاوب، مثل: خروج العناصر عن الشاشة أو صعوبة استخدام الأزرار أو مشاكل الصور والقوائم، ثم اقترح التعديلات البرمجية اللازمة.
٩- راجع الكود واكتشف الأخطاء
بعد الانتهاء من التطوير، تأتي مرحلة المراجعة للتأكد من جودة المشروع.
ويمكن ل ChatGPT تحليل الكود والبحث عن الأخطاء المحتملة ومشكلات الأداء والتنظيم، بالإضافة إلى اقتراح تحسينات على البنية وتجربة المستخدم.
البرومبت:
تصرف كمهندس برمجيات محترف، وراجع المشروع التالي مراجعة شاملة: [الصق الكود].
اكتشف الأخطاء ومشكلات الأداء والأكواد المكررة والمشكلات الأمنية المحتملة ومشكلات تجربة المستخدم، ثم اقترح الحلول المناسبة لكل مشكلة.»
١٠- جهز الموقع للإطلاق
المرحلة الأخيرة من بناء موقع باستخدام ChatGPT هي التأكد من جاهزية المشروع للنشر.
ولا يتعلق ذلك بالكود فقط، بل يشمل SEO والأداء والأمان وإمكانية الوصول واختبار الموقع على الأجهزة والمتصفحات المختلفة.
البرومبت:
أنشئ قائمة نهائية لتجهيز هذا الموقع للإطلاق، تشمل: اختبار الصفحات والروابط، تحسين الأداء، SEO، الأمان، إمكانية الوصول، توافق الهاتف والحاسوب، اختبار النماذج، النسخ الاحتياطية، واختبارات ما قبل الإطلاق.
رتب المهام حسب الأولوية.
وفي الختام، يوفر بناء موقع باستخدام ChatGPT طريقة عملية لتسريع العديد من مراحل تطوير المواقع، من تحويل الفكرة إلى خطة واضحة وحتى كتابة الأكواد ومراجعة المشروع، وتصبح النتائج أكثر فاعلية عندما تقسم المشروع إلى خطوات صغيرة وتقدم للذكاء الاصطناعي معلومات دقيقة عن كل مرحلة، ومع ذلك يظل الاختبار والمراجعة أمرين أساسيين، خصوصًا عند التعامل مع قواعد البيانات وتسجيل الدخول والأمان.
سجل دخول إلى ChatGpt وابدأ رحلتك في بناء موقع متكامل من هنا
