كيفية برمجة موقع أخبار تطبيق ويب تقدمي

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

تركز هذه المقالة على كيف تمكنت من تنفيذ برنامج Global Upvote للمطورين الطموحين. لقد كتبت مقالًا منفصلاً عن عملية التصميم وراء ذلك. قد تبدو هاتان القصتان منفصلتين تمامًا. لكن عملية التصميم والتطوير كانت متشابكة بشدة في الحياة الواقعية.

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

البحث عن البيانات

في التصميم ، هناك مفهوم المحتوى أولاً. يقول Content-First Design أنك بحاجة إلى التصميم حول المحتوى. بالنسبة لي للقيام بذلك ، كنت بحاجة للتأكد من أنني أستطيع الحصول على البيانات الصحيحة. قبل أن أبدأ في أي من أعمال الواجهة الأمامية الفعلية ، عملت مع Reddit API وخادم Node الخاص بي.

علمت أن هناك جزأين من المحتوى أردت التقاطهما من Reddit:

  1. أعلى مشاركات r / WorldNews لعناوينهم
  2. تعليق مستخدم الروبوت الذي لخص القصة

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

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

يمكنني الاحتفاظ بكمية صغيرة من البيانات (القصص) على الخادم الخاص بي وتحديثها مرة واحدة في الدقيقة ببساطة setInterval. توقف هذا عن دفع مخاطر إساءة استخدام حدود واجهة برمجة تطبيقات Reddit الخاصة بي وتقصير أوقات تحميل القصة لأنني لن أضطر إلى اختبار اتصال Reddit API في كل مرة.

إبقائها تقدمية

هل تريد معرفة السر الرخيص القذر حول إنشاء تطبيق ويب تقدمي في React؟ فقط استخدم Create-React-App. لقد قام المساهمون في هذا المشروع بعمل رائع بإضافة عمال خدمة لأحمال شبه فورية وملف بيان لبيانات التعريف الخاصة بك ، وتحسين حزمة Webpack بأفضل ما في وسعهم. في الماضي ، كان علي أن أقوم بالكثير من العمل لـ PWAs (تطبيقات الويب التقدمية) وكتبت أيضًا برنامجًا تعليميًا حول إتقانها.

كانت هذه هي المرة الأولى التي أعمل فيها على وضع غير متصل بالشبكة لمتصفحي Chrome و Firefox للقيام بأشياء مثل قراءة المقالات قبل توصيل الكمبيوتر بشبكة wifi.

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

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

كان آخر جزء من PWA لإنجازه هو تحسين مؤشر السرعة الإدراكية. يمكنك رؤية هذا المقياس الذي يركز على المستخدم من خلال فتح Chrome DevTools وإجراء تدقيق. لتحسين هذه النتيجة ، قمت بإنشاء هياكل عظمية ستظهر عندما يتم جلب حالة تطبيقي.

توصيل البرنامج المساعد

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

كنت أخشى أنني كنت على وشك الغوص في النهاية العميقة لتطوير امتداد المتصفح. كان هذا شيئًا لم أكن أعرفه إلى جانب مدقق الشبكة لمساعدة مهاراتي البصرية. مرة أخرى ، انتهى بي هذا الحل على طبق من الفضة. يتضمن Google امتدادًا مشابهًا في نماذج التنزيلات الخاصة بهم. كنت أعمل في أي وقت من الأوقات مع Global Upvote Tab Extension. لم تكن هناك حاجة إلى أي تغييرات حتى للإرسال إلى متجر Firefox!

النتيجة النهائية

من وجهة نظر التنمية ، أحببت جميع الحلول المختلفة التي يمكنني وضعها معًا لـ The Global Upvote. تخبرني هذه الحلول أن مجتمع الويب يتحسن في العمل معًا لجعل تجربة التطوير أقل إحباطًا. الحصول على Chrome DevTools Audit ، الذي كان يُعرف سابقًا باسم Google Lighthouse Extension أصبح أيضًا أسهل ما يكون على الإطلاق.

جميع الكود المصدري مفتوح المصدر في حال كنت ترغب في البحث أو جعله يعمل من أجلك.

عدة أشياء سريعة يجب ملاحظتها:

  • أين ملفات CSS ؟!

    لا يوجد. أستخدم مكونات Styled لإرفاق الأنماط مباشرة بمكوناتها!

    تحقق من هذا الحديث الذي قدمته في IBM حول سبب كون CSS-in-JS جيدًا بجنون: //vimeo.com/230614037

  • أين هو رمز المصدر لملحق علامة التبويب الخاصة بك؟

    تحقق من ذلك في الريبو المنفصل لعلامة تبويب Global Upvote.

  • كيف أبدأ تشغيل هذا محليًا؟

    تحقق من وثائق Create-React-App إذا لم تكن قد قمت بذلك بالفعل.

    رائع جدا. تحتاج أيضًا إلى ملف يتم استدعاؤه keys.jsonفي الدليل الجذر يحتوي على معلوماتك الخاصة بـ Snoowrap. يجب أن تبدو هذه:

{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }

أتمنى أن تكون قد استمتعت بكتابة هذه الحالة!

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

لمزيد من المعلومات: لا تتردد في الاتصال بي عن طريق التعليقات أو البريد الإلكتروني أوseejamescode. أعمل في ATX لـ IBM Design وأحب دائمًا المحادثة مع مجتمع تصميم الويب. اترك أي أسئلة قد تكون لديك وسأحاول الإجابة عنها!