عبدالله عبدالرحمن11

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

هذا أمر يتعلق بالسيرفر الخلفية وليس بالواجهات فقط انت الان تقوم ببناء الواجهات التي يراها المستخدم فقط ولكن للأمور الأخرى مثل المنتجات وأي نوع آخر من البيانات فانت تحتاج الى التعامل مع الخلفية Backend وقواعد البيانات لكي تستطيع بناء واجهة للعميل لإضافة منتجات بحيث انت تقوم ببناء الواجهة الخاصة لإضافة المنتجات ومن خلالها تتواصل مع الخادم Backend للقيام بتخزين هذه المنتجات في قواعد البيانات بحيث أي زائر للمتجر يحصل على هذه المنتجات الجديدة من قاعدة البيانات وللقيام بذلك لديك العديد من الخيارت إما أن يكون هناك مبرمج خلفية Backend يقوم ببرمجة هذا القسم ويقوم بإعطائك API لكي تستطيع تطوير واجهة إضافة المنتجات واستخدام هذا ال API للتواصل مع الخادم وإضافة المنتجات وهنا ليس لك أي دخل في برمجة الخلفية كلما عليك هو التعامل مع ال API الذي أعطاك وإما تقوم انت ببرمجة الخلفية لإستقبال المنتجات وإضافتها لقاعدة البيانات وايضا برمجة الواجهة التي يراها العميل وإما البرمجة بإستخدام تقنيات إدارة المحتوى مثل الWordpress أو Strapi أو غيرها بحيث انت تركز على تطوير الواجهة وتقنيات إدارة المحتوى هي التي تحل محل تطوير الخلفية بحيث تدير المحتوى الخاص بك من التواصل مع الخلفية وقواعد البيانات بدون تطوير الخلفية

كما ترى اسم الدورة تطوير واجهات المستخدم لذا هي لتطوير الواجهة فقط Frontend أما بخصوص تطوير الخلفية Backend فلديك عدة دورات أخرى من حسوب والدورات هي دورة تطوير التطبيقات بإستخدام JavaScript دورة تطوير تطبيقات الويب بإستخدام لغة PHP دورة تطوير تطبيقات الويب بإستخدام لغة Ruby دورتي PHP و Ruby هي خاصة بتطوير الخلفية فقط بإستخدام إحدى اللغتين لكن دورة تطوير التطبيقات بإستخدام JavaScript هي دورة أوسع بكثير ومسارات الدورة كالآتي أساسيات لغة JavaScript أساسيات مكتبة React.js أساسيات بيئة Node.js تطوير تطبيق جوال باستخدام React Native تطوير تطبيق محادثة شبيه بتطبيق WhatsApp تطوير تطبيق سطح مكتب باستخدام Electron.js بلغة واحدة وهي JavaScript ستتعلم تطوير الواجهات بإستخدام مكتبة فيسبوك الشهيرة React.js وأيضا تطوير تطبيقات الخلفية بإستخدام Node.js وأيضا تطوير تطبيقات الهواتف الذكية لنظامي الأندرويد والآيفون بإستخدام React Native وأيضا تطوير تطبيقات سطح المكتب للوندوز والماك واللينوكس بإستخدام Electron.js ، ومن أشهر البرامج الذي تم بنائه بإستخدام Electron.js برنامج VS Code كل هذا بلغة برمجة واحدة وهي JavaScript أما بخصوص كيفية الربط ، فالربط يكون بإستخدام مايسمى بال API

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

كما شرحت لك سابقا لن يكون هناك مشكلة إلا إذا كانت الصور المرفوعة الى السيرفر في مجلد منفصل عن صفحة الHTML وفي صفحة الHTML روابط الصور تشير الى السيرفر الخاص بك الى ال endpoint الخاصه بالصور

