Yeni bir React Native mobil uygulaması oluşturacaksınız, düzenli bir geliştirme ve yayınlama süreciyle beraber fiyatlandırmasının da sizi yormamasını istiyorsunuz. İşte bu noktada EAS (Expo Application Services) bu süreci sistematik bir şekilde kolaylaştırıyor. 🚀

Bu yazımızda ise örnek bir proje oluşturup EAS’ın özelliklerinden nasıl faydalanabileceğimizi uygulamalı bir şekilde göreceğiz.

Proje örneğine başlamadan önce ihtiyacımız olanlar:

• Node.js LTS release

• Git

• Watchman

Expo Projesi Oluşturmak

Projemizi oluşturmak için şu komutu kullanıyoruz:

yarn create expo-app
# veya

Bize ilk olarak uygulama ismimizin ne olacağını soracak, bu blog yazısında EAS’ı ele alacağımız için ben eas-testing-app ismine karar verdim.

✅ Your project is ready
To run your project, navigate to the directory and run one of the following yarn commands.
- cd my-app
- yarn android
- yarn ios
- yarn web
✨ Done in 44

Şeklinde bir çıktı gördüysek başarılı bir şekilde uygulamamızı oluşturabildik demektir. 🥳

Expo ayrıca uygulamayı oluşturduktan sonra bizim için git dosyasını da yaratıyor ve ilk commiti atmış oluyor.

Sonrasında ise oluşturduğumuz projeyi GitHub üzerindeki repomuza pushluyoruz.

git remote add origin git@github.com:barbarosaffan/eas-testing-app.git
git branch -M main
git push -u

Geliştirme Süreçleri

Expo ile geliştirme yapmanın en güzel yanlarından biri, Expo Go uygulaması sayesinde mobil cihazlar üzerinde hızlı ve kolay test imkanı sunmasıdır. Expo Go ile lokalde bir geliştirme sunucusu başlatarak, sadece bir QR kod aracılığıyla test cihazlarımızda çalışabiliyoruz.

Expo, iOS geliştirme yapmak için MacOS ihtiyacını dahi ortadan kaldırıyor. Bir iPhone test cihazıyla birlikte geliştirmelerimize devam edebiliyoruz.

Development Build

Ancak, eğer uygulamamıza özel yerel (native) kod eklemeleri yapmamız, yerel bağımlılıkları yönetmemiz veya config plugin’leri eklememiz gerekiyorsa, development build’lerini kullanarak geliştirme sürecine devam etmek zorundayız.

Development build’lerini ise Expo Go client’ının bize özgü versiyonları olarak düşünebiliriz.

Eğer,

• Custom Native Kodlar

• Native Dependency’ler

• Config Plugin Ekleme

gibi ihtiyaçlarımız olursa da development build’lerden geliştirme süreçlerine devam etmemiz gerekiyor.

Normalde yarn start diyerek başlattığımız development sunucumuzu bu durumda yarn start — dev-client diyerek başlatmamız gerekecek.

EAS Build

EAS Build servisi, uygulamalarımızın yayınlanma ve hata ayıklama derlemelerini basitleştirerek geliştirme sürecimizi hızlandırır. Ayrıca, uygulama için imzalama (app signing) ve dahili dağıtım (internal distribution) işlemlerini otomatize ederek bize zamandan tasarruf sağlar. Tüm bu özellikler Expo’nun kendi paneli ile de tamamen entegre çalışır.

İlk build’imizi alarak başlarken, EAS Build’i de projemize adım adım entegre edelim.

1. npm install -g eas-cli komutu ile EAS’ı bilgisayarımıza kuralım.

2. eas login komutu ile Expo hesabımıza bilgisayarımızda giriş yapalım.

3. eas:configure komutu ile build’lerimizin konfigürasyonlarını yapalım.

Bu süreçte Expo bize farklı promptlar çıkaracak, şöyle ki:

✔ Would you like to automatically create an EAS project for @barbarosaffan/eas-testing-app? 
# Evet diyoruz.
✔ Which platforms would you like to configure for EAS Build? 
# Android'e de, iOS'a da build almak istediğimiz için "All" olarak cevap veriyoruz.
✔ Generated eas.json. Learn more
🎉 Your project is ready to build.
- Run eas build when you are ready to create your first build.
- Once the build is completed, run eas submit to upload the app to app stores.
-

Bu çıktıyı aldıysak ilk build’imizi almaya başlayabiliriz. Expo bizim için eas.json dosyasını oluşturmuş olacak ve EAS ile ilgili bütün konfigürasyonlarımız ve detayları, bu eas.json dosyasında tutulacak.

Projemizi lokal ortamdan expo.dev üzerinde başarıyla oluşturduğumuz ve bağlantı kurduğumuz zaman Expo’nun paneli üzerinden projeler bölümüne giderek projemizi görebiliriz.

Şimdi ilk build’imiz için gerekli olan kaynak kodu alarak Expo’ya yollayacağız, Expo bizim için gerekli kısmı kullanarak kendi sunucularında build alacak ve biz bu süreci eas-cli üzerinden yönetebileceğiz.

eas build — platform all ile iki platforma da build alırken, — platform seçeneğiyle de hangi platforma build alacağımızı seçebiliyoruz. Eğer iOS build’i almak isterseniz eas build — platform ios, android build’i almak isterseniz eas build — platform android seçeneklerini kullanabilirsiniz.

Bu komutu çalıştırdığımızda EAS bize bazı sorular soracak, sırayla bunları cevaplayacağız.

Her uygulamanın olması gerektiği gibi, sizin uygulamanızın da bir application ID’si olması gerek, ilk olarak bunu giriyoruz.

❯ eas build - platform all
Loaded "env" configuration for the "production" profile: no environment variables specified. Learn more
📝 Android application id Learn more
? What would you like your Android application id to be? › 
# com.barbarosaffan.eastestingapp
✔ Generate a new Android Keystore? 
# Evet olarak cevaplayacağız, EAS bizim için daha sonrasında build süreçlerinde bu Keystore'u kullanacak, Keystore dosyaları mobil tarafta authenticationlar için kullanılıyor.
📝 iOS Bundle Identifier Learn more
✔ What would you like your iOS bundle identifier to be? 
# Aynı android tarafında application ID girdiğimiz gibi bir bundle identifier giriyoruz.
🍏 iOS build
✔ Using remote iOS credentials (Expo server)
If you provide your Apple account credentials we will be able to generate all necessary build credentials and fully validate them.
This is optional, but without Apple account access you will need to provide all the missing values manually and we can only run minimal validation on them.
? Do you want to log in

EAS burada kendi uyarılarında söylediği gibi Apple bilgilerimizi kullanarak bizim yerimize build bilgilerimizi girecek ve bu tarafta eğer erişim verirsek build ve gönderme süreçlerimizi oldukça kolaylaştıracak.

Bu konfigürasyonları elimizle de yapabiliriz fakat biz otomatik yapılmasını istediğimiz için onay verip Apple kimliğimizle giriş yapıyoruz. Sonrasında development takımımızı ve sağlayıcımızı seçiyoruz.

Bu tarafta yine EAS’ın akışını takip edip istenenleri cevaplayarak devam edeceğiz.

