MODUL PERKULIAHAN MOBILE PROGRAMMING

MODUL PERKULIAHANMOBILEPROGRAMMINGDasar Membangun Aplikasi Mobile DenganMenggunakan React Native & FirebaseDisusun oleh:Meriska Defriani, S.Komp, M.Kom – 0416129004TEKNIK INFORMATIKASTT WASTUKANCANA PURWAKARTA20201

DAFTAR ISIOVERVIEW . 3Mengapa Harus Mempelajari Pemrograman Mobile Android? . 3Bahasa Pemrograman Untuk Pemrograman Mobile . 3REACT NATIVE . 7React Native? . 7Instalasi dan Menjalankan React Native . 9EXPO SNACK . 13GET STARTED! . 18Struktur Kode . 18Komponen . 18Prop . 19State. 19Kapan saat yang tepat untuk menggunakan props atau state? . 21Latihan 1 . 21STYLING . 22View . 22Text . 22Styling . 22HEIGHT AND WIDTH . 24Dimensi Flex . 24LAYOUTING . 26Flex Direction . 26Latihan 2 . 29TUGAS 1 . 30MAKE SOMETHING INTERESTING . 32Image . 32Text Input . 32Alert . 34Touchable Oppacity . 34Latihan 3 . 351

Tugas 2 . 36GO FURTHER . 37Scroll View. 37List View . 37Switch & Picker . 38NAVIGATION . 41Navigation Using Button . 41Navigation Using Tab . 44FIREBASE. 47READ, UPDATE, DELETE IN FIREBASE VIA REACT NATIVE . 53BUILD AN APK FILE . 64MAKE YOUR OWN PROJECT . 652

OVERVIEWMengapa Harus Mempelajari Pemrograman Mobile Android?Seiring berkembangnya sistem operasi Android, jumlah pengguna perangkat mobileyang menggunakan sistem operasi Andoid pun meningkat. Hal tersebut berpengaruhpada varian dan jumlah aplikasi yang dapat ditawarkan oleh perangkat mobilebersistem operasi android kepada penggunanya. Semakin banyak penggunanya,semakin banyak varian dan jumlah aplikasi yang dapat ditawarkan. Hal tersebutmenandakan bahwa peluang untuk bekerja menjadi android developer ataupunmembangun start up sendiri, menjadi lebih besar.Seseorang yang sebelumnya sudah memiliki dasar kemampuan pemrograman yangkuat tidak akan kesulitan untuk mempelajari pemrograman mobile. Pada dasarnyaalur berpikir untuk menyelesaikan suatu permasalahan pemrograman adalah sama,yang membedakan adalah cara penulisan sintaks dari bahasa pemrogramannya.Untuk mempelajari pemrograman mobile android, pengguna tidak perlu mengeluarkanbanyak modal seperti membeli lisensi karena tools, platforms, dan frameworks yangdapat digunakan untuk membangun aplikasi mobile android sangatlah banyak dantidak berbayar.Bahasa Pemrograman Untuk Pemrograman MobileAda banyak bahasa pemrograman yang dapat digunakan untuk membangun aplikasimobile. Berikut ini adalah berapa contoh bahasa pemrograman tersebut:1. Androida. JavaMenurut TIOBE Index pada bulan Juni 2017, Java merupakan bahasapemrograman paling populer. Java merupakan pilihan terbaik jika inginmembuat aplikasi Android. Java memiliki komunitas yang sangat besar, baik diIndonesia maupun di dunia. Dengan adanya komunitas yang besar tersebut,kamu aplikasi tidak akan kesulitan untuk mencari jawaban saat menemukankesulitan dalam kamuan aplikasi android.3