إذا كانت خاصية البحث مثل خاصية محرك البحث لجوجل فهي ضروريه لإظهار إقتراحات أو نتائج سريعة للبحث الذي يقوم به المستخدم إذا انت لا تريد ذلك وتريد فقط أن يكون البحث عندما ينتهي المستخدم من إدخال جملة البحث إذاً لديك العديد من الخيارات: إما تجعل مكون React الخاص بالبحث على شكل form واستخدام الحدث onSubmit للحصول على نتائج البحث أو يمكنك إضافة إيقونة البحث وعند الضغط عليها بإستخدام الحدث onClick يمكن للمستخدم الحصول على نتائج البحث أو عندما يضغط المستخدم على زر Enter بإستخدام الحدث onKeyPress والقيام بإستخدم if الشرطية للتأكد من أن الزر المضغوط هو enter من خلال إذا كان event.keyCode === 13 أو يمكنك إستخدام الدالة setTimeout عندما يتم إستدعاء onChange يتم إستدعاء دالة setTimeout والذي بدورها تقوم بإستدعاء دالة إرسال الطلب الى الخادم بعدما يتوقف المستخدم عن الكتابة لمدة ثانية على سبيل المثال أو يمكنك إستخدام أكثر من طريقة من الطرق السابقة لحصول على تجربة مستخدم جيدة

برنامج android studio يعتبر بيئة تطوير متكاملة مايسمى بال IDE مخصصه لتطوير تطبيقات الاندرويد حيث كلما ما تحتاجه من تحرير الأكواد وال Android SDK والمحاكي وغيرها من الأدوات في مكان واحد لهذا برنامج Android Studio حجمه كبير وثقيل ويحتاج الى الكثير من الرام (ذاكرة الوصول العشوائي) بينما VS Code هو عبارة عن محرر أكواد عام للعديد من لغات البرمجة وهذا هو أدني وظائفه من دون أي إضافات ولهذا يكون خفيف ويستهلك رام أقل ولكن لديك العديد من الإضافات الذي تسهل عملك وأيضا من أهم ما يميز VS Code مفتوح المصدر البساطة والسهولة في الإستخدام والتصميم الأداء السريع والإستهلاك الأقل لموراد الحاسوب القدرة على توسعة البرنامج بإستخدام العديد من الإضافات

نعم يمكنك إستخدام Multer قم بإنشاء متغير لإستدعاء multer مع الإعدادات الذي تريدها ثم تقوم بإستدعاء هذا المتغير في المُدخل الثاني وتقوم بإستدعاء single إذا كان الملف واحد var express = require('express') var multer = require('multer') var upload = multer({ dest: 'uploads/' }) // تحدد المكان الذي تريد وضع الملف فيه وتستطيع وضع إعدادات أخرى var app = express() app.post('/profile', upload.single('avatar'), function (req, res, next) {// إستدعاء الدالة في المُدخل الثاني // req.file is the `avatar` file // req.body will hold the text fields, if there were any })

في البداية انت تعمل فورم بشكل عادي لأي عدد تريد من الملفات وتضيف حالة State للإمساك بهذه الملفات ثم تقوم بإنشاء FormData جديد وتقوم بإضافة الملفات وفي المُدخل الأول تحدد اسم للملف وفي المُدخل الثاني تحدد الملف كما هو موضح في الكود class Upload extends React.Component { constructor(props) { super(props); this.state = {file: null}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({file: event.target.files[0]}); } handleSubmit(event) { e.preventDefault(); const formData = new FormData(); formData.append('file', this.state.file); axios({ method: 'post', headers: { 'Content-Type': 'multipart/form-data', }, data: formData, url: 'endponint', }) .then((res) => { console.log(res) }) .catch((err) => console.error(err)); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="file" onChange={this.handleChange} name="file"/> </label> <input type="submit" value="Submit" /> </form> ); } }

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

