السلام عليكم،

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

هذا هو رابط التطبيق على استضافة heroku.

إذاً، ما الذي يقدمه التطبيق؟

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

التقنيات المستخدمة في بناء التطبيق

استعملت كلاً من React.js و Bootstrap 4. اعتمدت أيضاً على الألوان التي يقدمها إطار Materialize حتى تبدو الألوان متناسقة.

والآن، ما الهدف من عمل هذا التطبيق أصلاً؟

كما أسلفت مسبقاً، الهدف الوحيد كان التدرب أكثر على إطار React.js.

بعد أن أنهيت كلاً من الدورتين التاليتين في المجال:

React JS Crash Course

Learn React for free

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

ما الذي تعلمته من تجربتي

رغم بساطة التطبيق الشديدة، إلا أني تعلمت أشياء كثيرة جداً. بداية من استعمالي لأسلوب Kanban في إدارة المشاريع:

حسناً ربما كان المشروع لا يستدعي استعمال أسلوب Kanban على الإطلاق.. ولكني أحببت أن أستعمله من الآن تحضيراً لاستعماله فيما بعد.

وتعلمت أيضاً عن المكونات (components) وعن الstate وغيرها من المفاهيم المهمة في React. صحيح أني تدربت عليها في الدورات التدريبية، ولكن التطبيق العملي على مشروع كامل من البداية كان بمثابة الطريقة الأمثل لترسيخ المعلومات أكثر.

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

ختاماً

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

شكراً لقراءتكم لهذا الحد ودمتم طيبين.

الكود المصدري: