איך בניתי אתר רב לשוני עם קלוד קוד

ההקשר

אני מתלמד מפתח עסקי דיגיטלי ב-CHUV, בציון. התפקיד שלי הוא להבין את הצרכים העסקיים ולמצוא את הפתרונות הטכניים הנכונים. אין קידוד 8 שעות ביום ב-IDE.

כשרציתי ליצור את אתר הפורטפוליו שלי, היו לי שתי אפשרויות: תבנית וורדפרס, או משהו באמת תפור. לקחתי את השני, עם קלוד קוד כשותף טכני.

ניתן לסכם את הנקודה החשובה ביותר במאמר זה במשפט אחד: זה לעולם לא היה עובד ללא כישורי המחשב שלי.

מה שהייתי צריך לשלוט לפני שנוגעת בבינה מלאכותית

לפני ששאלתי את קלוד קוד משהו, ביליתי חודשים באימון עצמי בנושא:

• DNS ושמות דומיין: הבן כיצד davidmerki.ch מצביע על שרת, רשומות A, CNAME, הפצה
• אירוח אתרים: CloudPanel, SSH, SCP, הרשאות קבצים, אישורי SSL
• אבטחה: HTTPS, כותרות אבטחה, הגנת הזרקה, שיטות עבודה מומלצות של OWASP
• הגנת נתונים: ה-LPD (החוק השוויצרי) והRGPD האירופי, ומה זה מרמז באופן קונקרטי על טופס יצירת קשר, קובץ Cookie לניתוח או לוח שנה
• ארכיטקטורת אינטרנט: ההבדל בין אתר סטטי לדינמי, מדוע 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 Translate לתבליט) ומגן על מילון מונחים של 52 מונחים, בעיקר שמות פרטיים וראשי תיבות.

התוצאה: ~57 קבצי Markdown מתורגמים אוטומטית. אבל שוב, הייתי צריך להבין איך API, מכסות, fallbacks ומערכת i18n של Hugo עבדו כדי שהכל יתחבר כהלכה.

מערכת ההזמנות

החלק הגדול ביותר הוא מערכת הזמנות מלאה המשולבת באתר הסטטי.

• לוח שנה אינטראקטיבי עם ניווט מחודש לחודש
• משבצות של 30 דקות, שני עד שישי, 9:00 עד 19:00.
• סנכרון עם היומן שלי Outlook (ניתוח ICS + RRULE)
• אימות טפסים בזמן אמת
• ~900 שורות של JavaScript

קלוד קוד יצר הכל, כולל PHP backend. אבל זה היה אני שהייתי צריך להגדיר את ה-CORS, לאבטח את נקודת הקצה עם אסימון, לפרוס את ה-PHP ב-CloudPanel ולבדוק שניתוח ה-ICS מטפל נכון באזורי הזמן השוויצרים.

המספרים

הכלים שבהם אני משתמש

אני לא מסתיר את זה: אני משתמש בבינה מלאכותית על בסיס יומי. בעיקר שני כלים:

• קלוד (אנתרופי) על כל הפרויקטים הטכניים שלי. קלוד קוד ב-CLI לפיתוח, קלוד בשיחה לרפלקציה וארכיטקטורה. זה הכלי העיקרי שלי.
• אוריה לשאר: כתיבה, מחקר, שאלות יומיומיות. זהו AI אירופאי, יתרון לכיבוד נתונים.

לכל כלי יש את היתרונות שלו. אין לי נאמנות עיוורת, אני לוקח את מה שעובד הכי טוב בהתאם לסיטואציה.

מה הייתי עושה אחרת

1. התחילו בנייד. תחילה עיצבתי שולחן עבודה ואחר כך התאמתי אותו; ההפך היה יעיל יותר.
2. הגבל אנימציות. 12 מודולים זה יותר מדי. ארבעה או חמישה נבחרים היטב היו מספיקים.
3. מבנה תרגומים מההתחלה. הוספתי את השפות לאחר מכן, מה שיצר באגים.
4. הגדר CLAUDE.md מהיום הראשון. קובץ התצורה הזה עבור Claude Code משנה הכל.

המסר האמיתי

AI מאיץ מאוד עבודה טכנית. לא עוד שעות של תיעוד, Stack Overflow ואיתור באגים בתחביר. זה כלי פנטסטי.

אבל זה לא מחליף הבנה. ל-AI אין תודעה או סקירה כללית. היא לא יודעת שתוקפו של תעודת SSL שלך יפוג בעוד 3 ימים, שטופס יצירת הקשר שלך אינו תואם ל-LPD, או שלאירוח שלך אין גיבוי.

אתה צריך אדם שמבין את מדעי המחשב מאחורי זה. מישהו שמסוגל לרדת לפרטים כשצריך, סקרן, שרוצה להבין את ה"למה" ולא רק את ה"איך".

זה התפקיד שלי כמפתח עסקים דיגיטלי: לשמור על התמונה הגדולה תוך כדי צלילה לטכנולוגיה כשצריך.

מחפשים מישהו שמבין גם בעסקים וגם בטכנולוגיה? הזמן פגישת ייעוץ חינם לדיון.