-
المساهمات
13209 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
365
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو Mustafa Suleiman
-
"Nest.js" و"Express" هما إطاري عمل (frameworks) لتطوير تطبيقات ويب باستخدام بيئة عمل Node.js. وعلى الرغم من أنهما يستندان إلى نفس تقنية الخلفية (Node.js) ويستخدمان لتطوير تطبيقات ويب، إلا أن لديهما اختلافات واختيارات تصميم مختلفة، وإليك بعض الفروق الرئيسية بينهما: الفلسفة والهيكل التنظيمي Express إطار عمل خفيف الوزن ومرن جدًا، ويقدم حلاً بسيطًا لبناء تطبيقات ويب بمساعدة مجموعة من المكتبات المتخصصة. Nest.js تم تصميمه لتوفير هيكل تنظيمي قوي ومنظم لتطبيقات Node.js، ويشجع على استخدام مفهوم الـ "Modules" و"Dependency Injection" لتسهيل إدارة واختبار التطبيقات الكبيرة والمعقدة. من حيث نمط التطوير Express يتيح لك حرية كبيرة في تنظيم التطبيق وكتابة الكود كما تراه مناسبًا. Nest.js يفرض تنظيمًا محددًا وهيكلاً معينًا على التطبيقات من خلال استخدام مفاهيم ونماذج محددة. الأداء Express بما أنه خفيف الوزن ولا يفرض الكثير من التجهيزات الإضافية، فهو أسرع من حيث الأداء في بعض الحالات. أما Nest.js بسبب هيكله التنظيمي والاعتماد على مكتبات إضافية، فهو أبطأ قليلاً في بعض الحالات. لكن دائمًا هناك تنازلات من أجل الحصول على أمرًا ما أي trade-off. دعم الأمان والتحقق Nest.js يتيح نمطًا صارمًا لمعالجة الأمان والتحقق من الهوية من خلال استخدام Middlewares وحماية الطرق (Guards). Express يقدم مكتبات وسائط (middlewares) للتحقق والأمان، ولكن Nest.js يقدم هيكلًا أكثر تنظيمًا وقوة في هذا الصدد. أيضًا Express لديه مجتمع ضخم ومستندات متاحة بشكل واسع، وهو أحد أقدم الإطارات وأكثرها شهرة. و Nest.js مع تزايد شعبيته، يزداد توفر المستندات والموارد، ولكنه لا يزال أحدث مقارنةً بـ Express.
-
عليك أن تقوم بتعديله ليقبل فقط هذه الصيغة ويستبعد الصيغة الأخرى (dd/mm/yyyy) عن طريق تعديل بعض أجزاء التعبير: ^(0?[1-9]|1[0-2])/([0-2]?[0-9]|3[0-1])/((19|20)\d{2})$ (0?[1-9]|1[0-2]) يسمح للشهر بأن يكون مكونًا من رقم واحد مع الصفر الاختياري مثل 01 أو رقمين بدون صفر مثل 12. ([0-2]?[0-9]|3[0-1]) يعبر عن اليوم ويسمح لليوم بأن يكون مكونًا من رقم واحد أو اثنين مع الصفر الاختياري مثل 01 أو أي رقم يتراوح بين 00 و 29، بالإضافة إلى الرقم 30 و 31 إذا كان الشهر يسمح بذلك. ((19|20)\d{2}) يعبر عن السنة وهو لا يحتاج إلى تعديل. وإليك مثال على كود جافاسكريبت لاستخدام التعبير النمطي المعدل للتحقق من تاريخ بتنسيق "mm/dd/yyyy": function validateDate(inputDate) { const regex = /^(0?[1-9]|1[0-2])\/([0-2]?[0-9]|3[0-1])\/((19|20)\d{2})$/; return regex.test(inputDate); } const date1 = "08/11/2023"; // تاريخ صالح بالتنسيق المطلوب const date2 = "11/08/2023"; // تاريخ غير صالح بالتنسيق المطلوب const date3 = "2023/08/11"; // تاريخ غير صالح بأي تنسيق console.log(validateDate(date1)); // سيطبع true console.log(validateDate(date2)); // سيطبع false console.log(validateDate(date3)); // سيطبع false
- 4 اجابة
-
- 1
-
تقييم جيد أحسنت، ولكن إذا أردت نصيحتي فلا تنتقل من HTML إلى CSS إلا بعد التفرقة بين عناصر الـ Block وinline وأيضًا القدرة على إنشاء نموذج form بالعناصر الخاصة به بشكل جيد بدون CSS أي تنسيقه من خلال عناصر HTML فقط. وذلك تحدي جيد لك وستتعلم الكثير من تلك التجربة، وتستطيع البحث عما تريد معرفته سواء على يوتيوب أو جوجل، ولكن عليك بالتفكير أولاً قبل البحث. ثم بعد تعلم CSS أنصحك بقراءة التالي :
- 4 اجابة
-
- 1
-
في حال أردت قراءة المصدر وهي المستندات الإنجليزية، فعليك بالبحث عما تريد معرفته من خلال كتابته ثم كتابة اسم اللغة أو الإطار بجانبه وليكن مثلاً دالة forEach في جافاسكريبت نبحث عنها كالتالي: foreach javascript وسيظهر لك نتائج في جوجل ومنها موقع Mozilla Developer أو MDN، وذلك الموقع هو الأفضل في حالة أردت معرفة اي شيء يتعلق بـ HTML, CSS, JS لكنه باللغة الإنجليزية. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference وللبحث عن النتائج العربية نبحث عن: forEach javascript شرح وستجد أنه من ضمن النتائج يوجد موسوعة حسوب وستجد بها شرح لمختلف اللغات والإطارات. وإليك مرجع للغة جافاسكريبت بها: https://wiki.hsoub.com/JavaScript ونفس الأمر طبقه node.js، وإذا أردت مشاهدة شرح بالفيديو، فعليك بالبحث بنفس الطريقة في يوتيوب من أجل النتائج الإنجليزية والنتائج العربية كما شرحت. والمستند الرسمي لـ node.js هو : https://nodejs.org/en/docs أما في موسوعة حسوب فهو التالي: https://wiki.hsoub.com/Node.js
-
الأمر بسيط ولا حاجة للإنزعاج والقلق، في حال أنك تتعلمين لغة جديدة مثل الإنجليزية هل بمشاهدة الدروس ستتمكنين من إتقان أو قراءة أو إتقان اللغة من أول مرة؟ بالطبع لا، الأمر بحاجة إلى التكرار في البداية والمراجعة كل فترة من خلال الممارسة وليس المشاهدة فقط، لذلك الطريقة الصحيحة للدراسة هي مشاهدة الدروس ثم محاولة فهم ما يتم شرحه والاستيعاب، وفي حال أردتي المزيد من التوضيح عليك بالبحث عما تريدينه على يوتيوب أو جوجل ولا تكتفي بشرح أي دورة في أي مكان عليك دائمًا بالبحث والقراءة والمشاهدة لتعلم المزيد وتوضيح الأمر لك. ثم تستطيعي السؤال أسفل الدرس ليتم مساعدتك وإرشادك، وبعد فهم الدرس واستيعابه عليك بالتطبيق مع المدرب في حال كان الفيديو طويل، وإن كان صغير تستطيعي الفهم ثم التطبيق في النهاية بمفردك لتثبيت المعلومات، وفي حال قمتي بالتطبيق مع المدرب، فعليك بالتطبيق بمفردك مرة أخرى حيث ستجدي أنك تخطأين في بعض الأشياء وستتعلمين الكثير من أخطائك، ثم مقارنة ما قمتي به بحل المدرب. وبحل التمارين بشكل يومي سيتحسن مستواكي شيئًا فشيئًا أو تنفيذ مشاريع بسيطة، ولا تنزعجي أبدًا من الصعوبة في البداية فتلك هي طبيعة مجال البرمجة.
-
بعض الخطوات التي يمكنك اتباعها لإعداد توقعات الأرباح وتقييم الشركة: جمع البيانات المالية. تحليل البيانات المالية. إجراء التوقعات المالية. تقييم الشركة. وستحتاج إلى جمع البيانات المالية للشركة التي تريد تحليلها، من خلال التقارير المالية للشركة، مثل الميزانية العمومية والحساب الختامي والبيان النقدي. بعد جمع البيانات المالية، ستحتاج إلى تحليلها، ويمكن القيام بذلك باستخدام مجموعة متنوعة من الأدوات والتقنيات، مثل النسب المالية والتحليل المقارن. ثم يمكنك البدء في إجراء التوقعات المالية. يمكن القيام بذلك باستخدام مجموعة متنوعة من الأساليب، مثل التحليل التقديري والتحليل التنبؤي. بعد إجراء التوقعات المالية، تأتي خطوة تقييم الشركة باستخدام مجموعة متنوعة من المعايير، مثل القيمة العادلة ومعدل العائد على الاستثمار. وإليك بعض النصائح التي قد تساعدك في مشروع تخرجك بالتحليل المالي: استخدم الأدوات والتقنيات المناسبة لتحليل البيانات المالية. قارن الشركة التي تريد تحليلها بشركات أخرى في نفس القطاع. خذ في الاعتبار العوامل الخارجية التي قد تؤثر على أداء الشركة. أعد النظر في توقعاتك المالية بشكل دوري.
-
الأمر غير ممكن بسبب إعتمادك على نفس الدومين، والحل المتاح هو تحويل الزائر ومنها الإعتماد على ملف .htaccess وذلك لتوجيه الزيارات من الدول الأجنبية إلى موقع الويب الإنجليزي وأضف السطر التالي إلى ملف .htaccess: RewriteCond %{HTTP_ACCEPT_LANGUAGE} ^en-US$ [NC] RewriteRule ^.*$ https://www.yourenglishwebsite.com/ [R=301,L] مع استبدال https://www.yourenglishwebsite.com باسم الدومين الذي تريد التوجيه إليه. وإذا كانت لغة الزائر هي en-US (الإنجليزية الأمريكية)، فإنه سيقوم بإعادة توجيه الزائر إلى موقع ويب باللغة الإنجليزية. لكن في حال كان المستخدم عربي ويستخدم لغة إنجليزية للمتصفح فستحدث مشكلة بسبب عملية التحويل. لذلك من الأفضل الإعتماد على خاصية IP geolocation من Cloudflare: تأكد من تسجيل الدخول إلى حسابك على Cloudflare. انتقل إلى قسم "Workers" في لوحة التحكم. انقر على "Create a Worker" أو ما يماثل ذلك. قم بكتابة الكود البرمجي الذي يقوم بالتحقق من موقع الزائر باستخدام خدمة IP Geolocation ويُعيد التوجيه وفقًا لذلك. فيما يلي مثال تقريبي: addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { const response = await fetch('https://api.cloudflare.com/client/v4/zones/YOUR_ZONE_ID/requests', { headers: { 'X-Auth-Key': 'YOUR_API_KEY', 'X-Auth-Email': 'YOUR_EMAIL' } }) const data = await response.json() const countryCode = data.countryCode // استخراج البلد من البيانات المسترجعة if (countryCode === 'US') { // إعادة توجيه إلى الموقع الإنجليزي return Response.redirect('https://www.yourenglishwebsite.com', 301) } else { // إعادة توجيه إلى الموقع العربي أو أي موقع آخر return Response.redirect('https://www.yourarabicwebsite.com', 301) } } وعليك بتغيير "YOUR_ZONE_ID" و "YOUR_API_KEY" و "YOUR_EMAIL" إلى قيمك الفعلية. الكود أعلاه يعتمد على توفر خدمة IP Geolocation من Cloudflare. إذا كنت تستخدم خدمة خارجية للتحقق من موقع الـ IP، يمكنك تكييف الكود وفقًا لذلك. بعد كتابة الكود، انقر على "Save and Deploy" لنشر العامل وتفعيله. وتستطيع البحث عن How To Setup Geo Redirection In Cloudflare. وهناك إضافة لووردبريس تقوم بذلك IP2Location Redirection.
-
كل فترة يتم إضافة دورات جديدة للأكاديمية أو تحديث الدورات الموجودة بالفعل في حال دعت الحاجة إلى ذلك، وإطار ASP.NET المعتمد على لغة C# مطلوب في سوق العمل بالفعل بجانب لغة PHP وإطار لارافيل وذلك في الدول العربية، أضف على ذلك ستجد أنه يتم طلب إطار Angular الخاصة بالواجهة الأمامية بجانب إطار ASP.NET. لكن هناك أولوية للدورات، وفي الوقت الحالي تستطيع الإعتماد على الدورات المتاحة على يوتيوب أو على مواقع أخرى، لكن عليك بتعلم C# أولاً. وASP.NET يولد صفحات HTML ، لذا فإن معرفة HTML و CSS أمر مهم أيضًا. بالإضافة إلى أن ASP.NET يمكنه تخزين البيانات في قاعدة بيانات ، لذا فإن معرفة قاعدة بيانات مثل SQL Server أمر مهم كذلك. وحاليًا أحدث إصدار من ASP.NET هو ASP.NET Core وهو إطار عمل خفيف الوزن وقابل للنقل، ويوصى بتعلم ASP.NET Core بدلاً من ASP.NET القديم.
- 3 اجابة
-
- 1
-
عليك بإضافة Popper قبل استيراد ملف جافاسكريبت لمكتبة bootstrap أي كالتالي: <script src="https://fastly.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous" ></script> <script src="bootstrap/bootstrap.min.js"></script> حيث أن الكود يتم قرائته من الأعلى للأسفل وإذا قمت بإضافته بعد مكتبة bootstrap لن يتم العثور على Popper. وتستطيع استخدام ملف bootstrap.bundle.js بدلاً من bootstrap.min.js حيث أن نسخة bundle مضمنة بداخلها Popper وبالتالي لن تحتاج إلى تضمين مكتبة Popper. وأيضًا في حال أنك من مصر تجنب استيراد المكتبات من موقع jsdelivr أو تستطيع استبدال cdn التي في أول الرابط بكلمة fastly. ومن الأفضل استخدام موقع https://cdnjs.com/
-
في حال أنك من مصر تجنب استخدام jsdelivr أو قم باستبدال cdn في أول الرابط بـ fastly وسيعمل. ومن الأفضل أن تعتمد على موقع cdnjs ورابط المكتبة هو التالي: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> أو تستطيع تحميل المكتبة واستيراد الملف نفسه من خلال الرابط التالي: https://getbootstrap.com/docs/5.3/getting-started/download/ ستجد زر باسم Download وبعد التحميل وفك الضغط ستجد ملفات CSS وJS وما تحتاجه هو ملف bootstrap.min.css. أو تحميل المكتبة من خلال npm.
-
عليك باستخدام عبارة if للتحقق مما إذا كان الإدخال يساوي الحرف "o"، وإذا كان الأمر كذلك، يمكنك طباعة رسالة إلى المستخدم ومطالبته بإدخال رقم مختلف. مثل إضافة الكود التالي إلى الدالة if_is_equl(): if inp == 'o': print('لا يمكنك إدخال o. يرجى إدخال x أو 1 إلى 9.') inp = int(input('أدخل رقمًا: ')) سيتحقق الكود مما إذا كان الإدخال يساوي الحرف "o". إذا كان الأمر كذلك، فسيطبع رسالة إلى المستخدم ويطلب منه إدخال رقم مختلف. ثم سيُطلب من المستخدم إدخال رقم جديد. يمكنك أيضًا إضافة ذلك الكود إلى حلقة while في الوظيفة الرئيسية: while True: inp = int(input("أدخل رقمًا: ")) if inp > 9: print("الرقم أكبر من الحد الأقصى وهو 1 إلى 9. أعد المحاولة .....") elif inp == 'o': print('لا يمكنك إدخال o. يرجى إدخال x أو 1 إلى 9.') continue else: break وسيمنع ذلك المستخدم من إدخال الحرف "o" بدلاً من الحرف "x".
-
لا يوجد إجابة واحدة على سؤالك، فالأمر بحاجة إلى توضيح ما الذي تريد التسويق له وما الغرض وما هي الفئة التي تستهدفها؟ حيث أن كل منصة تواصل إجتماعي حاليًا تجذب فئة معينة ومختلفة تمامًا عن أي منصة أخرى، لذلك عليك بتحديد ما الذي تريده لتحديد نوعية الأشخاص المهتمين بما تريده والتسويق لنفسك على المنصة الصحيحة. فمثلاً ستجد البعض يهتم بالتسويق لنفسه على موقع مثل LinkedIn، بينما شخص آخر من الأفضل له التسويق على منصة مثل فيسبوك وشخص آخر الأفضل له تويتر، وذلك يعتمد على البلد التي تعيش بها وبلد الأشخاص المهتمين بأعمالك أو من تبحث عنهم أنت. قسم مقالات التسويق الذاتي في أكاديمية حسوب
-
من الأفضل أن تستخدم إضافة Live server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer وبعد تثبيتها ستجد زر باسم Go Live اضغط عليه وسيظهر لك الموقع وسيتم تطبيق أي تغييرات تجريها بدون الحاجة إلى إعادة تحديث الصفحة، وفي حال ظهر لك ملفات المشروع عليك باختيار ملف HTML الرئيسي ومن الأفضل تسميته index.html ليتم التعرف عليه مباشرًة.
-
أنت تقصد addEventListener، صحيح؟ في حال أردت تنفيذ أمر معين عند حدوث حدث محدد، عليك إما تمرير دالة callback لكي يتم استدعائها عند وقوع الحدث، أو كتابة دالة يتم استدعائها عند وقوع الحدث وليس كتابة الكود بشكل مباشر، أي نكتب دالة كالتالي بدلاً من callback: function randomNumberGenerator() { return Math.random(); } document.addEventListener("mousemove", function(e) { document.getElementById("demo").innerHTML = randomNumberGenerator(); });
- 4 اجابة
-
- 1
-
هناك خلط في الفهم بين كيفية استخدام وتسجيل الحدث (event listener) وكيفية تعيين دالة كولباك (callback function). عند استخدام addEventListener مثلما هو موضح في المثال الأول: document.addEventListener("mousemove", myFunction); هذا يعني أننا نقوم بتعيين دالة myFunction كدالة استجابة لحدث "mousemove" ،وتلك الدالة ستُستدعى في كل مرة يتم فيها تحريك الماوس على الشاشة، وسيتم تنفيذ الكود الموجود في داخل الدالة في كل مرة. أما الشيء الذي قمت بتجربته: document.addEventListener("mousemove", document.getElementById("demo").innerHTML = Math.random()); هناك خطأ في الاستخدام، لأنك تقوم بتعيين نتيجة تقييم تعبير document.getElementById("demo").innerHTML = Math.random() كدالة استجابة للحدث "mousemove"، وذلك ليس هو الهدف المطلوب. بالنسبة للجزء الثاني من السؤال، عند استخدام setTimeout، يجب تمرير دالة كولباك كمعامل أول والوقت الذي يجب أن تنتظره كمعامل ثاني. لذلك، يجب استخدامه بهذه الطريقة: const myTimeout = setTimeout(function() { document.getElementById("demo").innerHTML = "Happy day!"; }, 5000); وذلك سيؤدي إلى تغيير نص العنصر برقم عشوائي بعد مرور 5 ثواني من تنفيذ السكريبت.
- 4 اجابة
-
- 1
-
من خلال الإعتماد على middleware passport.session() لحفظ البيانات من backend إلى cookies في frontend تلقائيًا.، وذلك الوسيط middleware يستخدم مكتبة cookie-session لإنشاء وإدارة جلسات المستخدم. وللاستخدام، أضف passport.session() إلى middleware chain الخاص بك: app.use(passport.session()); ثم، يمكنك استخدام استراتيجية Passport الخاصة بك لحفظ البيانات في الجلسة، مثلا في حال كنت تستخدم استراتيجية passport.local()، تستطيع حفظ اسم المستخدم وكلمة المرور في الجلسة باستخدام الكود التالي: passport.use(new LocalStrategy((username, password, done) => { // Check the username and password against the database if (username === 'kerlos' && password === 'secret') { // The user is authenticated done(null, user); } else { // The user is not authenticated done(new Error('Invalid username or password')); } })); بمجرد حفظ البيانات في الجلسة، سيتم إرجاعها إلى frontend تلقائيًا. وبإمكانك الوصول إلى البيانات باستخدام middleware cookie-parser()، ومثلاً للحصول على على اسم المستخدم نستخدم التالي: const username = req.cookies.username; وباستطاعتك أيضًا استخدام middleware cookie-parser() لإزالة البيانات من الجلسة، فلتسجيل خروج المستخدم، استخدم الكود التالي: req.session.destroy(); وإليك مثال كامل: const express = require('express'); const passport = require('passport'); const cookieSession = require('cookie-session'); // Create an Express app const app = express(); // Configure passport app.use(passport.initialize()); app.use(passport.session({ secret: 'secret', })); // Define a route that requires authentication app.get('/protected', passport.authenticate('local'), (req, res) => { // The user is authenticated res.send('Hello, ' + req.user.username); }); // Define a route that logs the user in app.post('/login', (req, res) => { // Check the username and password against the database if (req.body.username === 'johndoe' && req.body.password === 'secret') { // The user is authenticated passport.authenticate('local')(req, res, () => { res.redirect('/protected'); }); } else { // The user is not authenticated res.send('Invalid username or password'); } }); // Define a route that logs the user out app.get('/logout', (req, res) => { // Invalidate the user's session req.session.destroy(); res.redirect('/'); }); // Start the app app.listen(3000, () => { console.log('App listening on port 3000'); });
- 2 اجابة
-
- 1
-
أهلاً بك عمران، بالنسبة لطرق الدفع المتاحة عبر أكاديمية حسوب فهى باي بال والبطاقة الإئتمانية، ولكن في الصفحة الخاصة بالعرض الصيفي الوسيلة المتاحة هي البطاقة الإئتمانية. وطالما أنك تريد الدفع عن طريق باي بال، فهنا عليك بالتحدث لمركز المساعدة في أكاديمية حسوب وإخبارهم أنك تريد الدفع عن طريق باي بال والدورتين اللتان تريد الإشتراك بهم وسيتم إضافتهم لحسابك بعد دفع رسوم الإشتراك. وستجد المزيد من التوضيح هنا: وأيضًا قد تفيدك النقاشات التالية:
-
أنت لم تذكر هي الخلفية التي لديك، هل تعلمت أساسيات البرمجة بلغة معينة من قبل؟ وقمت بكتابة كود للتطبيق على ما تعلمته؟ أما أنك شاهدت بعض الفيديوهات؟ في حال لم تقم بكتابة كود من قبل ولا تعرف ما معنى الدوال والجمل الشرطية والحلقات التكرارية والمتغيرات والعوامل والوسائط، فأرجو منك إذن بدراسة الدورة من البداية. فمن خلال سكراتش سيتم تدريبك على المفاهيم البرمجية السابقة بشكل بسيط وتنمية مهارة التفكير المنطقي لديك في البرمجة، وذلك بشكل بسيط وسهل من خلال سكراتش. وبخصوص فائدة دورة علوم الحاسب فستجد شرح مفصل هنا:
-
في حال أنك قمت بإضافة تعليق على درس ستظهر لك علامة النجمة بجانب ذلك الدرس. أما في حال ظهر لك علامة دائرة زرقاء فذلك يعني أن يوجد محتوى جديد أي أن الفيديو جديد أو لم تقم بمشاهدته من قبل أو هناك تعليقات جديدة لم تراها).
- 1 جواب
-
- 1
-
من الأفضل وصف الأمر بشكل واضح لتستوعب مهمة كل واجهة، حيث أن الواجهة الأمامية الغرض منها هو عرض البيانات أو المحتوى بشكل مناسب للمستخدم من أجل أن يستهلك تلك البيانات بأشكالها المختلفة، ووظيفة الواجهة تسهيل تلك المهمة. من أين تأتي تلك البيانات؟ في حال كان لديك بيانات ثابتة لا تتغير أي تبقى كما هي، فأنت تحتاج إلى بناء موقع من نوع Static ونطوره من خلا اللغات والتقنيات التي ذكرتها (html, CSS, JS, bootstrap, jQuery). أما إذا كانت البيانات متغيرة فنحتاج إلى استخدام أو إطار أو مكتبة للواجهة الأمامية مثل React أو Angular أو Vue.js. هل الواجهة الأمامية تعرض البيانات فقط؟ لا، يمكنك إرسال البيانات من خلال الواجهة الأمامية إلى الواجهة الخلفية ليتم معالجتها. متى نحتاج الواجهة الخلفية؟ وظيفة الواجهة الخلفية هي استقبال البيانات التي يتم إرسالها من الواجهة الأمامية في حالة أردت معالجة تلك البيانات مثل تسجيل مستخدم جديد في الموقع وغيرها من الأمثلة. أيضًا في حال أردت إنشاء موقع ذو محتوى متغير فهنا عليك بإنشاء واجهة خلفية من إجل طلب تلك البيانات وعرضها عند الحاجة، حيث تخزن البيانات في قاعدة بيانات في الواجهة الخلفية. ويتم طلب تلك البيانات عن طريق API والذي يقوم مطور الواجهة الخلفية بإنشائه، من أجل أن يستخدمه مطور الواجهة الأمامية ليتحدث إلى السيرفر. هل يمكن إنشاء موقع ببيانات متغيرة بدون واجهة خلفية؟ نعم، لكن ستكون قدرات الموقع محدودة ولن تتمكن من حفظ البيانات بشكل دائم حيث سيتم حفظها في المتصفح الخاص بالمستخدم، ولن تتمكن من تنفيذ خاصية مثل خاصية تسجيل مستخدم جديد لكونها تتطلب خادم وقاعدة بيانات وغيرها من الأمور. وستجد هنا المزيد من التفصيل:
-
كلاهما مطلوبان، وPHP مطلوبة بشكل أكبر بالطبع وهي إضافة كبيرة لك في حال تعلمتها، ولكن في بعض المشاريع لن تحتاج إلى إنشاء واجهة خلفية من البداية، ومن الأفضل أن تعتمد على منصة مثل Firebase أو Supabase أو appwrite. وعليك باستيعاب أمر هام ألا وهو أن PHP وFirebase لا يصح مقارنتهم ببعضهم. حيث أن PHP هي لغة برمجة تستخدم بشكل رئيسي لتطوير تطبيقات الويب من خلال تضمين الشيفرة البرمجية في صفحات HTML، وهي لغة خاصة بالواجهة الخلفية، مما يعني أن الشيفرة تُنفذ على الخادم قبل إرسال النتائج إلى المتصفح. ويمكن استخدام PHP للتفاعل مع مختلف أنواع قواعد البيانات مثل MySQL، PostgreSQL، وغيرها، ويمكنك إجراء استعلامات، إدخال واسترجاع البيانات من قواعد البيانات باستخدام PHP. مما يعني أنها لغة برمجة تُسمح للمطورين ببناء مجموعة متنوعة من تطبيقات الويب، من المواقع البسيطة إلى المشروعات الكبيرة والمعقدة. بينما Firebase هي منصة تطوير سحابية تقدم مجموعة متكاملة من الأدوات والخدمات لبناء تطبيقات الويب والهواتف المحمولة، وتتضمن Firebase العديد من الخدمات مثل قواعد البيانات الفعلية (Realtime Database) ومخزن Firestore وخدمة المصادقة والتخزين وغيرها. وباستخدام Firebase، لا تحتاج إلى القلق بشأن إعداد وإدارة الخوادم. Firebase تدير البنية التحتية لك، مما يسمح لك بالتركيز على تطوير التطبيق نفسه بدلاً من إدارة البنية التحتية. أيضًا Firebase تتيح خدمات قواعد البيانات الفعلية ومخزن Firestore التي تدعم التواصل في الوقت الحقيقي، مما يتيح للتطبيقات تحديث البيانات تلقائيًا لجميع المستخدمين بمجرد حدوث تغيير. وFirebase مصممة لتكون سهلة الاستخدام وتوفر واجهة مستخدم واضحة ووثائق شاملة، مما يجعل من السهل بناء تطبيقات متقدمة دون الحاجة لخبرة كبيرة في البنية التحتية. لذلك كما ذكرت الأمر يعتمد على المشروع نفسه: اللغة: PHP هي لغة برمجة ، بينما Firebase هي منصة تطوير سحابية. القابلية للتخصيص: PHP أكثر مرونة وقابلية للتخصيص من Firebase. سهولة الاستخدام: Firebase أسهل في الاستخدام من PHP. قابلية التوسع: Firebase أكثر قابلية للتوسع من PHP. وليس مطلوب منك كمطور تطبيقات هاتف أن تتعلم لغة خاصة بالواجهة الخلفية، يمكنك أن تعتمد على منصة واجهة خلفية مثل Firebase وغيرها كما ذكرت، وذلك ما يعتمد عليه الكثيرين على مواقع العمل الحر من أجل تسليم التطبيق للعميل مع واجهة خلفية بدون الحاجة إلى تعلم لغة خاصة بالواجهة الخلفية، لكن في كان المشروع كبير ويتطلب تخصيص أو التفاعل مع قاعدة بيانات مثل MySQL أو PostgreSQL أو تنفيذ العمليات المعقدة على الخادم أو تحتاج إلى التواصل مع APIs خارجية للحصول على البيانات أو تقديم بيانات إلى خدمات أخرى.
-
بخصوص التمارين، من الأفضل أن تبحث على يوتيوب عن "مشاريع بايثون للمبتدئين" وذلك من أجل أن تحاول تطبيق فكرة المشروع وأيضًا تجد مرجع للعودة إليه يشرح لك كيفية تنفيذ الأمر في حال واجهتك صعوبة وأيضًا لمقارنة الكود الخاص بك بالكود الخاص بالشرح. فأنت في البداية بحاجة إلى من يرشدك، ولكن حاول التفكير وتقسيم المشروع إلى أجزاء والعمل عليها، وليس الإسراع لمشاهدة الشرح في الفيديو، ولا مشكلة في ذلك لكن بعد المحاولة فأنت ما زلت تتعلم. وإليك بعض المشاريع إذا أردت العمل عليها: بناء حاسبة تقوم بأربع عمليات رياضية أساسية (+، -، *، /). يمكنك تحسينها لدعم عمليات أكثر تعقيدًا. أنشئ تطبيقًا يسمح للمستخدم بإضافة وحذف وعرض مهام يريد القيام بها. بناء محول يتيح للمستخدم تحويل بين وحدات مختلفة، مثل تحويل الوحدات الزمنية أو الوحدات العملات. كتابة لعبة تسمح للاعب بتخمين الرقم الذي يفكر فيه البرنامج، مع تقديم تلميحات إذا كان الجواب غير صحيح. أنشئ برنامجًا يقوم بإنشاء كلمات سر عشوائية وقوية للمستخدمين. بناء تطبيق يسمح للمستخدم بإضافة وعرض جهات الاتصال، مثل أسماء وأرقام الهواتف وعناوين البريد الإلكتروني. ابنِ لعبة تقوم فيها بمحاكاة رمي النرد وحساب مجموع النقاط على النرد. ابنِ برنامجًا يتيح للمستخدم إدخال نص وتحويله إلى لغة مستهدفة باستخدام مكتبة مثل Google Translate API. اكتب برنامجًا يقوم بعد الكلمات والجمل في نص معين، مفيد للمدوّنين أو الكتّاب. التوقيت العالمي: قم ببناء برنامج يعرض التوقيت في عدة مناطق زمنية حول العالم. وإذا أردت مواقع توفر لك إختبارات على بايثون، فعليك بالبحث عن "إختبارات على بايثون" في جوجل وسيظهر لك عدة مواقع باللغة العربية.
-
عند الإشتراك في أي دورة في أكاديمية حسوب يتاح لك دراسة المسار الأول من جميع الدورات الأخرى، مما يعني أنك تستطيع دراسة HTML وCSS وجافاسكريبت وjQuery أيضًا والتطبيق العملي بإنشاء موقع شخصي من خلال المسار الأول في الدورات التالية: دورة تطوير واجهات المستخدم: المسار الأول أساسيات تطوير الويب . دورة تطوير التطبيقات باستخدام JavaScript: المسار الأول أساسيات لغة JavaScript (تعمق أكثر لأساسيات جافاسكريبت). وطالما أنك تدرس دورة خاصة بتطوير مواقع الويب، فسيتعين عليك الإلمام بأساسيات لغات الويب وهم HTML وCSS وجافاسكريبت. وبالطبع تعلم لغة جافاسكريبت أمر إختياري، لكن سيزيد ذلك من قدرتك على إنشاء مواقع ويب تفاعلية أكثر.
- 2 اجابة
-
- 1
-
تعلم الأساسيات؟ نعم تكفي. بناء مشاريع حقيقية؟ بالطبع لا. ما المدة المناسبة؟ أنت حاليًا تدرس دورة تطوير واجهات المستخدم، وستحتاج 3 أشهر على الأقل لإنهاء الدورة وتنفيذ المشاريع الخاصة بها، ولحساب المدة التي ستحتاجها أنصحك بقراءة التالي وستجد إجابة مفصلة لسؤالك: