4 طرق مذهلة لبناء مواقع ويب احترافية باستخدام Claude Fable 5
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00الجميع لديهم إمكانية الوصول إلى نفس نماذج الذكاء الاصطناعي، لكن لا أحد بنى العمليات حولها.
00:00:05ربما سمعت العبارة التي تقول إن النموذج لم يعد مهماً، بل الإطار الذي يحتويه هو المهم.
00:00:09الأطر هي في الأساس العمليات التي تبنيها لكي يتبعها نموذج الذكاء الاصطناعي الخاص بك.
00:00:13ولكن إليك ما تحتاج إلى فهمه.
00:00:14النماذج في تطور مستمر، لذا فإن الإطار الذي بنيته قبل ثلاثة أشهر أصبح بالفعل عتيقاً.
00:00:19في وقت التسجيل، أفضل نموذج موجود هو “فابل 5”، النموذج الرائد لشركة أنثروبيك،
00:00:24لكن لا تقلق، سنرشدك خلال طرق مختلفة للتأكد من أن إطار عملك
00:00:27يستمر في التطور مع أي نموذج موجود.
00:00:30في الواقع، لدى أنثروبيك مهارة رسمية لتصميم الواجهات الأمامية،
00:00:34والسبب في وجودها هو مشكلة قاموا بتسميتها بأنفسهم.
00:00:37ما يحدث هو أن النموذج ينجرف نحو النسخة الأكثر أماناً والأكثر اعتيادية من التصميم
00:00:42الذي طلبته.
00:00:43يسمون ذلك “التقارب في التوزيع”، وهو ما يعني ببساطة أنه يبني الشيء
00:00:47الذي رآه ألف مرة من قبل.
00:00:49الآن مع مدى قوة أحدث النماذج التي تم الإعلان عنها، قد تعتقد أن هذه ليست
00:00:53مشكلة بعد الآن، لكن هذا ليس ما وجدته.
00:00:56على سبيل المثال، في هذا الطلب (برومبت)، طلبنا منه ببساطة بناء صفحة هبوط لموقع مزارع.
00:01:01لدفعه في الاتجاه الصحيح، أخبرناه أن يكون مبدعاً قدر الإمكان وألا يركز
00:01:06كثيراً على المحتوى نفسه.
00:01:07كما أخبرناه صراحةً ألا يقوم بتحميل أي مهارات لأن لدينا مهارات متعددة متاحة
00:01:13في نظامنا وأردنا التأكد من أنه لا يستفيد منها.
00:01:16هذا ما انتهى به الأمر بإنشائه.
00:01:18إنه ليس تصميماً سيئاً بأي حال من الأحوال، لكنه بالتأكيد ليس الأفضل أيضاً.
00:01:22على سبيل المثال، هناك بعض مشكلات التباين وبعض الصور لا يتم تحميلها بشكل صحيح.
00:01:26ولكن عندما استخدمنا المهارة هنا، تغيرت الأمور كثيراً.
00:01:29لا يوجد شيء خاص في هذه المهارة.
00:01:31لا توجد مراجع أو أي موارد خارجية.
00:01:34إنه مجرد طلب (برومبت) لا أكثر.
00:01:35باستخدام ذلك وحده، أنتج تصميماً أفضل بكثير.
00:01:37كان التصميم أكثر صقلاً وجمالاً من الناحية الجمالية.
00:01:41تضمن رسوماً متحركة دقيقة واهتماماً أكبر بالتفاصيل.
00:01:45بشكل عام، كانت النتيجة أفضل بكثير مما قد يولده النموذج بمفرده.
00:01:49مع كل نموذج جديد، تصدر شركات الذكاء الاصطناعي أدلة توجيهية جديدة للأشخاص الذين يستخدمون واجهات برمجة التطبيقات.
00:01:55وباستخدام دليل “فابل 5”، قمنا بتعديل مهارة التصميم.
00:01:58يمكنك فقط نسخ طلب التصميم العام ودليل التوجيه.
00:02:02والصقهما معاً في كلود، وأخبره أن لديك دليل التوجيه الخاص بالنموذج
00:02:06واطلب منه إنشاء نسخة محدثة بناءً على ذلك.
00:02:09إنه يحلل الطلب ويقدم لك نسخة معاد صياغتها للنموذج الجديد.
00:02:12ويمكنك بالفعل رؤية أن الموقع الجديد يبدو أفضل بكثير.
00:02:15إنه منظم بشكل أفضل وقد حول جميع العناصر المختلفة إلى بطاقات.
00:02:19نعتقد أنه يبدو أكثر إبداعاً بكثير مما ينتجه كلود عادةً بسبب تفاصيل صغيرة
00:02:24مثل كيفية تحويل قسم دعوة الإجراء (CTA) إلى رسالة بريدية بطابع فوقها.
00:02:29هذه التفاصيل الصغيرة هي التي تجعله يبدو أكثر إبداعاً.
00:02:32الآن، هناك سبب آخر لقيام هذه الشركات بإصدار أدلة التوجيه.
00:02:35في كثير من الأحيان، تعاني النماذج من مشاكل سلوكية وتخبرك الأدلة بكيفية إصلاحها.
00:02:39عندما تم إصدار “أوبس 4.8”، أشارت أنثروبيك إلى أن النموذج يميل إلى افتراض أسلوب تصميم معين.
00:02:45كان حلهم هو طلب بدائل تصميم متعددة من النموذج أولاً، ثم السماح لك باختيار الاتجاه الذي تريد اتباعه.
00:02:51ولكن عندما صدر “فابل 5”، لم تعد هذه المشكلة مذكورة في أدلة توجيهه.
00:02:56ومما رأيناه، لا يزال النموذج يقع في نفس ذلك الأسلوب.
00:02:59لا يحدث هذا في كل مرة.
00:03:01ولكن من خلال اختباراتنا، ما يقرب من موقعين من كل ثلاثة مواقع تم إنشاؤها لا تزال تنتهي بتصميم مشابه جداً.
00:03:07لذا لم يتم إصلاح الأمر حقاً.
00:03:08لهذا السبب يجدر بك النظر في وثائق النماذج السابقة أيضاً.
00:03:11غالباً ما ستجد أشياء مفيدة لم تصل إلى أحدث دليل.
00:03:15لذا باستخدام دليل طلب “أوبس 4.8”، تحولنا إلى مهارة تصميم مختلفة
00:03:20تطلب منا بالفعل نوع اتجاه التصميم الذي نريده.
00:03:23بناءً على ذلك، أنتجت هذا التصميم.
00:03:25هذا يبدو جيداً أيضاً.
00:03:26لكن بصراحة، النهج الأفضل هو استخدام ملفات “design.md” هنا.
00:03:30تحتوي هذه الملفات على لغة العلامة التجارية التي تضعها ببساطة على صفحتك.
00:03:33موقع “Get design.md” هو مصدر جيد حقاً حيث يمكنك الحصول على ملفات للعديد من العلامات التجارية.
00:03:38ولكن حتى ذلك الحين، استخدمها بعد أن يكون النموذج قد أنشأ صفحة الهبوط بالفعل.
00:03:42وهذا مخصص لصفحات الهبوط تحديداً لأنه إذا نظرت بالفعل داخل ملفات “design.md”،
00:03:47فهي تغلق كل شيء بإحكام، حتى الخط.
00:03:50وكما رأيت في الأمثلة، الخط هو جزء كبير مما جعل تلك المواقع تبدو أكثر إبداعاً.
00:03:55هناك مستويان عندما يتعلق الأمر بإضافة الرسوم المتحركة.
00:03:58واجهة المستخدم التسويقية وواجهة المستخدم الوظيفية.
00:04:00استخدام مهارة التصميم على واجهة المستخدم الوظيفية مثل لوحات التحكم سيجعلها تبدو جميلة،
00:04:05لكن الناس لن يتمكنوا فعلياً من استخدامها.
00:04:07لذا لإضافة الرسوم المتحركة، نستخدم شيئين.
00:04:10بالنسبة لصفحات التسويق، هذه المهارة تخبر النموذج بالفعل بإضافة رسوم متحركة تعتمد على CSS،
00:04:15لكن رسوم GSAP المتحركة أفضل بكثير.
00:04:17هذا هو المكان الذي تأتي فيه خطوة أخرى من دليل التوجيه.
00:04:20الجهد هو الرافع الرئيسي الذي يتحكم في النموذج الآن.
00:04:22بالنسبة للمهام البسيطة، يمكنك إبقاؤه من منخفض إلى متوسط،
00:04:25ولكن للمهام مثل إضافة الرسوم المتحركة، فإن استخدام “X-High” هو خيار أفضل بكثير،
00:04:30وسيعطيك عدداً أقل من المحاولات.
00:04:32في مهارة واجهة المستخدم التسويقية لدينا، هناك قاعدة تحدد متى يجب استخدام GSAP.
00:04:36كلما تم تفعيل هذا الشرط، يتم تحميل مهارة GSAP تلقائياً أيضاً.
00:04:41لقد استخدمنا بالفعل ذلك الإعداد على نفس صفحة الهبوط المعروضة هنا.
00:04:44حتى مع هذا التخطيط المحدود من جانبنا، فقد قامت بعمل جيد بشكل مدهش.
00:04:48لقد ضبطت الموضع حيث يتم تشغيل الرسوم المتحركة للشاشة داخل البطاقة البريدية،
00:04:52وتنتقل الفصول واحداً تلو الآخر.
00:04:55إنه مثال جيد على كيفية تعامل هذه المهارات المتخصصة مع الكثير من تفاصيل التنفيذ
00:04:59تلقائياً.
00:05:00لقد حققنا نظام المهارات هذا من خلال الكثير من التجربة والخطأ.
00:05:03وأعني بذلك الوصول المتكرر إلى حدود الاستخدام لمدة 5 ساعات.
00:05:07إذا كنت ترغب في تجاوز كل ذلك، يمكنك الحصول عليه من “Community AI Labs Pro” الخاصة بنا.
00:05:11سيكون الرابط في الوصف.
00:05:12لذا، كما ذكرنا بالفعل، هناك نوعان من واجهات المستخدم.
00:05:15سير العمل بالكامل خلف واجهة المستخدم الوظيفية يختلف تماماً عن واجهة المستخدم التسويقية.
00:05:20على سبيل المثال، التخطيط هو الخطوة الأولى، وهو مهم للغاية.
00:05:23لن نتعمق في ذلك في هذا الفيديو، ولكن بمجرد أن يكون خطتك جاهزة،
00:05:27يمكنك إعطاؤها لكلود.
00:05:27بعد ذلك، بدلاً من جعله يبني التطبيق، يجب أن تطلب منه بناء النماذج الأولية باستخدام HTML.
00:05:33تبدأ عمليتنا بملف design.md.
00:05:36إذا كنت قد قررت بالفعل أي design.md تريد استخدامه، فهذا رائع.
00:05:40إذا لم يكن لديك واحد، فلا بأس بذلك أيضاً.
00:05:42يمكنك المضي قدماً بدونه.
00:05:43على سبيل المثال، إذا نظرت إلى مجتمعنا المبني خصيصاً،
00:05:45ستلاحظ فوراً أن التصميم من الخارج والتصميم من الداخل مختلفان تماماً.
00:05:50في حالتنا، تم التخطيط لكل شيء باستخدام نماذج HTML الأولية أولاً.
00:05:51بدأنا بإنشاء design.md، والذي كان مستوحى جزئياً من Notion.
00:05:54باستخدام نظام التصميم ذلك، قمنا ببناء جميع الشاشات كنماذج أولية قبل كتابة التطبيق الفعلي.
00:05:58بمجرد الانتهاء من تلك النماذج الأولية والتحقق منها، حولناها إلى هذا التطبيق الوظيفي الكامل.
00:06:04الآن، قبل أن ننتقل إلى الجزء الأكثر أهمية في تصميم واجهات المستخدم الوظيفية، دعنا نستمع إلى كلمة من راعينا.
00:06:09لاحظ الكثير من الأشخاص الذين يستخدمون “Claude Code” مؤخراً أن تكاليفهم ترتفع بشكل كبير.
00:06:13بصراحة، هذا هو سبب لفت “كيمي” لانتباهي.
00:06:14لقد بنوا نموذجاً مفتوح المصدر جيد حقاً في البرمجة بحوالي 1/8 من سعر “أوبس”.
00:06:18أحدث نموذج لديهم، “Kimi K2.6”، احتل للتو المركز الأول في معيار البرمجة “Sweebench Pro”،
00:06:20وهو في الأساس أصعب معيار برمجة واقعي في الوقت الحالي.
00:06:26لم يكتفوا بإصدار النموذج فقط، بل بنوا منتجات فوق “K2.6” مفيدة حقاً.
00:06:30يمكنك إنشاء مواقع ويب جاهزة للإنتاج بتصميم واجهة أمامية جيد،
00:06:33وإنشاء شرائح عرض كاملة من طلب واحد، وحتى التعامل مع قواعد البيانات والمصادقة مباشرة.
00:06:38لكن الميزة الأكثر جنوناً ربما هي “Agent Swarm”.
00:06:41يمكنك تفعيل 300 وكيل ذكاء اصطناعي بالتوازي في مهمة واحدة.
00:06:47بدلاً من وكيل واحد يتعامل مع كل شيء ببطء، تحصل على فريق ذكاء اصطناعي كامل يعمل في وقت واحد.
00:06:49وكل هذا يعمل على نموذج مفتوح المصدر يكلف أقل بكثير من البدائل مغلقة المصدر
00:06:53التي كان الناس يدفعون ثمنها.
00:06:58لذا، إذا كنت تستخدم “Claude Code” أو “Cursor” كل يوم وكانت فاتورة واجهة برمجة التطبيقات الخاصة بك مؤلمة
00:07:03مؤخراً، فإن “كيمي” تستحق التجربة.
00:07:05إذا قمت بالتسجيل من خلال الرابط الخاص بنا، ستحصل أيضاً على مكافأة حصة إضافية بنسبة 10% في عملية الشراء الأولى
00:07:09قبل 30 يونيو. اضغط على الرابط في الوصف وابدأ في البناء.
00:07:11الآن، هناك جزء آخر مهم جداً من تصميم واجهات المستخدم الوظيفية، وهو التجريب.
00:07:16بمرور الوقت، جربنا الكثير من الأساليب المختلفة لحل هذه المشكلة.
00:07:19في البداية، استخدمنا قوائم المهام مع وكلاء متعددين يعملون بالتوازي،
00:07:24حيث يقوم كل وكيل بإنشاء تنويع مختلف لواجهة المستخدم.
00:07:28كان الهدف هو تجربة تصميمات متعددة ومعرفة أي نهج يعمل بشكل أفضل فعلياً.
00:07:32لاحقاً، بدأنا في استخدام وكلاء فرعيين لسير العمل هذا، لكن الأمر لم يعد مهماً الآن.
00:07:35مع مليون رمز (توكن) من السياق، يمكنك القيام بذلك مع الوكيل الأساسي أيضاً.
00:07:40لقد بنينا أيضاً شيئاً داخلياً يسمى “عارض المعرض” (Gallery Viewer).
00:07:45الغرض من عارض المعرض بسيط.
00:07:48عندما تنشئ نماذج HTML أولية متعددة، لا ينبغي أن تضيع بين عشرات الملفات.
00:07:51بدلاً من ذلك، يتم فتحها تلقائياً معاً في عرض واحد، مما يسهل مقارنتها
00:07:53جنباً إلى جنب. على سبيل المثال، عندما كنا نبني منصة المجتمع، لم نكن نعرف في البداية
00:07:58كيف يجب أن تبدو مساحة التفاعل المجتمعي. كنا نعرف أننا نريد تجربة مجتمعية،
00:08:03ولكن كانت هناك طرق عديدة يمكن للمستخدمين من خلالها التفاعل مع بعضهم البعض. لذا بدلاً من الالتزام
00:08:08بتصميم واحد، جربنا استخدام نماذج HTML أولية. كلفنا الوكيل بإنشاء واجهات قنوات مجتمعية متعددة
00:08:12كنماذج أولية، حتى نتمكن من مقارنتها. يقوم الوكيل بعد ذلك بإنشاء إصدارات متعددة تلقائياً
00:08:17وفتحها داخل عارض المعرض. ومن هناك، يمكننا مقارنة كل تنويع وتحديد أي اتجاه كان الأقوى.
00:08:22شيء واحد ستلاحظه في هذا المثال هو أن التصميمات لا تبدو كلها متسقة بصرياً.
00:08:28يقوم الوكيل بعد ذلك بإنشاء نسخ متعددة تلقائياً وفتحها داخل عارض المعرض (Gallery Viewer). ومن هناك، يمكننا مقارنة كل
00:08:33السبب في عدم حدوث ذلك هنا هو أنه لم يتم توفير ملف design.md.
00:08:37عندما يوجد ملف design.md، يستخدمه النموذج كمصدر للحقيقة للألوان والتباعد والطباعة والمكونات والتصميم العام.
00:08:42لذا تبقى جميع النماذج الأولية التي تم إنشاؤها متسقة بصرياً مع استمرار استكشاف مناهج تجربة مستخدم مختلفة.
00:08:46هناك أيضاً بعض التفاصيل الصغيرة التي يمكن أن تحدث فرقاً كبيراً، مثل إضافة الرسوم المتحركة إلى واجهات المستخدم الوظيفية.
00:08:53لقد وثقنا مجموعة من إرشادات الرسوم المتحركة في مهاراتنا الخاصة ونرحب بك لنسخها إذا كنت ترغب في ذلك.
00:08:59لقد عملت بشكل جيد معنا حتى الآن ونحن نصقلها باستمرار. شيء واحد أوصي به بشدة، مع ذلك، هو عدم المبالغة
00:09:04في الرسوم المتحركة في الجزء الوظيفي من تطبيقك. قد تبدو الرسوم المتحركة المفرطة مثيرة للإعجاب في البداية،
00:09:10لكنها غالباً ما تجعل الواجهات التي تركز على الإنتاجية تبدو أكثر تشتيتاً. بمجرد الانتهاء من التصميم،
00:09:15الخطوة التالية هي استخدام مهارة “ShadCN”. لقد قمت بالفعل بتوصيل مهارة واجهة المستخدم الوظيفية
00:09:20بمهارة “ShadCN”، لذا فهي تتعامل مع معظم سير العمل تلقائياً. في السابق، كانت لدينا سير عمل أكثر
00:09:25تعقيداً. كنا ننشئ خطة تنفيذ مفصلة خصيصاً لـ “ShadCN MCP” ونستخدم تلك الخطة لبناء
00:09:29الواجهة بأكملها. بينما كان هذا النهج يعمل، إلا أنه أضاف أيضاً الكثير من التعقيد. اليوم، سير العمل
00:09:35أبسط بكثير. كل ما تحتاجه هو نموذج HTML الأولي النهائي ومهارة “ShadCN”. السبب في أن هذا يعمل بشكل جيد هو أن
00:09:40مهارة “ShadCN” تحتوي بالفعل على كمية هائلة من السياق ومعرفة التنفيذ التي وضعها مبدعو “ShadCN” أنفسهم.
00:09:45وبسبب ذلك، يمكنها أخذ نموذج HTML أولي نهائي وإعادة إنتاجه بشكل مطابق تقريباً باستخدام
00:09:50مكونات “ShadCN” الفعلية. لذا في هذه المرحلة، لا تحتاج إلى القلق بشأن إنشاء خطط تنفيذ
00:09:55معقدة أو سير عمل تحويل. إذا أعجبتك عمليات التصميم هذه، اشترك في القناة واضغط على زر الإعجاب أيضاً.
00:10:01نحن ننشر محتوى يساعدك على تعلم طرق جديدة لتحسين العمليات المختلفة في شركات مختلفة باستخدام الذكاء الاصطناعي.
00:10:06دعمك هنا يعني الكثير بالنسبة لنا.
00:10:11مكونات ShadCN الفعلية. لذا في هذه المرحلة، لا داعي للقلق بشأن إنشاء خطط
00:10:16ملف “Claude.md” يطلب من الوكيل التحقق من مخرجاته. الآن، بدلاً من استخدام الوكيل الرئيسي،
00:10:21يجب عليك استخدام وكيل فرعي يمكنه التحقق من المخرجات. وللتحقق منه، تحتاج إلى شيء
00:10:26يمكنك المقارنة به. لهذا، قم دائماً بتوجيه الوكيل الفرعي إلى ملف design.md الخاص بك.
00:10:31شيء آخر مذكور في الدليل هو أن النماذج تعمل بشكل أفضل عندما يكون لديها سياق حول
00:10:36مهمتك. بالنسبة للتصميم، هذا يعني امتلاك معرفة حول ماهية المنتج في الواقع.
00:10:41الآن، قامت الكثير من الأطر بإعداد ملف “product.md” منفصل، ولكن في رأينا،
00:10:46عندما تقوم بإعداد “Claude.md”، فإنه يحتوي على سياق كافٍ للنموذج لفهم ماهية مشروعك.
00:10:50لذا ما تفعله مهارة واجهة المستخدم الوظيفية هو أنه كلما حصلت على مهمة جديدة،
00:10:55تجعل النموذج يقرأ ملف “Claude.md” أيضاً. بالإضافة إلى ذلك، فهي تحتوي أيضاً على مجلد “mox”
00:10:59الذي يحتوي على جميع ملفات HTML حتى تتمكن من الرجوع إليها كلما أضفت عناصر جديدة إلى
00:11:03تطبيقك. علاوة على ذلك، سيكون من الرائع أن يكون لديك ملف design.md أيضاً. هذه هي الملفات
00:11:09التي تحتاج إلى امتلاكها في مشروعك. في الوقت الحاضر، يمكن استنساخ الكثير من تطبيقات SaaS بسهولة.
00:11:13نحن أنفسنا نستخدم برمجيات مبنية خصيصاً لإدارة الفريق. لقد بنينا نسختنا الخاصة لأننا
00:11:18لسنا مضطرين لاستضافة الكثير من الأشخاص. في هذه الحالة، لا يتعين عليك حقاً صنعها من الصفر.
00:11:24تحتاج فقط إلى التأكد من أنك تستنسخ واجهتهم بشكل مثالي قدر الإمكان. مع النماذج الأحدث،
00:11:28هذه هي الملفات التي تحتاج إلى توفيرها في مشروعك. في الوقت الحاضر، يمكن استنساخ العديد من تطبيقات البرمجيات كخدمة (SaaS) بسهولة.
00:11:32في الاستنساخ، هناك وضعان مختلفان. الوضع B مخصص لواجهة المستخدم التسويقية. بالنسبة لهذا،
00:11:37هناك أداة CLI مفيدة حقاً تسمى “single-file CLI”. باستخدامها، يمكنك التقاط كل شيء على الصفحة،
00:11:42بما في ذلك HTML وCSS وحتى الصور المستخدمة على ذلك الموقع. إذا كان الموقع يحتوي على صفحات متعددة،
00:11:46يمكنك أيضاً جلب ملف “sitemap.xml” الخاص به، وهو في الأساس خريطة للموقع. باستخدام خريطة الموقع تلك،
00:11:51يمكن للنموذج اكتشاف وجلب الصفحات الأخرى أيضاً. تبدأ المشكلة عندما تواجه صفحات
00:11:56خلف المصادقة. على سبيل المثال، إذا كنت ترغب في استنساخ واجهة “Notion”، فلن تتمكن ببساطة من توجيه
00:12:01الأداة إلى موقع “Notion”. عندما تقدم رابط “Notion”، ستحصل فقط على صفحة الهبوط.
00:12:07ما تريده حقاً هو واجهة التطبيق خلف شاشة تسجيل الدخول. لحسن الحظ، أصبحت النماذج
00:12:13جيدة جداً في فهم الواجهات من الصور، لذا في هذه المواقف، لقطات الشاشة هي
00:12:19الخيار الأفضل. يجب عليك التقاط حالات الواجهة المختلفة بعناية فائقة. لنفترض أن لديك
00:12:23صفحة مفتوحة، ستريد لقطات شاشة توضح ما يحدث عند التمرير وكيف تؤثر التفاعلات المختلفة على التخطيط.
00:12:28لنأخذ مثالاً آخر. لنفترض أنك فتحت صفحة حيث توجد صفحتان في عمود واحد. إذا قدمت هذا فقط،
00:12:34فلن يعرف النموذج أنه يمكنك إنشاء عمودين. يجب أن تكون دقيقاً للغاية وتوفر كل
00:12:40السياق الذي يحتاجه النموذج. بمجرد التقاط لقطات الشاشة، لا تلصق الصور مباشرة في الطلب. بدلاً من ذلك،
00:12:45اسحبها إلى داخل “كلود”. هذا يمنح النظام إمكانية الوصول إلى مسارات الصور التي يمكن لـ “Mode A” استخدامها. سيقوم “Mode A”
00:12:50بعد ذلك بجمع كل لقطات الشاشة تلك، ووضعها داخل مجلد الاستنساخ واستخدامها كمادة مرجعية.
00:12:56تصبح لقطات الشاشة تلك فعلياً هي الأساس لعملية الاستنساخ. من هناك، يمكنك إنشاء
00:13:01نسخة HTML أولية للواجهة ثم الانتقال إلى بناء التطبيق النهائي.
00:13:07ذلك يوصلنا إلى نهاية هذا الفيديو. إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في صنع فيديوهات
00:13:13مثل هذه، يمكنك القيام بذلك باستخدام زر “super thanks” أدناه. وكما هو الحال دائماً، شكراً لكم على
00:13:19المشاهدة وأراكم في الفيديو القادم.
00:13:25نسخة HTML أولية للواجهة، ثم انتقل إلى بناء التطبيق النهائي.
00:13:29وصلنا إلى نهاية هذا الفيديو. إذا أردتم دعم القناة ومساعدتنا في الاستمرار
00:13:35بصنع مقاطع كهذه، يمكنكم فعل ذلك باستخدام زر “شكرًا” أدناه. وكما دائمًا، شكرًا
00:13:39على المشاهدة، وأراكم في الفيديو القادم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video