Progresif web uygulamanızı Google Play'e ekleme

1. Hoş geldiniz

Bu laboratuvarda, dağıtılmış mevcut bir progresif web uygulamasını alıp Google Play Store'da dağıtılmak üzere bir uygulamaya dönüştüreceksiniz.

Neler öğreneceksiniz?

  • Google Play Store için progresif web uygulamanızı paketlemek üzere Bubblewrap'ı kullanma
  • İmzalama anahtarı nedir ve nasıl kullanılır?
  • Google Play'in Geliştirici Konsolu'nda yeni bir uygulama oluşturma ve yayınlamadan önce uygulamanızı test etmek için test sürümü oluşturma
  • Digital Asset Links nedir ve web uygulamanıza nasıl eklenir?

Bilmeniz gerekenler

İhtiyacınız olanlar

  • İnternette yayınlanmış ve üzerinde değişiklik yapabileceğiniz bir progresif web uygulaması
  • Bubblewrap komut satırı arayüzü yüklü ve kullanıma hazır olmalıdır.
  • Google Play Geliştirici hesabı
  • Google Play'de yayınlanmış uygulamalarınız varsa mevcut imzalama anahtarınız
  • Test için Android veya ChromeOS cihaz

Kapsamda olmayanlar

  • PWA'nızı yalnızca Android veya yalnızca ChromeOS cihazlarla sınırlama
  • ChromeOS için PWA ve mobil cihazlar için Android uygulamasını aynı uygulama altında dağıtma.
  • PWA'nızda Google Play'in Ödeme Politikası'na nasıl uyacağınızı öğrenin.

2. PWA'nızı koruma

Bubblewrap, progresif web uygulamanızı Android uygulama paketine sarmayı birkaç CLI komutu çalıştırmak kadar kolay hale getiren bir araçtır. Bu işlem, PWA'nızı Güvenilir Web Etkinliği olarak başlatan bir Android projesi oluşturarak yapılır.

Başlamak için projenizin yer alacağı bir dizin oluşturun ve bu dizine gidin:

$ mkdir my-pwa && cd my-pwa

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

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

Burada Bubblewrap, bir PWA'nın Web Uygulaması Manifest dosyasının konumuyla başlatılır. Bu işlem, web uygulaması manifestinden varsayılan bir yapılandırma oluşturur ve varsayılan yapılandırmayı değiştirmenize olanak tanıyan konsol içi bir sihirbaz başlatır. Araç tarafından oluşturulan değerlerden herhangi birini değiştirmek için sihirbazı takip edin.

Bubblewrap CLI sihirbazı, alanın example.com ile geçersiz kılındığı ve başlangıç URL'lerinin geçersiz kılındığı airhorner'dan başlatmayı gösteriyor.

İmzalama anahtarı

Google'ın Play Store'u, yüklenen uygulama paketlerinin dijital olarak bir sertifikayla imzalanmasını gerektirir. Bu sertifika 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.

Bubblewrap, uygulamayı oluştururken anahtarın yolunu ister. Uygulamanız için mevcut bir Play Store girişi kullanıyorsanız bu girişin kullandığı anahtarın yolunu eklemeniz gerekir.

Bubblewrap CLI sihirbazı, kullanıcının mevcut imzalama anahtarının konumunu ve adını soruyor.

Mevcut bir imzalama anahtarınız yoksa ve Play Store'da yeni bir giriş oluşturuyorsanız Bubblewrap'in sizin için yeni bir anahtar oluşturmasını sağlamak üzere Bubblewrap tarafından sağlanan varsayılan değeri kullanabilirsiniz:

Bubblewrap CLI sihirbazı, kullanıcıya yeni imzalama anahtarı oluşturmak isteyip istemediğini soruyor.

Bubblewrap Çıkışı

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

  • twa-manifest.json: Bubblewrap sihirbazında seçilen değerleri yansıtan proje yapılandırması. Gerekirse tüm Bubblewrap projesini yeniden oluşturmak için kullanılabileceğinden bu dosyayı sürüm kontrol sisteminizle izlemeniz gerekir.
  • Android proje dosyaları: Dizindeki diğer dosyalar, oluşturulan Android projesidir. Bu proje, Bubblewrap derleme komutu için kullanılan kaynaktır. İsteğe bağlı olarak bu dosyaları sürüm denetim sisteminizle de izleyebilirsiniz.
  • (İsteğe bağlı) İmzalama anahtarı: Bubblewrap'in imzalama anahtarını sizin için oluşturmasını seçerseniz anahtar, sihirbazda açıklanan konuma çıkarılır. Anahtarın güvenli bir yerde saklandığından ve erişebilen kişi sayısının sınırlı olduğundan emin olun. Play Store'daki uygulamaların size ait olduğunu kanıtlamak için bu anahtar kullanılır.

Bu dosyalarla birlikte artık Android App Bundle oluşturmak için gereken her şeye sahibiz.

Android App Bundle'ınızı oluşturma

