بناء تطبيق كامل بدون سطر كود واحد!
أهلاً بيكم يا جماعة! النهارده إحنا قدام لحظة من اللحظات اللي بصراحة ممكن تغير طريقة شغل أي حد فينا للأبد. ليه؟ عشان لأول مرة تقدر تبني تطبيق كامل من أول الفكرة لحد الإطلاق من غير ما تكتب سطر كود واحد، ولا حتى تكون فاهم يعني إيه كود أصلاً!
أيوه، اللي أنت سمعته ده صح! إحنا رسمياً دخلنا عصر “الفايب كودينج”. عصر إنك تقعد تمسك الموبايل وتكتب اللي أنت عايزه باللغة العربية العادية، وتلاقيه بيتحول قدامك لتطبيق شغال زي الفل.
ليه ريبليت (Replit)؟ وليه كل الناس بتتكلم عنه؟
باختصار جداً يا حضرات، عشان ريبليت مش مجرد مكان تبني عليه فكرة، هو منصة كاملة جاهزة تديك كل الأدوات اللي محتاجها في مكان واحد. تعالى نشوف ليه ريبليت مختلف حرفياً عن أي منصة تانية:
- تكتب اللي عايزه باللغة العادية وهو يحوّله لتطبيق شغال بالكامل.
- تختار من أكتر من 300 نموذج ذكاء اصطناعي من غير ما تحتاج أي إعدادات أو حسابات مطورين أو مبرمجين.
- تعمل رابط مباشر بين التطبيق بتاعك وبين أي أدوات بتستخدمها في شغلك زي Notion أو Slack، جوجل درايف، دروبوكس، هاب سبوت أو أياً كان، بضغطة واحدة وبدون أي API keys ولا إعدادات صعبة إطلاقاً.
- تقدر تبني نسخة كاملة “Production Ready” مش مجرد ديمو تجريبي.
- الأهم من كل ده، ريبليت عنده تطبيق موبايل رسمي على أبل وأندرويد، يعني حرفياً الشغل كله في جيبك!
ليه الفيديو ده مهم؟
الفيديو ده مهم يا حضرات لأن ريبليت بيجاوب على سؤال ناس كتير بتسأله: “أنا عندي فكرة تطبيق، أبدأ منين؟” الإجابة ببساطة: ابدأ من ريبليت!
فإحنا النهارده مش بس هنجرب ريبليت، إحنا هنبني تطبيق حقيقي له استخدام فعلي، مش مجرد مثال بسيط. النهارده هنبني مع بعض تطبيق إدارة صيدلية كامل، من أول شاشة الداشبورد لحد إدارة المخزون، المبيعات، الموردين، والتقارير. وهتشوف خطوة بخطوة إزاي الكلام اللي بنكتبه بالعربي بيتحول قدامنا لصفحات ووظائف وقاعدة بيانات وتقارير حقيقية.
هنبدأ بوصف بسيط للتطبيق، ونخلي ريبليت يبني التصميم، وبعدين نخليه يبني الوظائف، ونشوف التطبيق بيتكون قدامنا جزء بعد جزء. وكل ده زي ما قلنا، من غير ما تكتب سطر كود واحد. فيلا بينا!
خطوات بناء تطبيق الصيدلية مع ريبليت
1. الدخول على ريبليت وإنشاء حساب
هتروح لموقع ريبليت من الرابط اللي سيبهولك في وصف الفيديو (أو ابحث عنه). هيفتح معاك الموقع بالشكل ده. أول خطوة تعملها إنك تضغط على كلمة Start Building with AI.
لو مش مسجل دخول أو مش عامل حساب لسه، ده هيوديك على صفحة إنشاء الحساب. اضغط على Login وبعدين Continue with Google وسجل دخول بحساب جوجل بتاعك عادي.
صورة: واجهة تسجيل الدخول في ريبليت.
2. فهم واجهة ريبليت: Build vs. Design
دلوقتي خلاص بقى عندك أكونت على ريبليت. هتلاقي عندك خانتين أساسيتين:
- Build (بناء): دي بتبني التطبيق ككل، الباك إند بتاعه والحاجات اللي مش ظاهرة للمستخدم.
- Design (تصميم): دي بتعمل التصميم بتاع التطبيق أو الموقع فقط.
ممكن تبدأ بالـ “Build” وتدي له الفكرة كلها مرة واحدة وهو يعمل كل حاجة. لكن لو عايز تخصيص أكتر، ممكن نضغط على “Design” ونظبط التصميم الأول، وبعد ما نستقر عليه نتحول للـ “Build” عشان نعمل الأبلكيشن بالكامل.
3. تحضير البرومبت (الوصف)
أنا عايز أعمل أبلكيشن لبرنامج إدارة صيدلية. رحت لـ ChatGPT وطلبت منه يكتب لي برومبت لعملية التصميم. عملي تصميم كويس جداً لبرنامج صيدلية، واداني برومبت كويس باللغة العربية كمان. ده البرومبت اللي استخدمناه:
برومبت تصميم تطبيق الصيدلية
4. بدء التصميم في ريبليت
بعد ما نسخنا البرومبت ده، هنروح لريبليت ونحطه في خانة التصميم. ممكن تضغط على Enhance Prompt عشان ريبليت يحسن البرومبت ده ويخليه احترافي أكتر، بس أنا استقريت على البرومبت بتاعي ده لأنه كله بالعربي وواضح. بعد كده نضغط مباشرة على Start Designing.
صورة: ريبليت بيبدأ تصميم التطبيق.
هنا ريبليت هيبدأ يعمل الواجهة الأمامية أو التصميم بتاع التطبيق ده. الموضوع ممكن ياخد حوالي 3 دقايق. وطول ما هو شغال بيبين لك إيه اللي بيحصل. بعد ما يخلص، هيدينا التصميم بالشكل ده:
5. معاينة تصميم تطبيق الصيدلية
ريبليت عمل تصميم احترافي جداً! الصيدلية سماها “صيدلية الشفاء” زي ما اديته في البرومبت. ونظام الإدارة كله باللغة العربية، وفاهم من نفسه إنه طالما باللغة العربية يبقى من اليمين للشمال (Right-to-Left) ودي حاجة ممتازة، لأن أدوات ذكاء اصطناعي كتير عندها مشكلة في الموضوع ده.
| الشاشة | الوصف | الملاحظات |
|---|---|---|
| الرئيسية (الداشبورد) | عرض إجمالي المبيعات، إجمالي الأصناف، أصناف قربت صلاحيتها تنتهي، ونقص المخزون. بيظهر فيها كمان الأكثر مبيعاً هذا الشهر. | تنبهات لنقص المخزون، صلاحية المنتجات، ووصول طلبيات جديدة. |
| نقطة بيع جديدة | إمكانية عمل فاتورة بيع، اختيار الدواء، تحديد الكمية، وحساب السعر مع الضريبة. | في مرحلة التصميم، عملية البيع لا تتم فعلياً. |
| المخزون | عرض كل الأصناف الموجودة، إمكانية البحث بالاسم، والتصنيف (أقراص، فوار، حقن)، وتصدير لأكسل. | البحث شغال زي الفل. |
| إضافة صنف جديد | إدخال تفاصيل الدواء الجديد (اسم، مادة فعالة، كمية، سعر بيع، شركة، تاريخ انتهاء، باركود). | في مرحلة التصميم، الإضافة لا تحفظ في قاعدة البيانات. |
| الموردين | عرض الموردين الموجودين، وإضافة موردين جدد. | واجهة احترافية للموردين. |
| التقارير | تقارير عن المبيعات حسب القسم والمبيعات الأسبوعية، مؤشرات بيانية. | شغل ملوش حل! |
صورة: تصميم الداشبورد الأولي لتطبيق الصيدلية.
صورة: تصميم صفحة نقطة البيع في التطبيق.
6. التحويل من تصميم لتطبيق كامل (Build)
التصميم عاجبني تمام، مفيش أي تعديل فيه. لو كان عندي تعديل كنت هكتبهوله في المكان المخصص وهو يعدل فيه مباشرة. دلوقتي عايز أحوله لتطبيق الناس تقدر تسجل دخول ليه، تقدر تضيف أدوية جديدة وتنضاف في الداتابيز، ويرجعلها يتحدد سعرها، نحذف شيء، يكون أبلكيشن كامل.
المطلوب مننا دلوقتي ننتقل من عملية الـ Design لعملية الـ Build أو البناء. في فوق كلمة Design، من نفس المكان بنضغط عليها وبنغير من الـ Design للـ App على طول. الـ App ده بيعمل إيه؟ هو فكرة الـ Build بيحولك لأبلكيشن جاهز بالكامل بيقدر يعمل:
- Integrate with AI services and connectors: تقدر تربط الأداة اللي أنت عملتها والبرنامج ده بأدوات الذكاء الاصطناعي التانية وخدمات الذكاء الاصطناعي زي نماذج ChatGPT والحاجات دي.
- Database: تقدر تخزن البيانات اللي بتجيلك في داتابيز، يعني لو ضفت دوا جديد يتحافظ معانا مش زي ما شفنا في التصميم.
هنضغط على كلمة Yes, Convert to App عشان نعمل الخطوة الأخيرة. كان ممكن نختار الخطوة دي في الأول ونضغط على Build وندي له فكرة الأبلكيشن بتاعنا بالكامل مرة واحدة وهو هيديني الأبلكيشن مرة واحدة. لكن أنا بحب أستخدم الـ Design الأول عشان أوافق له على التصميم، لو عجبني أقدر أعدله قبل ما يحوله لأبلكيشن.
دلوقتي هو شغال على تحويله لأبلكيشن. سيبه ما تعملش أي شيء. على الشمال بيقولي كل شيء هو بيعمله أول بأول. الأجمد بقى إنه لما لقى خطأ حصل معين (رابط داخل رابط في الـ HTML)، قال لي خلاص في خطأ موجود وهصلحهولك! بيكتشف الأخطاء عن نفسه وهو شغال عشان ما يطلعليش إيرور في الآخر. ده شيء عجبني جداً. الموضوع ممكن ياخد حوالي 4-5 دقايق.
7. اختبار التطبيق بعد البناء
دلوقتي المفروض الأبلكيشن جاهز بالكامل! نقدر نعمل معاينة مباشرة في متصفح جديد. خلينا نجربه:
- نقطة بيع جديدة: بعنا “أوجمنتين 1 جرام” كمية 2. تمت عملية البيع بنجاح، وتم تسجيل فاتورة وتحديث المخزون.
- الرئيسية: لقينا إن “الأوجمنتين 1 جرام” بقى في قائمة “الأكثر مبيعاً” لأنه أول حاجة اتبعاعت. قاعدة البيانات شغالة زي الفل! أبلكيشن كامل يا جماعة من برومبت واحد فقط.
- المخزون: البنادول إكسترا كان منه 142 علبة. لما بعنا علبة منه، الكمية نقصت لـ 141. قاعدة البيانات شغالة بدون أي مشكلة.
- إضافة صنف: ضفنا دواء جديد اسمه “بروفين” بكمية 100 علبة وسعر 30 ريال. لما رحنا للمخزون لقينا “البروفين” انضاف بكمية 100 علبة.
- الموردين: نقدر نشوف الموردين الموجودين وأرقام تليفوناتهم ونضيف مورد جديد.
- التقارير: بيظهر لنا تقارير عن المبيعات والمخزون والربحية، ونقدر نصدر التقارير دي كملفات PDF.
- تسجيل الخروج: تقدر تسجل خروج من الداشبورد دي، ويكون تسجيل الدخول للأدمنز فقط.
صورة: الواجهة الرئيسية للتطبيق بعد تحويله لتطبيق فعلي.
صورة: شاشة إضافة صنف جديد مع البيانات المدخلة.
8. نشر التطبيق (Publish)
التحفة إن بعد كل ده، ممكن بضغطة واحدة تضغط على Publish وتنشر الأبلكيشن ده بكل سهولة! بس في الحالة دي لازم تعمل Upgrade للبلان بتاعتك (الخطة المدفوعة) عشان تقدر تنشر الموقع الإلكتروني بتاعك وتخليه مرئي، ويكون معاك اللينك بتاعه عشان أي حد يقدر يوصلها ويستخدمها.
لو اشتركت في أي خطة من الخطط المدفوعة دي، بيفتح لك مزايا أكتر بكتير جداً زي Replit Agent، وإنك تنشر التطبيقات والمواقع بتاعتك وتخليها لايف أي حد يقدر يوصلها بدون ما تحتاج استضافة منفصلة، وتقدر تعمل Private Apps. فأعتقد قيمة مقابل سعر كويسة جداً.
الخلاصة: مستقبل بناء التطبيقات
وبكده نكون وصلنا لآخر جزء في رحلتنا. الرحلة اللي بدأناها بجملة بسيطة كتبناها بالعربي، وقدرت تتحول قدامنا لـ فكرة واضحة، لتصميم، لخصائص، ولغاية ما بقى عندنا نواة كاملة لتطبيق إدارة صيدلية. واللي شفناه النهارده بيثبت إن بناء تطبيق فعلي، حتى لو كان تخصصي زي تطبيقات الصيدليات، مش لازم يكون معقد.
وده اللي خلى تجربة النهارده مختلفة، مش لأننا بنبني تطبيق صيدلية فقط، لكن لأننا بنثبت إن أي رائد أعمال دلوقتي يقدر يحول فكرته لبرنامج كامل أو تطبيق أو موقع إلكتروني باستخدام كلامه فقط. بس يا حضرات، أعتقد نقدر نكمل الموضوع ده ونعمل برنامج ما حصلش يكون فيه وظائف أكتر تقدماً من كده بكتير جداً، وكل ده بلغة البشر العادية تماماً.
وبس يا حضرات، بكده نكون وصلنا لنهاية الفيديو. هتلاقي سيب لكم رابط ريبليت تقدروا تروحوا تستخدموه دلوقتي.