علي عبد محسن

قبل كل شيء تأكد من وجود مكتبة body-parser في ملف package.json في root المشروع. يجب أن يحتوي هذا الملف على تعريف المكتبة آنفة الذكر وكما يلي: ... "dependencies": { ... "body-parser": "^1.18.3", ... } ... إذا لم تكون موجودة قم بإضافتها ثم نفذ الأمر yarn أو npm install بحسب ما تستخدمه. بعد إنتهاءك من تنفيذ الأمر بنجاح قم بأضافة الأسطر التالية إلى الملف الرئيسي الذي تستورد فيه express . هذه المكتبة مسؤولة عن تحليل هيئات (body)الطلبات الواردة في برمجية وسيطة قبل التعامل معها ... const bodyParser = require('body-parser'); // إستيراد ... app.use(bodyParser.urlencoded({extended: false})); // إستقبال طلبات url المشفرة app.use(bodyParser.json()); // إستقبال طلبات Content-Type: application/json ... بعد هذا يمكنك الوصول الى محتويات body من خلال req.body

لكل لغة او منصة برمجية قواعد وشروط يجب قراءتها قبل الشروع بتنفيذ التكويد بواسطها. أن React أضافت في نسختها version 16.8 ال Hooks الى مجموعة أدواتها وهي طريقة أكثر سهولة لكتابة الcomponents تنصح به React كبديل لل class component ليس بإعادة كتابة الأعمال المنجزة بالطريقة السابقة ولكن للأعمال الجديدة التي تنوي إنجازها. لايمكنك إستدعاء دوال Hooks مثل useState و useEffect وغيرها خارج ال component كما تفعل في مثالك المدرج, كما لا يمكنك إستدعاء هذه الدوال داخل حلقات التكرار loops أو الدوال المتداخلة nested functions او داخل جمل شرطية conditions. تأكد دائماً أن تضع هذه الدوال في المستوى ألأعلى top-level من الcomponent. يمكنك قراءة المزيد عن React Hooks في الموقع الرسمي لمنصة React.

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

يتم شرحها أين؟ يرجى توضيح سؤالك.

