محمد عاطف25

إن ال Dedication (الإهداء) هو تعبير شخصي جدا وتقوم فيه بتوجه الإهداء إلى شخص أو أشخاص عزيزين مثل الأهل أو الزوج-الزوجة أو الأصدقاء أو أى شخص أخر في حياتك الخاصة . وهو يكون عاطفي و بسيط وليس طويلا . أما ال Acknowledgements (الشكر والتقدير) فهو تقديم الشكر للأشخاص أو المؤسسات التي ساهمت في نجاح المشروع وهو يجب أن يكون رسمي ومرتب ومنظم ويمكنك أن تجعله طويل إلى حد ما. والمقصود بال System Architecture أنه هو الهيكل العام للنظام الذي يوضح كيف تتفاعل المكونات المختلفة مع بعضها البعض مثل الواجهة و الخادم و قاعدة البيانات والخوارزميات المستخدمة وهيكل المشروع وهكذا وستقوم فيه بشرح عام للنظام مثل: ما هو الغرض من النظام؟ هل هو تطبيق ويب؟ موبايل؟ نظام مكتبي؟ ما هي مكوناته الأساسية؟ يمكنك استخدام مخطط Architecture Diagram حيث يمكنك رسم مخطط يوضح العلاقة بين: Client . Server (الخادم) Database (قاعدة البيانات) APIs External Services .

هل ليس لديك مشروع ؟ أم لديك مشروع وتبحث عن أفكار للتطبيق عليها ؟ وما هي اللغات التي تريد العمل والتطبيق عليها؟

بالتأكيد إن لغات HTML و CSS مهمتان جدا لتطوير التطبيقات باستخدام JS حيث هما الأساس المكون لصفحات الويب الرئيسية فعندما تقوم بتطوير تطبيق ويب باستخدام JS فإنك ستحتاج بالتأكيد إلى HTML و CSS لتصميم وعرض واجهة المستخدم. ولكن هناك بعض الشركات إذا كنت تعمل على React مثلا أو مكتبات الواجهة الأمامية مثل Vue و Angular تطلب فقط التركيز على تلك المكتبات ويوجد أشخاص أخرين هم المسؤولون عن تطوير HTML و CSS . أما إذا كنت تقصد plain javascript ومكتباتها مثل jquery وغيرها فهنا بالطبع يجب أن تتعلم HTML و CSS . فلا يوجد مطور واجهات مستخدم يعمل فقط على جافاسكريبت دون HTML و CSS . وإليك الإجابات التالية لمزيد من التفاصيل :

لماذا لم تقم بإتباع الحلول التي وضحتها لك هذا هو سبب المشكلة الرئيسي . أولا لم تقم بتعديل الدالة وإضافة إسم النموذج gpt-image-1 حيث يبدوا أن حسابك ليس مدفوعا لهذا ليس لك صلاحية الوصول إلى النموذج الإفتراضي dall-e-2 . وأيضا بعد تعديلها سيظهر خطأ أنه ليس لديك رصيد : هذا هو ملف main.js يجب إستخدامه لحل المشكلة الأساسية . بعد ذلك ستجد مشكلة الرصيد يجب شحن رصيدك وإستخدام api_key مختلف. لن يعمل الكود بدون هذه الحلول. main.js

هذا خطأ 400 وليس 429 كالذي سابقا. وهو بسبب أنه ليس لديك رصيد كما وضحت لك . هل قمت بشحن رصيد في حسابك أم لا ؟ وهل قمت بتعديل الكود وإضافة إسم النموذج كما وضحت لك ؟ يرجى إرفاق ملف المشروع المضغوط بعد أخر تعديل أجريته.

يظهر لك خطأ 429 وهذا يعني انه تم إرسال الكثر من الطلبات . يجب الانتظار فترة من الوقت ومن ثم اعادة المحاولة ولا تضغط على الزر سريعا حتى لا يتم ارسال العديد من الطلبات ويظهر الخطا.

