Tutorial Membuat Aplikasi Android Dengan React Native Part I

Buat kamu yang ingin belajar Membuat Aplikasi Android, Tapi spek komputer pas pasan, Maka React Native adalah pilihan yang bisa di pertimbangkan selain Ionic Framework.

Nah disini saya akan buat tutorial singkat dan padat belajar membuat aplikasi android dengan react native mulai dari awal sekali sampai jadi apk yang bisa kamu install di hp kamu

Bahan bahan yang dibutuhkan :
1- Komputer /laptop minimal Intel Celeron 2gb Ram

2- Internet, Klo bisa Speedy, Klo Terpaksa tetring jg ok
3- Download Gradle,ketik download gradle di browser kamu, lalu download
4- Dowload Apache ant, ketik apache ant download
5- Download Android SDK, Ketik android sdk download
6- Download Leapdroid,untuk Emulatornya

Cara penyajian :
1- Buat 2 folder baru = D:/Android/sdk
2- exctract android sdk di folder sdk
3- exstract apache ant dan gradle di folder android
4- install Leapdroid

Memulai persiapan setting untuk install react Native, emulator dan tools build apk nantinya :

1- install Chocolatey
caranya buka cmd klik kanan run administrator lalu, copy code di bawah ini :
cmd = @”%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe” -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command “iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin”
2- install nodejs,phyton27, dan java jdk dengan chocolately
cmd = choco install -y nodejs.install python2 jdk8
3- install react native
cmd = npm install -g react-native-cli
5- DOWNLOAD SDK ANDROID, inget sdk ya,bukan android studio, bisa tepar kuota kamu
Url = https://developer.android.com/studio/
6- INSTALL/EXTRACT DI FOLDER D:/ANDROID/SDK,klo blom ada foldernya buat dulu
6-SETTING ANDROID_HOME = D:/ANDROID/SDK

Yang Ini Juga Menarik  Kursus Komputer di KABUPATEN JENEPONTO

caranya klik kanan my computer/ This Pc lalu pilih properties, jika muncul window baru, pilih menu di sebelah kiri advanced system setting, pilih environment variable di paling bawah window yang baru muncul,tabel atas adalah variabel user nah klik new setting seperti gambar berikut


7-EDIT PATH TAMBAHKAN D:/ANDROID/SDK/tools

Untuk path di bawah tabel kedua cari list path dan klik,untuk memilih,jikasudah terpilih klik edit , lalu muncul window baru, dan setting seperti gambar


8-EDIT PATH TAMBAHKAN D:/ANDROID/SDK/platform-tools
9-EDIT PATH TAMBAHKAN D:/ANDROID/SDK/build-tools
10-EDIT PATH TAMBAHKAN D:/ANDROID/SDK/build-tools\28.0.3
11-SETTING ANT_HOME = D:\ANDROID\apache-ant-1.10.5
12-EDIT PATH TAMBAHKAN = D:\ANDROID\apache-ant-1.10.5\bin
13-SETTING GRADLE_HOME = D:\ANDROID\gradle-5.1.1
14-EDIT PATH TAMBAHKAN = D:\ANDROID\gradle-5.1.1\bin
15-SETTING JAVA_HOME = C:\Program Files\Java\jdk1.8.0_201
16-EDIT PATH TAMBAHKAN = C:\Program Files\Java\jdk1.8.0_201\bin
17-CEK SDK sdkmanager –list
18-INSTALL PLATFORM DENGAN CMD = sdkmanager “platform-tools” “platforms;android-28”
18-INSTALL BUILD TOOLS DENGAN CMD = sdkmanager “platform-tools” “BUILD-TOOLS;28.0.3”
19-Buat project dengan cmd = react-native init AwesomeProject
20-run project dengan cmd di dalam project kamu, cmd = react-native run-android
untuk emulator gunakan leapdroid biar tidak banyak setting seperti genomotion
21- BUAT KEYTOOLDI FOLDER ANDROID
cmd = keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
22- EDIT GRADLE DI android/gradle.properties
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=** MYAPP_RELEASE_KEY_PASSWORD=**
23-EDIT android/app/build.gradle
android {

defaultConfig {}
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
        }
    }
}
signingConfigs {
release {
    keyAlias keystoreProperties['keyAlias']
    keyPassword keystoreProperties['keyPassword']
    storeFile file(keystoreProperties['storeFile'])
    storePassword keystoreProperties['storePassword']
}

}
buildTypes {
release {
signingConfig signingConfigs.release
}
}
}
24- RILIS APLIKASI
cmd = ./gradlew assembleRelease
LOKASI APK YG SUDAH JADI
android/app/build/outputs/apk/release/app-release.apk
25-TESTING RUN
react-native run-android –variant=release

Yang Ini Juga Menarik  software corel draw di Sukabumi Utara

Nah begitulah tahap belajar React Native dari awal sampai jadi aplikasi yang bisa di install di Handphone kamu
semoga bernmanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *