App Release Prep

App Release Prep from Apps Development with React Native Path MySkill.id

Yuk subscribe untuk mendapatkan email notifikasi setiap ada artikel terbaru oleh MySkill

Sumber : My Skill

Mempersiapkan aplikasi React Native untuk rilis merupakan tahap krusial yang menentukan kesuksesan aplikasi di toko aplikasi. Kita akan membahas secara mendalam persiapan rilis aplikasi React Native, mulai dari penambahan metadata hingga pengiriman ke App Store dan Google Play Store.

A. Pentingnya Persiapan Rilis Aplikasi

Persiapan rilis aplikasi adalah proses yang sering diabaikan oleh pengembang, padahal memiliki dampak signifikan terhadap penerimaan pengguna dan keberhasilan aplikasi. Aplikasi yang dirilis tanpa persiapan matang berisiko ditolak, mendapat rating rendah, atau bahkan dihapus dari toko aplikasi.

Dalam ekosistem React Native, persiapan rilis melibatkan beberapa aspek teknis dan non-teknis yang harus diperhatikan. Dari penyesuaian konfigurasi build hingga pembuatan materi pemasaran, setiap langkah memerlukan perhatian detail untuk memastikan aplikasi siap menghadapi persaingan di pasar.

1. Penambahan Metadata, Splash & Icon

1.1 Metadata Aplikasi

Metadata adalah informasi deskriptif tentang aplikasi yang digunakan oleh toko aplikasi dan perangkat pengguna. Dalam React Native, metadata didefinisikan dalam beberapa file konfigurasi:

Android (android/app/src/main/AndroidManifest.xml)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">
        
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

iOS (ios/AppName/Info.plist)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDisplayName</key>
    <string>AppName</string>
    <key>CFBundleIdentifier</key>
    <string>com.example.app</string>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
</dict>
</plist>

2. Desain Splash Screen

Splash screen adalah tampilan pertama yang dilihat pengguna saat membuka aplikasi. Splash screen yang baik meningkatkan persepsi profesional dan mengurangi kebosanan saat loading.

2.1 Implementasi Splash Screen di Android

1. Buat file drawable/launch_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

2. Tambahkan style di res/values/styles.xml:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/splash_status_bar</item>
        <item name="android:windowBackground">@drawable/launch_screen</item>
    </style>
</resources>

2.2 Implementasi Splash Screen di iOS

1. Buka file ios/AppName.xcworkspace di Xcode
2. Pilih target aplikasi → General → App Icons and Launch Images
3. Gunakan LaunchScreen.storyboard untuk desain splash screen

3. Aplikasi Icon

Icon adalah identitas visual aplikasi yang harus dirancang menarik dan mengikuti panduan toko aplikasi.

3.1 Persyaratan Icon

Android:

• Resolusi: 512x512 px (untuk Google Play Store)
• Format: PNG
• Latar belakang transparan untuk adaptasi

iOS:

• Resolusi: 1024x1024 px
• Format: PNG
• Tidak ada sudut melengkung atau transparansi

3.2 Tool Pembuatan Icon

Gunakan tool berikut untuk generate icon:

1. MakeAppIcon: https://makeappicon.com/
2. Android Asset Studio: https://romannurik.github.io/AndroidAssetStudio/
3. Figma Plugin: Icon Generator

B. Tangkapan Layar Aplikasi React Native

Screenshot merupakan elemen visual penting yang mempengaruhi keputusan pengguna untuk mengunduh aplikasi. Screenshot yang profesional dan informatif dapat meningkatkan conversion rate hingga 25%.

1. Persyaratan Screenshot

Google Play Store

• Minimal 2 screenshot, maksimal 8
• Format: JPEG atau PNG 24-bit
• Resolusi: 320px — 3840px
• Rasio aspek: 16:9 atau 9:16

App Store

• Wajib 3–10 screenshot per perangkat
• Format: JPEG atau PNG
• Resolusi: 1288x2796 (iPhone 14 Pro Max)
• Rasio aspek: Sesuai dimensi perangkat target

1.2 Teknik Pengambilan Screenshot

Menggunakan Simulator/Emulator