عدل هذا الجزء من الكود في ملف main.js لديك وسيعمل معك ipcMain.on('open-recip',function(e,data){ var opti = { silent: false, printBackground: true, color: false, margin: { marginType: 'printableArea' }, landscape: false, pagesPerSheet: 1, collate: false, copies: 1, header: 'Header of the Page', footer: 'Footer of the Page' } console.log let win = new BrowserWindow({ show: false, webPreferences: { nodeIntegration: true, contextIsolation: false // هنا تكمن المشكلة تابع الشرح ادناه } }); win.loadFile('recipe.html'); win.webContents.on('did-finish-load', () => { win.webContents.send('dataRecipe',data); win.webContents.print({silent:true},function (success, failureReason) { if (!success) console.log(failureReason); console.log('Print Initiated'); }); }); /* win.loadFile('recipe.html'); win.webContents.on('did-finish-load', ()=>{ console.log(data); });*/ } ); المشكلة أنك لم تفعل الوصول إلى دوال electron داخل ملف recipe.html المتربط به ملف recipe.js الذي يحتوي بدوره في أول سطر منه على إستيراد ipcRenderer , كل هذا يتم بتفعيلك لهذا الخيار contextIsolation: false في قطعة الكود أعلاه.

الجواب على سؤالك هو نعم وكلا. وسأشرح لك لماذا مع الأمثلة. في ملف html عادي أنت تقوم بالوصول الى خصائص العناصر والتلاعب بيها عن طريق جافاسكربت. ... <div id="myDiv"></div> <script> var myDiv=document.getElementById("myDiv") myDiv.addEventListener("click", function(evt){ myDiv.style.backgroundColor="blue" }) </script> ... كما تلاحظ تم الوصول إلى العنصر بأستخدام getElementById وتغيير لون الخلفية إلى الازرق إذا أردنا القيام بالشيء نفسه بإستخدام React نقوم بما يلي ... const myComponent= ( props ) => { const [bgColor, setBgColor] = useState("#fff") return( <div onClick={(evt)=> setBgColor("blue")} style={{backgroundColor:bgColor}}></div> ) } ... هنا نلاحظ React يعطينا إستراتيجية مختلفة للتلاعب بعناصر html عن طريق BOM. يمكن إعادة إنتاج نفس الكود أعلاه ليعمل بمعية" document.getElementById" ... const myComponent= ( props ) => { const [bgColor, setBgColor] = useState("#fff") useEffect(() => { document.getElementById("myDiv").style.backgroundColor=bgColor }, [bgColor]) return( <div id="myDiv" onClick={(evt)=> setBgColor("blue")} ></div> ) } ... قد يعمل معك التحوير أعلاه ولكن في مشروع كبير أكثر تعقيداً سيكون من الصعب صيانة الكود أو حتى تطويره. React تنصح بإتباع طريقتها في التعامل مع DOM ومع هذا تتيح لك إستعمال BOM داخل أي component لأنك ربما تحتاج إلى الوصول إلى دوال BOM مثلاً لإعادة توجيه المتصفح... أي بمعنى أخر BOM يعطيك أشياء أخرى غير التحكم في العناصر, تابع المثال التالي: ... const myComponent= ( props ) => { ... const login= async (data) => { let response =await Users.login(data) if(response.status===200){ window.location.replace("/dashboard"); } else { alert("Login failed!") } } } ... في المثال إعلاه دالة لتسجيل دخول المستخدم تتضمن في حالة نجاح تسجيل الدخول إعادة توجيهه الى صفحة أخرى أو عرض رسالة خطأ عند فشل تسجيل الدخول وكل هذا يتم من خلال إستعمال دوال BOM

لطباعة الصفحة بصورة تلقائية دون فتح واجهة المستخدم يمكنك إستعمال المفتاح silent:true في دالة print بعد وضعها داخل event listener وكما يلي ipcMain.on("PRINT", function (e, params) { mainWindow.webContents.print({silent:true}, function (success, failureReason){ if(failureReason) { console.log('###printing failure reason###', failureReason) } }) } نرسل ال event "PRINT" بعد تعريفه من مكان إرساله.يمكنك تعيينه من مكان الضغط على زر الطباعة بإستخدام ipcRenderer ... <script> var directPrint= function(){ ipcRenderer.send("PRINT") } </script> ... <button onclick="directPrint"> Print</button> عند الضغط على زر print المعرف أعلاه سيتم إرسال event إسمه "PRINT" يتم إستقباله من قبل ipcMain ثم تنفيذ الطباعة بنجاح في حال لم تكن هناك مشكلة success أو إخراج خطأ فشل الطباعة من خلال , failureReason الأمثلة أعلاه هي افتراضية كون أنك لم تدرج كامل الكود المطلوب. لكن الغرض منها توضيح سبب المشكلة. ربما يتعين عليك إعادة كتابة ملف main.js بشكل أفضل ليعمل معك الحل الذي طرحته. أذا واجهت صعوبة في تطبيقه يرجى أدراج ملف المشروع بدون node_modules

function getOS() { var userAgent = window.navigator.userAgent var platform = window.navigator.userAgentData.platform || window.navigator.platform var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'] var windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'] var iosPlatforms = ['iPhone', 'iPad', 'iPod'] var os = null; if (macosPlatforms.indexOf(platform) !== -1) { os = 'Mac OS'; } else if (iosPlatforms.indexOf(platform) !== -1) { os = 'iOS'; } else if (windowsPlatforms.indexOf(platform) !== -1) { os = 'Windows'; } else if (/Android/.test(userAgent)) { os = 'Android'; } else if (/Linux/.test(platform)) { os = 'Linux'; } return os; } يعتمد الأمر كثيراّ على نوع المتصفح و حداثة نسخته. المعلومات التي تخص النظام التشغيلي وتفاصيل اكثر تعقيداً تستطيع الوصول أليها بصورة أساسية من خلال window.navigator ولكن كما وضحنا سلفاً تختلف طريقة الحصول على هذه المعلومات من متصفح لأخر وأحيانا بين تختلف الطريقة بين نسخ نفس المتصفح. الدالة أعلاه تتيح لك تحديد نوع النظام التشغيلي لطيف واسع من الأنظمة وأكثرها شيوعا.

بما أنك لم تحدد أي لغة برمجية تستخدم في تطبيقك , سأفترض أنك تستعمل PHP الطريقة بأختصار هي أن تتحقق من وجود الأيميل (email) في قاعدة البيانات قبل أدخال قيمة جديدة. تابع الكود التالي <?php //email to check $email = "john@example.com"; $name = "john"; $password = "password"; //prepare the statement $stmt = $pdo->prepare("SELECT * FROM users WHERE email=?"); //execute the statement $stmt->execute([$email]); //fetch result $user = $stmt->fetch(); if ($user) { // email exists echo "User is already existed." } else { // email does not exist $sql = "INSERT INTO USERS (name, email, password) VALUES ($name, $password, $email)"; if ($conn->query($sql) === TRUE) { echo "New record created successfully"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } } ?> شرح الكود: أولاً: نقوم بحفظ المدخلات القادمة من http request (POST) في متغيرات بأسماء مناسبة. ثانياً: ننفذ SQL QUERY لمحاولة أيجاد سطر في قاعدة البيانات يحتوي نفس قيمة email المدخل. ثالثاً: أذا تم العثور على شيء نعيد للمستخدم رسالة مفادها أن مستخدما بنفس الأيميل مسجل بالفعل. رابعاً: أذا لم يتم العثور علىى شئ ننفذ SQL QUERY لأدخال سطر جديد ألى قاعدة البيانات ومن ثم نعيد ألى المستخدم رسالة نجاح المهمة.

هناك أكثر من طريقة للوصول الى نفس النتيجة المطلوبة. أحدى الطرق تكون كالتالي: الدالة Object.keys تتيح لك الحصول على جميع مفاتيح الكائن على هيئة مصفوفة const myObj = { a: 1, b: 2, c: 3 }; const keys= Object.keys(myObj) المتغير keys يحتوي على المصفوفة المذكورة أنفاً ["a", "b", "c"] الان نستعمل forEach لكي نمر على جميع قيم المفاتيح ... keys.forEach(function(key){ .... }) ... الأن نستطيع الحصول على القيم المقابلة لكل مفتاح من خلال الكائن الأصلي والمفتاح الحالي في الدورة الحالية من دالة forEach وكالتالي ... let value = myObj[key] ... الأن أصبح من السهل أخراج النتيجة المراد طباعتها في الكونسول كما يلي ... console.log(key, value) ... الكود كاملاً const myObj = { a: 1, b: 2, c: 3 }; const keys= Object.keys(myObj) keys.forEach(function(key){ let value = myObj[key] console.log(key, value) })

بداية لا يمكنك بناء شيء من الصفر بدون خبرة برمجية، لكن الخبرة البرمجية لبناء متجر الكتروني متوسط التعقيد لا يتطلب خبرة طويلة. من اسهل الطرق للوصول الى ما تريد هو full-stack web development course اي دورة تدريبية للواجهتين الامامية والخلفية والقليل من مفاهيم قواعد البيانات. بالنسبة لي اعتقد ان Ruby On Rails نظام متكامل يحل مشكلتك في حال لديك الرغبة في التعلم. فهو سهل التعلم ويوفر لك بناء اي موقع الكتروني بسرعة كبيرة. فضلا عن كون لغة الروبي هي لغة مرنة وسهلة التعلم. https://academy.hsoub.com/learn/ruby-web-application-development/#AboutCourse

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

react router هي مكتبة خاصة لمنصة react تساعدك على بناء نظام توجيه تلقائي في التطبيق الذي ترمي بناءه او التعديل عليه. مثال: لنفرض ان لديك واجهة مستخدم تتطلب وجود صفحتين "الصفحة الرئيسية" , "اتصل بنا" كل صفحة مرتبطة ب component , لتكن home, contact الان حتى تسمح للمستخدم بالوصول الى اي من الصفحتين من خلال المتصفح بفتح رابط الصفحة المطلوبة, نستعمل react-router.. لاحظ الصورة المرفقة Router هو الحاوية الرئيسية الذي تضع فيها تعريفات الراوتر. Switch يقوم بلقط الرابط المدخل (url)من المتصفح ومن ثم اسقاطه على الراوت المناسب له. Route هنا تقوم بتعريف الجهة (الراوت) الذي يفتح صفحة معينه مرتبطة ب component معين, كما ترى تم ربط "home/" بال Component المسمى Home والذي يفترض انك قمت بتعريفه او استيراده مسبقا. عندما تكتب في المتصفح مثلا http://localhost:3000/home تفتح لك صفحة الرئيسية . والكلام نفسه ينطبق على Contact. يفتح لك صفحة اتصل بنا هناك الكثير لتتعلمه في هذه المكتبه لكن البدايه يجب ان تكون بسيطة ثم الانتقال لتفاصيل اكثر تعقيدا.

لا يتم الطباعة الى الconsole لعدم تحقق شرط المساواة ايضا بما انك تريد مقارنة متغيرين يحملان نفس نوع البيانات ( في هذه الحالة string ) لذا يفضل استعمال "===" بدل "==" بعد فحص الكود تبين ان المتغير pshirt يحتوي على مسافة بالاضافة الى القيمة المستحصلة عن طريق .innerText مثال: "Blue T-shirt" === " Blue T-shirt" هنا تكون نتيجة الشرط الذي وضعته false بالتالي لا يتم تنفيذ السطر 87 لحل المشكلة استعمل trim للتخلص من اي مسافات ملتصقة بالنص , فيكون كالتالي if( pshirt.trim() === ite ){ console.log("eee"); }