Tutorial Membuat Mobile App Menggunakan React Native (Part 1 – Environment Setup)

by | Mar 28, 2019

Perangkat mobile atau smartphone pada saat sekarang ini sudah menjadi benda wajib yang selalu ada di saku atau tas masing-masing. Jumlah orang yang memiliki smartphone tentunya jauh lebih besar dibandingkan orang yang memiliki laptop atau desktop. Hal inilah yang menyebabkan aplikasi mobile laris dan terpasang pada perangkat masing-masing bagaikan pisang goreng di saat hujan di sore hari. Sebagai hukum sebab akibat yang sudah dirumuskan pepatah zaman dulu yaitu ‘ada gula ada semut’, yang bila diartikan menjadi ada ‘konsumen pisang goreng berarti ada yang jualan pisang goreng’, atau agar lebih pas bila disesuaikan dengan bahasan kita berarti ‘ada mobile user tentunya ada mobile developer’. Kondisi inilah yang menyebabkan semua kalangan mulai dari perusahaan, software house, media, dan bahkan anak magang beramai-ramai menciptakan dan mengembangkan mobile app.

Kekhawatiran muncul dari penjual es krim yang sekali lagi jika disesuaikan dengan bahasan kita berarti ‘web developer’ yang rata-rata secara natural hanya menguasai bahasa markup yaitu HTML & CSS, bahasa pemrograman seperti Javascript & PHP, dan bahasa query yaitu SQL. Padahal, pengembangan mobile apps saat ini dikuasai oleh dua bahasa pemrograman yaitu Java (untuk Android) dan Swift (untuk iOS). Masalah ini ditambah dengan keinginan agar apps dapat hadir dan berjalan di dua platform tersebut. Tentu saja ini semakin membuat kompleksitas pengembangan mobile app semakin meningkat.

Solusi untuk permasalahan ini sebenarnya sudah ada pada tahun 2011 sejak hadirnya Cordova (berganti nama menjadi PhoneGap setelah diakuisisi oleh Adobe) sebagai framework pengembangan hybrid app di mana dengan menggunakan HTML, CSS, dan Javascript kita dapat meng-compile mobile app di dua platform Android dan iOS. Sampai sekarang Cordova/PhoneGap masih dijadikan solusi tercepat untuk membangun aplikasi mobile bagi para developer web.

Tapi jangan senang dulu, Alejandro! Aplikasi hybrid yang dibuat dengan Cordova/PhoneGap ini memiliki performa yang jauh lebih rendah bila dibandingkan mobile app yang dikembangkan secara native. Hal ini membuat para developer menjadi malas-malasan untuk menggunakan Cordova/Phonegap karena resikonya besar yaitu mereka harus mengorbankan user experience. Walaupun begitu dengan berkembangnya teknologi, hadir React Native sebagai solusi dalam pengembangan aplikasi mobile.

Mirip dengan dengan Cordova/PhoneGap, React Native membuat developer dapat mengembangkan aplikasi mobile dengan menggunakan Javascript yang tentu saja telah dikuasai oleh mayoritas web developer dan bila dibandingkan secara performa, React Native jauh mengungguli Cordova/Phonegap walaupun masih berada sedikit di bawah aplikasi native dari masing-masing platform.

Kita cukupkan saja cerita panjang tentang latar belakang native mobile app, hybrid app, dan pisang goreng ini. Pada kesempatan kali ini, kami akan membagikan langkah-langkah dalam membuat native mobile app dengan menggunakan React Native. Tutorial ini akan di bagi menjadi beberapa part. Pada part 1 ini kita akan mempersiapkan environment-nya terlebih dahulu.

 

Tools of Trade

Dalam tutorial kali ini beberapa tools yang akan kita gunakan adalah:

  1. NodeJs (download di sini)
  2. Android Studio
  3. SDK Manager
  4. JDK
  5. Python2

Setting Up Tools

