دليل سريع لـ Node.js للمبتدئين

يوم جيد ، أيها الأصدقاء!



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



هذا التنسيق يعني ما يلي:

• SPA - يتم تحميل بيانات جديدة (أقسام أو فصول يدوية) بدون إعادة تحميل الصفحة - يتم تنفيذها باستخدام الاستيراد الديناميكي
• PWA - يمكن تثبيت التطبيق على الهاتف المحمول أو الكمبيوتر ؛ يعمل التطبيق حتى في حالة عدم وجود اتصال بالشبكة - يتم تنفيذه باستخدام عامل خدمة والتخزين المؤقت
• mobile-first - التطبيق مخصص للاستخدام بشكل أساسي على الهواتف الذكية ، لكنه يبدو جيدًا على الشاشات العريضة أيضًا

يمكنك عرض التطبيق وتثبيته هنا: Netlify ، PWA Store .



→ كود المشروع على جيثب



Sandbox:





على سطح المكتب ، يبدو التطبيق كما يلي:











على هاتف ذكي ، مثل هذا:









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



تمت كتابة الدليل الأصلي في عام 2019 مع مراعاة أحدث إصدار من Node.js و ES2018 في ذلك الوقت ، مما يفسر مدى ملاءمته.



يتكون الدليل من 54 قسمًا (فصلاً) ، والتي تحدد في شكل يمكن الوصول إليه أساسيات وبعض ميزات Node.js. لن يجعلك البرنامج التعليمي خبيرًا في JavaScript من جانب الخادم ، ولكنه سيساعدك على البدء في تعلمه وتحديد الطريق إلى الأمام.



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



يتم تبديل الصفحات باستخدام الأزرار ولوحة المفاتيح. تم



استخدام تجسيد لأسلوب التطبيق .

بضع كلمات حول التنفيذ

تنفيذ التطبيق بسيط للغاية.



كل قسم (فصل) هو وحدة تحتوي على المحتوى التالي:

export default `
  
`

في ترميز الصفحة الرئيسية لدينا روابط:

<a class="link" data-url="1" href="#">1. </a>

والأزرار:

<!--    -->
<button>
    <i class="left">navigate_before</i>
</button>
<button>
    <i class="right">navigate_after</i>
</button>

عند النقر فوق ارتباط أو زر ، يتم استدعاء وظيفة عرض الصفحة ، والتي يتم تمريرها إلى رقم الصفحة. عند تهيئة التطبيق ، يُطلب رقم الصفحة من التخزين المحلي. إذا لم يكن هناك أي شيء ، فإن رقم الصفحة = 1. عند النقر فوق الارتباط ، يصبح رقم الصفحة هو قيمة السمة "data-url" الخاصة بالارتباط. عندما تضغط على الزر ، يزيد رقم الصفحة أو ينقص بمقدار 1. تبدو الوظيفة نفسها كما يلي:

const showPage = i => {
    //    
    const url = `./chapters/${i}.js`
    //   
    import(url)
        //     
        .then(data => container.innerHTML = data.default)
    //      
    localStorage.setItem('NodejsGuidePageNumber', i)
    //  
    scrollTo(0, 0)
}

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



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



أتمنى أن تستمتع بالتطبيق. شكرآ لك على أهتمامك.