عمر قره محمد

نعم يمكنك فعل ذلك

على ما اذكر فإنك تقومين بتعلم دورة تطوير الواجهات ووصلتي لمرحلة جيدة في الدورة (تعلمين كيفية انشاء form وتعلمين كيفية التعامل مع js و jQuery وبإمكانك). وبناءً على ذلك فبإمكانك انشاء الموقع السابق ولكن لن يكون هنالك backend للتطبيق وسيكون كل العمل في طرف العميل frontend (أي انك سترسلين الاسئلة والاجابات إلى العميل وستقومين بعملية التحقق من الاجابة في طرف العميل وكذلك سترسلين كل العلامات في كل مرة يريد فيها طالب ما معرفة علامته). أما التطبيقات العملية والتي تقوم بتقديم العلامات في العادة فإنها تحتاج إلى backend حتى يتم إدخال العلامات ويتم إرسالها عند الطلب بشكل ديناميكي (نرسل علامة الطالب فقط). وكذلك فإن تصحيح الاسئلة يحتاج إلى backend كذلك حتى نرسل الاجابة إلى الـ backend ويقوم بتصحيحها وإرسال النتيجة. اطلعي على : وبمجرد البدء في المشروع فإنه بإمكانك نشر المشاكل التي تواجهيها وسنقوم بمساعدتك.

لا يمكنك فعل ذلك بشكل مجاني ولفعل ذلك يتوجب عليك الاشتراك مع طرف ثالث مثل Twilio وبعد ذلك سيساعدك الوسيط الثالث في اعداد الـ WhatsApp business Api لتطبيقك وسيقدم لك طبقة وسيطة من الـ Api تمكنك من إرسال الرسائل بسهولة. ويمكنك الاطلاع على توثيق Twilio الرسمي من هنا من اجل بايثون ومن هنا من اجل التعرف على Twilio Sandbox. ويمكنك انشاء حساب مجاني وتجربة الخدمة بشكل مجاني في تطبيقك المحلي ولكن لن تستطيع ارسال رسائل لعملاء آخرين حتى تقوم بإكمال خطوات الاشتراك. ملاحظة : يتيح Twilio إرسال الرسائل النصية العادية وهي اسهل للاستخدام بكثير من WhatsApp business Api.

لاحظ رسالة الطلب الظاهرة في الصورة الخاصة بك، يظهر ان الطلب يرسل إلى الرابط http://localhost:3000/api/users/login عدل الكود الخاص بصفحة الـ react من الشكل : const { data } = await axios.post( "/api/users/login", { email, password, }, config ); إلى الشكل التالي : const { data } = await axios.post( "http://localhost:8800/api/users/login", { email, password, }, config ); وذلك لأن المتصفح يفهم المسار : /api/users/login على انك تريد إرسال الطلب إلى نفس السيرفر الذي يخدم react وهو http://localhost:3000 @محمد الحربي

عدل الرابط إلى الشكل التالي : http://localhost:8800/api/users/login وذلك لأن الـ port الخاص بالسيرفر هو 8800 وليس 3000

@محمد الحربي هل يمكنك مشاركة ملفات المشروع الخاصة بالسيرفر بالكامل حتى استطيع الاطلاع على سبب المشكلة.

يمكنك الاطلاع على المقالات والنتقاشات التالية التي تشرح الأمر : وبعده : وقد يفيدك الاطلاع على المقالات التالية من الموقع الرسمي لـ hostinger : https://support.hostinger.com/en/articles/6152127-how-to-deploy-laravel-8-at-hostinger

يمكنك العثور على مبرمجين على موقع مستقل من هنا.

مرحباً سوزان الـ cmd هو اختصار للـ command prompt وهي تعني موجه الأوامر، ويمكنك الوصول إليها بالبحث عن الكلمة cmd في القائمة ابدأ كما في الصورة التالية : تعرفي اكثر عنه من هنا والقالة التالية : شكراً لك.

هل يمكنك مشاركة الكود الذي تتحدث عنه حتى استطيع مساعدتك. @عبدالرحمن العمودي

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

