Progresif Web Uygulamanızı Google Play'e Ekleme

1. Hoş geldiniz

Bu laboratuvarda, dağıttığınız mevcut Progresif Web Uygulamasını alıp Google Play Store'da dağıtılacak bir uygulamaya sarmalayacaksınız.

Neler öğreneceksiniz?

  • Google'ın Play Store'u için Progresif Web Uygulamanızı paketlemek amacıyla Bubblepack'i kullanma
  • İmzalama Anahtarı nedir ve nasıl kullanılır?
  • Google Play Console'da yeni uygulama oluşturma ve uygulamanızı yayınlamadan önce test etmek için test sürümü oluşturma
  • Dijital Öğe Bağlantıları nedir ve web uygulamanıza nasıl eklenir?

Bilmeniz gerekenler

Gerekenler

Kapsamda yer almayan konular

2. PWA'nızı baloncuk haline getirme

Bubble sarmalama, Progresif Web Uygulamanızı birkaç Android Komut Dosyası komutuyla sarmalamak kadar kolay bir şekilde Android App Bundle'a sarmayı sağlayan bir araçtır. Bunu, PWA'nızı Güvenilir Web Etkinliği olarak başlatan bir Android projesi oluşturarak yapar.

Öncelikle, projenizin yaşayacağı ve dizine taşınacağı bir dizin oluşturun:

$ mkdir my-pwa && cd my-pwa

Ardından, Play'e yükleyeceğiniz Android App Bundle için yapılandırma ve Android projesi oluşturmak üzere Bubblepack komut satırı aracını çalıştırın:

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

Burada, Bubble sarmalayıcı ilk olarak PWA'nın Web App Manifest dosyasının konumuyla başlatılmıştır. Bu işlem, Web Uygulaması Manifest dosyasından varsayılan bir yapılandırma oluşturur ve varsayılan yapılandırmayı değiştirmenize olanak tanıyacak bir konsol içi sihirbazı başlatır. Araç tarafından oluşturulan değerlerden herhangi birini değiştirmek için sihirbazı takip edin.

Baloncuk CLI sihirbazı, alan adının example.com ile geçersiz kılındığı ve başlangıç URL'lerinin geçersiz kılındığı bir Airhornter başlatmasını gösterir.

İmzalama Anahtarı

Google Play Store, yüklendiğinde uygulama sertifikalarının bir sertifikayla dijital olarak imzalanmasını gerektirir. Bu imzalar genellikle imzalama anahtarı olarak adlandırılır. Bu, kendinden imzalı bir sertifikadır ve uygulamanızı HTTPS üzerinden sunmak için kullanılan sertifikadan farklıdır.

Baloncuk, uygulamayı oluştururken anahtarın yolunu sorar. Uygulamanız için mevcut bir Play Store girişi kullanıyorsanız yolu, bu giriş tarafından kullanılan anahtara eklemeniz gerekir.

Kullanıcının mevcut imzalama anahtarının konumunu ve adını soran LISH sihirbazı.

Mevcut imzalama anahtarınız yoksa ve Play Store'da yeni bir giriş oluşturuyorsanız bu anahtarın sizin için yeni bir anahtar oluşturmasını sağlamak amacıyla Bubble sarmalayıcı tarafından sağlanan varsayılan değeri kullanabilirsiniz:

Baloncuk CLI sihirbazı, kullanıcının yeni imzalama anahtarı oluşturmak isteyip istemediğini sorar.

Baloncuk Çıkışı

Bubblepack projenizi başlattıktan ve sihirbazı tamamladıktan sonra aşağıdaki öğeler oluşturulur:

  • twa-manifest.json - Baloncuk sihirbazında seçilen değerleri yansıtan proje yapılandırması. Gerektiğinde Bubble sarma projesinin tamamını yeniden oluşturmak için kullanılabileceğinden, bu dosyayı sürüm kontrol sisteminizle izlemek isteyebilirsiniz.
  • Android proje dosyaları - Dizinde kalan dosyalar oluşturulan Android projesidir. Bu proje, Bubblepack derleme komutu için kullanılan kaynaktır. İsteğe bağlı olarak bu dosyaları sürüm kontrol sisteminizle de izleyebilirsiniz.
  • (İsteğe bağlı) İmzalama Anahtarı - Bubblepack'in sizin için imzalama anahtarını oluşturmasını seçerseniz anahtar, sihirbazda açıklanan konuma çıkış yapar. Anahtarın güvenli bir yerde saklandığından ve anahtara erişimi olan kullanıcıların sayısını sınırlandırdığından emin olun. Bu anahtar, Play Store'daki uygulamaların sizden geldiğini kanıtlamak için kullanılır.

