في هذا الموضوع نشرح خطوة بخطوة كيف تصنع تطبيق ذكاء اصطناعي شبيه بـ ChatGPT، باستخدام Replit، رفعه على GitHub، واستضافته على Render.
وسأضع مثال عملي لمشروعي الشخصي في النهاية. https://aistudio.google.com/app/prompts/1tVrkU5UtCkwWrheLceUgHIr7O6nXSpTh
ندخل الى ستوديو قوقل ونطلب منه انشاء كود من صفحة واحدة لتطبيق او موقع يشبه Chatgpt او أي موقع تريده
إنشاء مشروع في Replit
https://replit.com/refer/jacka2718
افتح Replit وأنشئ Repl جديد بلغة Python.
استخدم Flask لإنشاء واجهة بسيطة.
أنشئ ملفات:
نقوم بي مطالبة. ونضع الكود الدي نسخناه من ستوديو قوقل main.py
templates/index.html
static/style.css.
مع وضع apikey سوف يفهم كل شىء موقع replit .env لوضع مفتاح OpenRouter API.
عند الانتهاء من بناء الموقع. نطلب من replit انشاء قاعدة بيانات ونطلب منه ضغط المشروع بي صيغة zip ثم نرفعه الى الجهاز
- تحميل مشروع من موقع Replit كملف ZIP
نرفع الموقع الى GitHub
الطريقة
- إنشاء مستودع GitHub
- اذهب إلى GitHub.com وسجل الدخول.
- اضغط على New Repository.
- اختر اسمًا للمستودع (مثلاً: My-GPT-App) ثم اضغط Create Repository.
- رفع المشروع إلى GitHub
- بعد فتح المستودع الجديد، ستجد خيار Upload files.
- بعد فك الضغط على المشروع الـ ZIP
اضغط Upload files
اختر كل ملفات المشروع
ثم اضغط Commit changes.
يمكنك الآن ربطه بـ Render
https://dashboard.render.com/
لربط مشروعك على GitHub بـ Render، اتبع هذه الخطوات
1. سجّل الدخول إلى Render.
2. اختر New > Web Service.
3. اضغط على Connect your GitHub account إذا لم يكن مرتبطًا بعد.
4. اختر المستودع الذي يحتوي على مشروعك.
5. اضبط الإعدادات:
Branch: عادةً main
Build Command: حسب مشروعك (مثلاً pip install -r requirements.txt)
Start Command: مثل gunicorn main:app
6. اضغط Create Web Service.
شرح رسمي من Render:
https://render.com/docs/deploy-flask
لربط موقعك المستضاف على Render بقاعدة بيانات ودومين فرعي:
1. إنشاء قاعدة بيانات على Render
1. من لوحة تحكم Render، اختر "New" > PostgreSQL.
2. أدخل اسمًا لقاعدة البيانات.
3. بعد الإنشاء، ستحصل على معلومات الاتصال (HOST، USER، PASSWORD...).
4. انسخ هذه المعلومات وأضفها إلى إعدادات متغيرات البيئة (Environment Variables) في تطبيقك على Render.
---
- ربط قاعدة البيانات بالموقع
في كود Python (Flask أو Django مثلاً)، استخدم مكتبة psycopg2 أو ORM مثل SQLAlchemy.
استخدم URI الذي حصلت عليه من Render لربط قاعدة البيانات.
1. إعداد دومين فرعي على Render
2. من إعدادات التطبيق في Render، اختر Custom Domains.
3. أضف الدومين الفرعي (مثل: bot.dztech.site).
4. Render يعطيك سجل CNAME لتضيفه في إعدادات DNS للدومين الأساسي (عبر Namecheap أو Cloudflare أو غيرها).
رابط مفيد من Render لتفاصيل إضافية:
https://render.com/docs
موقعي الذي تم عمله بدون معرفة بي البرمجة مع تطبيق apk
https://dzteck-chat.onrender.com/