Setelah semua tools kita dapatkan, langkah selanjutnya adalah men-setup semua peralatan tadi ke dalam perangkat yang kita gunakan. Dalam tutorial ini kita akan menggunakan Windows 10 sebagai sistem operasi dalam environment pengembangan kita.

 

1. Extract nodejs yang telah didownload,
semisal di D:\node-v10.15.0-win-x64 Anda harus mengingat lokasi tersebut, karena nanti akan kita tambahkan lokasi tersebut ke dalam path variable.

2. Install Android Studio beserta SDK Manager-nya.
Step ini membutuhkan koneksi internet dan membutuhkan waktu yang cukup panjang. Jangan lupa catat dimana lokasi Android Studio dan SDK Managernya. Kita akan menggunakanya di step selanjutnya karena Android Studio ketika diinstal otomatis akan menginstal versi SDK terakhir maka proses instalasi SDK otomatis telah dilakukan. Yang perlu dilakukan adalah mencatat lokasi SDK manager.

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 1

3. Menginstall JDK 
Jangan lupa catat lokasi JDK terinstall biasanya default lokasi JDK bisa ditemukan di C:\Program Files\Java\jdk1.8.0_162\

 

4. Menginstall Python
Setelah menginstal jangan lupa catat lokasi nya karena nanti kita harus menambahkanya ke dalam system path variable.

 

5. Menambahkan JAVA_HOME Environment Variable
Java home adalah lokasi di mana JDK diinstall. Secara default JDK terinstal di C:\Program Files\Java\jdk1.8.0_162\

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 2

6. Menambahkan ANDROID_HOME Environment Variable

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 3

7. Menambahkan beberapa lokasi di bawah ini kedalam System Path variable
Yang perlu ditambahkan adalah lokasi folder berikut:

    1. Nodejs
    2. Java/bin
    3. Gradle/bin
    4. SDK/platform-tools
    5. SDK/tools
    6. Python
Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 4

 

React Native Installation

Setelah ke enam langkah di atas dilakukan dengan benar maka seharusnya saat ini anda telah siap untuk memasang React Native ke komputer Anda. Langkah-langkah untuk memasang React Native dapat dilakukan melalui step-step dibawah ini :

1. Buka command prompt
(bisa dilakukan dengan menekan kombinasi keyboard windows + ‘r’ dan ketikkan cmd lalu klik ‘OK’)

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 5

2. Ketikkan perintah pada command line:

npm install -g react-native-cli

Tunggu sampai selesai! Proses ini membutuhkan koneksi internet

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 6

3. Membuat project baru
Sebelum membuat project baru ada baiknya kita membuat folder khusus untuk project kita. Saya sarankan untuk membuat folder dengan nama yang singkat dan tidak terdapat spasi untuk menghindari error. Di bawah ini urutan perintah untuk memulai project baru:

D:
mkdir labReactNative
react-native init AwesomeProject

Tunggu hingga proses selesai!

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 7

 

4. Membuat android virtual device (AVD)

 

5. Jalankan project yang telah kita buat
Untuk menjankan project yang telah kita buat dapat menggunakan perintah dibawah ini:

cd AwesomeProject
react-native run-android

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 8

 

 

Itu tadi langkah-langkah dalam menginstal dan men-setup environment dalam membuat mobile app dengan menggunakan React Native. Ikuti terus update terbaru dari Inixindo Jogja agar tidak ketinggalan Tutorial React Native part selanjutnya!

 

 

 

Step by step tutorial from:

Arindra Saktiawan
Instructor of Inixindo Jogja

#Comday – Teknologi yang Mengakselerasi Transformasi Digital

by | Mar 25, 2019

#Comday - Teknologi yang Mengakselerasi Transformasi Digital 9

#Comday – Teknologi yang Mengakselerasi Transformasi Digital