b. KotlinKotlin merupakan bahasa yang didesain dan dikembangkan oleh JetBrains,perusahaan asal Ceko yang mengembangkan berbagai IDE populer sepertiIntelliJ IDEA, PyCharm, RubyMine, dan PhpStorm. Bahkan Android Studio yangdipakai setiap programmer Android professional merupakan IDE yangdikembangkan di atas IDEA. Pada bulan Mei 2017 di event Google I/O 2017, timAndroid Google secara resmi mengumumkan dukungan penuh untuk bahasapemrograman Kotlin untuk membuat aplikasi Android.Kotlin dikembangkan untuk mengatasi kekurangan-kekurangan yang dimilikioleh Java. Selain itu, salah satu fitur paling penting dari Kotlin adalah bahasa inidapat dipakai bersamaan dengan Java dalam satu aplikasi yang sama.2. iOSa. SwiftJika ingin mengembangkan aplikasi untuk iOS, sistem operasi untuk iPhone daniPad, maka Swift merupakan opsi yang terbaik untuk dipilih. Bahasa inidiperkenalkan pada tahun 2014 dan dirilis source code-nya pada tahun 2015.Swift sangat populer diantara developer iOS terutama untuk startup.Apple telah menambahkan fitur-fitur yang lebih baik ke bahasa pemrogramanini, seperti sintaks yang sederhana dan pemberitahuan mengenai penyebabkesalahan (error) yang terjadi.b. Objective-CObjective-C merupakan bahasa yang dipakai untuk iOS sebelum adanya bahasapemrograman Swift. Meski Swift sudah hampir mengambil alih sebagai bahasautama pemrogramaan iOS, namun masih banyak proyek iOS yang bergantungpada kode-kode Objective-C. Oleh karena itu, transisi dari Objective-C ke Swiftakan berlangsung agak lambat dan mungkin kamu akan butuh kedua bahasauntuk beberapa proyek aplikasi.3. Cross Platforma. JavaScriptJavaScript merupakan bahasa pemrograman yang sangat populer dikalanganweb developer dan juga menjadi salah satu bahasa yang dapat dipakai untukmembuat aplikasi mobile. Framework JavaScript yang paling populer untukmembuat aplikasi mobile adalah Ionic 2 dan React Native. Dengan4

tmempublikasikan aplikasinya untuk dapat dijalankan di iOS dan Android darisatu sumber yang sama.b. TypeScriptTypeScript adalah superset dari JavaScript yang menawarkan keamanan lebihlewat opsi static typing. Bahasa ini memberikan dukungan yang lebih baikuntuk menulis aplikasi berskala besar. TypeScript memungkinkan developermenulis aplikasi mobile cross platform menggunakan frameowrk sepertiNativeScript.c. C#C# adalah bahasa pemrograman untuk Windows Mobile. Sintaksnya sangatmirip dengan C dan Java. Microsoft, kamunya, mengadopsi beberapa fiturJava untuk menyederhanakan arsitektur C# sambil menjaga desain tetap miripdengan C . C# juga memiliki komunitas yang cukup besar dan aktif padamasanya.d. CSebagai salah satu bahasa paling populer menurut indeks TIOBE, sama sepertiJava, bahasa C memiliki komunitas developer yang berpengalaman. Bahasa Cdapat dipakai untuk membuat aplikasi mobile dengan Android NDK (NativeDevelopment Kit).e. C Kamu yang familiar dengan bahasa pemrograman C, maka besar kemungkinanakan suka menulis dan membaca kode C . C adalah kamuan dari bahasa Cyang menambahkan fitur high-level dan dukungan untuk pemrogramanberorientasi objek. C juga menjadi bahasa favorit developer Android NDKjuga bahasa yang dipakai untuk mengembangkan aplikasi Tizen juga WindowsMobile.f. PythonPython adalah bahasa pemrograman yang populer karena mudah dipelajari danjuga memungkinkan untuk membangun aplikasi mobile. Jika kamu sudahterbiasa menulis kode Python, framework Kivy menjadi pilihan untukmengembangkan aplikasi mobile.5

g. RubyBahasa pemrograman Ruby juga bisa dipakai untuk membangun aplikasimobile. RubyMotion merupakan framework dari bahasa pemrograman Rubyyang sangat baik untuk membuat aplikasi mobile yang native dan crossplatform.(Sumber: www.codepolitan.com)6

REACT NATIVEReact Native?React Native adalah sebuah framework javascript yang dikembang kan oleh facebook.React Native memungkinkan kamu untuk membuat aplikasi mobile android atau iosmenggunakan teknologi web. Banyak framework javascript yang bisa digunakan untukmembuat aplikasi android atau ios, akan tetapi React Native ini berbeda denganframework-framework javascript yang lainya. React Native tidak membuat aplikasihybrid dimana aplikasi berjalan di javascript runtime tetapi membuat real aplikasidimana untuk android akan di compile di java dan untuk IOS akan di compile diObjective-C.Dalam React Native terdapat beberapa kompenen yang membuat React Native dapatdigunakan untuk membuat aplikasi mobile cross-platform. Berikut ini adalah beberapafitur dari React Native:1. ReactJSSebelum React Native dikeluarkan oleh facebook, framework yang pertama dikenaladalah ReactJS, yaitu framework javascript yang bisa digunakan untuk membuataplikasi web dengan java script.2. NativeAndroid dan IOS memiliki arsitektur yang berbeda, fitur native inilah yang berfungsiuntuk mengatur komponen dari masing - masing platform.3. PlatformUntuk saat ini platform yang telah terintegrasi dengan react native adalah Androiddan IOS.Berikut ini adalah kelebihan dari penggunaan React Native:1. JavaSriptJavaScript adalah salah satu bahasa pemrogramman yang paling banyak digunakanoleh developer di dunia. Hal tersebut menandakan bahwa kamu akan sangatmudah untuk mempelajari JavaScript karna komunitas yang besar dan kemudahanmencari tempat bertanya ketika mengalami kebingunan saat membangun aplikasi.Namun jika kamu sudah berpengalaman dengan web development tentunya sudah7

akrab dengan javascript dan sudah memiliki dasar untuk mulai membuat aplikasidengan react native.2. Code SharingSebagian codebase yang ditulis dapat digunakan untuk platform yang berbeda,yaitu android dan ios.3. CommunityReact Native memiliki cukup banyak peminat dari kalangan developer di dunia.Berikut ini adalah screenshoot dari repository react native:Selain memiliki kelebihan, React Native sendiri juga memiliki kelemahan. Berikut iniadalah beberapa kelemahan dari react native:1. ComponentsUntuk mengembangkan aplikasi mobile dengan react native, kamu harus banyakmemahami komponen dari masing-masing platform. Android dan iOS memilikiarsitektur yang berbeda sehingga komponen dari kedua platform tersebut jugaberbeda. Namun, ketersediaan komponen untuk kedua platform tersebut masihterbatas sehingga jika kamu ingin menggunakan komponen yang belum tersedia makakamu harus membuat komponen itu sendiri.2. JavaScriptReact native menggynakan bahasa pemrograman java script, namun perkembanganjava script tidak begitu cepat sehingga perubahan atau penyesuaian tidak dapatdilakukan dengan cepat.3. FrameworkFramework React Native berubah dan berkembang sangat cepat sehingga ketika kamumemperbarui react native ke versi yang baru terkadang terdapat beberapa fungsi dariversi lama yang tidak dapat digunakan.8

4. PlatformUntuk kamu yang ingin mengembangkan react native untuk ios maka akan lebih baikdan maksimal jika menggunakan macbook karena ekosistem dari ios seluruhnya harusmenggunakan produk dari Apple. Sedangkan untuk android, kamu membutuhkan javadan gradle dimana dua hal ini yang menjadi issue dikalangan developer karenakebutuhan spesifikasi perangkat yang cukup tinggi, yaitu perangkat memori minimal4gb untuk bisa bekerja maksimal. Jadi, salah satu tantangan di kamuan aplikasi mobileialah kebutuhan perangkat yang memadai.(Sumber: www.codepolitan.com)Instalasi dan Menjalankan React NativeKamu dapat membangun aplikasi mobile dengan menggunakan react native denganbeberapa cara. Berikut ini adalah cara instalasi dari react native:1. Expo CLICara yang pertama adalah dengan menggunakan Expo CLI. Sebelum melakukaninstalasi Expo CLI, kamu harus melakukan instalasi NodeJS (minimal Node 10 LTS).Setelah itu, kamu dapat melakukan instalasi Expo CLI melalui npm dengan perintah dibawah ini (instalasi melalui command prompt):npm install –g expo-cliPastikan koneksi internet stabil sehingga proses instalasi dapat terselesaikan denganbaik. Harap bersabar karena proses instalasi ini berlangsung cukup lama (tergantungkecepatan internet yang digunakan). Gambar berikut ini merupakan contoh ketikaexpo cli telah berhasil diinstalkan:9

Jika proses instalasi telah selesai, maka untuk menjalankan react native kamu perlumembuat projectnya terlebih dahulu. Pembuatan project dapat dilakukan denganmenggunakan perintah di bawah ini:expo init myprojectProject yang dibuat bernama myproject dan akan terbentuk sebuah folder dengannama yang sama, tempat dimana seluruh library dan file yang berkaitan denganproject akan disimpan. Pada saat pembuatan project, kamu akan diminta untukmemilih template dari project yang akan dibuat. Terdapat dua pilihan template, yaitublank dan tabs. Jika memilih template blank, maka project yang dibuat akanmenjalankan aplikasi yang kosong. Sedangkan jika memilih template tabs, makaproject akan menjalankan aplikasi yang sudah tersedia tabs sebagai navigasi dalamaplikasi.Setelah berhasil membuat project, pengguna dapat mencoba untuk menjalankanproject-nya dengan menggunakan perintah di bawah ini. Namun jangan lupa untukmasuk terlebih dahulu ke direktori project.cd myprojectnpm start #atau juga dapat menggunakan perintah expo startJika proses running telah berhasil maka pada workspace command prompt akanmuncul QR Code seperti di bawah ini:10