Bubblewrap'in başlatma komutunu çalıştırdığınız dizinde aşağıdaki komutu çalıştırın (imzalama anahtarınızın şifrelerine ihtiyacınız olacaktır):

$ bubblewrap build

Bir proje oluşturmak için Bubblewrap CLI çıkışı, imzalama anahtarı için şifreleri isteme ve Android uygulamasının farklı sürümlerinin oluşturulmasını gösterme.

Derleme komutu iki önemli dosya oluşturur:

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

3. Deneyin - Bubblewrap

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmaya çalışın:

  1. Oluşturulan Android projenizi barındıracak bir dizin oluşturun.
  2. Bu dizini Bubblewrap ve PWA'nızın web uygulaması manifesti ile başlatın.
  3. Yeni imzalama anahtarı oluşturun veya varsa mevcut anahtarlarınızı yeniden kullanın.
  4. Oluşturulan Android projesinden Android App Bundle'ınızı oluşturun.

4. Uygulamanızı Google Play Store'a Ekleme

PWA'nız için bir Android uygulama paketi oluşturduğunuza göre, artık bu paketi Google Play Store'a yükleyebilirsiniz. Geliştirici hesabınızı kaydettikten sonra, oturum açmak ve başlamak için Play Console'a gidebilirsiniz.

Uygulama oluşturma

Oturum açtıktan sonra tüm uygulamalarınızın gösterildiği bir ekran görürsünüz. Üst kısımlarda, tıklandığında yeni bir Android uygulama girişi oluşturma konusunda size yol gösterecek aşağıdaki ekranı gösterecek olan Uygulama oluştur düğmesi bulunur.

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

Burada, uygulama adı, varsayılan dil, uygulama mı yoksa oyun mu olduğu, ücretsiz mi yoksa ücretli mi olduğu ve çeşitli beyanlar dahil olmak üzere doldurulması gereken birçok alan vardır. Beyanları kabul etmeden uygulama oluşturamazsınız. Bu nedenle, kabul etmeden önce beyanları okuyup 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ı ayarlamak, test etmeye başlamak ve yayınlamak için tamamlamanız gereken görevlerin kontrol listelerini görürsünüz.

Dahili Testi Ayarlama

Dahili test, uygulamanızı inceleme yapılmadan hızlıca yayınlayarak seçtiğiniz güvenilir test kullanıcılarından geri bildirim almanın harika bir yoludur. Test etmeye şimdi başlayın yapılacaklar listesindeki görevleri görüntüleyin ve Test kullanıcılarını seçin'i belirleyin.

Test etmeye şimdi başlayın yapılacaklar listesi

Bu görevi tıkladığınızda Dahili Test sayfasına yönlendirilirsiniz. Uygulamanızın test kurulumunu buradan yönetebilirsiniz. Kenar çubuğundaki Sürüm menüsünde Test bölümünü açarak bu sayfaya tekrar gidebilirsiniz. Burada yapmanız gereken ilk şey, uygulamanızı test edecek 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. Bu işlemle e-posta listenizi oluşturabileceğiniz bir pop-up açılır.

E-posta listesi oluşturma formunu gösteren pop-up. Bu formda liste adı, e-posta adresleri, e-posta adreslerinin CSV dosyasını yükleme bağlantısı ve yüklenen e-posta adreslerinin gösterildiği bir alan bulunur.

Bu pop-up pencerede e-posta listenizi adlandırır ve e-posta adreslerini manuel olarak girebilir veya kullanılacak e-posta adreslerinin CSV dosyasını yükleyebilirsiniz. İşlemi tamamladığınızda Değişiklikleri kaydet düğmesine basın. Gerekirse e-posta adreslerini eklemek veya kaldırmak için önceden oluşturduğunuz e-posta listelerine geri dönebilirsiniz. Test kullanıcılarınızı ekledikten sonra test sürümü oluşturma zamanı gelir. 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ümlerden geçmeniz istenir. Uygulama Bütünlüğü bölümünde, uygulamanızın imzalama anahtarını nasıl yöneteceğinizi seçersiniz. 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ın kurtarılabilmesini sağladığı için önerilir.

Play Uygulama İmzalama

Soldan sağa doğru, bir geliştiriciyi ve yükleme anahtarını gösteren bir akış şeması. Yükleme anahtarı, geliştiricinin uygulamasını imzalayıp Google'a gönderiyor. Google, uygulama imzalama anahtarına sahip olur, uygulamayı bu anahtarla imzalar ve kullanıcıya teslim eder.

Uygulama Yükleme ve Sonlandırma

İ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 Bubblewrap'in oluşturduğu 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ı doldurun ve sırasıyla Kaydet, Sürümü incele ve Dahili testte kullanıma sunmayı başlat düğmelerini tıklayarak sürümünüzü başlatın. Bu işlem, uygulamanızı dahili test kullanıcılarınızın kullanımına sunar. Dahili Test sayfasının Test Kullanıcıları sekmesine geri dönerek test kullanıcılarınızla paylaşacağınız bir bağlantıyı kopyalayabilirsiniz. Bu bağlantı sayesinde test kullanıcılarınız uygulamanıza erişebilir.

