الدليل التعليمي
كيفية استخدام أوترا
خطوة بخطوة، من أول فكرة إلى موقع منشور والكود بيدك.
الخطوة 1
ابدأ مشروعك الأول
اوصف فكرتك بكلامك العادي، وأوترا يبدأ يبنيها قدامك.
- اكتب فكرتك في صندوق الكتابة بالصفحة الرئيسية، بالعربي، باللهجة السعودية أو بالإنجليزي، بنفس الطريقة اللي تشرحها فيها لشخص قدامك.
- اضغط «ابدأ البناء». أوترا يجهز بيئة معزولة خاصة بمشروعك وحده، ملفاتها ما تتشارك مع مشاريع أي حد ثاني.
- تابع خطوات البناء لحظة بلحظة في المحادثة: الصفحات والبيانات والمنطق تنبني وحدة ورا الثانية قدامك. تقدر كمان تختار «UI Styles» عشان تحدد اتجاه التصميم اللي يعجبك من البداية.
- بعد ما يخلص، تقدر تكمل تطلب تعديلات بنفس المحادثة في أي وقت، المشروع يظل مفتوح للتطوير ولا ينقفل.
الخطوة 2
افتح الـ Preview وشوف موقعك شغّال
معاينة حية جنب المحادثة، تتحدّث فورًا مع أي طلب.
- بمجرد ما يخلص البناء، أوترا يفتح لك معاينة حية (Preview) لموقعك أو تطبيقك جنب نافذة المحادثة مباشرة.
- أي تعديل تطلبه بالمحادثة ينعكس في المعاينة على طول، تشوف النتيجة وأنت تكلّم أوترا، مو بعدين.
- رابط المعاينة هذا خاص فيك أنت بس، ما أحد يشوفه غيرك، لين ما تقرر تنشر المشروع للعالم.
شاتكودمعاينة
نشر
معاينة
مباشر
عيادة الابتسامةاحجز موعدك
الخطوة 3
استخدم «Select element» عشان تعدّل بصريًا
اضغط زر Select element، واختر أي شي في الصفحة، وقل لـ أوترا وش تغيّر فيه.
- فوق المعاينة فيه زر اسمه «Select element»، اضغط عليه وبعدها اختر أي عنصر في الصفحة (نص، صورة، زرار، سكشن كامل).
- العنصر اللي تختاره يُرسل كـ context للمحادثة تلقائيًا، فتقدر تكتب طلبك بشكل مباشر زي «كبّر هذا الخط» أو «احذف هذا السكشن» من غير ما تشرح مكانه.
- هذا التعديل أسرع للتغييرات الدقيقة على عنصر واحد. أما التغييرات الكبيرة، أو اللي تلمس أكثر من جزء وتحتاج منطق وربط بيانات، فالمحادثة العادية أفضل لها.
معاينة
Select element
عيادة الابتسامةh1.hero-title
كبّر هذا الخط
الخطوة 4
جرّب موقعك على أجهزة مختلفة
بدّل بين شكل الجوال والتابلت والديسكتوب من نفس الشاشة.
- من شريط أدوات المعاينة، تقدر تبدّل بين مقاس الجوال والتابلت والديسكتوب من غير ما تحتاج تفتح جهاز ثاني.
- كذا تتأكد إن التصميم شغّال صح وواضح على كل المقاسات قبل ما تنشر موقعك للناس.
- لو أوترا بنى لك تطبيق جوال، تقدر تجربه على جوالك الحقيقي مباشرة عن طريق تطبيق Expo Go ومسح رمز QR.
معاينة
الخطوة 5
انشر على نطاق أوترا المجاني
زر واحد، ورابط جاهز تشاركه مع أي أحد، بدون إعداد استضافة.
- اضغط زر «نشر» فوق المشروع، فيصبح مشروعك «متاح للجميع» وتاخذ رابط مباشر تشاركه مع أي أحد فورًا.
- الرابط يكون على نطاق فرعي مجاني مثل your-app.uttra.io، بدون ما تعمل أي إعداد استضافة بنفسك.
- المواقع المنشورة تشتغل على موارد باقتك (معالجة وذاكرة وتخزين) وموزّعة تلقائيًا، فهي جاهزة لزيارات حقيقية من غير ما تحتاج تجهّز خادم.
- لو ضغطت «نشر» مرة ثانية بعد تعديل، تظل النسخة القديمة شغّالة للزوار لين ما تتأكد النسخة الجديدة إنها سليمة، وموقعك ما ينقطع أبدًا في النص.
شاتكودمعاينة
نشر
نشرخلّ المشروع متاح للجميع
الاستضافة
0.8 vCPU
المعالج
2.4 GB
الذاكرة
24 GB
التخزين
الدومين
دومين أوترا
clinic-smile.uttra.io
دومين خاص
اربط دومينك، مجانًا مع كل خطة
نشر
الخطوة 6
اربط نطاقك الخاص (Domain)
موقعك على نطاقك الخاص، مجاني مع كل باقة.
- من شاشة «نشر»، اختر «نطاق مخصّص» وأدخِل نطاقك، مثل app.example.com.
- أضف سجلّات الـ DNS اللي تعرضها لك أوترا في لوحة تحكم مسجّل نطاقك، عادةً سجل TXT للتحقق، وسجل A.
- اضغط «التحقق من النطاق». بعد ما الإعدادات تنتشر (ممكن تاخذ شوية وقت)، موقعك يصير شغّال على نطاقك مباشرة.
| النوع | المضيف | القيمة |
|---|---|---|
| TXT | @ | uttra-verify=8a2f... |
| A | @ | 76.13.x.x |
تم التحقق: موقعك شغّال على نطاقك
الخطوة 7
اربط GitHub وادفع الكود لمستودعك
نسخة كاملة من الكود، في مستودعك الخاص.
- من تبويب «GitHub» داخل المشروع، اربط حسابك برمز وصول شخصي (Personal Access Token) بصلاحية repo.
- بعد الربط، ادفع (push) مشروعك مباشرة لمستودعك الخاص في أي وقت تحب.
- استيراد مستودع موجود (pull) ممكن تعمله عن طريق الترمينال داخل بيئة المشروع بأوامر git المعتادة مثل git clone و git pull.
ربط GitHub
clinic-smile-appدفع (Push)
الخطوة 8
حمّل الكود أو عدّله بنفسك من الترمينال
الكود ملكك بالكامل، وما هو محبوس داخل المنصة.
- الكود ملكك بالكامل. تقدر تدفعه لـ GitHub في أي وقت، أو تنزّله/تنسخه مباشرة عن طريق الترمينال المدمج داخل المشروع.
- الترمينال يعطيك بيئة تطوير حقيقية: تفتح الملفات وتعدّلها يدويًا، وتثبّت أي حزمة npm أو حزمة نظام يحتاجها مشروعك.
- يعني مو لازم تعتمد على المحادثة بس، تقدر تشتغل كمبرمج كامل داخل نفس المشروع في أي وقت.
zsh
$
$
جاهز تجرّب بنفسك؟
مجاني · بدون بطاقة ائتمانية