Artık bu dosyalarla, Android App Bundle oluşturmak için ihtiyacımız olan her şeye sahibiz.

Android App Bundle'ınızı Oluşturun

BubbleWr's başlatma komutunu çalıştırdığınız dizinden aşağıdakileri çalıştırın (imzalama anahtarınızın şifrelerine ihtiyacınız olacaktır):

$ bubblewrap build

Proje oluşturmak için kullanılan BubbleS CLI çıkışı, imzalama anahtarı için şifreleri sorar ve Android uygulamasının farklı sürümlerinin oluşturulmasını gösterir.

Derleme komutu iki önemli dosya oluşturur:

  • app-release-bundle.aab - PWA'nız Android App Bundle'ınız. Bu, Google Play Store'a yükleyeceğiniz dosyadır.
  • app-release-Signed.apk - Uygulamayı doğrudan bir geliştirme cihazına yüklemek için bubblewrap install komutunu kullanarak kullanılabilecek bir Android paketleme biçimi.

3. Deneyin - Baloncuk

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmayı deneyin:

  1. Oluşturulan Android projenizi içerecek bir dizin oluşturun.
  2. Bu dizini Bubble sarmalı ve PWA'nızın Web Uygulaması Manifest Dosyasıyla başlatın.
  3. Yeni İmzalama Anahtarı oluşturun veya varsa mevcut imzalarınızı yeniden kullanın.
  4. Android App Bundle'ınızı oluşturulan Android projesinden oluşturun.

4. Uygulamanızı Google'ın Play Store'una Ekleme

PWA'nız için bir Android App Bundle'ınız olduğuna göre uygulamayı Google Play Store'a yükleyebilirsiniz. Geliştirici hesabınızı kaydettikten sonra, giriş yapmak ve başlamak için Play Console'a gidebilirsiniz.

Uygulama Oluşturma

Giriş yaptıktan sonra tüm uygulamalarınızı gösteren bir ekran görürsünüz. Üst kısma yakın bir yerde Uygulama oluştur düğmesi bulunur. Bu düğme tıklandığında yeni bir Android uygulama girişi oluştururken size yol gösterecek aşağıdaki ekranı gösterir.

Play Console'un Uygulama oluşturma formunu gösteren ekran.

Uygulama alanı, varsayılan dil, uygulama veya oyun, ücretsiz veya ücretli olup olmadığı ve çeşitli tanımlamalar gibi birçok alanı doldurmanız gerekir. Bildirimleri beyan etmeden uygulama oluşturamazsınız. Bu nedenle, beyanları kabul etmeden önce okumanız ve anlamanız önemlidir.

Tüm bilgileri doldurup formun alt kısmındaki Uygulama oluştur düğmesini tıkladığınızda, yeni uygulamanızın kontrol paneline yönlendirilirsiniz. Kontrol panelinde, uygulamanızı kurmak, test etmek ve yayınlamak için tamamlamanız gereken görevlerin yapılacaklar listelerini görürsünüz.

Dahili Testi Ayarlama

Dahili test, uygulamanızı seçtiğiniz güvenilir test kullanıcısı grubuna incelemeden hızlı bir şekilde yayınlamanın harika bir yoludur. Testi hemen başlat kontrol listesinde görevleri görüntüleyin ve Test kullanıcılarını seç'i seçin.

Teste hemen başlayın kontrol listesi

Bu görevi tıkladığınızda Dahili Test sayfasına yönlendirilirsiniz. Bu sayfada uygulamanızın test ayarlarını yönetirsiniz. Kenar çubuğundaki Sürüm menüsünün altında Test bölümünü açarak bu bölüme tekrar gidebilirsiniz. Burada ilk yapmanız gereken, uygulamanızı test etmek için test kullanıcılarının e-posta listesini oluşturmaktır. Bunu yapmak için sayfanın Test kullanıcıları bölümündeki E-posta listesi oluştur bağlantısını tıklayın. Bunu yaptığınızda, e-posta listenizi oluşturmanız için bir pop-up açılır.

Liste adını, e-posta adreslerini, CSV dosyası yükleme bağlantısını ve yüklenen e-posta adreslerini gösteren bir alanı içeren e-posta listesi oluşturma formunu gösteren pop-up.