يمكنك الوصول إلى الجودة الاصلية من المقالة التالية :

ذلك يعتمد على المجال الذي تريد التخصص به, فإذا كنت تريد التخصص في بناء تطبيقات الجوال يمكنك نعلم react native، وإذا كنت تريد الاكمال في بناء تطبيقات الويب فيمكنك الانتقال لبناء تطبيقات متكاملة باستخدام react و node وبعدها تعلم next الذي يجمع الاثنين معاً. وقد يفيدك إعادة الاطلاع على النقاش السابق :

مع الاسف لم اعثر على دورات كاملة حديثة ومجانية على الانترنت إلا باللغة الانجليزية وهذه المقدمة من freeCodeCamp هي افضلها : ومن الدورات العربية :

هذا كود كنت انشأته للإجابة على سؤال مشابه، وهو يقوم بإضافة الـ addEventListener إلى الـ form كما تريد. <body> <form id="form"> <label for="userName"> ادخل الاسم هنا </label> <input type="text" id="userName" name="userName" placeholder="ادخل اسم المستخدم" minlength="3" maxlength="36" required /> <button type="submit">إرسال</button> </form> <script> const form = document.querySelector("#form"); const url = "http://localhost:3000/"; // الرابط الذي سترسل له البيانات const handleSubmit = async (e) => { e.preventDefault(); // اذالة الاعدادات الافتراضية (مثل إعادة تحميل الصفحة وغيرها) const userName = document.querySelector("#userName").value; // القيمة المدخلة try { // fetch إرسال طلب باستخدام الدالة const response = await fetch(url + "name", // المسار { // الاعدادات method: "POST", // نوع الطلب mode: "cors", // لإرسال الطلب إلى خادم مختلف عن الخادم الذي يقدم الصفحة headers: { "Content-Type": "application/json" }, // تحديد نوع بيانات الطلب body: JSON.stringify({ userName }), // المعلومات التي سنرسلها وهي نفس القيمة المدخلة }); console.log(await response.json()); // نطبع الاجابة التي سنحصل عليها } catch (error) { console.log(error); } }; form.addEventListener("submit", handleSubmit); // submit نضيف الوظيفة ونربطها بالحدث </script> </body> لاحظ ان الكود سيظهر خطأ، لأن الخادم الذي يتم إرسال الطلب إليه غير موجود، وعليك تغيير المعلومات الموجودة في الوظيفة للشكل الذي يتناسب مع الخادم الخاص بك (غير العنوان URL و البيانات المرسلة و المسار ..إلخ)

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