Transformasi digital merupakan topik yang tak ada habisnya dibicarakan walaupun bahasan ini sudah mulai mencuat sejak kemunculan start up teknologi di Indonesia beberapa tahun lalu. Memang saat itu hanya beberapa sektor bisnis yang bersinggungan langsung yang merasakan dampaknya. Akan tetapi, lama kelamaan dampak transformasi digital mulai meluas dan mengubah cara hidup masyarakat Indonesia. Transformasi digital di Indonesia sendiri memang agak lambat bila dibandingkan dengan negara-negara lain di Asia seperti India, Thailand apalagi Cina. Ketertinggalan ini memaksa perusahaan atau organisasi di Indonesia untuk tancap gas dalam melakukan revolusi industri 4.0 ini agar tidak tergerus oleh start up dari luar di sektor lebih luas lagi seperti finansial, pariwisata, dan juga kesehatan.

Sebenarnya, kita tak perlu putus asa melihat transformasi digital yang berjalan secara cepat ini. Transformasi digital disebabkan karena kemajuan teknologi tapi jangan kuatir dulu karena seiring majunya teknologi berarti kemudahan untuk memanfaatkan teknologi juga semakin mudah. Dengan strategi yang jitu dan pemanfaatan teknologi yang tepat, kita harus yakin bahwa transformasi digital dapat kita terapkan pada organisasi atau perusahaan kita. Penasaran bagaimana menyusun strategi dan pemanfaatan teknologi yang tepat untuk akselerasi transformasi digital Anda?

Ikuti Community Day dengan tema “Teknologi yang Mengakselerasi Transformasi Digital” pada hari Kamis tanggal 28 Maret 2019. Dalam acara ini akan dibahas dua poin penting untuk melakukan transformasi digital pada perusahaan atau organisasi, yaitu:

  • Digital Transformation Strategy
  • Digital Technology
    • Progressive Web App (PWA)
    • Internet of Things (IoT)

 

Klik tombol ‘Registrasi’ di atas untuk pendaftaran!

This form does not exist

Biaya

Free (tempat terbatas)

DATE AND TIME

Kamis, 28 MARET 2019
14.00 WIB – Selesai

LOCATION

Eduparx – Inixindo Jogja
Jalan Kenari No 69 Yogyakarta
View Maps

Event Compilation : “Transformasi Digital Untuk PDAM”

by | Mar 22, 2019

Event Compilation : “Transformasi Digital Untuk PDAM”

Pesatnya arus teknologi membuat indonesia memasuki era industri 4.0 ataau yang akrab dikenal sebagai industri digital. Saat ini perusahaan tidak perlu menunggu waktu lama untuk mengambil sebuah keputusan, internet of things dapat membantu ketika seluruh kegiatan yang ada di dalam industri tersebut menggunakan perangkat komputer dan terhubung dengan internet, maka kita dengan mudah mengontrol bisnis dari jarak jauh, bahkan mempersingkat waktu untuk mengambil sebuah keputusan.

Dengan kemajuan teknologj tersebut seluruh kegiatan bisnis dapat terekam selama 24 jam. Informasi tersebut diantaranya dapat menyangkut tentang kinerja karyawan, data pelanggan, data penjualan dalam tren automasi industri 4.0 hal ini dikenal istilah big data. Untuk itu sebuah perusahaan sangat memerlukan transformasi digital agar dapat meningkatkan kinerja dan
memperluas jangkauan bisnisnya.

PDAM sebagai Badan Usaha Milik Daerah juga tak boleh lengah dari arus transformasi digital ini. Jika kita berpikir secara singkat PDAM tidak memiliki kompetitor secara langsung, akan tetapi pelanggan PDAM memiliki pilihan yang dapat mensubtitusi layanan PDAM yaitu air sumur. Oleh karena itu, tantangan yang dihadapi PDAM di era revolusi industri 4.0 ini justru semakin kompleks. Sebagai upaya menjawab tantangan tersebut, Inixindo Jogja sebagai lembaga pengembangan SDM yang aktif melakukan kampanye tentang transformasi digital menyelenggarakan beberapa event untuk mengakselerasi transformasi digital PDAM.

 

Comday “Teknologi yang Mengakselerasi Transformasi Digital”

