Mustafa Suleiman

ما تريده هو إضافة الـ animation إلى path.wheel، و يمكنك بذلك باستخدام خواص الـ CSS الخاصة بالـ stroke-dasharray و stroke-dashoffset مع الـ keyframes. حيث سيتم ربط الـ stroke-dasharray بطول الـ path والـ stroke-dashoffset سيتم استخدامه لتحديد موقع بدء الـ path. حاول تجربة الكود التالي: .wheel { stroke-dasharray: 80, 250; /* قيمة الطول الإجمالي للـ path وهي 250px */ stroke-dashoffset: 0; animation: scoll 2s ease infinite; } @keyframes scoll { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -250; /* سيتم تحريك الـ path بطولها الإجمالي باتجاه الأعلى 250px */ } } لاحظ أن stroke-dasharray تأخذ مجموعة من الأرقام، وتحدد القيمة الأولى طول الـ dash (الخط المتقطع) والقيمة الثانية طول الـ gap (الفراغ)، وفي المثال تم استخدام 80 لطول الـ dash و 250 لطول الـ gap، والطول الإجمالي للـ path هو 250، بمعنى آخر، يتم رسم dash بطول 80، ثم رسم gap بطول 250 وهكذا. وفي keyframes يتم تحريك الـ stroke-dashoffset من 0 إلى -250، وهذا يعني أن الـ path سيتحرك باتجاه الأعلى بمقدار طول الـ path الإجمالي (250)، وسيتم تكرار هذه الحركة بلا نهاية باستخدام infinite في الـ animation.

في البداية قم بتجربة وضع !important للتنسيق وذلك لرؤية ما إذا كان هناك تنسيقات أخرى متداخلة. و المشكلة يمكن أن تكون ناتجة عن عدم تعريف أحجام العناصر بشكل صحيح في تنسيقات CSS، وإذا كانت هذه المشكلة تظهر عند حجم الشاشة 991 بكسل، فإنه يمكن أن يكون هذا الحجم هو نقطة الانقسام Break point بين التصميمات الخاصة بالشاشات الصغيرة والكبيرة. ,بما أنك تستخدم Flexbox للتصميم، فيجب عليك التأكد من أن جميع العناصر الموجودة في قسم الـ Flexbox يمكن أن تتناسب بشكل صحيح مع حجم الشاشة، فإذا كانت العناصر غير معرفة بشكل صحيح، فإنها قد تتداخل مع بعضها البعض وتتسبب في المشكلة التي تشير إليها. بالنسبة لخاصية flex-direction: column، يرجى التأكد من أن جميع العناصر الموجودة في Flexbox تم وضعها بشكل صحيح وتحديد أحجامها بشكل صحيح، وحاوال تجربة إضافة flex-shrink: 0 على العناصر الثابتة بشكل صحيح وعدم التغيير في حجمها عند تغيير حجم الشاشة. أيضًا حاول تجربة إعادة تصميم Flexbox الخاص بك باستخدام الـ CSS Grid للتحكم بالتخطيط والأحجام بشكل أفضل. يتيح لك الـ CSS Grid تحديد أحجام الأعمدة والصفوف بدقة وتحكم في تنسيق العناصر بشكل أفضل، مما يجعل من السهل التحكم في التصميم عند تغيير حجم الشاشة. وأرجو منك مشاركة مجلد المشروع أو الكود الخاص بك لتفقد المشكلة، حيث أن جميع الإجابات التي ستحصل عليها مجرد إقتراحات.

لا تستخدم let في تعريف المعاملات الواردة في تعريف الدالة، حيث يتم تمرير المعاملات كقيم وليس كمتغيرات، بل يتم استخدام let لتعريف متغيرات داخل الدالة أو خارجها. وكمثال، الدالة التالية تقوم بإجراء عملية جمع على مدخلين وإرجاع النتيجة: function addNumbers(num1, num2) { return num1 + num2; } let result = addNumbers(2, 3); // يحتوي result على القيمة 5 تم تمرير القيم 2 و 3 كمدخلات للدالة addNumbers باستخدام المعاملات num1 وnum2 التي تم تعريفها في تعريف الدالة، وتحدث عملية الجمع داخل الدالة باستخدام هذين المدخلين، لكن لم يتم استخدام let في تعريف هذه المعاملات. بالإضافة إلى ذلك، يمكن استخدام let لتعريف متغيرات داخل الدالة، على النحو التالي: function multiplyNumbers(num1, num2) { let result = num1 * num2; return result; } let product = multiplyNumbers(4, 5); // يحتوي product على القيمة 20 في المثال، تم تعريف متغير result باستخدام let داخل الدالة multiplyNumbers، حيث يتم حساب الناتج من عملية الضرب بين num1 و num2 وحفظ القيمة في result، وإرجاع هذه القيمة من الدالة وتخزينها في product. ويمكن القيام بعمليات مختلفة باستخدام المتغيرات المعرفة باستخدام let داخل الدالة، وتمرير المعاملات كقيم فقط دون استخدام let. وقد تم الإشارة إلى الفرق بين const و let و var في الإجابة السابقة.

