كيفية تحويل موقع الويب الخاص بك إلى تطبيق جوال مع 7 خطوط من JSON

طريقة جديدة لمزج Web Engine في التطبيقات الأصلية

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

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

إليك ما يبدو عليه مثال بسيط في العمل:

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

قبل أن أشرح كيف ، قد تسأل: "هذا رائع ، لكن هل يمكنك فعل أي شيء آخر غير مجرد عرض صفحة الويب في إطار تطبيق أصلي؟"

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

إليك مثال على ذلك:

لاحظ أن طريقة العرض هذه تحتوي على:

  1. رأس التنقل الأصلي ، مع استكمال وظيفة الانتقال المدمج
  2. طريقة عرض ويب ، تتضمن تطبيق ويب لمولد رمز الاستجابة السريعة
  3. مكون إدخال الدردشة الأصلي في الأسفل

كل هذا يمكن وصفه من خلال التغيير والتبديل في بعض سمات علامات JSON التي رأيناها أعلاه.

أخيرًا ، لاحظ أن رمز الاستجابة السريعة يتغير عند إدخال شيء ما من إدخال الدردشة. تقوم وظيفة الدردشة بتشغيل وظيفة JavaScript داخل تطبيق ويب QR code الذي يعيد إنشاء الصورة.

لم يحاول أي إطار لتطوير التطبيقات حل هذه المشكلة المتمثلة في "التكامل السلس لعرض الويب في التطبيقات الأصلية" لأنها تركز جميعها على اختيار إما 100 ٪ أصلي أو 100 ٪ HTML5 الجانب.

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

لا يرى أي منهم لغة أصلية و HTML على أنها شيء يمكن أن يتعايش ، علاوة على ذلك ، يخلق التآزر ويحقق أشياء لا يمكن تحقيقها بسهولة.

في هذه المقالة سأشرح:

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

لماذا تستخدم HTML في تطبيق أصلي؟

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

1. استخدام ميزات الويب الأصلية

قد يتم تنفيذ بعض أجزاء التطبيق بشكل أفضل باستخدام محرك الويب. على سبيل المثال ، Websocket هي ميزة أصلية على الويب مصممة لبيئة الويب. في هذه الحالة ، من المنطقي استخدام محرك الويب المضمن (WKWebView لنظام التشغيل iOS و WebView لنظام Android) بدلاً من تثبيت مكتبة تابعة لجهة خارجية تقوم "بمحاكاة" Websocket بشكل أساسي.

لا حاجة لتثبيت رمز إضافي لمجرد القيام بشيء يمكنك القيام به مجانًا ، وهو ما يقودنا إلى النقطة التالية.

2. تجنب الحجم الثنائي الكبير

قد ترغب في دمج الميزات التي تتطلب مكتبة ضخمة ضخمة تابعة لجهة خارجية.

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