إذا استخدمت الطريقة GET في ال Form فهنا سيتم إرسال البيانات عبر الرابط وهي تسمى Queries وهنا يمكنك استخدام هذا الكود للحصول على البيانات app.get('/userlogin', function(req, res){ var email = req.query.email; console.log(email) } فالQueries هي للطريقة GET ولكن انت استخدمت الطريقة POST لهذا فإن البيانات هذه المرة لن تذهب عبر الرابط ولن يتم إضافة Queries ولكن سيتم إرسال البيانات عبر مايسمى بال body وعند إستقبالها من الخادم يجب عليك الحصول عليها من body وليس query كما هو مبين في الكود app.post('/userlogin', function(req, res){ var email = req.body.email; console.log(email) } وايضا ستحتاج لإستخدام مايسمى بال middleware كما وضح الأخ عدنان لكي تستطيع القراءة من الbody

يمكنك إستخدام هذا الكود للتخلص من جميع العدادات for (var i = 1; i < 99999; i++) window.clearInterval(i);

إن سبب إعادة التحميل التلقائي هو وجود كود HTML يخبر المتصفح بإعادة التحميل تلقائياً كل وفترة من الوقت وهذا هو الكود <meta http-equiv="refresh" content="5"> كلمة refresh للتحديث التلقائي والرقم الذي بعد content عدد الثواني فهنا هذا الكود يخبر المتصفح بإعادة تحميل الصفحة تلقائياً كل خمس ثواني يمكنك بكل سهولة منع ذلك بإستخدام JavaScript في البداية يجب عليك فتح الصفحة المطلوبة ومن ثم تقوم بفتح ال console يمكنك ضغط زر f12 أوضغط ctrl +shift + i أو من الذهاب الى خيارات -> المزيد من الأدوات -> أدوات المطور والان في ال console تقوم بكتابة هذا الأمر لإيقاف التحديث التلقائي بكل سهولة window.stop()

اولا Bootstrap موجود في packages.json ثانيا يجب عليك تشغيل الأمر npm install لتثبيت جميع الحزم التي في packages.json وآخيراً في الملف App.js يجب عليك تغيير import 'bootstrap/dist/css/bootstarp.min.css'; الى import 'bootstrap/dist/bootstrap.min.css'; فكما تلاحظ لا يوجد css

.

في البداية يجب عليك إنشاء مستودع لهذا المشروع في Github ومن ثم تقوم بنسخ الرابط الخاص بالمستودع وفي مجلد مشروعك قم بإستخدام git وقم بتشغيل الأوامر الآتية git init git add . // Stageلإضافة كافة ملفات المشروع الى ال git commit -m "inital" git remote add origin رابط المشروع git push -u origin main ستظهر لك نافذة لتسجيل الدخول ببيانات حسابك في github

هذا الملف الرئيسي فقط يجب عليك إرسال كامل ملفات المشروع من دون مجلد node mudules للتأكد من packages.json وأيضا يمكنك استخدام البدائل الأخرى التي كتبتها سابقا

GraphQL هو بديل لRESTful API للتواصل وطلب البيانات بين الواجهة (العميل) والخلفية (الخادم - السيرفر) لكي تفهم GraphQL يجب أن تكون عارف كيف يعمل RESTful API ال RESTful API بإختصار يقوم بطلب بيانات من عدة نقاط نهاية endpoints مثال تقوم بعمل طلب من نقطة النهاية posts/ فتحصل على المنشورات وتقوم بعمل طلب من نقطة النهاية الأخرى users/ لكي تحصل على المستخدمين وهكذا ولكن بإستخدام GraphQL تقوم بالتواصل مع نقطة نهاية واحدة ومن خلال استخدام GraphQL تقوم بوصف البيانات الذي تريد الحصول عليها مثلاً أخر عشرة منشورات وأخر عشرة مستخدمين فالآن لديك نقطة نهاية واحدة وتستطيع وصف البيانات التي تريد الحصول عليها وتحصل فقط على البيانات المطلوبة فقط ، ففي RESTful API إذا كنت تريد بيانات محددة كنت ستحصل على كثير من البيانات الذي لا تحتاجها Strapi هو headless cms وهو عبارة عن نظام إدارة محتوى أو بشكل أقرب إدارة الخلفية والبيانات بحيث على سبيل المثال مطوري الواجهة يقومون بتطوير الواجهة بإستخدام أي إطار عمل والحصول على البيانات أو المحتوى من هذا النظام، في Strapi يمكنك إستخدام RESTful أو GraphQL Gatsby هو عبارة عن إطار عمل مبني على React يعمل Gatsby على توليد المواقع الثابتة من أجل الحصول على أداء أفضل ، تحسين محركات البحث SEO ، وحماية أفضل وGatsby يقوم بإستخدام GraphQL

في لغة JavaScript لديك مايعرف بالتنفيذ المتزامن synchronous و التنفيذ غير المتزامن asynchronous الحالة الإفتراضية لتنفيذ الكود في JavaScript هو تنفيذ متزامن بحيث يتم تنفيذ الكود من الأعلى الى الأسفل من اليسار الى اليمين إلا في بعض الحالات مثل عند استخدام ميزة async الجديدة أو عمل طلب بإستخدام Fetch أو axios فهنا يتم تنفيذ هذا الكود بشكل غير متزامن في الكود الخاص بك تم تنفيذ الكود المتزامن بالكامل ويتم تنفيذ الكود الغير المتزامن في حالتك استخدام axios بشكل منفصل ومن ثم بعد الإنتهاء من الكود المتزامن يتم الرجوع الى الكود الغير المتزامن والتأكد إذا انتهى من التنفيذ انظر الى ترتيب التنفيذ في الكود الخاص بك var friends = {} // 1 axios.get('http://localhost:8080/api/people') .then(function (response) { friends = response.data[0] //3 console.log(friends) }) .catch(function (error) { console.log(error) }) console.log(friends) // 2 بإختصار يجب تنفيذ الكود المتزامن بالكامل ومن ثم الكود الغير المتزامن يمكنك إستخدام كود الأخ عدنان ليتم إستدعاء الدالة بعد إنتهاء تنفيذ الدالة الغير متزامنة والحصول على إستجابة أو يمكنك إستخدام async await كما هو مبين في هذا الكود var friends = {} async function asyncFunc() { try { friends = await axios.get("http://localhost:8080/api/people") .then((response) => response.data[0]) console.log(friends) } catch (err) { console.error(err); } } asyncFunc()

إذا كان بإمكانك استخدام العنصر a ولكن تريد أن يتم تحميل الملف من نفس الصفحة فيمكنك إضافة صفة (attribute) في العنصر a وهي download فهذه الصفة تخبر المتصفح بالقيام بالتحميل من الرابط ولن يتم إعادة توجيه أو فتح صفحة أخرى بل سيتم تحميل الملف من نفس الصفحة يمكنك إضافة هذا الكود <a href="http://localhost:5000/download-file" download> تنزيل الفيديو </a>

من خلال مشاهدة فيديوهات شرح لكل ماهو مذكور

دورات حسوب بشكل عام هي عبارة عن فيديوهات تدريبية بشهادة معتمدة من أكاديمية حسوب مع متابعة أثناء الدورة من قبل فريق متخصص أما بخصوص دورة JavaScript فهي تحتوى على 22 ساعة فيديو تدريبية وتتعلم فيها أساسيات لغة البرمجة JavaScript أساسيات مكتبة React.js الخاصة بJavaScript أساسيات Node.js وهي عبارة عن تشغيل JavaScript خارج المتصفح تطوير تطبيقات الجوال للأندرويد والآيفون بإستخدم React Native الخاص ب JavaScript تطوير تطبيق مشابه ل Whatsapp بإستخدام JavaScript و React Native

المشكلة هي أنه لم يجد ملف bootstrap يجب عليك التأكد أنك قمت بإستدعائه بشكل صحيح يمكن القيام بتثبته عبر npm بإستخدام هذا الأمر npm install bootstrap@3 أو يمكنك بإختصار إضافة bootstrap في ملف index.html في المجلد Public وإضافة هذه الروابط <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

انت تحتاج على الأقل HTML لكي تستطيع إضافة ال JavaScript هذا إذا أردت تطوير المواقع أما إذا أردت تعلم تطوير تطبيقات الجوال بإستخدام React Native أو أردت إستخدام Nodejs لتشغيل JavaScript خارج المتصفح فلا تحتاج الى HTML و CSS في الحقيقة لغتي HTML و CSS ليست لغات برمجة وهما عبارة عن لغتين بسيطتين وليست معقدة ويمكنك تعلم الأساسيات الضرورية وقد يستغرق الأمر ساعات قليلة وفي يوم واحد ومن ثم يمكنك تعلم JavaScript

المدخل (parameter) الثاني ل axios.get والثالث ل axios.post و axios.put هو الخيارات الإضافية وهو عبارة عن object ومن إخلاله يمكنك إضافة ال content-type و غيره من الخيارات كما في الكود الموضح في الأسفل const handleSubmit = async (e) => { e.preventDefault(); const user = {username: 'adam', email: 'adam@gmail.com'}; await axios.post('http://localhost:8080/api/v1/data', user, { headers: { 'content-type': 'application/x-www-form-urlencoded' } }); };