لوحة المتصدرين

انا اشتريت دورة علوم الحاسوب لأنني مبتدئ في البرمجة وقررت ان اتعلم معكم من الأول الى الأخر سؤالي انا اريد ان اصبح مبرمج ويب وشتريت كما قلت سابقا دورة علوم الحاسوب وعند الانتهاء منها انتقل لدورة تطوير واجهات المستخدم لكي اصبح محترف في |front end هل يمكن ان القى عمل في الأوروبا فور حصولي على شهادتكم؟

عند بناء واجهة مستخدم يجب عليك تقسيم الواجهة إلى components حتى يصبح بناء الواجهة أسهل بالنسبة لك وبابلداية بالتكويد وعند الوصول لقسم معين في الموقع أو components لا تستطيع العمل قم بالبحث عن فكرة بناء هذه ال components وإليك تحليل لعمل مثل هذا التصميم تتكون الصفحة أولاً من ثلاث أقسام رئيسية navbar و header و main و footer نقوم بالتعمق في المكونات في القسم header يوجد عنصرين على اليسار يوجد عنصر p و h أما على اليمين فيوجد عدة صور فوق بعضها فيمكنك تنفيذ هذه الفكرة عن طريق استخدام ال position وتحديد أماكن الصور عن طريق التنسيقات top أو left أو right أو bottom مثال على ذلك .img1 { position: absolute; z-index: 2; } .img2 { position: absolute; z-index: 3; } .img3 { position: absolute; z-index: 1 } فكرة عمل الحواف wave تم شرحها في التعليق السابق أما القسم في المنتصف فيمكنك بناء هذه الفكرة عن طريق إنشاء عنصر يحتوي على ثلاث صور صور بالأعلى وصورة بالمنتصف وصوره بالأسفل وعنصر آخر نفس مكان الثلاث صور ثم بعد ذلك تقوم بإضافة margin-top بالسالب للعنصر الثاني حتى يظهر أن العنصرين متداخلان والقسم الأخير ال footer نفس فكرة الخلفية الموجودة بال header حيث فكرة عمل wave background قم ببناء الموقع بهذه الطريقة حيث تقوم بتقسيم الواجهة لأجزاء صغيره

بالنسبة للفكرة فقد شرحها لك أحمد وهي بسيطة، فهناك العديد من الأدوات المماثلة التي تؤدي نفس الغرض. مثل: https://haikei.app/ https://www.shapedivider.app/ وبالنسبة لتصميم الصورة التي قمت بإرفاقها يتم باستخدام HTML و CSS و JavaScript. يمكن استخدام العناصر الأساسية في HTML مثل divs و spans والاحتفاظ بها في مكان محدد على الصفحة باستخدام CSS. يمكنك استخدام grid و flexbox للحصول على التنسيق المطلوب كما في الصورة. إذا كنت بحاجة إلى مساعدة في البدء، يمكنك الاستعانة بمكتبات CSS الجاهزة مثل Bootstrap أو Materialize، والتي توفر العديد من الأدوات والنماذج الجاهزة التي يمكن استخدامها كأساس لتصميمك الخاص. وإليك مثال لاستخدام الأدوات التي تولد صور الـ SVG كما في التصميم وهما الـ Blob و الـ Wave. والكود يعتمد على أنك ستقوم بتحميل صور الـ SVG ووضعها في ملفات المشروع، وبإمكانك أيضًا استخدام كود SVG الذي توفره الأدوات بدلاً من تحميل الصورة حيث يتم وضعها داخل index.html في الجزء المراد عرضها به. <div class="background"> <div class="waves"></div> <div class="content"> <h1>عنوان التسجيل</h1> <button>الاشتراك</button> </div> </div> .background { background-image: url('blob-background.png'); height: 500px; position: relative; } .waves { background-image: url('wave.png'); background-repeat: repeat-x; height: 150px; position: absolute; bottom: 0; width: 100%; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; } h1 { font-size: 40px; margin-bottom: 30px; } button { background-color: #d4af37; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } يمكنك استخدام مواقع مثل https://www.freepik.com/ https://www.drawkit.com/ https://www.flaticon.com/ للحصول على الصور المطلوبة أو صور مشابهة لها.