28 Maret 2019

Event Compilation : "Transformasi Digital Untuk PDAM" 10 Event Compilation : "Transformasi Digital Untuk PDAM" 11

Jika berbicara digitalisasi untuk PDAM tentu kita akan sulit menghayal bahwa air akan tersambung dengan internet. Umar selaku instruktur dalam kegiatan Comday ‘Teknologi yang Mengakselerasi Transformasi Digital’ (28/3) yang banyak dihadiri oleh pihak dari Perusahaan Daerah Air Minum (PDAM) ini  mengatakan “Proses digitalisasi dalam PDAM dapat dilakukan untuk melayani pelanggan, seperti ketika ada kebocoran pelanggan dapat melapor melalui aplikasi yang langsung terhubung dibagian costumer service dan teknisi.”

Umar juga menambahkan bahwa dengan adanya transformasi digital, PDAM juga dapat merekam seluruh kegiatan sambungan pipa dan debit air, sehingga ketika terjadi kebocoran pipa dapat segera diatasi. Kegiatan Comday ini mengundang seluruh PDAM di Provinsi Jawa tengah. Kegiatan ini bertujuan agar PDAM melakukan transformasi digital untuk mengatasi perubahan jaman dan meningkatkan kinerja sesuai dengan tren industri 4.0.

***

 

Transformasi Digital PDAM Sragen

09 April 2019

Event Compilation : "Transformasi Digital Untuk PDAM" 12

 

Pada tanggal 09 April 2019, Andi Yuniantoro selaku direktur PT. Inixindo Widya Iswara Nusantara memberi pengarahan pada kegiatan Digital Transformasi PDAM yang dilaksanakan oleh PDAM Sragen. Dalam pengarahannya, Andi mengatakan bahwa transformasi digital untuk kegiatan PDAM dapat diterapkan mulai dari strategi bisnis, operasional bisnis, teknologi informasi, dan target yang akan dicapai,  yang keseluruhannya merupakan kebutuhan para stakeholder PDAM.

***

#Comday – Pentingnya Digital Transformasi untuk PDAM

by | Mar 20, 2019

#Comday - Pentingnya Digital Transformasi untuk PDAM 13

#Comday – Pentingnya Digital Transformasi untuk PDAM

Jika ditanya apakah hubungan air minum dengan dunia digital yang akhir-akhir ini sedang heboh dibicarakan jawabannya tentu saja tidak ada, setidaknya tidak secara langsung. Air minum tentu saja tidak bisa didigitalisasi. Senyawa yang terdiri dari hidrogen dan oksigen tidak bisa begitu saja diciptakan melalui rentetan angka biner yang mondar-mandir dalam perangkat elektronik. Tapi jika kita mengubah sedikit pertanyaannya menjadi dapatkah digitalisasi dilakukan pada cara pendistribusiannya? Jawabannya tentu saja bisa, tapi jangan berpikiran air minum bisa dikirim melalui jaringan 4G.

Di Indonesia sendiri, jaringan distribusi air minum secara langsung dilakukan oleh Perusahaan Daerah Air Minum (PDAM). Seperti perusahaan yang lain dan sebagai perusahaan yang mengalirkan arus air, PDAM juga harus ikut arus transformasi digital jika tidak mau tenggelam. Dengan bertransformasi secara digital banyak inovasi-inovasi yang dapat diterapkan baik itu ke dalam internal perusahaan untuk meningkatkan efektivitas kinerja dan efisiensi operasional perusahaan. Selain itu inovasi yang lahir dari sebuah transformasi digital juga dapat digunakan untuk meningkatkan layanan terhadap pelanggan.

Seperti apa transformasi digital yang dapat dilakukan oleh PDAM sebagai satu-satunya perusahaan distribusi ‘sumber kehidupan’? Ikuti Community Day dengan tema ‘Pentingnya Transformasi Digital untuk PDAM’ pada hari Kamis tanggal 28 Maret 2019.

