Mustafa Suleiman

من خلال الإعتماد على 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');
});

أهلاً بك عمران،

بالنسبة لطرق الدفع المتاحة عبر أكاديمية حسوب فهى باي بال والبطاقة الإئتمانية، ولكن في الصفحة الخاصة بالعرض الصيفي الوسيلة المتاحة هي البطاقة الإئتمانية.

وطالما أنك تريد الدفع عن طريق باي بال، فهنا عليك بالتحدث لمركز المساعدة في أكاديمية حسوب وإخبارهم أنك تريد الدفع عن طريق باي بال والدورتين اللتان تريد الإشتراك بهم وسيتم إضافتهم لحسابك بعد دفع رسوم الإشتراك.

وستجد المزيد من التوضيح هنا:

وأيضًا قد تفيدك النقاشات التالية:

بتاريخ 15 دقائق مضت قال Haytham Alaa2:

ان منزل صورة بالخطا بس مش عارف هي مش ظاهرة لحضرتك ولا ايه

 

عليك برفع الصورة هنا من خلال الضغط على زر اسحب الملفات إلى هنا:

أنت لم تذكر هي الخلفية التي لديك، هل تعلمت أساسيات البرمجة بلغة معينة من قبل؟ وقمت بكتابة كود للتطبيق على ما تعلمته؟

أما أنك شاهدت بعض الفيديوهات؟

في حال لم تقم بكتابة كود من قبل ولا تعرف ما معنى الدوال والجمل الشرطية والحلقات التكرارية والمتغيرات والعوامل والوسائط، فأرجو منك إذن بدراسة الدورة من البداية.

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

وبخصوص فائدة دورة علوم الحاسب فستجد شرح مفصل هنا:

في حال أنك قمت بإضافة تعليق على درس ستظهر لك علامة النجمة بجانب ذلك الدرس.

أما في حال ظهر لك علامة دائرة زرقاء فذلك يعني أن يوجد محتوى جديد أي أن الفيديو جديد أو لم تقم بمشاهدته من قبل أو هناك تعليقات جديدة لم تراها).

من الأفضل وصف الأمر بشكل واضح لتستوعب مهمة كل واجهة، حيث أن الواجهة الأمامية الغرض منها هو عرض البيانات أو المحتوى بشكل مناسب للمستخدم من أجل أن يستهلك تلك البيانات بأشكالها المختلفة، ووظيفة الواجهة تسهيل تلك المهمة.

من أين تأتي تلك البيانات؟

في حال كان لديك بيانات ثابتة لا تتغير أي تبقى كما هي، فأنت تحتاج إلى بناء موقع من نوع 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 خارجية للحصول على البيانات أو تقديم بيانات إلى خدمات أخرى.

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

فأنت في البداية بحاجة إلى من يرشدك، ولكن حاول التفكير وتقسيم المشروع إلى أجزاء والعمل عليها، وليس الإسراع لمشاهدة الشرح في الفيديو، ولا مشكلة في ذلك لكن بعد المحاولة فأنت ما زلت تتعلم.

وإليك بعض المشاريع إذا أردت العمل عليها:

1. بناء حاسبة تقوم بأربع عمليات رياضية أساسية (+، -، *، /). يمكنك تحسينها لدعم عمليات أكثر تعقيدًا.
2. أنشئ تطبيقًا يسمح للمستخدم بإضافة وحذف وعرض مهام يريد القيام بها.
3. بناء محول يتيح للمستخدم تحويل بين وحدات مختلفة، مثل تحويل الوحدات الزمنية أو الوحدات العملات.
4. كتابة لعبة تسمح للاعب بتخمين الرقم الذي يفكر فيه البرنامج، مع تقديم تلميحات إذا كان الجواب غير صحيح.
5. أنشئ برنامجًا يقوم بإنشاء كلمات سر عشوائية وقوية للمستخدمين.
6. بناء تطبيق يسمح للمستخدم بإضافة وعرض جهات الاتصال، مثل أسماء وأرقام الهواتف وعناوين البريد الإلكتروني.
7. ابنِ لعبة تقوم فيها بمحاكاة رمي النرد وحساب مجموع النقاط على النرد.
8. ابنِ برنامجًا يتيح للمستخدم إدخال نص وتحويله إلى لغة مستهدفة باستخدام مكتبة مثل Google Translate API.
9. اكتب برنامجًا يقوم بعد الكلمات والجمل في نص معين، مفيد للمدوّنين أو الكتّاب.
10. التوقيت العالمي: قم ببناء برنامج يعرض التوقيت في عدة مناطق زمنية حول العالم.