أقترح عليك النظر للتصميم عن قرب فكرة التصميم بسيطة لكن عليك التركيز فقط وتحليل مكونات الموقع لا أعرف أي مشكلة تراها في تنفيز التصميم تحديداً ولكن سأقوم بشرح أهم الأفكار في التصميم والتي قد تعتقد أنها صعبة التنفيز أغلب التصميم يعتمد علي صور SVG منها المثلثات البنفسجية والخطوط التص تصل بين الصور في المنتصف والأشكال في نهاية الأقسام كل هذة صور SVG يرفقها المصمم مع التصميم ليتم استخدامها ببساطة وقد تقوم بأرفاق أكثر من صورة في عدة طبقات فوق بعض مثل الصورة في القسم الترحيبي وأيضا يمكنك وضع الصور التي في نهاية كل قسم مع إعطائها التنسيقات المناسبة لتظهر بالشكل الذي تريد يمكنك استخدام بعض هذه المواقع لأنتاج صور تناسب اختياجاتك : https://www.blobmaker.app/ https://shuffle.dev/tools/wave-generator أقترح عليك البدأ في العمل مباشرة وستجد حل لعمل كل فكرة اثناء التنفيز واذا أحتجت أي مساعدة يمكنك مشاركة سؤالك وسيتم الرد عليه

هل يوجد اي فيديو يشرح كيفية اخذ ادخلال المستخدم من node js الى sqlite بباللغة العربية او الانجليزية

اجد صعوبه في استيعاب الفارق بين الاثنين الفرق بين domain مثل go daddy و الـ Hosting مثل netlify او غيره

قمت بعمل دالة ب جافاسكريبت لعملية المصادقة authentication والمطلوب من الكود هو التحقق من تطابق كلمة المرور المدخلة مع كلمة المرور الموجودة و المشفرة في قاعدة البيانات بعد فك تشفيرها اثناء عملية تسجيل الدخول فاذا كانت كلمة المرور المدخلة مطابقة للناتجة من عملية فك التشفير تتم عملية تسجيل الدخول بنجاح ولكن عندما أجرب الأمر في البوستمان يظهر لي خطأ كما هو موضح في الصور المرفقة الكود له صورتين وجربتهم الأثنين وكلهم نفس الخطأ بالمناسبة أنا أستعمل node js & express js ابجد هوز حطي كلمن

المشكلة الرئيسية انك تقوم بتشفير كلمة السر مرتين، المرة الاولى في الـ route المسمى register والثانية ضمن الوظيفة create نفسها حيث انك قمت بإعداد الـ module لتقوم بالتشفير بشكل تلقائي وذلك في الملف User.js. وهذا هو الكود الخاص بك بعد التعديل ولقد اشرت إلى الاكواد التي عدلتها : // signup post router.post("/register", async (req, res) => { try { // hash password // create انت تقوم بالفعل بتشفير كلمة المرور قبل الحفظ في الوظيفة // req.body.password = await bcrypt.hash( خطا // req.body.password, خطا // await bcrypt.genSalt(10)); خطا // generate te user const user = await User.create(req.body) // response res.json({ status: "User Created" }); } catch (error) { res.status(400).json({ error }); console.log(error) } }) // login post router.post("/login", async (req, res) => { try { // console.log(email + "0"); // خطا، تقوم باستخدام المتغير قبل تعريفه // const {email} = req.body.email خطا // const { password } = req.body.password خطا const email = req.body.email // معدل const password = req.body.password // معدل // get the user const user = await User.findOne({ email }) console.log(email + "1"); if (user) { console.log(password, user.password) const passwordCheck = await bcrypt.compare(password, user.password) console.log(email + "2"); if (passwordCheck) { const payload = { email } const token = jwt.sign(payload, process.env.JWT_SECRET) console.log(email + "3"); res .cookie("token", token, { httpOnly: true }) .json({ payload, status: "logged in" }); console.log(email + "4"); } else { // res.status(400).json(error) // error خطا، لا يوجد متغير بهذا الاسم res.status(400).json({ error: "wrong password!" }) // معدل console.log(email + "5"); } console.log(email + "6"); } else { res.status(400).json({ error: "User does not exist!" }) } } catch (error) { res.status(400).json({ error }); } })

backend.rar عملية التسجيل تتم بنجاح ولكن تسجيل الدخول هو الذي تحدث به اخطاء

هل يوجد كتب لدوره ؟

للعمل محليًا يمكنك ذلك في 6 شهور دراسة مكثفة بمعدل 10 ساعات يوميًا، وربما تحتاج سنة. بينما العمل في الخارج يتطلب سنوات خبرة على أقل تقدير سنتان. بمعنى أنك طوال السنتان كنت تتعلم وتعمل على مشاريع واكتسبت الخبرة اللازمة، وأصبحت بمستوى Mid-level Developer ومن الممكن أن تصل إلى ذلك في 3 سنوات، تبعًا للوقت الذي تخصصه ومجهودك وتركيزك وخلفيتك السابقة عن البرمجة أو التقنية بشكل عام.

يجب في البداية اكتساب الخبرة محليًا لتتمكن من السفر خارج بلدك، فالشركات تطلب ذوي الخبرات، فهم لديهم بالفعل مبرمجين في بلدهم، لكنهم بحاجة إلى مبرمجين ذوي خبرة وبتكلفة أقل من مواطني البلد الأوروبي. ويجب أن تعلم الحصول على عمل في صناعة تطوير الويب يعتمد على العديد من العوامل، بما في ذلك خبرتك الشخصية والمهارات التي تمتلكها وأيضًا على حالة سوق العمل في المنطقة التي تبحث عن العمل فيها. بعد إكمال دورة علوم الحاسوب ودورة تطوير واجهات المستخدم، ستكون لديك مهارات جيدة في تطوير الويب وقدرة على إنشاء مواقع ويب ذات واجهة مستخدم جذابة وسلسة. ومع ذلك، لا يمكنني تحديد بالضبط إذا ما كنت ستجد عملا في أوروبا، ولكن من المؤكد أن العمل الجاد والتدريب المستمر على المهارات سيزيد فرصك في العثور على عمل في صناعة تطوير الويب. ومن المهم أيضًا أن تمتلك مهارات الاتصال والعمل الجماعي، يحتاج مطور Front-end إلى القدرة على التواصل بشكل جيد مع الفريق وإدارة الوقت بشكل فعال والعمل بشكل جماعي لإتمام المشاريع بنجاح. بجانب الخبرة والمهارات البرمجية يجب التركيز بشكل كبير على الـ Soft skills، وإتقان اللغة الإنجليزية كتابةٍ وتحدث بشكل كافي للعمل في الخارج. لذا، يجب عليك المثابرة في التعلم وتحسين مهاراتك، والعمل على تطوير مشاريع ويب خاصة بك وعرضها للآخرين لتبني سمعتك وزيادة فرص العثور على فرصة عمل. كما يمكنك البحث عن فرص التدريب والعمل الحر للمساعدة في بناء خبرتك ومهاراتك.

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