Test bağlantısını test kullanıcılarıyla paylaşmak için bağlantıyı kopyala bağlantısını gösteren bir okla birlikte dahili test sayfası.

5. Deneyin: Uygulama Oluşturma

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmaya çalışın:

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

6. Digital Asset Links

PWA'nızı Play'de test ettiyseniz tam ekran çalışmadığını fark edebilirsiniz. Bunun nedeni, site sahipliğini henüz bir Digital Asset Links dosyası aracılığıyla doğrulamamış olmanızdır. Bubblewrap, 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 Alma

PWA'nızın Digital Asset Links'ini yapılandırmak için kullanıcının telefonuna aldığı paketi imzalamak üzere kullanılan sertifikanın SHA-256 parmak izine ihtiyacınız vardır.

Play Uygulama İmzalama ile

Sürümünüzü oluştururken uygulamanız için Play Uygulama İmzalama'yı ayarladıysanız (daha önce önerilen yöntem), SHA-256 parmak izini Play Console'da bulabilirsiniz. Bu sertifikanın, uygulamanızı yüklemek için kullanılan sertifikadan farklı olduğunu unutmayın. Parmak izini almak için Play Console'daki uygulamanızda Sürümler > Kurulum > Uygulama bütünlüğü'ne gidin. Burada, Uygulama imzalama anahtarı sertifikası bölümünde çeşitli seçenekler görürsünüz. SHA-256 sertifika parmak izi 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 kullanılan anahtar, uygulamayı Play Console'a yüklemek için kullandığınız anahtarla aynı olur. Parmak izini ayıklamak için Java'nın keytool aracını 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 aracı 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.

Bubblewrap, aldığınız imza parmak izlerini yönetebilir ve sizin için doğru Digital Asset Links dosyasını oluşturabilir. Bubblewrap ile parmak izi eklemek için PWA'nızı Bubblewrap ile paketleme sırasında oluşturulan dizinin içinden aşağıdaki komutu çalıştırın. <fingerprint> yerine önceki adımda kopyalanan parmak izini girin.

$ bubblewrap fingerprint add <fingerprint>

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

7. Deneyin - Digital Asset Links

Şimdi sıra sizde! Önceki adımda öğrendiklerinizi kullanarak aşağıdakileri yapmaya çalışın:

  1. Uygulamanızın SHA-256 parmak izini bulun.
  2. Uygulamanız için bir Digital Asset Links dosyası oluşturun.
  3. Digital Asset Links dosyanızı PWA'nıza yükleyin.
  4. API'yi ve test uygulamanızı kullanarak Digital Asset Links dosyanızın doğru şekilde ayarlandığını doğrulayın.

8. Bilginizi Sınayın

Bitirmeden önce aşağıdaki soruları yanıtlayarak bilginizi test edin ve öğrendiklerinizi görün. Yanıtları görmeye çalışmayın.

Android projesini Bubblewrap ile oluşturduktan sonra Sally, oluşturulan ______ dosyasını sürüm kontrol sistemine gönderir. Böylece, ihtiyaç duyduğunda dosyayı yeniden oluşturabilir.

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

Jack, kalite güvencesi ekibinin PWA Android uygulamasını test etmesini istiyor. Bu nedenle, Android App Bundle'ını dahili test kanalına _______.

yüklemeler derlemeler ve yüklemeler yayınlar imzalar ve yüklemeler

Oogie Boogie'nin PWA Android uygulaması tam ekranda çalışmıyor. Bu sorunu düzeltmek için ______ sertifikasının SHA-256 sertifika parmak izini alıp PWA'larıyla aynı kaynakta bulunan ______ konumundaki Digital Asset Links dosyalarına yüklerler.

upload key, /.well-known/assetlinks.json upload key, /assetlinks.json signing key, /.well-known/assetlinks.json signing key, /assetlinks.json

9. Bilginizi Test Edin - Cevaplar

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

  1. Android projesini Bubblewrap ile oluşturduktan sonra Sally, oluşturulan ______ dosyasını sürüm kontrol sistemine gönderir. Böylece, ihtiyaç duyduğunda dosyayı yeniden oluşturabilir.
  2. Jack, kalite güvencesi ekibinin PWA Android uygulamasını test etmesini istiyor. Bu nedenle, Android App Bundle'ını dahili test kanalına _______.
  3. Oogie Boogie'nin PWA Android uygulaması tam ekranda çalışmıyor. Bu sorunu düzeltmek için ______ sertifikasının SHA-256 sertifika parmak izini alıp PWA'larıyla aynı kaynakta bulunan ______ konumundaki Digital Asset Links dosyalarına yüklerler.

10. Tebrikler!

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

Hazır olduğunuzda aşağıdaki adımları kendi başınıza deneyin:

Keyifli kodlamalar!