Home / Javascript
Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Cara Mudah Membuat Aplikasi Android Dengan React Native

Cara Mudah Membuat Aplikasi Android Dengan React Native

Komentar



Halo temen-temen, kembali lagi nih dengan saya. Kali ini saya mau share nih langkah awal membuat aplikasi android dengan framework React Native.

Apa sih React Native itu ?

Mungkin ada yang baru denger kali ini atau udah pernah denger tapi belum tahu apa sih React Native itu. Nih saya kasih penjelasan singkatnya. Simak baik-baik yaa..

React Native itu cross-platform framework yang di buat oleh tim Facebook untuk membuat mobile app (android & ios ) dengan menggunakan javascript sebagai bahasa pemogramannya. React Native nantinya akan mengkompilasi Javascript ke dalam native kode Android (Java) dan iOS (Objective C atau swift). Sehingga untuk performa nya nanti akan mendekati aplikasi native

Dan lagi, dengan React Native ini kalian bisa lho membuat aplikasi android dan ios sekaligus dengan satu bahasa pemrogaman aja yaitu dengan Javascript. Mantab kann .. 

Oh iya sebelumnya saya mau kasih tahu kalau langkah-langkah ini untuk laptop/komputer yang OS nya Linux yaa. Untuk windows ada sedikit perbedaan pada langkah-langkahnya.

Jadi bagi yang OS nya windows kalian bisa cek postingan saya disini atau kalian bisa langsung mengunjungi dokumentasi dari React Native disini .

Peralatan dan langkah yang dibutuhkan


Yang perlu kalian install nantinya adalah Nodejs, React Native CLI, JDK, dan Android Studio.

Untuk editor nya kalian bisa menggunakan editor favorite kalian masing-masing ya. Disini saya menggunakan Visual Studio Code. Karena selain UI nya yang bagus, di VS Code juga terdapat banyak plugin-plugin yang bisa membantu kalian coding nantinya.

1. Nodejs

Yang pertama, kalian install dulu ya Nodejs. 
Kalian bisa mengunjungi postingan saya Apa itu Nodejs ?? Berikut Penjelasan dan Cara Installnya.

2. React Native CLI

Setelah Nodejs dan npm terinstall, buka terminal lalu ketikkan :
npm install -g react-native-cli

3. Java Development Kit

React Native membutuhkan Java SE Development Kit (JDK) versi 8.
Kalian bisa download JDK nya disini, kemudian menginstallnya.

4. Android Studio

Download dan install android studio. Ketika di tanya tipe installasi saat kalian install android studio, kalian pilih yang Custom setup ya. Lalu jangan lupa centang juga yaa :
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
Setelah itu kalian tinggal next" aja sampai proses installasi selesai :)

5. Install Android SDK

Ketika muncul screen "Welcome to Android Studio", klik "Configure" lalu pilih "SDK Manager".

Pada tab SDK Platform, kalian akan melihat banyak package list. Centang checkbox "Show Package Details" di pojok kanan bawah, kemudian kalian cari dan centang juga ya :
  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
Selanjutnya klik tab SDK Tools dan pastikan juga Android SDK Build-Tools 28.0.3 tercentang ya.
Setelah itu klik Apply untuk download dan install Android SDK dan build tools yang berkaitan .

6. Konfigurasi ANDROID_HOME environment variable

Copy kan script berikut pada file config $HOME/.bash_profile atau $HOME/.bashr :

export ANDROID_HOME=$HOME/Android/Sdk 
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/platform-tools

7. Watchman

Ikuti Petunjuk Install Watchman untuk compile dan install Watchman dari sumbernya
Setelah peralatan dan juga langkah yang dibutuhkan telah selesai mari kita mulai membuat aplikasi sederhana kita

Membuat Aplikasi Baru

Pertama, buat project baru dengan cara mengetikkan  react-native init NamaProject  di terminal.

Saat pertama kali membuat project baru prosesnya akan memakan waktu yang lumayan lama. Jadi tunggu dengan sabar sampai selesai ya :)

Setelah proses selesai, masuk ke dalam directory project dengan mengetikkan  cd NamaProject .

Nahhh, pada tutorial kali ini kita akan menggunakan android device sebagai emulatornya, jadi siapkan hp android kalian dan aktifkan mode "USB Debugging" di pengaturan.