✔ Generate a new Apple Provisioning Profile? 
# "Yes" diyerek devam ediyoruz. 
# Provisioning profile yetkilendirilmiş cihazlarda iOS uygulamamızı çalıştırmamız için kullanılacak.
✔ Generate a new Apple Provisioning Profile? 
# "Yes" diyerek devam ediyoruz.
✔ Created Apple provisioning profile
✔ Created provisioning profile
Project Credentials Configuration
Project @barbarosaffan/eas-testing-app
Bundle Identifier com.barbarosaffan.eastestingapp
App Store Configuration
Distribution Certificate
Serial Number **********************
Expiration Date Wed, 16 Oct 2024 09:56:51 GMT
Apple Team ********** (*************)
Updated 10 days ago
Provisioning Profile
Developer Portal ID **********
Status active
Expiration Wed, 16 Oct 2024 09:56:51 GMT
Apple Team *********** (***************)
Updated 2 seconds ago
? Would you like to set up Push Notifications for your project? 
# Hayır işaretliyoruz.
Compressing project files and uploading to EAS Build. Learn more
✔ Uploaded to EAS 1s
🤖 Android build details: <https://expo.dev/accounts/barbarosaffan/projects/eas-testing-app/builds/84dbd25d-28e1-492d-8046-2836cf8751ed>
🍏 iOS build details: <https://expo.dev/accounts/barbarosaffan/projects/eas-testing-app/builds/7c46d40b-94a9-4c03-b628-9929ca13f4fd>
⠴ Waiting for builds to complete. You can press Ctrl+C to exit

Expo burada build için kaynak kodda gerekli olan kısımları sıkıştırıp EAS’a yüklerken, sonrasında da EAS tarafında build’imizi başlatıyor. Biz de build işlemi başladıktan sonra ctrl + c ile gönül rahatlığıyla işlemi sonlandırıp, verilen linklerden build’lerimizi takip etmeye başlayabiliyoruz. 🙂

İlk olarak build EAS’ta sıraya girecek ve sonrasında ise build alma işlemi yapılacak. Bu iki süreç bittiğinde build’imiz Expo paneline düşmüş olacak.

Sonrasında panelden projeye girdiğimizde kronolojik olarak sıralanmış build’leri görebileceğiz.

Expo Panelinde Proje Build’leri

Buradan test cihazımızla build artifact kısmında indirme butonuna tıklayarak IPA/APK dosyamızı indirip kullanabiliyoruz.

Geliştirme Süreçleri Kurulumu ⚙️

Diyelim ki bir geliştirme sürecine başlayacağız. Elimizde bir task var ve bizden istenen ise uygulama açıldığında ana ekranda “Fix Branch 🤙” yazılması. Bu süreçte neler yapacağız ve Expo bize nasıl yardımcı olacak şimdi bunu göreceğiz.

EAS Update

EAS Update’i, EAS sunucularında barınan, istediğimiz güncellemeleri projeye expo-updates kullanarak yükleyen ve build süreçlerinden geçmenizi gerektirmeyen değişiklikler için birebir bir araç olarak tanımlayabiliriz. Diyelim ki Header’da yazan “Menü” yazısını “Menu” olarak değiştirmek istiyorsunuz, işte bu tarz ufak işler için bize oldukça yardımcı oluyor.

EAS Update’i kurmak için ilk olarak pull requestlerimizde çalışacak Github Action’lar oluşturacağız.

Öncelikle projemizin kök dizinine .github/workflows/update.yml dosyasını oluşturuyoruz. Dosya içerisine ise bu kodu yazıyoruz.

name: update
on: push

jobs:
  update:
    name: EAS Update
    runs-on: ubuntu-latest
    steps:
      - name: Check for EXPO_TOKEN
        run: |
          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
            exit 1
          fi

      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
          cache: yarn

      - name: Setup EAS
        uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Install dependencies
        run: yarn install

      - name: Publish update
        run

Bu oluşturduğumuz yml dosyası, repomuzdaki herhangi bir branche push geldiğinde çalışacak bir sistem kurmamızı sağlıyor.

Update job’u içerisinde Node versiyonunu 18 olarak belirliyoruz. Expo’nun sağladığı actionlar ile de güncellemelerimizi alıyoruz. Sonrasında dependency’lerimizi kuruyoruz ve son olarak da güncellemelerimizi yayınlıyoruz.