Dalam acara ini akan dibahas dua poin penting untuk melakukan transformasi digital oleh PDAM, yaitu:

  • Digital Transformation Strategy
  • Digital Technology
    • Progressive Web App (PWA)
    • Internet of Things (IoT)

Klik tombol ‘Registrasi di atas untuk pendaftaran!

This form does not exist

Biaya

Free (tempat terbatas)

DATE AND TIME

Kamis, 28 MARET 2019
14.00 WIB – Selesai

LOCATION

Eduparx – Inixindo Jogja
Jalan Kenari No 69 Yogyakarta
View Maps

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019

by | Mar 15, 2019

 

Beberapa waktu yang lalu, kami sempat mempos di media sosial tentang tingkat popularitas bahasa pemrograman di tahun 2018 lalu. Dalam pos tersebut, kita dapat melihat bahwa Javascript (yang seharusnya secara resmi disebut ECMAScript) sebagai bahasa pemrograman web mengalami peningkatan, sementara bahasa pemrograman Java yang digunakan dalam pengembangan aplikasi Android justru menurun. Padahal, saat ini hampir semua orang memiliki smartphone di mana Android menguasai sistem operasi perangkat mobile jika dilihat jumlah penggunanya.

Jika kita menilik kembali 5 tahun belakangan ini, perkembangan teknologi web semakin cepat bila dibandingkan dengan tahun-tahun sebelumnya. Framework-framewok pengembangan aplikasi web pun tumbuh cepat apalagi sejak hadirnya node.js di mana Javascript dapat digunakan sebagai bahasa pemrograman back-end. Belum lagi Google perusahaan teknologi yang memang dulunya lahir sebagai aplikasi web menambahkan banyak fitur dalam Chrome agar para pengembang web dapat mendobrak batasan-batasan dalam aplikasi web.

Beberapa tahun yang lalu kita juga mengenal istilah responsive design yang sering dibawa-bawa oleh pengembang web dalam menawarkan jasanya. Responsive design waktu itu memang suatu yang sebaiknya dimiliki oleh website. Sekarang? Website bisa dikatakan ketinggalan jaman, jadul, atau bahkan bisa disangka artefak jika desainnya tidak responsif. Di tahun 2019 tren teknologi web sudah beralih ke teknologi yang lebih canggih dari sekedar desain yang responsif. Berikut ini adalah tren teknologi web yang bisa Anda bangga-banggakan dalam portfolio Anda sebagai pengembang web.

 

Progressive Web App

Progressive Web App mungkin adalah teknologi yang paling berpengaruh dalam pengembangan aplikasi web. Secara singkat, Progressive Web App (PWA) adalah aplikasi web yang memiliki experience layaknya aplikasi native baik mobile atau desktop. Experience ini dapat berupa push notification, dapat dibuka secara offline, serta akses terhadap hardware yang ada di device seperti GPS, kamera, dan sensor-sensor yang lain.

Teknologi ini diinisiasi oleh Google. Seperti yang kita ketahui bahwa selain Android, Google juga memiliki operating system yang dipakai di laptop dengan harga terjangkau yaitu Chrome OS. Pada dasarnya Chrome OS ini adalah sebuah browser yang dijadikan operating system dengan kernel Linux di dalamnya. Jadi agar environment Chrome OS ini tidak miskin aplikasi Google berusaha mendorong para web developer untuk menjadikan PWA sebagai standar aplikasi web. Selain itu, kabarnya Google juga sedang mengembangkan Fuchsia OS (sebuah operating system mirip Chrome OS tapi untuk perangkat mobile) yang disiapkan untuk menggantikan Android.

 

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 14

 

Contoh beberapa aplikasi terkenal yang sudah menggunakan teknologi PWA antara lain:

  • Alibaba
  • Twitter
  • The Washington Post

Anda bisa mengikuti Pelatihan Progressive Web App (PWA) dari Inixindo Jogja jika Anda ingin bisa mengembangkan web dengan teknologi ini.

Accelerated Mobile Pages