لم تقم بوضع إسم النموذج كما أخبرتك . وأيضا تأكد من وضع API_KEY في الكود لديك مع وجود رصيد . هذا هو الكود : const api = ""; const inp = document.getElementById('input') const images = document.querySelector('.images') const getImage = async () => { // make a request to openoia api const methods ={ method: "POST", headers:{ "Content-Type":"application/json", "Authorization":`Bearer ${api}` }, body:JSON.stringify( { "prompt":inp.value, "model":"gpt-image-1", "n":3, "size":"1024x1024" } ) } const res = await fetch("https://api.openai.com/v1/images/generations" , methods) // parse the response as json const data = await res.json() console.log(data); const listImages = data.data; images.innerHTML = ''; listImages.map(photo => { const container = document.createElement('div') images.append(container) const img = document.createElement('img') container.append(img) img.photo.url }) } إذا لم يعمل يرجى فتح ال console وإرسال صورة للخطأ الذي يظهر لك .

يرجى عدم مشاركة ال API_KEY هكذا حتى لا يقوم بإستخدامه أى شخص أخر . يرجى تغير ال api_key لديك . أولا المشكلة أن النموذج يطلب إسم للنموذج الذي تريد إستخدامه وهذا لم يتم توفيره . وأيضا حجم الصورة غير مناسب حيث النموذج لا يستطيع توليد صورة 256x256 . يجب أن يكون methods كالتالي : const methods ={ method: "POST", headers:{ "Content-Type":"application/json", "Authorization":`Bearer ${api}` }, body:JSON.stringify( { "prompt":inp.value, "model":"gpt-image-1", "n":3, "size":"1024x1024" } ) } الآن ستجد أنه تم إرسال الطلب بنجاح ولكن تظهر رسالة خطأ أن الرصيد قد نفذ أو وصلت للحد الأقصى للإستخدام . لهذا تأكد من أن لديك رصيد في حسابك .

هل لديك او قمت بتصميم نماذج ذكاء اصطناعي لتوليد الصور ؟ اذا لم يكن لديك سيتوجب عليك شراء رصيد مثلا على موقع openai لتستطيع استخدامه فى توليد صور بالذكاء الإصطناعي. مثلا إليك هذه الدالة : async function generateImage() { const text = document.getElementById('textInput').value; const container = document.getElementById('image-container'); container.innerHTML = "جاري توليد الصورة..."; try { const response = await fetch("https://api.openai.com/v1/images/generations", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer API_KEY" // استبدلها بمفتاحك }, body: JSON.stringify({ prompt: text, n: 1, size: "512x512" }) }); const data = await response.json(); const imageUrl = data.data[0].url; container.innerHTML = `<img src="${imageUrl}" alt="image">`; } catch (error) { console.error("خطأ في التوليد:", error); container.innerHTML = "حدث خطأ أثناء توليد الصورة."; } } في الدالة السابقة يجب عليك أولا إستبدال API_KEY بال api_key في حسابك على openai .حيث بعد شحن الرصيد سيتوجب عليك إنشاء api_key ووضعه في الكود هنا. بعد ذلك يمكنك إستخدام تلك الدالة لتوليد الصور .

المشكلة لديك في الخاصية backdrop-filter في عنصر body حيث يبدوا أنها لا تعمل كما هو متوقع على عنصر body مباشرة في بعض المتصفحات وهذا خصوصا عندما لا يكون هناك عنصر شفاف بين الخلفية والمحتوى. وأيضا الخطأ الأكبر عند استخدامها على body لأنها قد تكسر طبقات الترتيب (stacking context) للعناصر وتجعل العناصر المثبتة مثل .container تفقد موضعها أو تتصرف بشكل غير متوقع. لذلك يجب فصل عنصر جديد ووضع به تلك الخاصية . وإليك كود HTML التالي : <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body dir="rtl"> <div class="background-overlay"></div> <header class="container"> <h1>عالم</h1> <nav> <a class="active" href="">الرئيسية</a> <a href="">المعلومات</a> <a href="">العمل</a> <a href="">تواصل</a> </nav> </header> <section class="hero"> <div class="tex"> <p>أنشئ صورك بستخدام تقنيات الذكاء الأصطناعي</p> <button>أبدأ الأن</button> <button>ابحث اكثر</button> </div> </section> </body> </html> وهذا هو كود CSS : *{ padding: 0; margin: 0; box-sizing: border-box; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } body{ background: url(ص.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; height: 100vh; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.15); backdrop-filter: blur(4px) brightness(110%); } .container{ width: 100%; height: 10%; background-color: #490183; display: flex; justify-content: space-between; align-items: center; padding: 20px; z-index: 2; position: fixed; } .container h1{ color: white; font-weight: bolder; padding-right: 5rem; } .container nav a{ color: white; text-decoration: none; padding: 10px; transition: all 0.3s ease; } .container nav a:hover{ background: #ffffff5e; } .hero{ display: flex; justify-content: center; align-items: center; padding: 20rem 10rem; font-size: 30px; color: white; font-weight: 700; position: absolute; } button{ padding: 1rem 2rem; border: none; background-color: #490183; color: white; border-radius: 10px; margin-top: 10px;; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } button:hover{ background-color: white; color: #490183; } .main{ width: 100%; height: 100vh; } .main h1{ text-align: center; font-size: 40px; margin-top: 100px; } i{ text-align: center; }

يرجى أيضا إرفاق كود HTML وليس CSS فقط ويفضل ضغط المجلد كاملا وإرفاقه.

هل يمكنك إرفاق الكود الخاص بك لمساعدتك بشكل أفضل. لاحظ أنك وضعت الخاصية position fixed في الكلاس الذي يسمى container في سطر 27 . وهذا الكلاس يحتوي على جميع العناصر الأخرى وليس nav فقط ولهذا غالبا هذا سبب المشكلة. يرجى وضعها في nav وإذا ظلت المشكلة يرجى إرفاق الكود.

يمكنك تكبير الشاشة من خلال الضغط على زر CTRL مع زر + في لوحة المفاتيح. ولتصغير الشاشة الضغط على زر CTRL مع زر - في لوحة المفاتيح. أما لإعادة التعين فيمكنك الضغط على زر CTRL مع رقم 0 . أو ستجد في مكان عنوان الصفحة علامة مثل العدسة يرجى الضغط عليها وإختيار reset .

هل هي صورة في عنصر img أم هو عنصر div به خاصية background-image ؟ عموما يمكنك إستخدام خاصية ال opacity لجعل العناصر شفافة في css . إذا كان عنصر image يمكنك إستخدام التالي : img { opacity: 0.5; } ويمكنك تغير القيمة إلى الشفافية التي تريدها ولكن القيمة هي بين 0 و 1 . أو يمكنك إنشاء عنصر backdrop أو overlay وجعله هو الشفاف وليس الصورة إذا كنت تستخدم عنصر div مع خاصية background-image.

ستجد أسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى طرح سؤالك أسفل الدرس وليس هنا حيث هنا قسم الأسئلة العامة ولا نقوم بإجابة الأسئلة الخاصة بمحتوى الدورة أو الدرس، وذلك لمعرفة الدرس الذي توجد به مشكلتك و لمساعدتك بشكل أفضل. أما إذا كان هذا السؤال غير متعلق بدرس من دروس الدورة فإن زر Run لا يظهر في سطر الأوامر بل يظهر في محرر الأكواد Vs code أو غيرها . أو من برنامج IDLE والذي يأتي مع بايثون تلقائيا.

أعتقد أنك قد كنت سابقا وضعت سؤال وكنت تخبر فيه أنك لا تريد كتابة الأكواد ولكن العمل كمدير مشروع وتقوم بتعين المبرمجين والأشخاص للعمل على المشاريع . إذا أعتقد أنك بحاجة إلى "دورة تطوير التطبيقات باستخدام JavaScript" حيث في تلك الدروة يتم شرح React للواجهات الأمامية وأيضا Node.js مع Express للواجهات الخلفية وأيضا لغة Type Script و إطار عمل Next.js . ولهذا فإنك كمدير مشروع ستتعامل مع كثير من المبرمجين الذين لديهم الخبرات ويعملون على التقنيات السابقة وأيضا إن Java Script مطلوبة بكثرة في المشاريع والوظائف وهكذا بجاتب php و Laravel ستفيدك بشكل كبير تلك الدورة لتكون مدير مشروعات ملم بأغلب وأكثر التقنيات طلبا.

هذا يعتمد على الشركة أو الوظيفة التي ستعمل بها . فمثلا لو قمت بالإلتحاق بوظيفة في شركة محلية في بلدك فليس مطلوبا منك أن تكون متقن اللغة الإنجليزية إتقان تام . أما لو أردت الإلتحاق بشركة عالمية فهنا سيتوجب عليك إتفان اللغة الإنجليزية بشكل كبير حيث في المقابلات أثناء التوظيف ستجد أن الماحدثة والأسئلة ستكون باللغة الإنجليزية وليس العربية. أما لو أردت العمل الحر فيمكنك العمل على منصات عربية مثل موقع مستقل أو خمسات وغيرها من المواقع العربية والتي يكون العملاء فيها عرب واللغة التس ستتحدث بها معهم هي اللغة العربية. ولكن لو أردت العمل على المواقع العالمية فهنا سيتوجب عليك أن تتقن الإنلجيزية لأن أغلب العملاء سيكونون أجانب ومن دول مختلفة ولغة التواصل ستكون باللغة الإنجليزية.

إن الأمور المالية وأمور الدورات والإشتراكات من تخصص الدعم . لذلك يرجى محادثتهم من خلال الرابط التالي : https://support.academy.hsoub.com/conversations من الممكن أن يتأخر الرد قليلا ولكن لا تقلق سيتم الرد عليك ومساعدتكم حيث يوجد ضغط حاليا عليهم .

لا يجب تخطي اى درس دون فهمه الكامل ولو حدثت مشكل لديك او لم تفهم جزء ما يرجى السؤال مباشرة . حيث ستجد اسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى وضع سؤالك اسفل الدرس حيث لا نقوم بإجابة اسألة الدورات في قسم الأسئلة العامة وذلك لمساعدتك بشكل أفضل. إن الاستخدام الأساسي لكلمة الاسترجاع (return) هو لإرجاع قيمة محددة من دالة أو إجراء إلى الجزء الذي استدعاها. فمثلا نحن نريد إنشاء دالة تقوم بجمع رقمين . بعد تنفيذ الكود وجمع الرقمين . نعيد عند إستدعاء تلم الدالة أن تظهر لنا الرقمين وتقوم بإعادتهم . لو قمنا بكتابة كود جمع الرقمين في الدالة فإن السطر الذي تم إستدعاء الدالة فيه لا يعمل أى شئ مما حدث بداخل الدالة ولهذا لا يعرف مجموع الرقمين أو أى شئ أخر . وهنا تأتي أهمية كلمة return والتي تقوم بإعادة قيمة ما إلى خارج الدالة . وهنا في الدالة التي لدينا يمكننا عند جمع الرقمين أن نقوم بإستخدام return وإعادة مجموع هذه الأرقام. وهكذا أى مكان يتم إستدعاء فيه هذه الدالة وتمرير رقمين ستجد أنه يتم إرجاع مجموعهم . وإليك الدرس التالي لتوضيح أكثر عن الدوال :

يبدوا أنك قد قمت بإنشاء موقع static أى مواقع ثابته لا تتغير محتوياتها فإذا كان الأمر كذلك فبالفعل ستجد صعوبة قليلة في بادئ الأمر . حيث ستتعامل مع تعقيدات React ولكن الموقع الخاص بك لا يحتاج إلى ذلك. ولكن لو أردت إنشاء موقع صفحة واحده (Single Page Application) أى أن الموقع لا يقوم بإعادة التحمل بل عند الذهاب إلى صفحة ما فإنه يتم حذف العناصر ووضع العناصر الجديدة بدلا منها تلقائيا دون أن تقوم أنت بذلك. ولهذا فإن المواقع الدايناميكة والتي تعتمد على إحضار البيانات من الخوادم ومن خلال ال API والتي البيانات بها تتغير بإستمرار بناء على الحالات والمستخدمين . فهنا لو إستخدمت Java Script مباشرة ستجد صعوبة بالغة جدا في التعامل مع ال DOM ومع العناصر . حيث ستقوم بحذف العناصر بنفسك وإنشاء العناصر الجديدة ومن ثم وضعها في الصفحة والتي ستجعل الموقع بطئ والكود الخاص بك كبيرا جدا وأيضا صعب ومعقد. أما React فإنها تستعمل ما يسمى "Virtual DOM" والذي يدير تحديثات العناصر بطريقة فعالة ويجعل عملية التلاعب بالعناصر سهلة ومنظمة وكل ما عليك فعله فقط هو إنشاء المكونات والعناصر و React هو من سيتولى عملية حذف وإضافة العناصر بطريقة سريعه جدا . ولهذا فإن React مناسب فقط للمواقع الديناميكية ومواقع الصفحة الواحدة. أما المواقع الثابتة فإستعمال React سيجعل عملية التطوير كبيرة ومعقدة.

هل تقصد الدروس في الدورة هنا على الأكاديمية ؟ إذا كان كذلك فحاليا لا تتوفر أى ملخصات أو ترجمة "إسكربت" للدورات وذلك منعا لسرقة محتوى الدورة ونشرها على الإنترنت . ولكن ستجد في بعض الدروس أسفل الفيديو يتم توفير روابط للملخصات أو مقالات المنشورة بشكل مجاني هنا على موقع الأكاديمية أو على موسوعة حسوب .

إن node خاصة بجزء الواجهة الخلفية أى الخادم . ولهذا لا يمكن إستخدان DOM مباشرة لأن الدردشة تتطلب خادم ليقوم المستخدمين بالإتصال وإرسال الرسائل إلى بعضهم البعض . أما إذا كنت تقصد إستخدام جافاسكريبت فقط لإنشاء الواجهة الأمامية فنعم بالطبع يمكنك ذلك . ولكن الأمر سيكون صعبا للغاية ولهذا مكتبة React ستسهل عليك الكثير من الأمور.

ما هي لغات البرمجة التي تعلمتها إلى الآن ؟ وهل وصلت إلى مسار أساسيات "أساسيات Node.js" في دورة "تطوير التطبيقات باستخدام JavaScript" ؟ يرجى أولا قراءة التعليق السابق إذا لم تكن قد قمت بالوصول إلى المسار بعد.

إن ما تريد إنشاءه يعتمد بشكل كبير على لغة nodejs مع مكتبة express وأيضا socket.io لإرسال الرسائل اللحظية للمستخدمين وإنشاء الغرف. وبما أنك مشترك في دورة "تطوير التطبيقات باستخدام JavaScript" ستجد مسار "تطبيق دردشة يشبه WhatsApp" حيث في خذا المسار ستتعلم إنشاء تطبيق دردشة كامل . ولكن سينبغي عليك دراسة أساسيات nodejs مع react.

ستجد أسفل فيديو الدرس صندوق للتعليقات كما هنا يرجى طرح سؤالك أسفل الدرس وليس هنا حيث هنا قسم الأسئلة العامة ولا نقوم بإجابة الأسئلة الخاصة بمحتوى الدورة أو الدرس، وذلك لمعرفة الدرس الذي توجد به مشكلتك و لمساعدتك بشكل أفضل.