إضافة تطبيق الويب التقدّمي إلى Google Play

1. ترحيب

في هذا الدرس التطبيقي، ستتعرّف على تطبيق ويب تقدّمي نشرته وقد تضعه في تطبيق لتوزيعه على "متجر Google Play".

ما ستتعرَّف عليه

  • كيفية استخدام Bubbleالتفاف للحصول على تطبيق ويب تقدّمي لمتجر Google Play
  • المقصود بمفتاح التوقيع وكيفية استخدامه
  • كيفية إنشاء تطبيق جديد في وحدة تحكم مطوّري البرامج في Google Play وإعداد إصدار تجريبي لاختبار تطبيقك قبل نشره
  • المقصود بروابط مواد العرض الرقمية وكيفية إضافتها إلى تطبيقك على الويب

ما يتعين عليك معرفته

الأشياء التي تحتاج إليها

الخدمات غير المشمولة

2. إدخال تنسيق PWA

Bbblebble هي أداة لجعل تطبيق الويب التقدّمي يحيط بك في تنسيق Android App Bundle بسهولة مثل إصدار أمرَين من أوامر سطر الأوامر. ويتم ذلك من خلال إنشاء مشروع متوافق مع Android يؤدي إلى تشغيل تطبيق الويب التقدّمي (PWA) كنشاط موثوق به على الويب.

للبدء، أنشئ دليلاً لمشروعك للإقامة فيه ونقله إلى:

$ mkdir my-pwa && cd my-pwa

شغِّل بعد ذلك أداة سطر أوامر Bubble

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

يتم هنا إعداد Bubblelap مع تحديد موقع ملف Web App Manifest (ملف تطبيق الويب). سيؤدي هذا إلى إنشاء إعداد تلقائي من بيان تطبيق الويب، وبدء معالج داخل وحدة التحكم سيسمح لك بتغيير الإعداد التلقائي. اتَّبِع المعالج لتغيير أي من القيم التي أنشأتها الأداة.

يوضّح معالج فقاعات واجهة برمجة التطبيقات (CLI) إعدادًا جديدًا من هورنور مع تجاوز النطاق مع example.com وعناوين URL للبدء التي تم إلغاؤها.

مفتاح التوقيع

يتطلب "متجر Play" من Google توقيع حزم التطبيقات رقميًا باستخدام شهادة عند تحميلها، وغالبًا ما يُشار إليها باسم مفتاح التوقيع. وهذه الشهادة موقَّعة ذاتيًا وتختلف عن الشهادة المستخدَمة لعرض تطبيقك على HTTPS.

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

معالج فقاعات سطر الأوامر (CLI) الذي يطلب موقع الموقع الجغرافي لمفتاح توقيع المستخدم الحالي واسمه

إذا لم يكن لديك مفتاح توقيع حالي وتريد إنشاء بطاقة بيانات جديدة على "متجر Play"، يمكنك استخدام القيمة التلقائية المقدَّمة من Bubble=' لإنشاء مفتاح جديد لك:

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

إخراج غلاف الفقاعات

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

  • twa-manifest.json - إعدادات المشروع، والتي تعكس القيم التي تم اختيارها في معالج الفقاعة التفسيرية. وستحتاج إلى تتبّع هذا الملف باستخدام نظام التحكم في الإصدار، حيث يمكن استخدامه لإعادة إنشاء مشروع الفقاعة التفسيرية بالكامل إذا لزم الأمر.
  • ملفات مشروع Android - الملفات المتبقية في الدليل هي مشروع Android الذي تم إنشاؤه. هذا المشروع هو المصدر المستخدَم لأمر إنشاء الفقاعة التفسيرية. ويمكنك اختياريًا تتبّع هذه الملفات باستخدام نظام التحكّم في الإصدار.
  • (اختياري) مفتاح توقيع: إذا اخترت أن يتم إنشاء مفتاح التوقيع من خلال الفقاعة التفسيرية لك، سيتم إخراج المفتاح إلى الموقع الموضَّح في المعالج. احرِص على الاحتفاظ بالمفتاح في مكان آمن وعلى الحدّ من عدد المستخدمين الذين يمكنهم الوصول إليه، حيث يُستخدَم هذا المفتاح لإثبات أنّ التطبيقات المنشورة على "متجر Play" واردة منك.

