React Native CodePush Kullanımı ile Uygulama Güncelleme
Merhabalar, bu yazımda react native ile geliştirdiğimiz uygulamamızda codepush kütüphanesini kullanarak uzaktan nasıl uygulamamıza güncelleme atarız buna değineceğim.
CodePush Nedir?
CodePush, Microsoft tarafından geliştirilmiş bir hizmettir ve React Native gibi mobil uygulama geliştirme teknolojilerinde, uygulama güncelleme sürecini yönetmek için kullanılır. CodePush, uygulama geliştiricilerinin uygulama güncellemelerini hızlı bir şekilde yayınlamalarına olanak tanır ve kullanıcıların uygulama güncelleme işlemlerini kolaylaştırır.
Burada dikkat edilmesi gereken bir nokta var. Eğer uygulama üzerinde yapılan değişiklik android veya ios dosyalarında ise buna codepush erişemiyor yani aslında codepush sadece js kısmında yapılan değişikliklerde kullanabileceğimiz bir kolaylık. Tabi bu özellikleri nedeni ile küçümsememek gerekir, codepush ile görsel güncellemeleri de yapabilirsiniz.
CodePush kullanarak bir uygulamanın güncellenmesi için şu adımlar izlenir:
- CodePush CLI aracılığıyla uygulama kodu CodePush sunucusuna yüklenir.
- CodePush SDK, uygulama güncelleme sürecini kontrol eder ve CodePush sunucusundaki en son güncelleme sürümünü uygulama kullanıcısına gönderir.
- Kullanıcı, uygulama güncelleştirmesini onayladığında, CodePush SDK, uygulama kodunu günceller. Yine bir parantez açmak gerekirse bu güncelleme işlemi onaya sunulmadan otomatik de yapılabilir.
Kurulum kısmına geçerek, codepush ile ilk güncellememizi yapalım.
CodePush hesabınızı komut satırından yönetebilmeniz için öncelikle NodeJS temelli CLI aracını edinmeniz gerekiyor. Aşağıdaki komutu girerek yükleyelim:
OSX ve Linux ortamında sudo ile çalıştırılması gerekmektedir.
npm install -g appcenter-cli
code-push register
veya
code-push loginYukarıdaki komutlar ile sisteme kayıt olalım veya giriş yapalım. Sizi tarayıcı sayfasına yönlendirecek, sonrasında burada yer alan kodu kopyalayıp terminal ekranına yapıştıralım.
Artık bizim de bir CodePush hesabımız bulunuyor. Şimdi CodePush servisine bir uygulama nasıl eklenir ona bakalım.
- Uygulama Oluşturma
Uygulama oluşturma işlemlerini, appcenter web sitesinden “Add new” diyerek de yapabilir ya da alt kısımda yer alan komut satırı kodları kullanabiliriz.
// android
code-push app add FordOtosan android react-native// ios
code-push app add FordOtosan ios react-native
Burada Production ve Staging isminde iki adet deployment key’imiz oluşturulmuş durumda. Şimdilik bunları bir yere kaydedelim, daha sonra ihtiyacımız olacak.
CodePush kayıt ve uygulama oluşturma kısımları bitti. Şimdi sırada uygulama ile haberleşme kısımları var.
Uygulamamıza codepush eklentisini kuralım
yarn add react-native-code-pushCodePush’un uygulamamızı tanıyabilmesi için ek ayarlar yapmamız gerekmektedir.
Bunlar hem android hem de ios için ayrı ayrı yapılacaktır.
Android özel ayarları:
android/settings.gradle dosyasına aşağıdaki eklemeleri yapalım
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')android/app/build.gradle dosyasına yapılacak eklemeler
...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...MainApplication.java dosyasındaki değişiklikler şu şekilde
...
// 1. kısım kütüphane ekleme
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
// 2. kısım codepush ile başlatma
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}strings.xml dosyamız yoksa ekleyip içine daha önce kaydettiğimiz deployment key’leri yazıyoruz. Burada yazmamız gereken key proje eğer Production’da ise “Production”, değilse “Staging” yazılmalı.
<resources>
<string name="app_name">AppName</string>
<string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>iOS özel ayarları:
Tüm gerekli CocoaPods bağımlılıklarını yüklemek için cd ios && pod install && cd .. komutunu çalıştıralım.
AppDelegate.m dosyasına gerekli kütüphaneyi ekleyelim.
#import <CodePush/CodePush.h>aynı dosya içerisinde yer alan
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];bu kodu aşağıdaki kod ile değiştirelim.
return [CodePush bundleURL];Son bir ayar kaldı o da dağıtım anahtarı yani az önce android için yaptığımız strings.xml dosyasına eklediğimiz key’lerden birini ios için eklememiz gerekiyor. Info.plist dosyasına ekleyelim.
Değişken ismi “CodePushDeploymentKey” olacak ve string değeri kullanmak istediğiniz key olmalı.
Artık ayar işleri bitti. JS kısmında kodumuzu yazabiliriz.
import codePush from "react-native-code-push";class MyApp extends Component {
}MyApp = codePush(MyApp);
Kabaca uygulamamıza codepush ekleyip tüm app’i sardık.
Varsayılan olarak, CodePush her uygulama başlangıcında güncelleştirmeleri denetler. Bir güncelleştirme varsa, uygulama bir sonraki yeniden başlatıldığında sessizce indirilir ve yükler.
Altta yer alan kodda “installMode” kısmında güncelleme var ise hemen indir olarak ayarlanmış. “deploymentKey” ise bizim daha önce kaydettiğimiz key’lere bakıyor. Onun için de uygulama ios veya android ayrımı yaparak bu alana yazmamız gerek ya da bir fonksiyon ile bu key’leri farklı dosyadan çağırabiliriz. Bu ayarlar ile güncelleme var ise o güncellemeyi hemen indirip kurup uygulamayı baştan başlatacaktır.
async sync() {
CodePush.sync(
{
installMode: CodePush.InstallMode.IMMEDIATE,
updateDialog: false,
deploymentKey: deploymentKey,
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
},
this.codePushStatusDidChange,
);
CodePush.allowRestart();
}codePushStatusDidChange fonksiyonu :
codePushStatusDidChange(syncStatus) {
switch (syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
null;
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.SYNC_IN_PROGRESS:
null;
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
null;
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.UP_TO_DATE:
null;
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
null;
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
null;
break;
}
}kodun tamamı :
import React, { Component } from 'react';
import { BackHandler, Platform, Text, View } from 'react-native';
import CodePush from 'react-native-code-push';
import Main from '../dosyaYeri';
import { deploymentKey } from '../dosyaYeri';
class App extends Component {
constructor(props) {
super(props),
this.state = {
updateAvailable: false,
};
}
componentDidMount() {
this.sync();
}
codePushStatusDidChange(syncStatus) {
switch (syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
null;
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.SYNC_IN_PROGRESS:
null;
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
null;
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.UP_TO_DATE:
null;
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
null;
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.setState({updateAvailable: true});
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
null;
break;
}
}
async sync() {
CodePush.sync(
{
installMode: CodePush.InstallMode.IMMEDIATE,
updateDialog: false,
deploymentKey: deploymentKey,
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
},
this.codePushStatusDidChange,
);
CodePush.allowRestart();
}
render() {
if (this.state.updateAvailable === true) {
return (
<View
style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>
FORD OTOSAM
</Text>
<Text>
Güncelleniyor...
</Text>
</View>
);
} else {
return <Main/>;
}
}
}
export default CodePush(App);Burada başlangıçta güncelleme var mı diye kontrol edip eğer varsa güncellemeyi alıp uygulamayı tekrar başlatıyor. Güncelleme yok ise Main sayfasını yüklüyor.
Her şey tamam güncellemeler kontrol ediliyor ama nasıl yeni güncelleme atacağız derseniz o kısımda yine komut satırı üzerinden gerçekleşiyor. Ancak şu kısım önemli!
Örnek android veya ios uygulama versiyonu 3 ve sizde codepush ile daha önce 3 versiyonu için uzaktan güncelleme attınız. Şimdi versiyon çıkmanız gerekiyor ancak apk veya ipa çıkarken versiyonu 4 yapmayı unuttunuz ve de bu şekilde yayınladınız. İşte burada apk/ipa indiren her kullanıcı daha önce codepush ile göndermiş olduğunuz versiyon 3'ü uzaktan alacaktır. Bu önemli sebeple apk/ipa çıkarken dikkat edilmeli veya codepush ile güncelleme gönderken versiyon numarası girilerek gönderilmeli.
Alttaki komut satırı kodu ile güncelleme atabiliriz. Alan adı kısmı appcenter üzerinde uygulama açarken bir alana dahil olur onun ismi, uygulamaAdı kısmı ise appcenter üzerinde uygulamayı oluştururken vermiş olduğunuz isim. 1.0.0 kısmı ise android veya ios için versiyon kısımları. İos ve android için uygulama isimleri appcenter üzerinde farklı olduğu için karışma ihtimali yoktur. Son parametre ise uygulamayı prod mu yoksa stag için mi güncelliyoruz onu giriyoruz. Bu komut satırı kodunu appcenter ilk uygulama oluşturduğunuz an size verecektir.
appcenter codepush release-react -a alanAdı/uygulamaAdı -t 1.0.0 -d Production
Buraya kadar sabırla okuduğunuz için teşekkür ederim.
Farklı konularda yeniden buluşana kadar hatasız kodlamalar :)
Ford Otosan — Dijital Ürünler ve Servisler
Plan 2 Delivery Tribe Liderliği — Software Development Team Member
Yusuf PAMUKÇU
