تخيل إنشاء تطبيق ويب معقد دون قضاء أسابيع أو أشهر عليه. لقد قمت بذلك بالضبط باستخدام ImageTools.pro، وهو تطبيق لمعالجة الصور عبر الإنترنت قمت بإنشائه في 5 أيام فقط بمساعدة الذكاء الاصطناعي وتقنيات الويب الحديثة.
جاء هذا المشروع نتيجة لما يسمى الآن “vibe coding”، وهو نهج لتطوير البرمجيات شاع بواسطة Andrej Karpathy في أوائل عام 2025. وفقًا لـ Wikipedia، فإن التشفير الديناميكي هو طريقة يصف فيها المطورون المشكلة في بضع جمل كمطالبة لنموذج لغة كبير (LLM)، ثم توجيه وتحسين الكود الذي تم إنشاؤه.
سوف أطلعك على كيفية استخدامي لهذا النهج لبناء ImageTools.pro في مثل هذا الوقت القصير.
أول شيء فعلته هو استخدام Claude 3.7 Sonnet لبناء خريطة طريق كاملة وقائمة مهام للمشروع. لقد شرحت رؤيتي لتطبيق معالجة الصور المستند إلى المتصفح، وقد ساعدني الذكاء الاصطناعي في:
بعد ذلك، قمت بتمرير خريطة الطريق وقائمة المهام إلى Cursor، المحرر المدعوم بالذكاء الاصطناعي، حتى يتمكن من التعرف على السياق قبل أن أبدأ في البناء.
بناءً على توصيات الذكاء الاصطناعي وتجربتي الخاصة، اخترت هذه المجموعة:
Next.js 15.2.4 - أحدث إصدار مع App Router، ودعم رائع لمكونات الخادم، والتوجيه القائم على الملفات، وتحسين الصورة المضمنة.
React 19 - مكتبة واجهة المستخدم الأساسية للواجهات التفاعلية.
TypeScript - لتحسين أمان الكتابة وتجربة المطورين.
Shadcn UI - نظام مكونات قابل للتخصيص بدرجة كبيرة مبني على واجهة Radix UI.
Tailwind CSS - إطار عمل CSS ذو فائدة أولى يحافظ على التصميم سريعًا ومرنًا.
Framer Motion - للحصول على حركة سلسة ومصقولة عبر الواجهة.
لمعالجة الصور، استخدمت مجموعة مختلطة من المكتبات:
المعالجة المستندة إلى المتصفح (الأساسية):
browser-image-compression (v2.0.2) - لضغط الصور في المتصفحimage-conversion (v2.1.1) - لتحويل التنسيق الأساسيjimp (v1.6.0) - مكتبة معالجة صور جافا سكريبت خالصةreact-image-crop وreact-easy-crop - لواجهة مستخدم الاقتصاص البديهيةالمعالجة من جانب الخادم (اختيارية/محدودة):
sharp (v0.34.0) - مكتبة معالجة الصور Node.js لعمليات أكثر تقدمًاbmp-js - للتعامل مع مركبات BMPjspdf - لتحويل PDFto-ico - لإنشاء الأيقونة المفضلةلقد استخدمت أيضًا العديد من المكتبات المساعدة:
على عكس سير العمل الخطي التقليدي، تطورت ImageTools.pro بطريقة أكثر مرونة. هذا هو جوهر الترميز الحيوي. ساعدت خلفيتي في HTML وCSS كثيرًا في فهم وتوجيه الكود الذي تم إنشاؤه بواسطة الذكاء الاصطناعي.
بدلاً من الانتقال عبر المراحل الصارمة، قمت بالتنقل بين أجزاء مختلفة من البناء اعتمادًا على ما هو مطلوب في ذلك الوقت. وفيما يلي أبرز النقاط:
لقد بدأت بالطلب من Cursor + Claude 3.7 إنشاء بنية مشروع Next.js باستخدام Tailwind CSS وShadcn UI. كانت التجربة سلسة بشكل مدهش. لقد قمت ببساطة بوصف ما أردت، وقام الذكاء الاصطناعي بإنشاء النموذج النموذجي بسرعة.
// app/page.tsx - Simple landing page
import Hero from '@/components/landing/Hero'
import FeaturedTools from '@/components/landing/FeaturedTools'
import HowItWorks from '@/components/landing/HowItWorks'
import Features from '@/components/landing/Features'
export default function Home() {
return (
<main>
<Hero />
<FeaturedTools />
<HowItWorks />
<Features />
</main>
)
}كان الجزء الأصعب هو بناء معالجة فعالة للصور. بعد البحث في الخيارات، قررت اتباع نهج مختلط يعطي الأولوية للمتصفح.
المعالجة من جانب العميل - أصبح هذا هو المسار الرئيسي. بالنسبة لمعظم العمليات، استخدمت Browser Canvas API مع مكتبات JavaScript مثل browser-image-compression وimage-conversion وjimp. يتيح ذلك للمستخدمين معالجة الصور مباشرة في المتصفح دون تحميل الملفات إلى الخادم.
مثال على تنفيذ تغيير الحجم باستخدام Canvas API:
function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = (maxWidth / width) * height;
width = maxWidth;
}
if (height > maxHeight) {
width = (maxHeight / height) * width;
height = maxHeight;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
resolve(blob);
}, file.type);
};
img.src = URL.createObjectURL(file);
});
}المعالجة الاحتياطية من جانب الخادم - بالنسبة للعمليات الأكثر تعقيدًا أو التنسيقات غير الفعالة في المتصفح، مثل تحويل AVIF أو TIFF، استخدمت واجهات برمجة التطبيقات بدون خادم مع Sharp.js. كان الجزء المهم هو التأكد من التعامل مع ملفات المستخدم بشكل آمن وعدم تخزينها بعد المعالجة.
لقد حافظت على الحد الأدنى من المعالجة من جانب الخادم ولم أستخدمها إلا عند الضرورة، تمامًا كما تنص الرسالة الموجودة في صفحة “حول” الخاصة بي:
"تتم جميع عمليات التحويل مباشرةً في متصفحك. لا تغادر ملفاتك جهازك أبدًا."لقد منحني هذا النهج المختلط الذي يعتمد على المتصفح أولاً المرونة مع الحفاظ على خصوصية المستخدم كأولوية قصوى.
كان كلود وجيميني مفيدًا للغاية عندما قمت بدمج مكتبات مختلفة وضبط أداء المتصفح. على سبيل المثال، ناقشت ما إذا كنت سأستخدم browser-image-compression أو تطبيق Canvas اليدوي للضغط، وساعدني الذكاء الاصطناعي في مقارنة الإيجابيات والسلبيات.
تم إنشاء واجهة المستخدم باستخدام Shadcn UI وTailwind CSS بسلاسة تامة. ولجعل التجربة أكثر جاذبية، أضفت الرسوم المتحركة Framer Motion وتأكدت من استجابة الواجهة في كل مكان.
لقد استخدمت أيضًا Zustand لإدارة الحالة خفيفة الوزن، مما سمح لي بالتعامل مع حالة التطبيق بدون نموذج معياري إضافي. وكان ذلك مفيدًا بشكل خاص للحفاظ على إعدادات المستخدم عند التبديل بين الأدوات.
// Store for processing status and user settings
const useImageStore = create((set) => ({
originalImage: null,
processedImage: null,
processingStatus: 'idle', // 'idle' | 'processing' | 'done' | 'error'
settings: {
quality: 80,
format: 'webp',
resize: { width: 800, height: 600, maintain: true },
},
setOriginalImage: (file) => set({ originalImage: file }),
setProcessedImage: (result) => set({ processedImage: result }),
setProcessingStatus: (status) => set({ processingStatus: status }),
updateSettings: (newSettings) => set((state) => ({
settings: { ...state.settings, ...newSettings }
})),
resetStore: () => set({
originalImage: null,
processedImage: null,
processingStatus: 'idle',
}),
}));وفي المرحلة النهائية ركزت على:
كانت عملية النشر على Vercel سلسة للغاية. لم يستغرق توصيل مستودع GitHub وشحن نسخة الإنتاج الأولى سوى بضع نقرات.
أحد الأشياء التي أفتخر بها بشكل خاص هو المجموعة الكاملة التي تضم أكثر من 35 أداة صور قمت بإنشائها. وهي منظمة في فئات سهلة التصفح:
لقد قمت بتنفيذ دعم للتحويل بين جميع التنسيقات الشائعة:
الأدوات التي قمت بإنشائها لتقليل حجم الملف عبر التنسيقات:
أدوات لتغيير أبعاد الصورة:
الأدوات ذات الأغراض الخاصة أضفتها:
كان تنفيذ كل هذه الأدوات يمثل تحديًا، خاصة وأن العديد منها يتطلب منطق معالجة معقدًا إلى حد ما. ولكن مع البرمجة الحيوية، تمكنت من إنهاء معظم الوظائف بسرعة. لقد شعرت بصراحة وكأنني أمتلك مساعد مطور يعمل معي دون توقف.
بعد الإطلاق، قدم ImageTools.pro نتائج جعلتني سعيدًا حقًا:
والأهم من ذلك أنه أصبح دليلاً حقيقياً على نجاح التطوير بمساعدة الذكاء الاصطناعي. ما يستغرق عادة أسابيع، انتهيت منه في 5 أيام.
يعد ImageTools.pro مثالًا حقيقيًا لما يمكن أن تفعله البرمجة الحيوية. تم نشر هذا المصطلح بواسطة Andrej Karpathy في فبراير 2025. وفقًا لـ مقال متوسط بقلم Madhukar Kumar، أصبح الترميز الديناميكي اتجاهًا مفيدًا في تطوير البرمجيات، مع ظهور العديد من الأدوات لدعم سير العمل.
يقدم هذا النهج بعض المزايا الرئيسية:
بفضل الذكاء الاصطناعي، تمكنت من الانتقال من الفكرة إلى المنتج العملي بشكل أسرع بكثير من ذي قبل. وهذا يفتح أبوابًا جديدة للتجريب والابتكار التي كانت محدودة بالوقت والموارد.
هل ترغب في إنشاء تطبيق ويب مخصص لعملك؟ راجع خدمة تطوير تطبيقات الويب أو اتصل بنا للحصول على استشارة مجانية.
مؤسس Harun Studio ومطور مواقع ومدوّن ومراجع لاستضافات المواقع. يساعد أصحاب الأعمال على بناء مواقع أكثر صحة من خلال التصميم والتطوير والصيانة طويلة الأمد.
اكتشف رؤى أخرى ترتبط ارتباطًا مباشرًا بهذا الموضوع.
دراسات الحالة دراسة حالة NeatInvoice: تحديد موضع مساحة العمل مقابل مولد PDF، وبنية Editor + Overview، وتتبع الارتباط المباشر، والتصميم الاحترافي الهادئ، ومكدس Next.js + Supabase + Vercel.
اقرأ المقال
دراسات الحالة كيف قامت شركة ICV Training بتحديث موقعها الإلكتروني باستخدام عمال Astro وSanity وCloudflare للتعامل مع 4,905 مستندًا متعلقًا بالتدريب من خلال النشر بمساعدة الذكاء الاصطناعي وإعداد منصة خفيفة الوزن.
اقرأ المقال
دراسات الحالة دراسة حالة حول ترحيل Penasihat Hosting: من إعداد WordPress الذي كان لا يزال قويًا بالفعل إلى Next.js 16 + PostgreSQL للحصول على مرونة طويلة المدى ونظام إدارة محتوى مخصص وصفحات أدوات وأساس منتج أكثر قابلية للتطوير.
اقرأ المقال