Bu pop-up'ta, e-posta listenizi adlandırırsınız ve e-posta adreslerini manuel olarak girebilir ya da kullanmak için e-posta adreslerinin CSV'sini yükleyebilirsiniz. İşlem tamamlandığında Değişiklikleri kaydet düğmesine basın. Gerektiğinde e-posta adresleri eklemek veya kaldırmak için daha önce oluşturduğunuz e-posta listelerine geri dönebileceksiniz. Test kullanıcılarınızı ekledikten sonra, bir test sürümü oluşturabilirsiniz. Sayfanın üst kısmındaki Yeni sürüm oluştur düğmesini tıklayın.

Yeni sürüm oluştur düğmesini gösteren bir ok bulunan dahili test sayfası.

Test Sürümü Oluşturma

Yeni sürüm oluştur düğmesini tıkladıktan sonra, çeşitli bölümlerde size bilgi verilir. İlki olan Uygulama Bütünlüğü, uygulamanızın imzalama anahtarını nasıl yöneteceğinizi seçtiğiniz yerdir. Varsayılan seçenek Google'ın imzalama anahtarınızı yönetmesine izin vermektir. Bu seçenek, hem güvenli olduğu hem de yükleme anahtarınızı kaybetmeniz durumunda uygulamanızı kurtarılabilir durumda tutması nedeniyle önerilen seçenektir.

Play Uygulama İmzalama

Bir geliştiricinin ve yükleme anahtarını soldan sağa doğru gösteren, ardından uygulamasını imzalayıp Google'a gönderen bir akış çizelgesi. Daha sonra Google, bir uygulama imzalama anahtarına sahip olur ve uygulamayı bu anahtarla imzalar, ardından kullanıcıya teslim eder

Uygulama Yükleme ve Tamamlama

İmzalama anahtarınızı nasıl yöneteceğinizi seçtikten sonra uygulama paketinizi sürümünüze yüklemeniz istenir. Bunu yapmak için, Bubble tarafından oluşturulan app-release-bundle.aab dosyasını forma sürükleyip bırakın. Sürümü tamamlamak için kalan sürüm ayrıntılarını doldurup Kaydet'i, ardından Sürümü incele'yi ve son olarak da sürümünüzü başlatmak için Dahili test kanalına sunumu başlat düğmelerini tıklayın. Bu işlem, uygulamanızı dahili test kullanıcılarınıza sunar! Dahili Test sayfasının Test kullanıcıları sekmesine, uygulamanıza erişebilmeleri için test kullanıcılarınızla paylaşmak üzere bir bağlantıyı kopyalayabilirsiniz.

Bir test bağlantısını test kullanıcılarıyla paylaşmak için kopya bağlantı bağlantısını gösteren bir ok bulunan dahili test sayfası.

5. Deneyin - Uygulama Oluşturma

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmayı deneyin:

  1. Play Console'da PWA'nız için yeni bir uygulama oluşturun.
  2. Uygulama için dahili test oluşturun ve kendinizi test kullanıcısı olarak ekleyin.
  3. Uygulama paketinizi yükleyip uygulamanız için bir test sürümü oluşturun.
  4. Test bağlantısını kullanarak uygulamanızı Android veya Chrome OS cihazınıza Play Store'dan yükleyin.

6. Digital Asset Links

PWA'nızı Play'de test ederseniz tam ekranda çalışmadığını fark edebilirsiniz. Bunun nedeni, sitenin sahipliğini henüz bir Digital Asset Links dosyası üzerinden doğrulamamış olmanızdır. BubbleWr Android uygulama paketinizi yapılandırıp oluşturabilir, ancak web uygulamanızı güncelleyerek bağlantıyı tamamlamanız gerekir.

Uygulamanızın SHA-256 Parmak İzini Alın

PWA'nızın Dijital Öğe Bağlantılarını yapılandırmak için, kullanıcının telefonunda aldığı paketi imzalarken kullanılan sertifikanın SHA-256 parmak izine ihtiyacınız vardır.

Play Uygulama İmzalama ile