1. iOS Simulator:

• Buka aplikasi di simulator
• Tekan Cmd + Shift + 4 untuk area selection
• Atau Cmd + S untuk screenshot full screen

1. Android Emulator:

• Buka aplikasi di emulator
• Klik ikon kamera di toolbar emulator
• Atau gunakan Ctrl + S

1.3 Menggunakan Device Real

1. iOS Device:

• Tekan tombol power + volume up secara bersamaan
• Screenshot tersimpan di Photos app

2. Android Device:

• Tekan tombol power + volume down secara bersamaan
• Screenshot tersimpan di Gallery

1.4 Tool Editing Screenshot

1. Figma: Untuk mockup device frame dan annotasi
2. Sketch: Untuk editing dan penambahan teks
3. Placeit: Template screenshot profesional
4. Canva: Template desain yang mudah digunakan

1.5 Best Practices Screenshot

1. Tampilkan Fitur Utama: Fokus pada fitur paling menarik
2. Sertakan Konteks: Tampilkan bagaimana fitur digunakan
3. Tambahkan Teks Penjelas: Singkat dan jelas
4. Konsistensi Visual: Gunakan template yang sama untuk semua screenshot
5. Highlight Value Proposition: Tampilkan manfaat utama aplikasi

1.6 Contoh Implementasi

// Gunakan react-native-view-shot untuk screenshot programatik
import ViewShot from "react-native-view-shot";

const captureScreenshot = async () => {
  try {
    const uri = await viewShotRef.current.capture();
    console.log("Screenshot saved to", uri);
    // Simpan atau upload screenshot
  } catch (e) {
    console.error("Error capturing screenshot:", e);
  }
};

// Di dalam komponen
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
  <YourComponent />
</ViewShot>

C. Halaman Privasi dan Kebijakan

Halaman privasi dan kebijakan merupakan persyaratan wajib untuk aplikasi yang mengumpulkan data pengguna, terutama jika menggunakan layanan seperti Firebase Analytics atau Google AdMob.

1.1 Komponen Privacy Policy

Privacy policy harus mencakup:

1. Data yang Dikumpulkan: Jenis data pribadi yang dikumpulkan
2. Tujuan Pengumpulan: Alasan pengumpulan data tersebut
3. Penggunaan Data: Bagaimana data digunakan
4. Berbagi Data: Pihak ketiga yang menerima data
5. Keamanan Data: Upaya melindungi data pengguna
6. Hak Pengguna: Hak pengguna atas data mereka
7. Kontak: Cara menghubungi pengembang

1.2 Template Privacy Policy

# Privacy Policy for [App Name]

## Information Collection and Use

We collect several different types of information for various purposes to provide and improve our service to you.

### Types of Data Collected

**Personal Data**
While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you ("Personal Data"). Personally identifiable information may include, but is not limited to:

- Email address
- Device information
- Usage data

## Use of Data

[App Name] uses the collected data for various purposes:

- To provide and maintain the Service
- To notify you about changes to our Service
- To provide customer support

## Disclosure of Data

We may disclose your Personal Data if required by law or if you violate our Terms of Service.

## Security of Data

The security of your data is important to us. We use commercially reasonable administrative, technical, and physical measures to protect your Personal Data from unauthorized access, use, or disclosure.

## Changes to This Privacy Policy

We may update our Privacy Policy from time to time. You are advised to review this page periodically for any changes.

## Contact Us

If you have any questions about this Privacy Policy, please contact us:
- Email: privacy@example.com

1.3 Implementasi di React Native

Tambahkan privacy policy di aplikasi:

import React from 'react';
import { View, Text, ScrollView, Linking, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';

const PrivacyPolicyScreen = () => {
  const openLink = (url) => {
    Linking.openURL(url);
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Privacy Policy</Text>
      <Text style={styles.content}>
        [Your privacy policy content here]
      </Text>
      
      <View style={styles.buttonContainer}>
        <Button
          title="Terms of Service"
          onPress={() => openLink('https://example.com/terms')}
          type="outline"
        />
        <Button
          title="Contact Us"
          onPress={() => openLink('support@example.com')}
        />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f9f9f9',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
    textAlign: 'center',
  },
  content: {
    fontSize: 16,
    lineHeight: 24,
    marginBottom: 20,
  },
  buttonContainer: {
    marginTop: 20,
  },
});