Yml dosyamızın içerisinde fark ettiğiniz üzere bir EXPO_TOKEN’a ihtiyacımız var. Bu token’a ulaşmak için:

1. https://expo.dev/settings/access-tokens adresine gidiyoruz.

2. Create Token diyoruz.

3. Token’ımıza isim veriyoruz. Ben gh-actions-token ismini verdim.

4. Sonrasında elde ettiğimiz token’ı repomuza eklemeliyiz.

5. Repoya gidip ayarlarda settings -> secrets -> actions kısmında token’ımızı ekliyoruz.

6. İsmini EXPO_TOKEN yapmalıyız çünkü update.yml dosyamızda o isimle erişeceğiz.

Güncellemelerimizi yayınladık, şimdi test edecek kişiler için önizlemeler yayınlayacağız, bunları da GitHub Actions üzerinden yapıyor olacağız.

Yine daha önceki workflow dosyamızda olduğu gibi, .github/workflows/preview.yml dosyamızı yaratalım.

İçeriğini bu şekilde girelim.

name: preview
on: pull_request

jobs:
  update:
    name: EAS Update
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    steps:
      - name: Check for EXPO_TOKEN
        run: |
          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
            exit 1
          fi

      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
          cache: yarn

      - name: Setup EAS
        uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Install dependencies
        run: yarn install

      - name: Create preview
        uses: expo/expo-github-action/preview@v8
        with:
          command

Yine update.yml sürecine benziyor olsa da o süreçten farklı olarak bu taraftaki işlemi her pull request açıldığında veya PR içerisine yeni bir push geldiğinde yapıyoruz. EAS Update, bu workflow’un çıktısı olarak ilgili PR içerisine QR kod ve genel bilgileri veren bir yorum atacak.

Ana ekranımızdaki yazıyı değişme gibi bir düzenleme yapacağımızı varsayalım. Yeni bir branch açıp oluşturduğumuz workflow’ları deneyelim.

git checkout main
git checkout -b fix/home-menu-text 
# Main branch'i baz alarak fix branch'imizi oluşturuyoruz.
# İlgili dosyalarda değişikliği yapalım.
git add .
git commit -m "fix: menu text on home screen"
git push origin fix/home-menu-text 
# Değişikliklerimizi repoya ilgili branch ismiyle pushlayalım.

fix/home-menu-text branch’inden main’e PR’ımızı açıyoruz ve oluşturduğumuz workflow’lar anında çalışıyor.

EAS Update Çıktısı ✨

Çalışan Joblar ✨

Bittiğinde ise Expo bize uygulamamızın PR içindeki değişikliklerle güncellenmiş versiyonunu oluşturuyor ve PR’a yorum olarak iletiyor. QR olarak okuttuğumuzda ise Expo Go uygulaması üzerinden çıktımızı görebiliyoruz.

QR kod tarafından Expo Go’ya yönlendirildik

Continue diyoruz.

Expo Go üzerinde eas-testing-app

Geliştirme ve test süreçlerimizi bu şekilde EAS servislerini kullanarak iyileştirdik. Bu sürecin sonunda tüm takımımızla ve test ekibimizle paylaşabileceğimiz build’lerimiz oldu. Ayrıca bu build’lere ulaşıp kurulum ve test aşamalarına dair bilgi edinebileceğimiz kolay kullanıma sahip bir panelimiz de olmuş oldu.

Geliştirme sürecimizden sonra ise yayınlama işlemleri için EAS Submit servislerini kullanabiliriz. EAS Submit’i, yayınlama süreçlerimizi kolaylaştıran ve otomatize edebilen bir servis olarak tanımlayabiliriz.

Referans olarak aşağıdaki dökümanı takip ederek siz de projelerinize EAS Submit servisini entegre edebilirsiniz.

Okuduğunuz için teşekkürler, gelecek yazılarımızda görüşmek üzere 🙌