يمكنك تجديد المفتاح Key بسهولة من خلال الخطوات التالية: 1- بعد تسجيل حساب في موقع من خلال الرابط التالي https://www.themoviedb.org/signup وتفعيل البريد الإلكتروني، قم بالضغط على صورة الحساب الخاص بك كما في الصورة التالية: 2- قم بالضغط على الإعدادات من الخيارات التي ستظهر لك: 3- ستجد خيارات على الجهة اليسرى من الشاشة، إختر منها API كما في الصورة. 4- وأخيرًا ستجد عنوان باسم Request an API Key فقم بالضغط على Click here لطلب مفتاح جديد. ويمكنك استخدام مواقع أخرى للحصول على API مجانية، مثل: Open Movie Database (OMDb) - يوفر API مفتوح ومجاني لمعلومات الأفلام. Rotten Tomatoes - يوفر أيضًا API لمعلومات الأفلام والتقييمات. ويمكنك استخدام الموقع التالي https://publicapis.dev/ للبحث عن أي API مجاني تريده، فمثلاً لو قمت بالبحث عن movies سيظهر لك العديد من الـ APIs المتاحة. https://publicapis.dev/search?q=movies

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

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

ما تطلبه هو برمجة مشروع كامل ومن المستحيل توفير ما تريده هنا، بل يجب الإتفاق مع مبرمج عن المميزات التي تريدها، أو القيام بها أنت إذا كنت تمتلك المهارات البرمجية. أولاً، بالنسبة للبث المباشر، باستطاعتك استخدام تقنية WebRTC التي تسمح للمستخدمين ببث محتوى الفيديو والصوت بشكل مباشر دون الحاجة إلى برامج إضافية. ثانياً، بالنسبة للاستايلات، يمكن استخدام CSS و JavaScript لتصميم استايلات جذابة لموقعك، من خلال استخدام مكتبات مثل Bootstrap و Materialize لتسهيل هذه المهمة. ثالثاً، بالنسبة للدردشة، يمكنك استخدام تقنيات الويب سوكيت لإنشاء غرف الدردشة والردود العامة، وتتوفر مكتبات مثل Socket.io . رابعًا، بالنسبة للاستايلات للرومات والخلفيات للاعضاء، بالإمكان إضافة هذه الميزات عبر إنشاء صفحات خاصة للأعضاء وتحميل الخلفيات والاستايلات المخصصة لهم. خامسًا، بالنسبة للاتصال الصوتي، عليك باستخدام تقنيات WebRTC مرة أخرى لإضافة ميزة الاتصال الصوتي إلى موقعك. سادسًا، بالنسبة للأستوري والتفاعلات على المنشورات، ستحتاج إلى JavaScript و CSS لتصميم وتنفيذ هذه الميزات أو استخدام إطار Vue.js أو مكتبة React.

