PUygulamayı mağazalara yayınlamak, inceleme süresi nedeniyle bazen çok yorucu olabiliyor ve bazen de inceleyen kişi çeşitli nedenlerle bu sürümü reddedebiliyor. Bunun yanı sıra, bazen küçük hatalar yapıyor veya küçük değişiklikler istiyoruz. Ve kim bu süreci her seferinde tekrar tekrar yaşamak ister ki? CodePush bu sorunu tamamen çözüyor. CodePush’ı uyguladıktan sonra, yerel kodları değiştirmediğiniz sürece uygulamanızı istediğiniz zaman güncelleyebilirsiniz.

Kulağa hoş geliyor, değil mi? CodePush’ı nasıl uyguladığınızı öğrenelim.

“Tarihinizle değil, hayallerinizle yaşayın.” — Stephen Covey

CodePush Nedir?

Microsoft App Center tarafından sağlanan bir hizmet olan CodePush, geliştiricilerin React Native uygulamalarındaki güncellemeleri App Store veya Google Play Store’a gitmeden doğrudan kullanıcıların cihazlarına göndermelerine olanak tanır. Bu makalede, CodePush’ın React Native’deki kullanımı, avantajları, uygulaması ve en iyi uygulamaları ele alınacaktır.

CodePush Kullanmanın Faydaları

1. Sorunsuz Güncellemeler: CodePush, güncellemeleri anında sunmanızı sağlayarak kullanıcıların uygulama mağazası onaylarını ve indirmelerini beklemelerine gerek kalmaz. Bu, daha hızlı hata düzeltmeleri ve özellik lansmanları anlamına gelir ve daha tatmin edici bir kullanıcı deneyimi sağlar.
2. Yayın Döngüsünü Azaltın: CodePush, uygulama mağazalarının gerektirdiği uzun yayın döngüsünü atlamanızı sağlar. Güncellemeleri ihtiyaç duyduğunuz sıklıkta gönderebilir, böylece sorunları anında ele alabilir ve son teknoloji bir uygulamayı daha kolay koruyabilirsiniz.
3. A/B Testi: Güncellemeleri bir kullanıcı alt kümesine göndererek A/B testi uygulayın. Bu sayede, tam ölçekli bir sürüm yayınlamadan önce geri bildirim toplayabilir ve yeni özelliklerin performansını değerlendirebilirsiniz.
4. Optimize Edilmiş Yayınlar: Güncellemeleri kullanıcılara aşamalı olarak yayınlayın ve öngörülemeyen sorunların tüm kullanıcı tabanını etkilemeden önce ele alınmasını sağlayın.

React Native projenizde CodePush kullanmaya başlamak için şu adımları izleyin:

Öncelikle projenize CodePush’u yüklemeniz gerekiyor:

yarn add react-native-code-push

Daha sonra projenizi Microsoft’un uygulama merkezinde kurmanız gerekiyor.

• Uygulama merkezine gidin
• Kaydolun veya oturum açın. Aşağıdaki ekranı göreceksiniz.

• Yeni Uygulama Ekle’ye tıklayın, ekranın sağında bir çekmece görünecektir.

• Uygulamaya bir isim verin. Hem iOS hem de Android için iki uygulama oluşturmanız gerekiyor. Bu bağlamda isim verebilirsiniz.
• İşletim Sistemi ve Platform’u seçin. Bu durumda platform RN’dir.
• Bu noktada bir kılavuz görünecektir.
• Bu anahtarı kopyalayıp .env dosyasına yapıştırmak için uygulama sırrına ihtiyacınız olacak.

## CODEPUSH
IOS_CODE_PUSH_KEY=KEY_IOS
ANDROID_CODE_PUSH_KEY=KEY_ANDROID

Şimdi işletim sistemlerini kurmanız gerekiyor

iOS;

1. Tüm gerekli CocoaPods bağımlılıklarını yüklemek için cd ios && pod install && cd .. komutunu çalıştırın.
2. AppDelegate.m dosyasını açın ve CodePush başlıkları için bir içe aktarma ifadesi ekleyin:

#import <CodePush/CodePush.h>

3. Üretim sürümleri için köprünün kaynak URL’sini ayarlayan aşağıdaki kod satırını bulun:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

4. Yöntemi şu şekilde değiştirin:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

5. Dağıtım anahtarını Info.plist’e ekleyin:

 <key>CodePushDeploymentKey</key>
 <string>$(IOS_CODE_PUSH_KEY)</string>

ANDROID;

1. Android/settings.gradle dosyanızın sonuna aşağıdaki eklemeleri yapın:

...
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2. Android/app/build.gradle dosyanızda, codepush.gradle dosyasını dosyanın sonuna ek bir derleme görevi tanımı olarak ekleyin:

...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

3. Update the MainApplication.java file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...

        // 2. Override the getJSBundleFile method in order to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4. Dağıtım anahtarını build.gradle’a ekleyin;

def codePushKey = safeExtGet("ANDROID_CODE_PUSH_KEY")

veya

Dağıtım anahtarını Strings.xml’e ekleyin;

 <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

Kurulumlar tamamlandı. Şimdi kullanıcı indirme durumunu gösteren bir ekrana ihtiyacınız var.

1. İşlevsel bir bileşen oluşturun

CodePush’ın durumunu ve kullanıcıya ilerlemeyi göstermek için destekleri alın. Bunları ikinci adımdan bir kancayla alacaksınız.

const CodePushLoading: FC<CodePushLoadingProps> = ({
  header = 'Downloading',
  subHeader = 'general_codePush_codePush_text',
  progress = '0%',
}) => {
  return (
    <View>
      <Text label={header} variant={'title3'} />
      <Space size={12} />
      <Text label={subHeader} variant={'body6'} />
      <Space size={24} />
      <ActivityIndicator color={colors.darkGrey} size="large" />
      <Space size={24} />
      <Text label={progress} variant={'body4'} />
    </View>
  );
};

export default CodePushLoading;

2. CodePush’u kontrol etmek için bir kanca oluşturun

Bu kancada iki parametre döndüreceksiniz; mesaj ve ilerleme. Bunları aşağıda görebilirsiniz;

Mesaj için, kullanıcının geçerli durumunu göstermek üzere SyncStatus’u kontrol edeceksiniz

import { useEffect, useState } from 'react';

import SplashScreen from 'react-native-bootsplash';
import codePush, { DownloadProgress } from 'react-native-code-push';

interface UseCodePushReturn {
  syncMessage?: string;
  progress?: string;
}

const useCodePush = (isLoading: boolean): UseCodePushReturn => {
  const [syncMessage, setSyncMessage] = useState<string>();
  const [progress, setProgress] = useState<string>();

  const syncStatusChangedCallback = (syncStatus: codePush.SyncStatus) => {
    switch (syncStatus) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        setSyncMessage('Checking for update...');
        break;
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        setSyncMessage('Downloading update...');
        break;
      case codePush.SyncStatus.AWAITING_USER_ACTION:
        setSyncMessage('User waiting...');
        break;
      case codePush.SyncStatus.INSTALLING_UPDATE:
        setSyncMessage('Loading update...');
        break;
      case codePush.SyncStatus.UP_TO_DATE:
        setSyncMessage('The app is up to date...');
        break;
      case codePush.SyncStatus.UPDATE_IGNORED:
        setSyncMessage('Update canceled by user...');
        break;
      case codePush.SyncStatus.UPDATE_INSTALLED:
        setSyncMessage('Update installed, Application restarting...');
        break;
      case codePush.SyncStatus.UNKNOWN_ERROR:
        setSyncMessage('An error occurred during the update...');
        break;
      default:
        setSyncMessage(undefined);
        break;
    }
  };

  const downloadProgressCallback = ({ receivedBytes, totalBytes }: DownloadProgress) => {
    const currentProgress = Math.round((receivedBytes / totalBytes) * 100);
    setProgress(`${currentProgress} %`);
  };

  useEffect(() => {
    if (!isLoading) {
      SplashScreen.hide({ fade: true, duration: 360 });
      if (!__DEV__) {
        codePush.notifyAppReady();
        codePush.checkForUpdate().then(update => {
          if (update) {
            codePush.sync(
              { installMode: codePush.InstallMode.IMMEDIATE },
              syncStatusChangedCallback,
              downloadProgressCallback,
            );
          }
        });
      }
    }
  }, [isLoading]);

  return {
    syncMessage,
    progress,
  };
};

export default useCodePush;

3. Bundan sonra uygulamanın ana dosyasını çağırmanız gerekir. App.ts

İlk olarak, az önce yazdığınız kancayı çağırın.

  const { progress, syncMessage } = useCodePush(isLocalizationLoading || isAppUpdateLoading);

sonra “CodePushLoading.tsx”i koşullu olarak çağırın;

progress || syncMessage ? (
  <CodePushLoading progress={progress} subHeader={syncMessage} />
) : (
  //Example
  <Navigation />
)

İşte bu kadar. CodePush kurulumunu tamamladınız.

Şimdi CodePush’a güncellemelerin nasıl gönderileceğini öğrenelim;

Uygulama merkezinin sol panelinde, “Dağıt” altında “CodePush” bağlantısına tıklayın

Uygulamayı oluşturun. Sağ üstte “Staging” seçilidir. İhtiyacınıza göre “Production”a geçmek isterseniz.

Tüm değişiklikleriniz bittikten sonra terminalde aşağıdaki betiği çalıştırın.

appcenter codepush release-react -a mahir/testIos -d Production -m

Tİşte bu kadar. JS paketiniz App Center bulutuna gönderilir. “-m” işaretini kullandığınız için kullanıcılara anında hizmet verir, yani zorunludur. Kullanıcılar bir sonraki başlatmada güncellemeleri indirecektir.

Not: Sürümler çok önemlidir. “Hedef Sürüm” ile eşleşmezlerse kullanıcılar indirmeleri göremez.

Sonraki Adım…

CodePush’un En İyi Uygulamaları Nelerdir?

1. Kapsamlı Test: CodePush güncelleme sürecini basitleştirse de, kapsamlı testler şarttır. Olası sorunları kullanıcılarınıza ulaşmadan önce tespit etmek için güncellemeleri her zaman bir hazırlık ortamında test edin.
2. CodePush Anahtarlarını Güvende Tutun: Yetkisiz güncellemeleri önlemek için App Center API anahtarınız güvenli bir şekilde saklanmalıdır. Uygulamanıza sabit bir şekilde kodlamayın; bunun yerine ortam değişkenleri veya güvenli bir depolama çözümü kullanın.
3. Sürümleme: Kullanıcıların doğru sürümleri aldığından emin olmak için güncellemeleriniz için net bir sürümleme stratejisi uygulayın.
4. Kullanıcılarla İletişim Kurun: Güncellemeler mevcut olduğunda kullanıcıları bilgilendirin ve güncellemelerin faydalarını açıklayarak onları güncellemeye teşvik edin.

Sonuç

Günümüzün hızlı tempolu geliştirme dünyasında, uygulamalarımızın kullanıcılarımıza herhangi bir kesinti yaşatmadan güncel kalmasını sağlamak son derece önemlidir. CodePush, React Native geliştiricilerinin bu hedefe ulaşmaları için paha biçilmez bir araç sunar. Kusursuz entegrasyonu ve anında güncelleme sunma yeteneği sayesinde uygulama güncelleme sürecini basitleştirerek hem geliştiriciler hem de kullanıcılar için daha sorunsuz bir deneyim sunar. Bu kılavuzda incelediğimiz gibi, CodePush’ı uygulamak kolaydır ve esneklik ve duyarlılık açısından sunduğu avantajlar yadsınamaz. İster deneyimli bir geliştirici olun, ister React Native’e yeni başlıyor olun, CodePush’ı iş akışınıza entegre etmeyi düşünün. Sağladığı kolaylık, güncellemeleri sunma ve uygulamanızı yönetme biçiminizde devrim yaratabilir. Unutmayın, mobil uygulamalar alanında kullanıcı deneyimi her şeyden önemlidir ve bu deneyimi geliştirebilecek bir araç, ağırlığınca altın değerindedir.

Yazar: Mahir Uslu

Tags