يمكنك فعل ذلك كالتالي : قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code. بعد ذلك قم بكتابة الأمر : git init -y من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية : npm install express body-parser sqlite3 نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا. نقوم بإنشاء ملف index.js وهو الذي سيحتوي الكود الخاص بالخادم كالتالي : // استدعاء ملفات الخادم var express = require("express") var app = express() const path = require("path") // منفذ الخادم var HTTP_PORT = 3000 // تشغيل الخادم app.listen(HTTP_PORT, () => { console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT)) }); // متاحاً public اعداد الخادم لكي يجعل المجلد app.use(express.static(path.join(__dirname, 'public'))) // **************************************** // الكود الخاص بقاعدة البيانات // **************************************** // استدعاء ملفات قاعدة البيانات var sqlite3 = require('sqlite3').verbose() // مسار قاعدة البيانات const DB_SOURCE = "db.sqlite" // انشاء قاعدة البيانات let db = new sqlite3.Database(DB_SOURCE, (err) => { if (err) { // في حال فشلت العملية console.error(err.message) throw err } else { console.log('تم الاتصال بقاعدة البيانات بنجاح') db.run(`CREATE TABLE users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name text, email text UNIQUE, password text, CONSTRAINT email_unique UNIQUE (email) )`, (err) => { if (err) { console.log("الحقل منشئ بالفعل"); } else { console.log("تم انشاء الحقل بنجاح"); } }); } }); // استدعاء ملفات مفسر الطلبات var bodyParser = require('body-parser') // application/x-www-form-urlencoded من اجل قبول الطلبات من النوع app.use(bodyParser.urlencoded({ extended: false })) // application/json من اجل قبول الطلبات من النوع app.use(bodyParser.json()) // المسار الخاص بحفظ مستخدم جديد app.post("/users", (req, res, next) => { // احضار البيانات من الطلب const { name, email, password } = req.body; // اضافة البيانات إلى قاعدة البيانات db.run('INSERT INTO users (name, email, password) VALUES (?,?,?)', [name, email, password], (error, result) => { if (error) { res.send("مشكلة في حفظ البيانات على الخادم") console.log("مشكلة في حفظ البيانات على الخادم\nرسالة المشكلة :\n", error); } else res.send("تم حفظ المستخدم بنجاح") }) }); // المسار الخاص بإحضار البيانات app.get("/users", (req, res, next) => { // متغير فارغ فلنسا بحاجة لإضافة خواص في هذا المثال var params = []; // احضار المستخدمين من قاعدة البيانات db.all("select * from users", params, (error, rows) => { if (error) { res.send("مشكلة في احضار البيانات من الخادم") console.log("مشكلة في احضار البيانات من الخادم\nرسالة المشكلة :\n", error); } else res.json(rows) }); }); // الاستجابة الافتراضية app.use(function (req, res) { res.status(404); }); ثم نقوم بإنشاء ملف index.html داخل مجلد الـ public ونكتب فيه الكود التالي : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>example</title> </head> <body> <form onsubmit="handleSubmit(event)"> <div><label for="name">ادخل اسم المستخدم</label> <input type="text" id="name" placeholder="ادخل اسم المستخدم"> </div> <div><label for="email">ادخل البريد الالكتروني</label> <input type="email" id="email" placeholder="ادخل البريد الالكتروني"> </div> <div><label for="password">ادخل كلمة السر</label> <input type="password" id="password" placeholder="ادخل كلمة السر"> </div> <button type="submit">تسجيل</button> </form> <!-- رابط المستخدمين المسجلين --> <a href="/users">الاطلاع على المستخدمين المسجلين</a> <script> // الوظيفة الخاصة بإرسال البيانات إلى الخادم function handleSubmit(e) { // احضار القيم الخاصة بالنموذج const name = document.getElementById("name").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; // الغاء التصرف الافتراضي للنموذج e.preventDefault() // إرسال الطلب إلى الخادم fetch("/users", { // نوع الطلب method: "POST", // اعداد نوع البيانات والذي يتم إرساله في رأس الطلب headers: { "Content-Type": "application/json", // 'Content-Type': 'application/x-www-form-urlencoded', }, // حفن البيانات في جسم الطلب body: JSON.stringify({ name, email, password }), }).then(result => console.log(result))// طباعة الاستجابة التي سنحصل عليها .catch(error => console.log(error)) // طباعة الاخطاء في حال ورودها } </script> </body> </html> ملفات المشروع بالكامل : sqlLite.zip