سأذكر لك طريقتين لإستدعاء الصورة في React و Webpack الطريقة الأولى باستخدام require الخطأ الذي في الصورة يحدث عندما يتم استخدام require() function داخل تعبير أو متغير، بدلاً من استخدامها في موضع يمكن التعرف عليه أثناء تحليل الكود بواسطة Webpack. حاول استخدام مكتبة webpack-sources لتحويل المسارات المطلوبة إلى ثوابت خلال التحليل، ويمكن فعل ذلك بتحديث ملف Post.tsx إلى الشكل التالي: import React from 'react'; import { Source } from 'webpack-sources'; // استدعاء webpack-sources interface PostProps { _id: string; Likes: number; loves: number; haha: number; wow: number; sad: number; angry: number; author_avatar: string; author_name: string; comments_content: string; comments_count: number; content: string; createdat: string; date: string; updatedAt: string; image: Source; // استخدام Source بدلاً من string } const Post: React.FC<PostProps> = ({ _id, Likes, loves, haha, wow, sad, angry, author_avatar, author_name, comments_content, comments_count, content, createdat, date, updatedAt, image, // استخدام الصورة هنا }) => { return ( <div className="al1-post" key={_id}> <div className="al1-post-header"> <img src={author_avatar} alt={author_name} /> <h3>{author_name}</h3> <p>{date}</p> </div> <p className="al1-post-content">{content}</p> {image && <img src={image} alt="Post Image" />} // استخدام الصورة هنا <div className="al1-post-reactions"> <button>{Likes} Likes</button> <button>{loves} Loves</button> <button>{haha} Haha</button> <button>{wow} Wow</button> <button>{sad} Sad</button> <button>{angry} Angry</button> </div> <div className="al1-post-comments"> <h4>{comments_count} Comments</h4> <p>{comments_content}</p> </div> </div> ); }; export default Post; في المثال، تم استخدام Source بدلاً من string في النوع المعرف للخاصية image، استخدام الصورة في المكان المناسب، وذلك بعد تحويلها إلى ثابت باستخدام webpack-sources. ويجب عليك التأكد من تثبيت webpack-sources في مشروعك باستخدام npm قبل استخدامها، من خلال الأمر التالي: npm i webpack-sources الطريقة الثانية باستخدام import باستطاعتك استخدام الـ import لاستيراد الصور في ملفات JavaScript أو TypeScript بدلاً من استخدام الـ require. بالإمكان إضافة ملف الصور إلى مجلد الـ assets في مشروع React، ثم استيرادها باستخدام الـ import في المكان المناسب. على سبيل المثال، إذا كان ملف الصور يسمى "image.png"، عليك استيراده كالتالي: import React from 'react'; import image from '../assets/image.png'; const MyComponent = () => { return ( <div> <img src={image} alt="My Image" /> </div> ); }; export default MyComponent; تم استيراد الصورة باستخدام الـ import، واستخدامها في عنصر img في المكان المناسب، ويجب تحديد المسار الصحيح لملف الصورة في الاستيراد. وبالتالي، يمكن استخدام هذه الطريقة أيضًا لاستدعاء الصور داخل اللوب الخاص بك في ملف Post.tsx، قم بتحميل الصور إلى مجلد الأصول (assets) الخاص بمشروع React، ثم إضافتها باستخدام الـ import في ملف Post.tsx.

حاول تجربة استدعاء الصور باستخدام require() function لتحميل الصورة بشكل صحيح في اللوب، كالشكل التالي: <div className="al1-posts"> {posts.map((post) => { return ( <Post _id={post._id} Likes={post.likes} loves={post.loves} haha={post.haha} wow={post.wow} sad={post.sad} angry={post.angry} author_avatar={post.author_avatar} author_name={post.author_name} comments_content={post.comments_content} comments_count={post.comments_count} content={post.content} createdat={post.createdat} date={post.date} updatedAt={post.updatedAt} key={post._id} image={require(`../images/${post.image}`)} // استدعاء الصورة هنا /> ); })} </div> حيث تم استدعاء الصورة باستخدام require() function داخل اللوب، مع تحديد المسار الصحيح للصورة باستخدام post.image، وباستطاعتك استخدام هذا النهج في أي مكان يتم فيه استدعاء الصور.

بالنسبة لإصدار react-router-dom": "^6.10.0 الذي تقوم باستخدامه، فالطريقة الصحيحة لكتابة الكود في ذلك الإصدار هي كالتالي: استيراد المكتبة في الملف الرئيسي لتطبيق React باستخدام الأمر التالي: import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; الآن، يمكن استخدام Routes component لتحديد المسارات والعناوين المطابقة لها، ن خلال استخدام Route component داخل Routes لتحديد مكان عرض المكون الخاص بالمسار المحدد. ولاحظ أنه تم استيراد BrowserRouter as Router. ويمكن استخدام BrowserRouter أو HashRouter كمكون رئيسي لتحديد أسلوب توجيه المسارات في تطبيق React. حيث BrowserRouter يعتمد على تاريخ المتصفح ويستخدم رابط URL كمفتاح رئيسي لتوجيه المستخدمين إلى الصفحات المحددة. ولكن يجب على المستخدمين الذين يريدون الوصول إلى صفحة محددة في التطبيق مشاركة الرابط URL الذي يحتوي على المسار. أما HashRouter يستخدم التجزئة (#) في عنوان URL لتوجيه المستخدمين إلى الصفحات المحددة ولا يتطلب مشاركة رابط URL كامل للصفحة. function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); } يتم تحديد مسار الصفحة الرئيسية باستخدام العنوان '/' وعرض المكون Home. ومسار الصفحة About بواسطة العنوان '/about' ويعرض المكون About. ومسار الصفحة Contact بواسطة العنوان '/contact' ويتم عرض المكون Contact، وأخيراً، يتم تحديد مسار الصفحة التي لا تتطابق مع أي من المسارات السابقة باستخدام العنوان '*' وعرض المكون NotFound. علاوة على ذلك، باستطاعتك استخدام Navigate component بدلاً من Redirect component في React Router v6 لتحويل المستخدمين إلى صفحات أخرى. import { Navigate } from 'react-router-dom'; function Home() { return <Navigate to="/about" />; } استخدمت Navigate component لتحويل المستخدمين إلى صفحة About باستخدام العنوان '/about'.

ستجد رابط ملفات المشروع في الفيديو الخاص بتعريف المسار في البداية، ودائمًا ستجد الملفات أو رابط المستودع في الفيديو الخاص بالمقدمة أو مدخل أو تعريف المسار. وأرجو منك طرح الأسئلة الخاصة بالدورة أسفل فيديو الدورة، والأسئلة العامة الغير خاصة بالدورة يتم طرحها في قسم أسئلة البرمجة هنا.

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

أرجو توضيح عنوان السؤال والسؤال نفسه، فما المطلوب بالضبط لنتمكن من مساعدتك؟

سأشرح لك من خلال خطوات بسيطة: 1- إنشاء شكل HTML للفاتورة، باستخدام عناصر HTML المختلفة لتحديد تفاصيل الفاتورة مثل الشعار وتاريخ الفاتورة ومجموع الفاتورة وقائمة المنتجات. 2- إنشاء مصفوفة JavaScript لتخزين تفاصيل المنتجات، حيث يتم تخزين تفاصيل كل منتج في صف منفرد في المصفوفة، مثل اسم المنتج والكمية والسعر. 3- إنشاء دالة JavaScript لإضافة منتج جديد إلى المصفوفة، لتحديد الصف الذي يجب إضافة المنتج إليه في المصفوفة، ثم إضافة التفاصيل الخاصة بالمنتج إلى هذا الصف. 4- إنشاء دالة JavaScript لحساب مجموع الفاتورة بناءً على قائمة المنتجات الموجودة في المصفوفة، ويتم حساب المجموع الإجمالي عن طريق ضرب كمية المنتج بسعره وجمع قيم الناتج لكل المنتجات. 5- ربط الشكل HTML بدوال JavaScript المناسبة، عن طريق استخدام العناصر HTML المختلفة مثل الأزرار وحقول الإدخال وتعيين وظائف JavaScript لهذه العناصر لتنفيذ العمليات المطلوبة على المصفوفة وحساب مجموع الفاتورة. مثال بسيط. HTML: <!DOCTYPE html> <html> <head> <title>Invoice</title> <script defer src="invoice.js"></script> </head> <body> <h1>Invoice</h1> <table> <thead> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody id="product-list"> <!-- products will be added dynamically here --> </tbody> <tfoot> <tr> <td colspan="2">Total:</td> <td id="total">0</td> </tr> </tfoot> </table> <button id="add-item">Add Item</button> </body> </html> JavaScript: // تعريف المصفوفة الفارغة لتخزين المنتجات const products = []; // دالة لإضافة منتج إلى المصفوفة function addProduct() { // الحصول على تفاصيل المنتج من مدخلات المستخدم const name = prompt("Enter product name:"); const quantity = parseInt(prompt("Enter quantity:")); const price = parseFloat(prompt("Enter price per unit:")); // إضافة المنتج إلى المصفوفة products.push([name, quantity, price]); // عرض قائمة المنتجات المحدثة const productList = document.getElementById("product-list"); const row = document.createElement("tr"); row.innerHTML = `<td>${name}</td><td>${quantity}</td><td>${price}</td>`; productList.appendChild(row); // حساب وعرض السعر الإجمالي const total = products.reduce((acc, curr) => acc + curr[1] * curr[2], 0); const totalElement = document.getElementById("total"); totalElement.innerHTML = total.toFixed(2); } // إلحاق مستمع الحدث بزر "Add Item" const addItemButton = document.getElementById("add-item"); addItemButton.addEventListener("click", addProduct); في المثال، قمت بإنشاء شكل HTML للفاتورة يحتوي على جدول يعرض قائمة المنتجات ومجموع الفاتورة، بالإضافة إلى زر لإضافة منتج جديد، وربط الزر بدالة JavaScript التي تطلب من المستخدم إدخال تفاصيل المنتج الجديد، ثم تقوم بإضافة المنتج إلى المصفوفة وتحديث الجدول ومجموع الفاتورة. ومن الأسهل القيام بذلك عن طريق استخدام إطار عمل مثل Vue.js وهو ما أنصحك به لكونك تقومين حاليًا بتعلم PHP ولارافيل، لكونه متوافق بشكل كبير مع إطار لارافيل. وإليك نفس المثال باستخدام Vue.js. HTML: <!DOCTYPE html> <html> <head> <title>Invoice with Vue.js</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <h1>Invoice with Vue.js</h1> <table> <thead> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody> <tr v-for="(product, index) in products" :key="index"> <td>{{ product.name }}</td> <td>{{ product.quantity }}</td> <td>{{ product.price }}</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total:</td> <td>{{ total }}</td> </tr> </tfoot> </table> <button @click="addProduct">Add Item</button> </div> <script src="invoice.js"></script> </body> </html> JavaScript: const app = Vue.createApp({ data() { return { products: [], } }, methods: { addProduct() { const name = prompt("Enter product name:"); const quantity = parseInt(prompt("Enter quantity:")); const price = parseFloat(prompt("Enter price per unit:")); const product = { name, quantity, price }; this.products.push(product); } }, computed: { total() { return this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); } } }); app.mount('#app'); في المثال قمت ببناء تطبيق Vue.js باستخدام Vue.createApp وتم تعريف بيانات الـ data بحيث تكون القائمة الفارغة في البداية. وإنشاء دالة addProduct للتعامل مع إضافة منتج جديد بمجرد النقر على الزر "Add Item"، وباستخدام this.products.push تتم إضافة المنتج الجديد إلى القائمة. وتم إنشاء الحساب المرتجع باستخدام computed property لحساب المجموع الكلي للمنتجات باستخدام reduce. بعد ذلك، يتم ربط العنصر "product-list" في الجدول باستخدام v-for لإنشاء عنصر tr لكل منتج في القائمة. ثم استخدام @click للتعامل مع الحدث عند النقر على الزر "Add Item". تم ربط الزر بدالة `addProduct. وأخيرًا، حساب المجموع الإجمالي باستخدام الدالة calculateTotal التي تقوم بجمع حاصل ضرب الكمية بالسعر لكل منتج في المصفوفة products. وعرض المجموع الإجمالي في العنصر <span> المحدد بواسطة id="total".

إذا كنت تقصد تصميم واجهة المستخدم، أي تصميم مواقع الويب، فهناك دورة في أكاديمية حسوب لذلك: دورة تطوير واجهات المستخدم ولا تنسى عرض رمضان: عرض رمضان 2023 لدورات حسوب وإذا كنت تقصد دورة للتصميم، فما هو التصميم الذي تريد تنفيذه؟ فمجالات التصميم كثيرة. وهناك التصميم في أكاديمية حسوب يحتوي على دورس ومقالات حول التالي: 1- تصميم تجربة المستخدم UX 2- تصميم واجهة المستخدم UI 3- الرسوميات إنكسكيب أدوبي إليستريتور 4- التصميم الجرافيكي أدوبي فوتوشوب أدوبي إن ديزاين جيمب GIMP كريتا Krita 5- التصميم ثلاثي الأبعاد 3Ds Max Blender 6- نصائح وإرشادات 7- مقالات تصميم عامة وأيضًا هناك كتاب خاص بأساسيات تصميم الرسوميات في أكاديمية حسوب.

المقصود في الصورة هي صيغة العنوان الخاص بالإعلان، عليك بالتحقق من النقاط التي ذكرتها لك سابقًا أو مشاركة العنوان هنا لتفقد المشكلة.

أرفق صورة للمشكلة أو الخطأ الذي يظهر لك أو قم بنسخ النص. وعنوان الإعلان يكون ما بين 1 إلى 80 حرفًا، ولا يجب استخدام أي رموز أو أحرف غير صالحة. كما يمكنك استخدام الأحرف العربية والإنجليزية والأرقام والمسافات والشرطة (-) والشرطة السفلية (_) في العنوان. أيضً باستطاعتك ا استخدام العلامات التجارية في العنوان، ولكن يجب أن يكون لديك حق استخدامها، وتأكد من عدم وجود أي خطأ إملائي أو لغوي في العنوان قبل نشره على السناب شات.

الكود الذي قمت بكتابته في الصورة، هو ببساطة كود برمجي في بايثون يستخدم الدالة المسماة "f-string". والدالة f تساعد على تضمين قيم متغيرة داخل النصوص (strings) بطريقة مباشرة، وفي حالتك، تم استخدام الدالة f لإنشاء رسالة ترحيبية تحوي اسم شخص معين من قائمة الأسماء (names) التي يتم تخزينها في المتغير names. وبشكل مفصل، يتم تعريف مصفوفة (list) تسمى names وتحتوي على ثلاثة عناصر (ahmed، hacen، waleed). ثم يتم استخدام الدالة f لإنشاء رسالة ترحيبية بإضافة اسم الشخص الأول في القائمة باستخدام تركيبة {names [0]} داخل النص الذي تم طباعته. وعند تشغيل هذا الكود، سيتم طباعة رسالة ترحيبية تحتوي على النص "Hello Ahmed"، ويمكن تغيير الرقم 0 إلى أي رقم آخر لطباعة رسالة ترحيبية تشمل اسم الشخص الذي يأتي في مكان الرقم في القائمة. مثلاً، بتغيير الرقم إلى 1 سيتم طباعة رسالة ترحيبية تشمل اسم الشخص الثاني في القائمة، وهكذا. لنأخذ مثالًا آخر لفهم الدالة f بشكل أفضل. لنفترض أن لدينا متغيرين a و b، ونريد طباعة رسالة تحوي قيمة المتغير a والمتغير b. يمكن فعل ذلك باستخدام الدالة f على النحو التالي: a = 10 b = 20 print(f'The value of a is {a} and the value of b is {b}') عند تشغيل هذا الكود، سيتم طباعة الرسالة التالية: The value of a is 10 and the value of b is 20 في المثال، قم باستخدام الدالة f لإدخال قيم المتغيرات a و b داخل النص الذي يتم طباعته، وتحديد قيم المتغيرات باستخدام تركيبات المعايير {}، ثم وضع قيمة كل متغير داخلها بواسطة استخدام فاصلة (،) وتحديد اسم المتغير داخلها، كما هو موضح في الكود. وبالإمكان استخدام الدالة f بشكل أساسي لأي نوع من البيانات، سواء كانت سلسلة نصية (string)، أو رقمية (numeric)، أو قائمة (list)، أو أي نوع آخر من البيانات المتاحة في Python.

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

1- تأكد من أن Laravel مثبت على جهاز الخادم الخاص بك ويعمل بشكل صحيح، وأسهل طريقة هي باستخدام بيئة عمل Laragon وبعد تثبيتها قم بالضغط برز الفأرة الأيمن على واجهة البرنامج ثم اختر Quickapp بعد ذلك اختر Laravel. وستجد أنه تم إنشاء مشروع لارافيل، وباستطاعتك العثور على مجلد المشروع بالضغط على زر Root في واجهة Laragon. 2- قم بإنشاء API للاتصال بقاعدة البيانات الخاصة بك في Laravel، باستخدام Laravel's Eloquent ORM لإنشاء الاتصال بقاعدة البيانات. 3- في Angular، قم بإنشاء خدمة (Service) للاتصال بـ API المنشأ في Laravel، وباستطاعتك استخدام Angular's HttpClient لإرسال الطلبات إلى API. 4- إنشاء نموذج (Model) لبيانات تسجيل الدخول الخاصة بك في Angular. 5- إنشاء نموذج (Model) في Laravel لبيانات تسجيل الدخول الخاصة بك. 6- إنشاء ملف تحكم (Controller) في Laravel لإدارة عمليات تسجيل الدخول، من خلال استخدام الدالة "validate" في Laravel للتحقق من صحة بيانات تسجيل الدخول. 7- بربط ملف التحكم في Laravel مع API الخاص بك. 8- في Angular، قم بإنشاء نموذج (Model) لاستقبال الرد عند الاتصال بالـ API. 9- في Angular، عليك بإنشاء مكون (Component) للتحكم بواجهة المستخدم لتسجيل الدخول وإرسال البيانات إلى الخدمة (Service). 10- ربط المكون (Component) الخاص بك في Angular مع النموذج (Model) الخاص بك وخدمة (Service). مثال بسيط لكيفية إنشاء API في Laravel والاتصال بها من Angular: أولاً، يجب عليك إنشاء جدول لتخزين بيانات المستخدمين في قاعدة البيانات الخاصة بك. ولهذا المثال، سننشئ جدولًا باسم "users" وستكون لدينا الأعمدة التالية: "id"، "name"، "email"، و "password". ثانياً، قم بتحديث ملف "routes/api.php" في Laravel لإنشاء طريقة POST لإجراء تسجيل الدخول، و سنستخدم الطريقة "authenticate" لهذا الغرض، ويجب عليك إنشاء ملف تحكم (Controller) خاص بهذه الطريقة. // routes/api.php use Illuminate\Http\Request; Route::post('/authenticate', 'AuthController@authenticate'); ثالثًا، قم بإنشاء ملف تحكم (Controller) جديد بالاسم "AuthController" وإضافة الطريقة "authenticate" إليه. حيث يتم التحقق من صحة بيانات تسجيل الدخول وإرجاع رمز مميز (token) عندما يتم إدخال بيانات تسجيل الدخول صالحة. // app/Http/Controllers/AuthController.php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Auth; class AuthController extends Controller { public function authenticate(Request $request) { $credentials = $request->only('email', 'password'); if (Auth::attempt($credentials)) { $user = Auth::user(); $token = $user->createToken('MyApp')->accessToken; return response()->json([ 'user' => $user, 'access_token' => $token, ]); } return response()->json([ 'message' => 'Invalid login credentials', ], 401); } } رابعاً، يجب عليك تثبيت "laravel/passport" وإعداده لاستخدامه مع Laravel. composer require laravel/passport ثم، قم بتشغيل الأمر التالي لتحديث قاعدة البيانات الخاصة بك: php artisan migrate وأخيرًا، يجب عليك إنشاء خدمة (Service) في Angular للاتصال بـ API المنشأ في Larave، وباستطاعتك استخدام HttpClient في Angular لإرسال طلب POST لـ API المنشأ في Laravel والحصول على رمز مميز (token) في حالة نجاح تسجيل الدخول. // auth.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root', }) export class AuthService { constructor(private http: HttpClient) {} login(email: string, password: string) { return this.http.post<any>('/api/authenticate', { email, password }); } } ويمكن استخدام الخدمة المنشأة في Angular في مكون تسجيل الدخول الخاص بك: // login.component.ts import { Component } from '@angular/core'; import { AuthService } from '../auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], }) export class LoginComponent { email: string = ''; password: string = ''; constructor(private authService: AuthService) {} onSubmit() { this.authService.login(this.email, this.password).subscribe( (response) => { console.log(response.access_token); }, (error) => { console.log(error); } ); } }

أنت بحاجة إلى استخدام تطبيقات توفر رقم لدولة أجنبية مثل تطبيق 2nr وقم بتجربة الأرقام لحين الوصول لرقم لم يتم استخدامه، أو يمكنك شراء رقم من نفس التطبيق أو ِشراء رقم من تطبيق pingme أو 5sim بتكلفة 1 دولار.

لكونه سؤال إختباري فسيتم توفير خطوات الحل فقط، اللازمة لإنشاء برنامج يطلب من المستخدم إدخال جملة ومن ثم يحسب الحرف الأكثر تكرارًا في الجملة ويطبع عدد مرات تكراره. إليك الخطوات: 1- تعريف المتغيرات اللازمة للبرنامج، وهي: مصفوفة من الحروف لتخزين الجملة المدخلة من المستخدم متغير يمثل الحرف الأكثر تكرارًا في الجملة متغير يمثل عدد مرات تكرار الحرف الأكثر تكرارًا في الجملة متغير لتخزين عدد المرات التي يتكرر فيها الحرف الحالي في الجملة 2- الطلب من المستخدم لإدخال الجملة وتخزينها في المصفوفة المعرفة في الخطوة الأولى. 3- إنشاء حلقة for لتحليل الجملة حرفًا حرفًا. 4- داخل حلقة for، تعيين قيمة العداد للحرف الحالي إلى 1. 5- داخل حلقة for، دوران حلقة ثانية مضمنة داخلها لحساب عدد مرات تكرار الحرف الحالي في الجملة. 6-داخل حلقة for الثانية، إذا تم العثور على حرف يتطابق مع الحرف الحالي، فزيادة قيمة العداد. 7- داخل حلقة for الثانية، إذا تم العثور على حرف بتردد أعلى من الحرف الحالي، تعيين قيمة الحرف الأكثر تكرارًا إلى هذا الحرف وتحديث قيمة المتغير المعد لحساب عدد مرات تكراره. 8- طباعة الحرف الأكثر تكرارًا وعدد مرات تكراره.

ذلك يعني أنك تستخدم رقم هاتف من أحد التطبيقات التي توفر رقم هاتف أجنبي من دولة مدعومة في ChatGPT وأشهرها تطبيق 2nr البولندي، لذلك عليك بتجربة رقم آخر لحين الوصول لرقم لم يتم استخدامه بالحد الأقصى وهو حسابين لكل رقم.

الأسئلة الإختبارية أو الخاصة بالمشاريع يتم توفير خطوات الحل فقط لها، أو مساعدتك في الكود إذا تم توفيره. الخطوات المطلوبة لبرنامج بلغة C الذي يطلب من المستخدم إدخال جملة بحد أقصى 50 حرفًا ويقوم بطباعة عدد الحروف الكبيرة، هي كالتالي: بدايةً، يجب علينا تضمين المكتبة الأساسية "stdio.h" في البرنامج. نقوم بتعريف متغيراتنا، يجب علينا تعريف مصفوفة من الحروف لاستيعاب جملة المستخدم ومتغير لعدد الأحرف الكبيرة. نستخدم دالة "printf" لطلب من المستخدم إدخال الجملة ونستخدم دالة "scanf" لتخزين هذه الجملة في المصفوفة المحددة سابقًا. نستخدم حلقة "for" لتحليل كل حرف في المصفوفة. نتحقق في كل تكرار من خلال "if" إذا كان الحرف حرفًا كبيرًا أم لا. إذا كان الحرف كبيرًا، فإننا نزيد قيمة المتغير المخصص لعدد الأحرف الكبيرة بواحد. أخيرًا، نستخدم دالة "printf" مرة أخرى لطباعة عدد الأحرف الكبيرة التي تم العثور عليها في الجملة. وهناك العديد من الطرق المختلفة لحل هذا السؤال باستخدام لغة C. على سبيل المثال، بدلاً من استخدام حلقة for وجملة الشرط if لحساب عدد الأحرف الكبيرة في الجملة، يمكن استخدام دالة isupper المتاحة في المكتبة القياسية للغة C، والتي تقوم بتحقق ما إذا كان الحرف كبيرًا أم لا. وبهذه الطريقة، يمكن تبسيط الكود وجعله أكثر فهمًا. وتعمل دالة isupper للتحقق من كل حرف في الجملة ما إذا كان كبيرًا أم لا، وفي حال كان الحرف كبيرًا، يتم زيادة قيمة المتغير capital_count، بعد ذلك، يتم طباعة عدد الأحرف الكبيرة باستخدام دالة printf. وهناك طريقة أخرى أيضًا: كمثال، بدلاً من استخدام حلقة for لتحليل الجملة حرفًا حرفًا، يمكن استخدام دالة strlen المتاحة في المكتبة القياسية للغة C لحساب طول الجملة، ومن ثم استخدام حلقة for لتحليل الجملة حرفًا حرفًا. وستجدي هنا مقالات ودروس حول لغة C

في البداية الملف الذي أرفقته غير صالح أرجو منك إعادة ضغط مجلد المشروع كما في الصورة التالية ورفعه. وأيضًا توضيح ما تريده بشكل مفصل لنتمكن من مساعدتك، وهل السؤال تابع لدورة أو مشروع معين. وما قد فهمته من سؤالك، أن هناك بعض الاختلافات في بنية الموقع بين المثال الذي قدمته وموقع المدرب، لذلك، يجب تعديل الكود بناءً على بنية المطلوب منك أو ما قام به المدرب. بالنسبة للصور التي لا تتدرج جنبًا إلى جنب، قد يكون السبب هو عدم وضع العناصر بشكل صحيح في الصفحة HTML أو عدم استخدام الأساليب الصحيحة في CSS لتنسيق العناصر، ويمكنك التحقق من ذلك بتفقد الشيفرة الخاصة بصفحتك والتأكد من أن كل شيء موضوع بشكل صحيح. بالنسبة لسبب عدم عمل الكود الخاص بالجافا سكريبت، قد يكون السبب هو خطأ في الكود أو عدم وجود العناصر التي يتم الإشارة إليها في الكود في صفحة HTML الخاصة بك، لذلك يجب التأكد من وجود العناصر الصحيحة في صفحة HTML وتحديد الأخطاء في الكود الخاص بالجافا سكريبت، وأيضًا ربط كود الجافاسكريبت بملف HTML عن طريق وسم script كالتالي: <!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> <script src="path/to/your/script.js"></script> </head> <body> <h1>محتوى الصفحة</h1> </body> </html> وتحقق من الأخطاء التي ستظهر لك في الكونسول في حالة وجود أخطاء.