Uygulamanızı oluştururken Play Uygulama İmzalama'yı ayarladıysanız (bu özellik daha önce önerilmiştir) SHA-256 parmak izini Play Console'da bulabilirsiniz. Bu sertifikanın başvurunuzu yüklemek için kullanılan sertifikadan farklı olduğunu unutmayın. Parmak izini almak için Play Console'da uygulamanızın içinden Releases->Setup->App Integrity'ye gidin. Burada Uygulama imzalama anahtarı sertifikası bölümünde bir dizi seçenek görürsünüz. SHA-256 sertifika dijital parmak izinin değerini kopyalayın.

SHA-256 sertifika parmak izinin vurgulandığı Uygulama Bütünlüğü ekranı.

Play Uygulama İmzalama olmadan

Play Uygulama İmzalama'yı devre dışı bıraktıysanız son uygulamayı imzalamak için kullandığınız anahtar, uygulamayı Play Console'a yüklemek için kullandığınız anahtarla aynı olur. Parmak izini çıkarmak için Java's keytool öğesini kullanabilirsiniz:

$ 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...

Bu anahtarı kullanmak için imzalama anahtarınızın yolunu ve ilgili şifreleri bilmeniz gerekir. SHA256 anahtarının on altılı değerlerini kopyalayın.

Bubblepack, aldığınız imza parmak izlerini yönetebilir ve sizin için doğru Dijital Öğe Bağlantıları dosyasını oluşturabilir. Bubble sarmayla parmak izi eklemek için PWA'nızı PWA sarmalama işlemi sırasında oluşturulan dizinden aşağıdaki komutu çalıştırın. <fingerprint> komutunu önceki adımdan kopyalanan parmak iziyle değiştirin.

$ bubblewrap fingerprint add <fingerprint>

Bu komut, parmak izini uygulamanın parmak izi listesine ekler ve bir assetlinks.json dosyası oluşturur. Bu dosyayı PWA'nızla aynı kaynaktaki .well-known dizinine yükleyin.

7. Deneyin - Dijital Öğe Bağlantıları

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmayı deneyin:

  1. Uygulamanızın SHA-256 parmak izini bulun.
  2. Uygulamanız için bir Digital Asset Link dosyası oluşturun.
  3. Dijital Öğe Bağlantıları dosyanızı PWA'nıza yükleyin.
  4. API ve test uygulamanızı kullanarak Digital Asset Link dosyanızın doğru şekilde ayarlandığından emin olun.

8. Bilginizi Sınayın

Bitirmeden önce, aşağıdaki soruları yanıtlayarak bilginizi test edin ve neler öğrendiğinizi görün. Yanıtlara bakma!

Sally, Android projesini BubbleAmb ile oluşturduktan sonra istediği zaman yeniden oluşturabilmesi için oluşturulan ______ dosyasını sürüm kontrol sistemine alır.

twa-manifest.json imza anahtarı app-release-bundle.aab build.gradle

Cem, QA ekibinin PWA Android uygulamasını test etmesini istiyor. Android App Bundle'ı Dahili Test Kanalı ______.

yüklemeler derlemeler ve yüklemeler sürümler imzalar ve yüklemeler

Oogie Boogie''nın PWA Android uygulaması tam ekran çalışmıyor. Bunu düzeltmek için ______ için SHA-256 sertifika dijital parmak izlerini alıp PWA ile aynı kaynakta ______ adresinde bulunan Digital Asset Link dosyasına yüklerler.

yükleme anahtarı, /.well-known/assetlinks.json yükleme anahtarı, /assetlinks.json imza anahtarı, /.well-known/assetlinks.json imzalama anahtarı, /assetwells.json

9. Bilginizi Test Edin - Yanıtlar

Bilginizi Test Edin sorularının yanıtları.

  1. Sally, Android projesini BubbleAmb ile oluşturduktan sonra istediği zaman yeniden oluşturabilmesi için oluşturulan ______ dosyasını sürüm kontrol sistemine alır.
  2. Cem, QA ekibinin PWA Android uygulamasını test etmesini istiyor. Android App Bundle'ı Dahili Test Kanalı ______.
  3. Oogie Boogie''nın PWA Android uygulaması tam ekran çalışmıyor. Bunu düzeltmek için ______ için SHA-256 sertifika dijital parmak izlerini alıp PWA ile aynı kaynakta ______ adresinde bulunan Digital Asset Link dosyasına yüklerler.

10. Tebrikler!

Tebrikler! PWA'nızı Google Play Store'a nasıl ekleyeceğinizi başarılı bir şekilde öğrendiniz.

Bunu yapmaya hazır olduğunuzda, aşağıdaki adımları kendi başınıza deneyin:

Mutlu kodlamalar!