وإذا أردت مواقع توفر لك إختبارات على بايثون، فعليك بالبحث عن "إختبارات على بايثون" في جوجل وسيظهر لك عدة مواقع باللغة العربية.

عند الإشتراك في أي دورة في أكاديمية حسوب يتاح لك دراسة المسار الأول من جميع الدورات الأخرى، مما يعني أنك تستطيع دراسة HTML وCSS وجافاسكريبت وjQuery أيضًا والتطبيق العملي بإنشاء موقع شخصي من خلال المسار الأول في الدورات التالية:

• دورة تطوير واجهات المستخدم: المسار الأول أساسيات تطوير الويب .
• دورة تطوير التطبيقات باستخدام JavaScript: المسار الأول أساسيات لغة JavaScript (تعمق أكثر لأساسيات جافاسكريبت).

وطالما أنك تدرس دورة خاصة بتطوير مواقع الويب، فسيتعين عليك الإلمام بأساسيات لغات الويب وهم HTML وCSS وجافاسكريبت.

وبالطبع تعلم لغة جافاسكريبت أمر إختياري، لكن سيزيد ذلك من قدرتك على إنشاء مواقع ويب تفاعلية أكثر.

تعلم الأساسيات؟

نعم تكفي.

بناء مشاريع حقيقية؟

بالطبع لا.

ما المدة المناسبة؟

أنت حاليًا تدرس دورة تطوير واجهات المستخدم، وستحتاج 3 أشهر على الأقل لإنهاء الدورة وتنفيذ المشاريع الخاصة بها، ولحساب المدة التي ستحتاجها أنصحك بقراءة التالي وستجد إجابة مفصلة لسؤالك:

أنصحك بالإعتماد على استضافة Vercel فهى الأفضل للمشاريع الخاصة بـ React و Next.js، وخطوات رفع المشروع مشابهة للاستضافات التي قمت باستخدامها، عليك بإضافة مستودع المشروع ثم إضافة متغيرات البيئة وإضافة قاعدة بيانات Postgres لو توفرت في مشروعك.

وستجد المزيد من التفصيل في المستند الرسمي أو يمكنك مشاهدة فيديو على اليوتيوب:

• https://vercel.com/docs/getting-started-with-vercel/import

البرنامج غير مجاني أي مدفوع، وبعد إنتهاء الفترة التجريبية Free Trial سيتعين عليك شراء البرنامج بشكل قانوني، وتجنب استخدام الإصدارات غير القانونية يساهم في دعم الشركات المبتكرة والحفاظ على أخلاقيات استخدام البرمجيات.

وإذا كنت تبحث عن برنامج مجاني بديل لـ CorelDraw، فيمكنك تجربة أحد البرامج التالية:

• Inkscape
• GIMP
• Xara Xtreme

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

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

وكل 10 دروس مثلاً، حاول تجميع ما تعلمته واستخدامه في تنفيذ نموذج بسيط لأي فكرة تخطر في بالك المهم توظيف ما تعلمته وتجربة مختلف الخواص لمعرفة طبيعة عملها وتأثيرها على الكود.

وستجد هنا المزيد من التفصيل:

ستحتاج أولاً إلى توفير نسخة مترجمة من الموقع، ولتسهيل الأمر عليك من الأفضل استخدام مكتبة جافاسكريبت خاصة بالترجمة مثل i18next و Polyglot.js، وقد تم شرح الأمر بشكل مفصل هنا:

وإليك مثال على الإصدار 23 من i18next:

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>i18next Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.4.2/i18next.min.js" integrity="sha512-M4iruTNlnwfFL71Q+5fMOLe6gY3k6hq795GafcfVovObnhvz9h+DtaVdaP92Bjaai808vO8Iq5XPn9eW3VwVWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="content">
  <p data-i18n="welcome"></p>
  <p data-i18n="description"></p>
</div>
<button id="changeLanguage">Change Language</button>


</body>
</html>

JS:

// تكوين i18next
i18next.init({
  lng: 'ar', // اللغة الافتراضية
  debug: true,
  resources: {
  ar: {
       translation:{
 "welcome": "مرحبًا بك في الموقع!",
    "description": "هذا مثال بسيط باستخدام i18next."
       }
   
  },
  en: {
      translation:{
            "welcome": "Welcome to the website!",
    "description": "This is a simple example using i18next."
      }
  }
  }
}, function(err, t) {
  // تحميل الترجمات بعد التهيئة
  updateContent();
});

// دالة لتحديث المحتوى المترجم
function updateContent() {
  document.querySelector('[data-i18n="welcome"]').textContent = i18next.t('welcome');
  document.querySelector('[data-i18n="description"]').textContent = i18next.t('description');
}

// التبديل بين اللغات
document.getElementById('changeLanguage').addEventListener('click', function() {
  const newLanguage = i18next.language === 'ar' ? 'en' : 'ar';
  i18next.changeLanguage(newLanguage, function(err, t) {
    if (err) return console.log('something went wrong loading', err);
    updateContent();
  });
});

وستجد المزيد في الموقع الرسمي:

• https://www.i18next.com/overview/getting-started

بتاريخ 1 ساعة قال Noura Ali3:

علوم حاسب حاليا جالسة اتعلم جافا سكربت وصلت قسم الدوال

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

تمارين على الدوال للمبتدئين في جافاسكريبت

تمرين 1

كتابة دالة تأخذ مصفوفة من الأرقام كوسيطرجم أوليّ لحساب المتوسط الحسابي لهذه الأرقام وتعيده.

تمرين 2

كتابة دالة تأخذ درجة حرارة بالدرجات المئوية وتقوم بتحويلها إلى درجات فهرنهايت باستخدام الصيغة: F = C * 9/5 + 32

تمرين 3

كتابة دالة تأخذ عددًا وتحدد ما إذا كان زوجيًا أم فرديًا وتعيد نصًّا يُبيِّن ذلك.

تمرين 4

كتابة دالة تأخذ نصًا وعددًا صحيحًا إيجابيًا، وتعيد نسخة من النص تُكرر بالعدد المحدد.

تمرين 5

كتابة دالة تأخذ مصفوفة من الأرقام وعددًا، وتقوم بالبحث عن العدد في المصفوفة. إذا تم العثور عليه، يجب أن تعيد موقع أول ظهور للعدد، وإلا يجب أن تعيد رسالة تفيد بأن العدد غير موجود.

تمرين 6

كتابة دالة تأخذ نصًّا وتعيد نصًّا آخرين يكون هو عكس النص الأول.

تمرين 7

كتابة دالة تأخذ عددًا إيجابيًا وتقوم بحساب مجموع جميع الأرقام من 1 إلى هذا العدد.

تمرين 8

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

تمارين تشمل الحلقات التكرارية والشروط (if-else) مع استخدام العوامل (operators) في جافا سكريبت:

تمرين 1

كتابة برنامج يستخدم حلقة (مثل حلقة for) لحساب مربعات الأعداد من 1 إلى 10 ويعرضها.

تمرين 2

 برنامجًا يستخدم حلقتين تكراريتين متداخلتين (nested loops) لإنشاء جدول ضرب من 1 إلى 10.

تمرين 3

برنامجًا يطلب من المستخدم إدخال عدد من الأرقام، وبعد انتهاء الإدخال، يقوم البرنامج بحساب مجموع الأرقام والمتوسط باستخدام حلقة وعرض النتيجة.

تمرين 4

 برنامجًا يسأل المستخدم عن عمره، ثم يستخدم الشروط (if-else) لعرض رسالة مختلفة بناءً على العمر، مثل "أنت صغير جدًا" إذا كان دون 18، و"أنت بالغ" إذا كان 18 أو أكبر.

تمرين 5

 برنامجًا يسأل المستخدم عن وزنه (بالكيلوجرام) وطوله (بالمتر)، ثم يستخدم الشروط لحساب مؤشر كتلة الجسم (BMI) ويعرض رسالة توضح إذا كان الشخص تحت وزنه، طبيعي، زائد وزنه، أو مصاب بالسمنة.

تمرين 6

برنامجًا يطلب من المستخدم إدخال سلسلة من الأعداد. عندما يدخل الرقم -1، يتوقف البرنامج ويعرض أكبر وأصغر رقم تم إدخاله.

تمرين 7

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

فكرة جميلة وأحييك على محاولة خلق تحدي لنفسك من أجل تشجيعك على تعلم المزيد، وبخصوص الصور والفيديوهات فأنت لسة بحاجة إلى واجهة خلفية، كل ما ستقوم به هو إنشاء تصميم مناسب لعدد الصور والفيديوهات.

بعد ذلك ستقوم بالإشارة إلى مسار الصور والفيديوهات كما فعلت في الدورة أي مسار نسبي بالنسبة لمجلد المشروع، ثم ستقوم برفع ذلك المجلد على استضافة مثل Netlify لمشاركة المشروع بشكل حي مع من تريد.

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

ويمكنك استخدام مكتبات JavaScript مثل Lightbox أو Fancybox أو Swiper لعرض الصور والفيديوهات بشكل جميل وتفاعلي على موقعك دون الحاجة لإنشاء صفحة خاصة لكل فيديو، وتلك المكتبات تسمح للمستخدم بالنقر على الصور أو الروابط المصغرة للفيديو وعرضها في إطار علوي فوق الصفحة الحالية.

أرجو ذكر ما هي الدورة التي تدرسينها حاليًا، لتوفير تمارين مناسبة لك، وأيضًا تمارين بخصوص أي نقطة في الدورة أم تمارين عامة؟ 

أولاً وقبل أي شيء أنت بحاجة إلى معرفة بالآتي: HTML, CSS, JS ثم معرفة بمحرك قوالب Twig،  وهو نظام قوالب يستخدم في برمجة الويب للمساعدة في إنشاء وإدارة قوالب HTML، وتم تطوير Twig بلغة برمجة PHP وهو جزء من إطار عمل Symfony لتطوير تطبيقات الويب.

تم تطويره باستخدام PHP، هل ذلك يعني أنك بحاجة إلى تعلم PHP؟

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

وبالطبع أنت بحاجة إلى تعلم الـ Syntax الخاصة بـ Twig من كتابة كود HTML من خلاله، والتي ستجدها في المستند الرسمي للإصدار 3:

• https://twig.symfony.com/doc/3.x

ثم عليك بإتباع الدليل الرسمي الخاص بإنشاء قوالب لمنصة سلة:

• https://docs.salla.dev/docs/twilight-themes-documentation/bqv759f6r9285-develop-a-theme

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

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

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

وقد تم النقاش حول تلك النقطة هنا بالتفصيل:

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

أو يمكنك الإعتماد على مكتبة Bootstrap من أجل إنشاء الموقع بشكل أسرع وأسهل في حال كان التصميم بسيط.

الأمر يعتمد على ما إذا كان لديك وقت كافي أم لا، فإذا كنت تريد العمل بأسرع وقت بسبب ظرفِ ما، فعليك أولاً بدراسة دورة تطوير واجهات المستخدم، لكن ذلك بالنسبة لمواقع العمل الحر، فللعمل بشركة ستحتاج إلى تعلم إطار أو مكتبة خاصة بالواجهة الأمامية مثل React أو Angular، وستجد ذلك في دورة تطوير التطبيقات باستخدام لغة JavaScript حيث يتم بها شرح مكتبة React ومكتبات وإطارات أخرى خاصة بجافاسكريبت.

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

تندرج Express و Socket.io و WebSockets و HTTP جميعها تحت مصطلح "واجهة برمجة تطبيقات الويب"،  وواجهة برمجة تطبيقات الويب هي مجموعة من التعليمات البرمجية التي تسمح للتطبيقات ( مثل متصفحات الويب) بالتفاعل مع الخادم.

أي أنها أدوات تطوير تستخدم لإنشاء وتطوير واجهات برمجة تطبيقات (APIs) وتواصل في تطبيقات الويب. ولكنها ليست بذاتها "API" في المفهوم الضيق الذي يشمل توفير واجهة برمجة تطبيقات للتفاعل مع تطبيق آخر.

وExpress هو إطار عمل لتطبيقات الويب في Node.js، يسمح لك Express بإنشاء وتطوير وتوفير واجهات برمجة تطبيقات (APIs) من خلال تحديد مسارات (routes) والتعامل مع طلبات HTTP مختلفة مثل GET وPOST وPUT وDELETE وغيرها.

أما HTTP فهو بروتوكول النقل الذي يتم استخدامه في الواجهات البرمجية لتمكين التواصل بين العميل (مثل المتصفح) والخادم، ويعتمد بشكل كبير على طرق HTTP المختلفة مثل GET وPOST وPUT وDELETE.

