Azure DevOps, App center, React Native… Parçaları bir araya getirelim

Yazımda bir react native projesinin devOps süreçlerinden bahsedeceğim. Bir react native projesi yaratacağız. Mac makinasında derleyip simulatörler üzerinde çalıştığını doğruladıktan sonra, Azure Devops ortamına git ile göndereceğiz. Bu aşamadan sonra Microsoft App center ortamında uygulamalarımızı tanımlayıp Azure Devops bağlantılarını yapacağız ve derleme, dağıtım aşamalarını otomatize edeceğiz. Tüm bu işlemler sonunda projemizi Azure Devops ortamına her “push” ettiğimizde projemiz derlenerek yeni sürümü hedef kullanıcılara dağıtılacak. Aşağıda bazı kısımları hızlı geçeceğim. Bu konularda bilgi sahibi olunduğunu varsayacağım.

• İlk olarak elimizde sıfırdan bir MAC Osx makina olduğunu varsayıyorum. Makinamıza ilk olarak react native geliştirebilmek için gerekli kurulumları yapmamız gerekiyor. Bu kurulumlar zaten react native sayfasında iyi bir şekilde dökümante edilmiş durumda. https://facebook.github.io/react-native/docs/getting-started Bu sayfada React Native CLI Quick Start sekmesinde MAC seçeneğini seçerek hem ios hem android için gerekli kurulumları yapıyoruz.
• Şimdi ise terminal ekranında bir react native projesi yaratıyoruz. Gerekli komutlar yukarıdaki sayfada bulunuyor.
• Projemizi yarattık. Tabiki proje üzerinde çalışabilmek için bir IDE gerekiyor. Ben bu aşamada Visual Studio Code kullanıyorum. Şu linkten indirilebilir. https://code.visualstudio.com
• VS Code üzerinde react native projesi geliştirirken kod yazımına yardımcı olacak birçok eklenti var. Şu yazıda bunlar bir araya getirilmiş. İnceleyerek gerekli gördüklerinizi kurmanızı öneririm. https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce
• Şimdi artık VS Code üzerinde projemizi açıp kodlamaya başlayabiliriz.
• Değişikliklerimizi yaptık ve artık derleyeceğiz. Terminal penceresinde projemizin dizininde “react-native run-ios” komutunu çalıştırdığımızda Xcode ios emulatörü otomatik açılacak ve uygulamamız ayağa kalkacaktır. Android için ise “react-native run-android” komutu ile çalıştırıyoruz. Fakat bu aşamada Android studio kurulumunda gelen emulatörü çalıştırmadan önce açmış olmanız gerekiyor. “emulator -list-avds” komutu ile varsayılan olarak gelen emulatör isimlerini listeliyoruz ve herhangi birini çalıştırmak için “/Users/*MyUser*/Library/Android/sdk/emulator/emulator -avd *DeviceName* -netdelay none -netspeed full” diyoruz.
• Artık projemizi makinada derledik, emulatörlerde çalıştırdık. Şimdi sıra geldi projeyi devops süreçlerine dahil etmeye. İlk olarak projemizi Azure Devops süreçlerine (eski adı ile Visual studio team services) dahil edeceğiz. Tabii bunun için eğer şirketinizin resmi bir hesabı varsa burayı kullanabilirsiniz veya kişisel olarak www.visualstudio.com ‘dan kendinize bir hesap açabilirsiniz. Azure Devops sayfasına login olduktan sonra yeni bir repo yaratıyoruz ve yarattığımız reponun URL bilgisini kullanmak üzere kenara koyuyoruz.

• Proje kodunu buluta(Azure Devops) “push” edebilmek için mac makinasına GIT kurulumu yapmamız gerekecek. Bunun için GIT sitesinden resmi versiyonu indirip kuruyoruz. https://git-scm.com
• Azure devops tarafına projemizi gönderebilmek için yapmamız gereken bir adım daha var. Terminal penceresinde sırasıyla “brew update” “brew install git-credential-manager” “git-credential-manager install” komutlarını çalıştırıyoruz. Artık Azure devops’a projemizi göndermek istediğimizde bir pencere açılacak ve bizden microsoft hesabımızı girmemizi isteyecek. Yani güvenlik kısımlarını bizim için halledecek. Detaylar; https://github.com/Microsoft/Git-Credential-Manager-for-Mac-and-Linux/blob/master/Install.md
• Şimdi ise gerekli git komutları ile projemizi azure devops üzerinde açtığımız repo’ya “push” edebiliriz. bu işlemden sonra artık projemiz ile azure devops bağlantısı kurulmuş oldu. Projemiz buluta gönderildi.
• Şimdi bir adım öteye gidip uygulamamızın son kullanıcı ile buluşmasına kadar giden yolu otomatize edeceğiz. Yani biz kod değişikliklerini yapacağız, Azure Devops’a “push” edeceğiz. Proje burda hem ios hem android için derlenecek derlendikten sonra da kullanıcılara uygulamanın yeni versiyonunun çıktığına dair bilgilendirme gidecek(veya direkt markete yeni versiyon çıkacak). Bunun için ilk olarak Microsoft App Center’a giriş yapmamız gerekiyor. https://appcenter.ms/apps
• App center üzerinde “Add new app” adımıyla iki ayrı uygulama oluşturacağız. Birisi ios birisi android için. Android için olan uygulamamızda OS olarak Android, ios için olanda ise iOS seçeneğini seçmeliyiz.

• Sıra geldi oluşturduğumuz iki ayrı uygulamanın azure devops bağlantılarını kurmaya. Bunun için app center üzerinde uygulamalarımızdan herhangi birini tıklıyoruz. Sol tarafta build sekmesi içinde Azure Devops’a bağlanmak için gerekli olan adımı seçip listeden bizim repomuzu seçiyoruz. Böylece bağlantı kurulmuş oldu. (Aynılarını diğer uygulama için de yapmalıyız)

• Peki biz uygulamamızı kimlere dağıtacağız. Bunu ayarlamak için app center üzerinde uygulama sayfasında sol atta bulunan settings kısmına giriyoruz. Ayarlar sayfasında people bölümüne edit ile girerek dağıtmak istediğimiz kişilerin email bilgilerini tanımlıyoruz. Böylece biz yeni versiyon çıktığımızda indirmeleri için bu kişilere email gidecek. (Aynılarını diğer uygulama için de yapmalıyız)

• Azure Devops üzerinde yeni bir kod “push” edildiğinde bu kodun derlenip üretim ortamına dağıtılabilecek ios ve android uygulamaları çıkabilmek için bir takım ayarlar daha gerekiyor. Üretim ortamına çıkmak öyle kolay değil. Bu aşamadan sonra anlatacaklarımı ios ve android olarak ayrı ayrı anlatacağım. Bilmemiz gereken her iki uygulamada da bu ayarları yapmak gerekecek. Ayarlar için build sekmesinde branch’in yanında yer alan konfigürasyon butonuna (alltaki resimde solda gördüğünüz) tıklıyoruz. Açılan pencerede gerekli ayarları yapacağız. Her iki uygulama için altta ayrı ayrı anlatacağım.

• Android uygulaması için; Sign builds bölümünü “on” konumuna getirdikten sonra gerekli ayarları yapıyoruz. Bu aşamada proje için *.keystore dosyasını oluşturmamız gerekecek. Bunun nasıl oluşturulacağını react native sayfasında zaten anlatmışlar. Önemli nokta burda girdiğimiz bilgileri unutmamamız gerektiği. Aşağıdaki kısımlarda şifre ve alias bilgilerini girmemiz gerekecek. Aynı zamanda oluşan keystore dosyasını da buraya yüklememiz gerekiyor. https://facebook.github.io/react-native/docs/signed-apk-android Bu sayfadaki bilgilerden sadece aşağıdaki komutu çalıştırıp keystore üretmek yeterli.

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

• Eğer ki komut satırından ilerlerek apk üretmek isterseniz yukarıdaki linkteki diğer adımları da takip edip bunu yapabilirsiniz. bu yazının konusu değil. Biz burda APK üretimini app center’a bırakacağız.

• Aşağıdan uygulamamızı kimlere dağıtmak istediğimizi seçiyoruz. Uygulamayı Collabrator test kullanıcılarına dağıtabilir veya direkt store bağlantısı kurarak markete çıkmasını sağlayabiliriz. Biz collaborator grubuna dağıtacağız.

• Ios uygulaması için; ios uygulaması için yukarıda android için yaptığımız adımları izleyeceğiz. Sign builds sekmesini on konumuna getirdikten sonra bizden iki dosya istiyor. *.mobileprovision dosyası ve *.p12 dosyası. Bu dosyaları oluşturmamız gerekiyor. Distribute builds adımından ise kimlere dağıtacağımızı seçeceğiz. Bunu android kısmında anlattığım için geçiyorum.

• Öncelikle şunu belirtelim. Apple iki farklı lisanslama sunuyor. Birincisi developer hesabı. Developer hesabı varsa uygulamanızı apple store’a yani public markete koyabilirsiniz. İkinci tip lisans ise enterprise hesabı. Bu lisansa sahipseniz oluşturduğunuz uygulamayı public markete koyamazsınız sadece şirketiniz içindeki kullanıcılara dağıtabilirsiniz. Çünkü bu sizin şirket için yazdığınız genel kullanıcıları ilgilendirmeyen bir uygulama. Durum böyle olunca apple kontrolü olmadan bu uygulamayı herhangi bir apple cihaza yükleyebilirsiniz. Bu yazının konusu enterprise hesap ile dağıtım.
• İlk olarak mac makinasında bir sertifika oluşturmamız gerekiyor. Bunun için keychain access uygulamasına giriş yapıyoruz. Aşağıdaki menüden sertifika oluşturmak için gerekli *.certSigningRequest dosyasını oluştıuracağız.

• Bizi şu şekilde bir ekran karşılayacak. Burda gerekli bilgileri giriyoruz ve dosyayı oluşturuyoruz.

• Yukarıdaki bilgileri doldururken apple bizden aşağıdaki durumları göz önünde bulundurmanızı istiyor. Yol göstericiniz olsun.

• Bu dosyayı oluşturduktan sonra apple enterprise hesabımıza login oluyoruz. bu işlemi apple developer sayfasında account sekmesinden yapabiliriz. https://developer.apple.com
• Hesap üzerinde Certificates, Identifiers & Profiles sekmesinden aşağıdaki sayfaya giriş yapıyoruz. Burda uygulamayı kurum içinde dağıtacağımızdan In-House seçeneğini seçiyoruz. Sonraki adımlarda bizden Mac makinasında yarattığımız *.certSigningRequest dosyasını istiyor. Bu dosyayı göstererek ilerliyoruz ve sonrasında sertifikamızı (xx.cer dosyası) mac makinasına indiriyoruz. Mac makinasında çift tıklayarak sertifikanın kurulmasını sağlıyoruz.

• Sertifika kurulduktan sonra yeniden keychain access uygulamasına dönüyoruz. My Certificates sekmesinde yüklediğimiz sertifikaya sağ tıklayarak Export diyerek .p12 dosyası formatında çıktı alıyoruz. Evet artık elimizde app center’ın istediği p12 dosyası var.

• Şimdi apple developer hesabıza geri dönüyoruz. App IDs sekmesinden yeni bir uygulama ekleyeceğiz. Aşağıdaki gibi bilgileri girerek uygulamamızı yaratıyoruz. Bundle ID her apple uygulaması için tekil olmalı. Başka bir apple uygulamasında olan bir id verilirse kabul olmayacaktır.

• Şimdi ise provisioning Profiles aşamasından bir profile yaratacağız. Aşağıdaki seçenekleri seçerek ilerliyoruz.

• App Id kısmında bir üstte yarattığımız uygulamayı listeden seçiyoruz. Sertifika olarak üst kısımlarda yarattığımız sertifikayı seçiyoruz. Son olarak bir profile ismi vererek oluşturma işlemini tamamlıyoruz.
• Son olarak oluşturduğumuz provisioning profile’a tıklıyoruz ve download diyerek dosyayı (*.mobileprovision) indiriyoruz. bu dosyada app center’da bizden istenen ikinci dosya. Artık ios uygulamamız için app center ayarları da bitirmiş olduk.