Service professionnel

كيف قمت ببناء موقع متعدد اللغات باستخدام كلود كود

التعليقات: أنشئ موقع Hugo بـ 6 لغات باستخدام Claude Code. ما الذي يجعل الذكاء الاصطناعي ممكنًا – وما لا يحل محله.

السياق

أنا مطور أعمال رقمية متدرب في CHUV، في سيون. مهمتي هي فهم احتياجات العمل وإيجاد الحلول التقنية المناسبة. لا يوجد ترميز 8 ساعات يوميًا في IDE.

عندما أردت إنشاء موقع محفظتي، كان لدي خياران: قالب WordPress، أو شيء مصمم خصيصًا. أخذت الثانية مع كلود كود كشريك تقني.

يمكن تلخيص النقطة الأكثر أهمية في هذه المقالة في جملة واحدة: لم تكن لتعمل أبدًا بدون مهاراتي في الكمبيوتر.

ما كان عليّ إتقانه قبل لمس الذكاء الاصطناعي

قبل أن أسأل كلود كود أي شيء، كنت قد أمضيت أشهرًا في تدريب نفسي على:

  • DNS وأسماء النطاقات: فهم كيف يشير davidmerki.ch إلى الخادم، وسجلات A، وCNAME، والنشر
  • استضافة الويب: CloudPanel، وSSH، وSCP، وأذونات الملفات، وشهادات SSL
  • الأمان: HTTPS، رؤوس الأمان، الحماية من الحقن، أفضل ممارسات OWASP
  • حماية البيانات: LPD (القانون السويسري) واللائحة العامة لحماية البيانات الأوروبية RGPD، وما يعنيه ذلك بشكل ملموس بالنسبة لنموذج الاتصال أو ملف تعريف الارتباط التحليلي أو التقويم
  • بنية الويب: الفرق بين الموقع الثابت والديناميكي، لماذا Hugo، كيف يعمل البناء والنشر

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

لماذا Hugo + كلود كود

Hugo هو منشئ مواقع ثابتة فائق السرعة. لا توجد قاعدة بيانات، ولا خادم PHP معقد، وأوقات تحميل فورية تقريبًا. من ناحية أخرى، يكون منحنى التعلم حادًا إذا كنت لا تعرف قوالب Go.

لقد ساعدني كلود كود في تجاوز هذا المنحنى. يبدو workflow كما يلي:

  1. أصف النتيجة المرجوة باللغة الفرنسية وبكلماتي الخاصة
  2. يقوم كلود بتحليل الكود الحالي ويقترح نهجًا
  3. أصادق على هذا النهج، لأنني أفهم الهندسة المعمارية
  4. يقوم كلود بتنفيذ الكود الكامل
  5. أقوم باختبار كل شيء والتحقق من صحته: الأمان وإمكانية الوصول والأداء
  6. نكرر العملية حتى تصبح نظيفة

الخطوة 3 هي المفتاح. إذا لم أفهم ما كان يقدمه لي كلود، فلن أتمكن من التحقق من صحته. وهذا هو المكان الذي يخطئ فيه معظم الناس.

6 لغات، بما في ذلك 2 RTL

الموقع يدعم 6 لغات: الفرنسية، الألمانية، العربية، الروسية، الصينية والعبرية. تتم كتابة اللغتين العربية والعبرية من اليمين إلى اليسار (RTL)، مما يعطل التخطيط بأكمله.

بالنسبة للترجمات، أنشأت مع كلود نصًا بلغة Python يقرأ المصدر Markdown باللغة الفرنسية، ويحافظ على مادة YAML الأمامية وHTML، والذي تمت ترجمته عبر API DeepL (مع Google الترجمة إلى الإغاثة) ويحمي مسردًا يضم 52 مصطلحًا، معظمها أسماء الأعلام والمختصرات.

النتيجة: ~57 ملف Markdown مترجم تلقائيًا. ولكن مرة أخرى، كان علي أن أفهم كيف تعمل واجهة برمجة التطبيقات للترجمة API والحصص والاحتياطيات ونظام i18n الخاص بـ Hugo على تجميع كل شيء معًا بشكل صحيح.

##نظام الحجز

أكبر قطعة هي نظام حجز كامل مدمج في الموقع الثابت.

  • تقويم تفاعلي مع إمكانية التنقل شهريًا
  • فترات مدتها 30 دقيقة، من الاثنين إلى الجمعة، من 9 صباحًا إلى 7 مساءً.
  • المزامنة مع تقويمي Outlook (تحليل ICS + RRULE)
  • التحقق من صحة النماذج في الوقت الحقيقي
  • ~900 سطر من JavaScript

أنشأ كلود كود كل شيء، بما في ذلك الواجهة الخلفية لـ PHP. But it was me who had to configure the CORS, secure the endpoint with a token, deploy the PHP on CloudPanel and check that the ICS analysis correctly handles Swiss time zones.

##الارقام

متري القيمة
إجمالي الملفات ~420
القوالب HTML 91
مكونات (جزئية) 23
اللغات 6
خطوط JS (حجز) ~900
وقت البناء Hugo ~14 ثانية

الأدوات التي أستخدمها

لا أخفي ذلك: أستخدم الذكاء الاصطناعي بشكل يومي. أداتين رئيسيتين:

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

كل أداة لها نقاط قوتها. ليس لدي ولاء أعمى، فأنا أختار ما هو أفضل اعتمادًا على الموقف.

ما الذي كنت سأفعله بشكل مختلف

  1. ابدأ بالهاتف المحمول. لقد صممت سطح المكتب أولاً ثم قمت بتعديله؛ لكان العكس أكثر فعالية.
  2. الحد من الرسوم المتحركة. 12 وحدة أكثر من اللازم. أربعة أو خمسة منهم تم اختيارهم جيدًا سيكون كافيًا.
  3. هيكلة الترجمات من البداية. أضفت اللغات بعد ذلك، مما أدى إلى ظهور أخطاء.
  4. قم بإعداد CLAUDE.md من اليوم الأول. ملف التكوين هذا لـ Claude Code يغير كل شيء.

الرسالة الحقيقية

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

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

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

هذه هي وظيفتي كمطور أعمال رقمية: الحفاظ على الصورة الكبيرة أثناء التعمق في التكنولوجيا عند الضرورة.


Mes autres services

D'autres services qui pourraient vous intéresser