إليك ملف settings.json الخاص ب vs code، وهو يحتوي على معلومات لن تفيدك كثيراً، مثل الكلمات التي قمت بإلغائها من الـ spell checker : { "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Default Dark+", "workbench.sideBar.location": "right", "editor.formatOnSave": true, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "editor.minimap.enabled": false, "prettier.jsxSingleQuote": true, "javascript.updateImportsOnFileMove.enabled": "always", "bracketPairColorizer.depreciation-notice": false, "editor.unicodeHighlight.allowedCharacters": { "ه": true }, "editor.unicodeHighlight.ambiguousCharacters": false, "editor.linkedEditing": true, "files.associations": { "*.sass": "scss", "*.html": "html" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "cSpell.userWords": [ "أثناء", "اثناء", "اخرى", "التسجيل", "الرمز", "السائق", "الطلب", "المدخل", "بنجاح", "جاري", "حاول", "حدثت", "فايربيس", "كلمة", "مرحبا", "مشكلة", "مكونات", "واتساب", "يتكون", "firestore", "moaz", "Recaptcha" ], "git.confirmSync": false, "emmet.showSuggestionsAsSnippets": true, "emmet.triggerExpansionOnTab": true, "emmet.useInlineCompletions": true, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "[python]": { "editor.defaultFormatter": "ms-python.python" }, "liveServer.settings.donotShowInfoMsg": true, "html.format.contentUnformatted": "", "diffEditor.ignoreTrimWhitespace": false, "prettier.tabWidth": 6, "prettier.printWidth": 120, "editor.insertSpaces": false, "editor.tabSize": 6, "editor.detectIndentation": false, "cSpell.language": "en,ar", "window.zoomLevel": 1 }

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

المشكلة هي انك تظهر كل لوحات التعديل الخاصة بكل المنشورات دفعة واحدة وذلك لأنك وضعت الشرط { isEdit && <Edit setIsEdit={setIsEdit} title={title} description={description} post={post} /> } داخل ال map التي تطبع كل المنشورات ولذلك فعندما يتحقق الشرط السابق ستظهر كل المكونات الـ Edit الخاصة بكل المنشورات. ولحل المشكلة يجب اخراج المكونة الخاصة بالتعديل Edit إلى خارج الـ map بحيث يكون هنالك Edit واحدة ولكن نمرر لها عنصر مختلف في كل مرة، وهذا سيتطلب إنشاء state جديدة لتحتوي هذا العنصر. ليصبح الكود كالتالي : import React, { useState } from 'react' import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; import Container from 'react-bootstrap/Container'; import Button from 'react-bootstrap/Button'; import { useDispatch, useSelector } from 'react-redux'; import { addPosts, deletePost } from '../redux/postsSlice'; import Edit from './Edit'; function Posts() { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [selectedPost, setSelectedPost] = useState("") // نضيف الوظيفة التالية ************ const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const handleClick = () => { dispatch(addPosts({ id: posts.length + 1, title, description, })) setTitle("") setDescription("") } // delete a post const handleDelete = (item) => { dispatch(deletePost(item)) } // Edit a Post const [isEdit, setIsEdit] = useState(false) // نعدل الوظيفة التالية **************************************** const handleEdit = (post) => { // اضفنا الباراميتر ************************************ setIsEdit(true) setSelectedPost(post) // الكود المضاف ************************************ } return ( <div className='posts'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style={{ color: '#000' }} placeholder='Post Title' value={title} onChange={(e) => setTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" placeholder="Post Description" style={{ height: '100px', color: '#000' }} value={description} onChange={(e) => setDescription(e.target.value)} /> </InputGroup> <Button variant="primary" size="lg" onClick={handleClick} > Add Post </Button> </Container> <div className='posts'> { posts.length > 0 ? posts.map((post, index) => <div className='post-container' key={index} > <div className='post-title'> <h3>{post.title}</h3> </div> <div className='post-description'> <h5>{post.description}</h5> </div> <div className='btns'> <Button variant="outline-info" onClick={() => handleEdit(post)} > Edit </Button> <Button variant="outline-info" onClick={() => handleDelete(post.id)} > Delete </Button> </div> </div> ) : (<h1 className='no-posts'>No Posts</h1>) } {/* map نخرج المكون الخاص بالتعديل إلى خارج الـ *************************************/} { isEdit && <Edit setIsEdit={setIsEdit} title={selectedPost.title} // الكود المعدل ************************************ description={selectedPost.description}// الكود المعدل ************************************ post={selectedPost}// الكود المعدل ************************************ /> } </div> </div> ) } export default Posts

ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات، وذلك لأنك وضعت الشرط if (p.id === action.payload.id) والذي سيغير معلومات كل منشور يملك نفس الـ id. فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id. في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات.

نعم يمكنك اعادة الامتحان اكثر من مرة حتى تنجح وتحصل على الشهادة. تعرف اكثر على الامتحان والحصول على الشهادة

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

يفضل ان يكون مع جميها حتى يكون لديك كود تستطيع مراجعته بدلاً من العودة إلى الدرس، وتقوم بإضافة تعليقات تشرح الكود.

نعم يمكنك فعل ذلك ولكن لا تهمل الجانب التطبيقي ، فكثير من المبرمجين يقومون بإهمال الجانب التطبيقي في اوقات الدراسة المكثفة، و قد يفيدك الالتزام في النصائح الواردة في هذا النقاش :

الكود يعمل ولقد طبع لك i love python كالمتوقع وكذلك طبع لك الزمن الذي استغرقه لتنفيذ الكود،