export default PrivacyPolicyScreen;

1.4 Hosting Privacy Policy

1. Website Pribadi: Host di subdomain (privacy.example.com)
2. GitHub Pages: Gratis dan mudah diatur
3. Firebase Hosting: Gratis untuk penggunaan dasar
4. Privacy Policy Generator:

• https://www.privacypolicygenerator.info/
• https://app-privacy-policy-generator.firebaseapp.com/

D. Hands-On: Persiapan Perilisan di React Native

Mari kita implementasikan langkah-langkah persiapan rilis untuk aplikasi React Native.

Step 1: Update Version Number

1. Android

Edit android/app/build.gradle:

android {
    defaultConfig {
        versionCode 2
        versionName "1.0.1"
    }
}

2. iOS

Get My Skill’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Edit ios/AppName.xcodeproj/project.pbxproj: Cari dan update CURRENT_PROJECT_VERSION dan MARKETING_VERSION.

Step 2: Generate Signed APK/AAB

Android

1. Buat keystore:

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

1. Konfigurasi signing di android/app/build.gradle:

...
android {
    ...
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

1. Generate AAB:

cd android
./gradlew bundleRelease

iOS

1. Buka workspace di Xcode
2. Pilih target → General → Signing
3. Pilih team dan provisioning profile
4. Archive: Product → Archive
5. Distribute App → App Store Connect

Step 3: Konfigurasi App Store Connect

1. Buat aplikasi baru di App Store Connect
2. Isi informasi aplikasi:

• Nama aplikasi
• Subtitle
• Privacy policy URL
• Support URL

3. Upload build:

• Gunakan Xcode atau Application Loader
• Atau transport melalui alat command line

Step 4: Konfigurasi Google Play Console

1. Buat aplikasi baru di Google Play Console
2. Upload AAB:

bundletool build-apks --bundle=app.aab --output=app.apks

3. Isi informasi aplikasi:

• Deskripsi aplikasi
• Screenshots
• Kategori dan kontak

4. Setup pricing dan distribution

Step 5: Testing Sebelum Rilis

1. Internal Testing

• Bagikan build ke tim internal
• Gunakan Firebase App Distribution

firebase appdistribution:distribute app.aab --app 1:1234567890:android:abcdef123456 --release-notes "Version 1.0.1" --testers "test@example.com"

2. Closed Testing

• Bagikan ke grup tester terbatas
• Kumpulkan feedback dan bug report

3. Open Testing

• Rilis ke publik terbatas
• Monitor performa dan crash

Step 6: Rilis Produksi

1. App Store

• Submit for Review
• Tunggu persetujuan Apple (biasanya 1–7 hari)
• Rilis manual atau otomatis setelah disetujui

2. Google Play

• Pilih rollout bertahap:
• 1% → 5% → 20% → 50% → 100%
• Monitor ANR dan crash rate
• Hentikan rollout jika ada masalah serius

Step 7: Post-Release Monitoring

Gunakan tool berikut untuk monitoring:

1. Firebase Crashlytics: Monitor crash dan ANR
2. Google Analytics: Track user engagement
3. App Store Connect Analytics: Performance metrics
4. User Feedback: Kumpulkan review dan rating

Kesimpulan

Persiapan rilis aplikasi React Native memerlukan perhatian detail pada berbagai aspek teknis dan non-teknis. Dari penambahan metadata hingga pembuatan materi pemasaran, setiap langkah berkontribusi pada kesuksesan aplikasi di toko aplikasi.

Dengan mengikuti panduan ini, pengembang dapat memastikan aplikasi React Native mereka siap untuk rilis dengan standar profesional. Ingatlah bahwa persiapan rilis bukanlah akhir dari proses pengembangan, melainkan awal dari siklus hidup aplikasi yang akan terus berkembang berdasarkan feedback pengguna dan data performa.

Learn More Via: https://myskill.id/course/state-and-props-management