و WebSocket هو بروتوكول اتصال ثنائي الاتجاه يتم استخدامه لتمكين التواصل الحي والتفاعلي بين العميل والخادم، ويتميز WebSocket بأنه يسمح بفتح اتصال طويل الأمد يتيح للبيانات أن تتم نقلها في الوقت الفعلي دون الحاجة إلى الانتظار لاستجابة من الخادم.

وبخصوص Socket.io فهي مكتبة تسهل استخدام WebSocket مع Node.js والمتصفحات، وتتيح Socket.io التواصل الحي والثنائي الاتجاه بين العميل والخادم بطريقة سهلة ومتوافقة مع مجموعة متنوعة من المتصفحات والبيئات.

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

وتستطيع تفقد النماذج والتصميمات هنا:

وعامة سأوفر لك بعض الأسئلة:

السؤال 1:

قم بإنشاء ملف HTML يحتوي على عنوان للصفحة (باستخدام وسم <h1>), وفقرة نصية بسيطة (باستخدام وسم <p>).

السؤال 2:

قم بإنشاء قائمة غير مرتبة (unordered list) تحتوي على 3 عناصر (items)، حيث يمثل كل عنصر اسم لون باللغة العربية، وقم بتطبيق ألوان مختلفة على النص لكل عنصر باستخدام ورقة الأنماط (CSS).

السؤال 3:

أنشئ نموذج (form) يحتوي على حقل إدخال (input) نصي (text) يطلب من المستخدم كتابة اسمه، ثم قم بعرض رسالة ترحيبية تحتوي على الاسم الذي قام المستخدم بكتابته.

السؤال 4:

قم بإنشاء قائمة منسدلة (dropdown menu) تحتوي على قائمة بأسماء بعض الدول العربية. استخدم وسم <select> لإنشاء القائمة ووسم <option> لتعريف خيارات القائمة.

السؤال 5:

أنشئ صندوقًا (div) بأبعاد 300 بكسل عرضًا و200 بكسل ارتفاعًا، وأضف له حدًا (border) بلون مغاير عند التنفيذ، وضع في داخله فقرة نصية.

طرق الدفع المتاحة هي البطاقة الإئمتانية من نوع credit card أو Debit card وليس بطاقة مسبقة الدفع Prepaid، أو الدفع من خلال باي بال.

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

ويوجد طريقة أخرى وهي بطاقة الهدية  حيث يمكن لشخص شراء بطاقة بتكلفة الكورس ويمكنك استخدامها لشراء أي كورس تريد.

ويوجد أيضًا العرض الصيفي لا تنسى تفقده.

بتاريخ 20 دقائق مضت قال Chamekh Med:

بماذا تفيدني الرتبة ؟هل تسهلي وظيفة ؟

لا ليس علاقة من قريب أو من بعيد بالوظيفة، هي أمر لقياس مدى نشاطك على الأكاديمية فقط، الأمر مشابه لموقع Stack Overflow في حال قمت بتصفحه من قبل ستجد أن لكل عضوة نقاط سمعة.

في بداية عملية التعلم كل ما عليك التركيز عليه هو التعلم وليس محاولة إنهاء الدورة واستكمالها، وأعلم أن الأمر صعب فالجميع في البداية متحمس ويريد إنهاء الدورة في أسرع وقت ويريد تنفيذ المشاريع ونشرها.

لكن بدون عملية التعلم البطيئة في البداية لن تتمكني من الإسراع في النهاية، بل ستسيري بنفس السرعة وستعودي للمراجعة والدراسة مرة أخرى.

لذلك بعد كل درس عليك بسؤال نفسك هل فهمت الدرس بشكل جيد؟ نعم؟ إذًا عليك بالتطبيق بمفردك على نفس المسائل والنماذج التي قام بها المدرب أو مسائل ونماذج مشابهة ومحاولة التعديل على الكود وتعديله لفهم الكود.

في حال واجهتك مشكلة في الحل ماذا نفعل؟ 

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

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

لكن لا تقضي اليوم كله في مسألة مثلاً، بل المطلوب منك هو المحاولة والبحث من أجل التعلم، وفي حال تم حل نصف المسألة مثلاً أو تم تنفيذها لكن لم تعمل بشكل سليم تمامًا فلا مشكلة، يمكنك رؤية الحل ومشاهدة الشرح بعد المحاولة.