Setelah itu hubungkan hp kalian ke komputer dengan kabel USB. Lalu coba ketikkan  adb devices  di terminal untuk cek apakah device mu sudah terdeteksi atau belum.

Dan langkah terakhir, jika device android mu sudah terdeteksi maka coba kalian ketikkan 
react-native run-android . Kalian setujui saja semua permission yang muncul di device android kalian.

Dan jika berhasil maka akan muncul tampilan seperti ini



Dan seperti petunjuk yang tampil di layar android kalian, kalian bisa merubah tampilannya di file App.js. Untuk tutorial lanjutan dari react native ini seperti navigasi, lifecycle dll akan saya post di lain waktu ya :)

Oke sekian tutorial saya kali ini, saya minta maaf bila ada kesalahan kata atau mungkin ada yang sulit dimengerti kalian bisa tanya di kolom komentar ya..
Semoga bermanfaat yaa, see you :D 
Baca selengkapnya

Apa itu Nodejs ?? Berikut Penjelasan dan Cara Installnya

Komentar

Apa itu Nodejs ??

Apakah Nodejs itu adalah suatu bahasa pemrogaman ??

Lalu mengapa kita harus menggunakan Nodejs, memang apa saja sih kelebihannya ??

Untuk menjawab pertanyaan diatas simak baik" ya penjelasan saya di bawah ..

Pengertian Nodejs


Apa kalian tahu Javascript ?? Javascript adalah bahasa pemrogaman yang mungkin selama ini kalian mengenalnya sebagai bahasa yang hanya bisa berjalan di sisi client/browser saja kan.. Namun dengan adanya Nodejs ini sekarang Javascript juga bisa berjalan di sisi server seperti halnya PHP, Ruby, Perl, dan sebagainya.

Hal tersebut bisa terjadi karena Nodejs menggunakan engine V8 dari google yang cepat dan punya performa yang bagus untuk mengeksekusi Javascript menjadi bahasa server.

Selain itu, Nodejs dapat dijalankan pada Windows, Mac OS X, dan Linux tanpa perubahan kode program. Node.js memiliki pustaka server HTTP sendiri sehingga memungkinkan untuk menjalankan server web tanpa menggunakan program server web seperti Apache atau Lighttpd.\

Jadi sederhananya, Nodejs adalah sebuah platform perangkat lunak yang didesain untuk pengembangan aplikasi berbasis web dengan Javascript sebagai bahasa pemrogamannya.

Lalu apa saja sih kelebihannya ?? Berikut adalah beberapa kelebihan dari Nodejs

Kelebihan Nodejs


  • Dengan bahasa JavaScript, ia mempermudah untuk mempelajari backendnya jika memang sudah menguasai Javascript. Pemula bahkan lebih cepat menguasainya karena dari sisi-klien juga menggunakan bahasa Javascript.
  • Adanya pertukaran kode antara klien dan server, yaitu server-side rendering pada kerangka Javascript.
  • Adanya fasilitas untuk membuat aplikasi waktu nyata (realtime application).
  • Open source, sehingga pengguna mengetahui bagaimana proses aplikasi berjalan, mengubahnya, dan gratis dipakai.
  • Mendukung penyimpanan sementara (cache).
Setelah mengetahui apa itu Nodejs dan juga kelebihannya, langsung saja kita masuk ke cara installasinya.

Cara Install Nodejs


Untuk Windows & MacOS :

Download saja langsung dari web resmi Nodejs disini dan jalankan installernya

Alternatives Windows

Using Chocolatey:
cinst nodejs
# or for full install with npm
cinst nodejs.install
Using Scoop:
scoop install nodejs

Untuk Linux :

Buka terminal lalu ketikkan :
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - 
sudo apt-get install -y nodejs

Untuk mengetahui apakah Nodejs sudah terinstall atau belum, kalian tinggal cek saja versinya di terminal dengan mengetikkan

node --version
npm --version

Oke sekian tutorial yang saya share kali ini. Kalau ada yang ingin ditanyakan silahkan berkomentar ya'. Jika ada kurangnya saya mohon maaf. Dukung terus blog saya biar bisa terus posting hal-hal lainnya. Semoga bermanfaat 😀
Baca selengkapnya
Subscribe to: Posts (Atom)