وبفضل هذه الملفات، أصبح لدينا الآن كل ما نحتاج إليه لإنشاء Android App Bundle.

إنشاء تنسيق Android App Bundle

من داخل الدليل نفسه الذي شغّلت فيه أمر إعداد Bubblelap's، شغِّل ما يلي (ستحتاج إلى كلمات مرور مفتاح التوقيع):

$ bubblewrap build

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

سينشئ أمر الإصدار ملفَين مهمَّين:

  • app-release-bundle.aab - مجموعة حزمات تطبيق Android الخاصة بتطبيق PWA's هذا هو الملف الذي سيتم تحميله إلى "متجر Google Play".
  • app-release-sign.APK: هو تنسيق حزمة Android يمكن استخدامه لتثبيت التطبيق مباشرةً على جهاز تطوير باستخدام الأمر bubblewrap install.

3- تجربة الميزة - فقاعة تفسيرية

والآن حان دورك. باستخدام ما تعلمته في الخطوة السابقة، جرِّب تنفيذ ما يلي وإنجازه:

  1. أنشئ دليلاً للاحتفاظ بمشروع Android الذي تم إنشاؤه.
  2. وعليك إعداد هذا الدليل باستخدام Bubblelap وPWA App البيان.
  3. يمكنك إنشاء مفتاح توقيع جديد أو إعادة استخدام المفاتيح الحالية إذا كانت لديك.
  4. أنشئ حزمة Android App Bundle من مشروع Android الذي تم إنشاؤه.

4. إضافة تطبيقك إلى متجر Google Play

الآن بعدما حصلت على تنسيق Android App Bundle لـ PWA، حان وقت تحميله إلى "متجر Google Play". بعد تسجيل حساب مطوّر البرامج، يمكنك الانتقال إلى Play Console لتسجيل الدخول والبدء.

إنشاء تطبيق

بعد تسجيل الدخول، ستظهر لك شاشة تعرض كل تطبيقاتك. بالقرب من أعلى الشاشة، يوجد زر إنشاء تطبيق يعرض عند النقر عليه الشاشة التالية لإرشادك خلال عملية إنشاء قائمة تطبيقات جديدة على Android.

شاشة تعرض نموذج إنشاء التطبيقات على Play Console

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

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

إعداد الاختبار الداخلي

الاختبار الداخلي هو طريقة رائعة لإطلاق تطبيقك بسرعة بدون مراجعة مجموعة من المختبرين الموثوق بهم الذين تختارهم. اعرض المهام في قائمة التحقُّق بدء الاختبار الآن، واختَر اختيار المختبِرين.

قائمة التحقّق لبدء الاختبار الآن

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

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

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

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

إنشاء إصدار تجريبي

بعد النقر على الزر إنشاء إصدار جديد، سيُطلب منك إجراء ذلك من خلال عدد من الأقسام. تتمثّل الخطوة الأولى App Integrity في اختيار كيفية إدارة مفتاح توقيع تطبيقك. والخيار التلقائي هو السماح لشركة Google بإدارة مفتاح توقيعك، ويُعدّ هذا الخيار المُقترَح لأنه آمن مع الحفاظ على إمكانية استرداد تطبيقك في حال فقدان مفتاح التحميل.

ميزة "توقيع التطبيق" من Play

رسم بياني انسيابي، يعرض من مطوّري البرامج إلى اليمين، مطوّر البرامج ومفتاح التحميل الذي يوقّع التطبيق ويرسله إلى Google. تمتلك Google بعد ذلك مفتاح توقيع التطبيق وتوقيع التطبيق باستخدام هذا المفتاح، ثم تسليمه إلى المستخدم

تحميل التطبيق والإنهاء

بعد اختيار كيفية إدارة مفتاح التوقيع، سيُطلب منك تحميل حِزمة التطبيق إلى الإصدار. ولإجراء ذلك، اسحب ملف app-release-bundle.aab الذي أنشأته أداة Bubblepack وأفلِته في النموذج. لإنهاء الإصدار، املأ تفاصيل الإصدار المتبقية وانقر على حفظ، ثم مراجعة الإصدار، وأخيرًا الأزرار بدء الطرح في الاختبار الداخلي لبدء الإصدار. سيؤدي هذا الإجراء إلى إتاحة تطبيقك للمختبِرين الداخليين. ارجع إلى علامة التبويب المختبِرون في صفحة الاختبار الداخلي، ويمكنك نسخ رابط لمشاركته مع المختبِرين حتى يتمكّنوا من الوصول إلى تطبيقك.

صفحة الاختبار الداخلي، مع سهم يشير إلى رابط رابط النسخ لمشاركة رابط الاختبار مع المختبرين.

5. تجربة ذلك - إنشاء تطبيق

والآن حان دورك. باستخدام ما تعلمته في الخطوة السابقة، جرِّب تنفيذ ما يلي وإنجازه:

  1. يمكنك إنشاء تطبيق جديد لتطبيق الويب التقدّمي (PWA) في Play Console.
  2. يمكنك إعداد اختبار داخلي للتطبيق وإضافة نفسك كمختبِر.
  3. يجب تحميل حزمة التطبيق وإنشاء إصدار تجريبي لتطبيقك.
  4. يمكنك تثبيت تطبيقك من متجر Play على جهازك الذي يعمل بنظام التشغيل Android أو Chrome باستخدام رابط الاختبار.

6- روابط تنقل إلى مواد عرض رقمية

إذا كنت قد اختبرت تطبيق الويب التقدّمي (PWA) في Google Play، قد تلاحظ أنّه لا يعمل بملء الشاشة. هذا لأنك لم تثبت ملكية الموقع الإلكتروني من خلال ملف روابط مواد العرض الرقمية حتى الآن. على الرغم من أن Bubblepack قادر على إعداد حزمة تطبيق Android وتصميمها، عليك إنهاء الرابط عن طريق تحديث تطبيق الويب.

الحصول على بصمة إصبع SHA-256 لتطبيقك

لضبط روابط الوسائط الرقمية لـ PWA's، ستحتاج إلى بصمة إصبع SHA-256 للشهادة المستخدمة لتوقيع الحزمة التي يتلقاها المستخدم على هاتفه.

باستخدام ميزة "توقيع التطبيق" من Play

في حال إعداد ميزة "توقيع التطبيق" من Play لتطبيقك عند إنشاء إصدارك (الذي كان يُنصح به سابقًا)، يمكن العثور على بصمة إصبع SHA-256 في Play Console. تذكّر أنّ هذه الشهادة تختلف عن الشهادة المستخدَمة لتحميل تطبيقك. للحصول على بصمة الإصبع، من داخل تطبيقك في Play Console، انتقِل إلى Releases->Setup->App Integrity. وهناك، سترى عددًا من الخيارات ضمن شهادة مفتاح توقيع التطبيق. انسخ قيمة الملف المرجعي لشهادة SHA-256.

شاشة ميزة "الحماية التلقائية من الأنشطة غير المسموح بها" مع تمييز الملف المرجعي لشهادة SHA-256

بدون ميزة "توقيع التطبيق" من Play

إذا عطّلت ميزة "توقيع التطبيق" من Play، سيكون المفتاح المستخدَم لتوقيع التطبيق النهائي هو المفتاح نفسه الذي تستخدمه لتحميل التطبيق إلى Play Console. يمكنك استخدام keytool في جافا واستخراجها:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

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