Siapa yang tak kenal Google News? Aplikasi milik Google yang tersedia di Android dan iOS ini memiliki fungsi membagikan berita ke pengguna sesuai dengan minat dari penggunanya. Konten yang dibagikan oleh Google News tersebut merupakan konten yang telah mendukung format Accelerated Mobile Pages (AMP). Accelerated Mobile Pages (AMP) adalah sebuah framework pengembangan web minimalis. Hanya HTML dan CSS saja dalam halaman web AMP tidak ada Javascript.

Misi dari AMP ini adalah me-load halaman web dalam waktu kurang dari dua detik. Oleh karena itu, penggunaan AMP cocok untuk halaman berita dan blog di mana konten artikel atau foto menjadi elemen utama. Selain itu, keuntungan sebuah halaman web yang mendukung format AMP adalah SERP. Ya! AMP ini sangat berpengaruh terhadap ranking halaman web di Google Search. Bukan rahasia lagi jika algoritma web crawler yang dimiliki Google sekarang lebih mengutamakan performa web sebuah eksternal link.

Anda bisa melihat dokumentasi dari AMP Project di sini.

 

Voice Search Optimization

Voice search memang fitur yang masih jarang dimanfaatkan oleh orang Indonesia. Home speaker pintar dari Amazon, Apple, atau Google bukan barang yang dicari. Memang fitur Google Assistant atau SIRI terpasang secara default di perangkat Android atau iPhone tapi karena terkendala oleh masalah bahasa masih jarang juga orang Indonesia yang memakai fitur ini. Walaupun begitu, seiring dengan berjalannya waktu, AI dari masing-masing voice assistant tentunya akan semakin pintar karena terus akan mempelajari bahasa selain Bahasa Inggris.

Voice search optimization merupakan metode optimasi halaman web agar pengguna dapat melakukan interaksi dengan halaman web tersebut melalui suara. Sebenarnya Voice Search Optimization memiliki tujuan yang mulia yaitu agar sebuah web dapat menjangkau siapa saja termasuk tuna netra. Dalam voice search API terdapat dua komponen yaitu speech recognition dan speech synthesis. Untuk melihat dokumentasinya Anda bisa klik di sini.

 

API First Development

Konektivitas antar aplikasi tentunya sudah menjadi suatu hal yang semestinya di jaman di mana hampir semua orang menggunakan aplikasi dalam aktivitas sehari-hari. Integrasi antar dua aplikasi atau lebih ini biasanya sering dimanfaatkan oleh website e-commerce dengan melakukan integrasi pembayaran, pengiriman, lokasi, ataupun kurs mata uang. Semuanya memanfaatkan teknologi yang disebut application programming interfaces (API).

API memang bukan teknologi baru yang baru di sini adalah development yang berbasis API. Apa bedanya? Biasanya pengembangan aplikasi atau web tidak terfokus pada API. Pengembangan API sering kali dianggap sebagai proyek sampingan yang tidak memiliki proses desain, pengembangan, dan testing yang baik.

Pada development tradisional proses yang biasanya terjadi adalah sebagai berikut:

  1. Tim R&D menciptakan desain aplikasi
  2. Tim back-end developers mengerjakan prototype sementara tim yang lain seperti QA dan front end menunggu.
  3. Setelah prototype jadi tim QA dan front-end mendapatkan akses dan langsung bekerja
  4. Jika terdapat bugs, penambahan fitur, atau pun improvement, siklus di atas akan berulang.

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 15

Sedangkan pada API first development, suatu tim tidak harus menunggu tim yang lain menyelesaikan sebuah pekerjaannya. API first development menggunakan API mocking (baca di sini untuk mengetahui apa itu API mocking) sehingga QA, back-end, dan front-end bisa bekerja secara simultan.

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 16

***

Itulah tadi teknologi web yang akan menjadi tren di 2019. Bagi kalian yang ingin membuat project web app tidak ada salahnya untuk belajar lebih dalam mengenai teknologi yang sudah disebutkan tadi.