يمكن استخدام "أداة قراءة القصص المصوّرة" لإدارة بصمات أصابع التوقيع التي استردتها وتم إنشاء ملف "روابط مواد العرض الرقمية" الصحيح لك. لإضافة بصمة إصبع باستخدام "أداة قراءة القصص المصوَّرة"، شغِّل الأمر التالي من داخل الدليل نفسه الذي تم إنشاؤه أثناء فتح ملف PWA، مع استبدال <fingerprint> ببصمة الإصبع التي تم نسخها من الخطوة السابقة.

$ bubblewrap fingerprint add <fingerprint>

سيضيف هذا الأمر بصمة الإصبع إلى قائمة بصمات الأصابع للتطبيق وتنشئ ملف assetlinks.json. حمِّل هذا الملف إلى الدليل .well-known على الأصل نفسه الذي يخصّ تطبيق الويب التقدّمي (PWA).

7- تجربة الميزة - روابط مواد العرض الرقمية

والآن حان دورك. باستخدام ما تعلمته في الخطوة السابقة، جرِّب تنفيذ ما يلي وإنجازه:

  1. ابحث عن بصمة إصبع SHA-256 للتطبيق.
  2. أنشئ ملف روابط تنقل إلى مواد عرض رقمية لتطبيقك.
  3. حمِّل ملف روابط مواد العرض الرقمية إلى تطبيق الويب التقدّمي (PWA).
  4. تحقّق من إعداد ملف Digital Asset Links بشكل صحيح باستخدام واجهة برمجة التطبيقات وتطبيق الاختبار.

8- اختبر معلوماتك

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

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

twa-manifest.json مفتاح التوقيع app-release-bundle.aab build.gradle

يتطلّع يوسف إلى أن يحرص فريق تأكيد الجودة على اختبار تطبيق الويب التقدّمي (PWA) له على Android. أعاد ______ حزمة تطبيقات Android إلى مسار الاختبار الداخلي.

uploads الإصدارات وتحميلها الإصدارات اللافتات وعمليات التحميل

لا يعمل تطبيق Oogie Boogie's PWA على وضع Android في وضع ملء الشاشة. ولحلّ هذه المشكلة، يحصل المشرفون على ملف SHA-256 المرجعي للملف المرجعي الخاص بهم ليرسلوه إلى ملف "روابط مواد العرض الرقمية" المتوفّر على الملف ______ في المصدر نفسه المُستخدَم في تطبيق الويب التقدّمي (PWA).

مفتاح التحميل، /.well-known/assetlinks.json مفتاح التحميل، /assetlinks.json مفتاح التوقيع، /.well-known/assetlinks.json مفتاح التوقيع، /assetlinks.json

9- اختبار معلوماتك - الإجابات

إجابات عن اختبار "اطرح معلوماتك"

  1. بعد أن أنشأت سالي مشروعها على Android باستخدام فقاعة التطبيق، وضعت "سالي" ملف ______ الذي تم إنشاؤه لنظام التحكّم في إصداراتها، حتى يمكنها إعادة إنشائه عند الحاجة.
  2. يتطلّع يوسف إلى أن يحرص فريق تأكيد الجودة على اختبار تطبيق الويب التقدّمي (PWA) له على Android. أعاد ______ حزمة تطبيقات Android إلى مسار الاختبار الداخلي.
  3. لا يعمل تطبيق Oogie Boogie's PWA على وضع Android في وضع ملء الشاشة. ولحلّ هذه المشكلة، يحصل المشرفون على ملف SHA-256 المرجعي للملف المرجعي الخاص بهم ليرسلوه إلى ملف "روابط مواد العرض الرقمية" المتوفّر على الملف ______ في المصدر نفسه المُستخدَم في تطبيق الويب التقدّمي (PWA).

10- تهانينا.

تهانينا. لقد تعلّمت بنجاح كيفية إضافة تطبيق الويب التقدّمي (PWA) إلى "متجر Play" على Google.

عندما تصبح مستعدًا لإجراء ذلك، جرِّب الخطوات التالية بنفسك:

نتمنى لك التوفيق في الترميز.