Galih Laras Prakoso: Tutorial
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

#1 - Tutorial logika dasar pemrograman menggunakan Scratch

tutorial-menggunakan-aplikasi-scratch-0
Selamat datang di bagian pertama dari rangkaian cara menjadi programmer pemula hingga profesional. Saya akan berasumsi bahwa kalian semua yang mengikuti tutorial ini adalah orang yang memang baru pertama kali masuk ke dalam dunia pemrograman. Karena kita akan benar-benar memulai semuanya dari nol.

Pada bagian pertama dari rangkaian tutorial ini, saya akan mengajak kalian untuk memahami logika dasar yang nantinya akan banyak membantu kita untuk berfikir kreatif layaknya programmer. Bagaimana kita dapat membuat rangkaian algoritma sederhana untuk menciptakan sesuatu yang kita inginkan.

Scratch - Imagine, Program and Share.

Scratch adalah sebuah aplikasi yang dikembangkan oleh Lifelong Kindergarten Group dari the MIT Media Lab. Dengan aplikasi ini kita bisa menciptakan sebuah cerita interaktif, animasi dan bahkan game. Lalu aplikasi ini juga merupakan platform yang memungkinkan kita untuk saling berbagi karya dengan para pengguna lain.

Scratch memang terlihat seperti aplikasi yang di desain untuk anak-anak. Tapi sebenarnya, aplikasi ini juga bisa kita digunakan untuk orang dewasa yang ingin belajar tentang pemrograman. Aplikasi ini sangatlah sederhana dan sangat mudah untuk dipelajari. Scratch mengajarkan kita untuk dapat berfikir kreatif dan sistematis dan melatih kita untuk dapat bekerja sama dengan orang lain.

Mulai Menggunakan Aplikasi Scratch

Sebelumnya, saya sarankan anda untuk menggunakan komputer untuk menggunakan Scratch. Karena akan lebih mudah karena tampilannya antarmukanya akan lebih luas.
  1. 1. Langsung saja kunjungi aplikasi web nya di alamat ini : https://scratch.mit.edu/ .
  2. 2. Klik 'Join Scratch' untuk mendaftar. Jika sudah pernah mendaftar silahkan klik 'Sign in'.
  3. 3. Lalu kita bisa melihat tampilan utama dari aplikasi Scratch yang akan terlihat seperti ini :
    logika-dasar-aplikasi-scratch-1
    Pada tampilan halaman utama scratch, kita bisa melihat proyek-proyek yang dibuat oleh pengguna-pengguna lain. Kalian bisa melihat-lihat terlebih dahulu.
  4. 4. Untuk mulai membuat proyek Scratch, kalian bisa melakukannya dengan mengklik tombol 'Create' yang pada menu di atas.
  5. 5. Setelah itu, anda akan dibawa ke menu editor yang akan terlihat seperti ini :
    logika-dasar-aplikasi-scratch-2

    Pada gambar di atas kita bisa melihat tampilan yang begitu sederhana dari aplikasi Scratch. Di sebelah kiri adalah 'Tools' apa saja yang bisa kita gunakan, di bagian tengah adalah tempat utama kita untuk menyusun logika yang akan menggerakkan proyek kita, di sebelah kanan adalah preview sekaligus sprite editor yang dapat kita gunakan untuk menambah sprite atau backdrop.

Proyek Pertama Anda Menggunakan Scratch

Yap, setelah anda mengikuti langkah-langkah bagaimana untuk mulai menggunakan aplikasi Scratch. Selanjutnya kita akan membuat sesuatu yang sangat sederhana menggunakan Scratch yang nantinya pengetahuan dasar ini dapat anda gunakan untuk melanjutkan pembelajaran mandiri dengan membuat proyek - proyek yang lebih kompleks menggunakan aplikasi Scratch. (Langkah - langkah ini akan lebih mudah diikuti jika anda melihat langsung video yang ada pada tutorial ini).
  1. 1. Pertama, fokus pada editor pada bagian kiri yang saya sebut dengan 'Tools'. Terdapat tiga bagian yang dipisah menggunakan tab pada menu ini yaitu Code, Costumes dan Sounds.
    - Code. adalah menu yang digunakan untuk memodifikasi logika pada proyek yang kita buat. Dengan tools inilah kita dapat menggerakkan 'sprite' / karakter pada proyek kita, menambahkan 'events' jika pengguna aplikasi yang kita buat menekan tombol atau menekan keyboard, atau memodifikasi tampilan dari karakter yang ada pada proyek kita jika ada suatu kondisi yang terpenuhi.
    - Costumes. Pada menu ini kita dapat mengubah tampilan dari karakter yang ada pada proyek kita.
    - Sounds. Pada menu ini kita dapat mengedit suara yang ada pada proyek kita.
  2. 2. Pada tutorial ini saya hanya akan fokus pada tools yang ada pada tab 'Code'. Karena disinilah terletak logika-logika yang akan membantu kita untuk semakin bisa berfikir seperti seorang programmer.
  3. 3. Langsung saja klik menu Events yang ada pada tab 'Code'.
  4. 4. Masukkan event 'When [Logo bendera hijau] clicked' ke proyek kita dengan cara melakukan drag & drop ke lembar kerja utama kita. Jika berhasil, maka tampilan lembar kerja utama akan terlihat seperti ini :
    logika-dasar-aplikasi-scratch-3
  5. 5. Setelah menambahkan event yang akan men-trigger aksi sesuai kondisi yang kita inginkan, anda bisa menambahkan aksi apa yang akan terjadi jika kondisi tersebut terpenuhi. Mari kita mulai dengan menambahkan 'Looks'. Klik menu 'Looks' dan pilih 'Say hello for 2 seconds' (Drag & drop). Jika berhasil maka tampilannya akan terlihat seperti ini :
    logika-dasar-aplikasi-scratch-4
  6. 6. Setelah berhasil melakukan langkah di atas, anda bisa langsung mencoba menjalankan Proyek anda dengan mengklik logo bendera yang ada pada bagian kanan 'Editor'. Jika berhasil, maka gambar kucing yang ada pada menu editor akan mengucapkan kata 'Hello!' yang terlihat seperti gambar di bawah ini :
    logika-dasar-aplikasi-scratch-5
Yap, dari tutorial di atas, anda bisa mulai menjelajahi 'Tools' lain yang memungkinkan anda untuk membuat sesuatu yang lebih kreatif. Anda bisa membuat game sederhana dengan menambahkan fungsi kontrol. Untuk mempelajari lebih dalam tentang aplikasi Scratch. Silahkan melihat video yang ada pada tutorial ini.

Tutorial Android Dasar - Bahasa Indonesia - #3 Explore

Sesuai dengan judul bagian tutorial kali ini. Pada bagian ini kita akan sama-sama menjelajahi project yang sudah berhasil kita buat di tutorial sebelumnya. Jika kalian dapat mengikuti tutorial ini dengan baik, kalian akan semakin mudah dan jauh dari kebingungan ketika lanjut untuk lebih dalam mempelajari Android.

Struktur Project
Pertama-tama kita kan memahami struktur project android. Apa saja yang ada di dalamnya, dan apa fungsinya. Yuk, mari kita lihat satu per satu :


Manifest
Yang pertama adalah folder manifests yang di dalamnya terdapat file AndroidManifest.xml. Sebelum sistem Android dapat memulai komponen dari aplikasi, sistem harus terlebih dahulu memahami bahwa komponen tersebut ada, nah, sistem Android tahu sebuah komponen ada atau tidak dengan membaca file AndroidManifest.xml ini. Aplikasi harus mendeklarasikan semua komponennya dalam file ini yang mana harus diletakkan di root dari direktori aplikasi. Jika kalian buka filenya, maka akan tampak seperti ini :


Mari kita pelajari setiap barisnya. Yang pertama :

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

Android manifest menggunakan bahasa XML dan harus selalu menggunakan Android namespace. package menunjukkan nama unik dari aplikasi. Jangan mengganti ini ketika aplikasinya sudah di publikasikan di PlayStore.

<application
...
>
</application>

Kode di atas adalah tag dimana kita mendefinisikan pengaturan untuk keseluruhan aplikasi.

android:allowBackup="true"

Kode di atas berarti kita mengaktifkan backup data otomatis dan data akan di restore sesuai dengan kebutuhan. Terkadang pengguna sudah meluangkan waktu untuk melakukan pengaturan pada aplikasi. Berpindah ke perangkat yang baru tentu akan kehilanggan semua pengaturannya. Dengan mengaktifkan backup otomatis maka hampir keseluruhan data akan di backup dan developer tidak perlu memusingkan tentang hal ini.

android:icon="@mipmap/ic_launcher"

Kode diatas berfungsi untuk mendefinisikan icon aplikasi. Icon akan tampil di perangkat pengguna.

android:label="@string/app_name"

Kode diatas berfungsi untuk mengatur nama aplikasi yang tampil di perangkat pengguna. Kode tersebut terlihat tidak menuliskan nama dalam bentuk String karena pada kode tersebut, app_name diambil dari String resource. Nanti kita akan pelajari itu.

android:theme="@style/AppTheme"

Kode di atas berfungsi untuk mendefinisikan tema default untuk keseluruhan aplikasi. Tema tersebut akan mempengaruhi tampilan dari elemen-elemen UI (User Interface).

MainActivity.java & activity_main.xml
File ini adalah tempat untuk kita dapat menulis view logic. Memanipulasi tampilan, mengubah tampilan, atau meng-handle interaksi dari pengguna. Activity ini dibuat oleh Android Studio ketika kita membuat project tadi. Mungkin kita akan memiliki banyak Activity yang bisa kita buat sendiri.

File ini memiliki pasangan yaitu activity_main.xml, disini kita dapat mengatur tampilan / layout. Dengan Android Studio, kita dapat menggunakan fitur Drag and Drop maupun mengetikkan kode XML secara manual.

Di dalam folder res tidak hanya terdapat layout dari activity atau fragment, tetapi juga terdapat beberapa file yang berkaitan dengan tampilan misalnya warna, tema dan ukuran.

Untuk gambar dan vector assets, biasanya akan diletakkan dalam folder drawable dan folder mipmap.

Proses Build
APK adalah ekstensi / format dari sebuah file aplikasi android yang digunakan untuk mendistribusi atau menginstal aplikasi android. Android Studio menggunakan Gradle sebagai fondasi dari build system.

build.gradle(Project: apptitle)

File ini berada di root folder dari project. File ini berfungsi untuk mendefinisikan konfigurasi build yang diterapkan di semua module dari keseluruhan project. 

build.gradle(Module:app)

Android Studio juga membuat file build.gradle lain yang biasa disebut app level gradle. Kita dapat mengedit file ini untuk mengatur banyak hal. Misalnya minSdkVersion, targetSdkVersion, versi aplikasi, untuk mendeklarasikan dependencies dsb.

Ya, kira-kira begitulah sekilas tentang beberapa file penting yang perlu kita ketahui fungsinya. Selanjutnya kita akan belajar lebih dalam lagi untuk membuat aplikasi Android. Kalau sudah siap, dan tidak ada yang ditanyakan, yuk lanjut ke tutorial selanjutnya! 👇😁

Tutorial Android Dasar - Bahasa Indonesia - #2 Jalankan Aplikasi Pertamamu

tutorial-android-dasar-bahasa-indonesia
Setelah kalian berhasil mendownload dan menginstal Android Studio. Buka aplikasinya dan pilih "Start a new Android Studio project". Kemudian akan ada kotak dialog yang muncul untuk membuat project Android Studio. Akan ada beberapa input yang harus diisi. Kamu bisa mengisinya seperti dibawah ini,  Untuk nama aplikasi kali ini kita sepakat untuk membuatnya sama yaitu TutorialAndroidDasar, untuk Company Domain kalian bisa isi dengan menggunakan nama kalian, dan lokasi project juga kalian bisa letakkan di mana saja di komputer kalian :

tutorial-android-dasar-2-1

Untuk pilihan Include C++ Support dan Include Kotlin Support tidak usah dicentang dan setelah itu klik tombol Next. Setelah itu, akan ada dialog untuk memilih form factors dan minimum SDK. Pilih Phone and Tablet dan pilih API 21 ( Android 5.0 ) Lolipop. Dengan begitu kita menargetkan aplikasi kita agar dapat diinstall oleh 85% pengguna Android.

tutorial-android-dasar-2-2

Setelah itu akan muncul dialog lagi untuk menambahkan Activity pada aplikasi yang barusan kita buat. Pada dialog ini, silahkan pilih Empty Activity. Dengan begitu Android Studio akan menambahkan satu Activity kosong ke dalam aplikasi kita. Setelah itu klik Next, akan muncul pilihan untuk menentukan nama Activity dan nama Layout. Biarkan saja namanya seperti itu, tidak usah diganti dan kemudian klik Finish.

tutorial-android-dasar-2-3

Setelah itu Android Studio akan menyiapkan project. Tunggu hingga prosesnya selesai. Jika prosesnya sudah selesai.Struktur folder dari project yang kita buat akan terlihat seperti ini :

tutorial-android-dasar-2-4

Jika sudah betul, dan tidak terjadi Error. Klik tombol Play berwarna hijau untuk menjalankan aplikasi. Colokkan smartphone Android kalian dengan kabel USB. Pastikan kalian sudah berhasil menyalakan USB Debugging smartphone kalian masing-masing. Jika USB Debugging sudah menyala dan kalian sudah mencolokkan smartphone kalian menggunakan kabel USB. Tentunya Android Studio akan berhasil mendeteksi perangkat kalian seperti ini :

tutorial-android-dasar-2-5

Pilih smarphone kalian kemudian klik tombol Ok. Tunggu beberapa saat hingga aplikasi berhasil dijalankan di smartphone kalian. Untuk kalian yang mungkin males ribet dan memiliki laptop / komputer dengan spesifikasi yang powerful. Kalian bisa menggunak emulator dengan cara mengklik tombol Create New Virtual Device untuk membuat Virtual Device.

Catatan : Beberapa smartphone biasanya memerlukan persetujuan untuk menginstall aplikasi Android. Jadi pantengin smartphone kalian siapa tahu ada pop up yang menanyakan izin penginstallan aplikasi. Jika berhasil, maka tampilan aplikasi harusnya seperti ini :

tutorial-android-dasar-2-6

Selamat kamu telah berhasil menjalankan aplikasi Android pertamamu. Ini membuktikan bahwa kamu bisa lanjut ke tutorial selanjutnya! Gaskeun! 😁👇
Tutorial Android Dasar - Bahasa Indonesia - #3 Explore

Tutorial Android Dasar - Bahasa Indonesia - #1 Apa itu Android?

tutorial-android-dasar-bahasa-indonesia-1-cover
Hallo teman-teman, selamat datang di blogku buat kalian yang baru pertama kali mengunjungi blogku. Kali ini aku akan berbagi ilmu tentang Android. Karena ini baru pertama kali, jadi aku akan berbagi tentang fundamental dari Android. Jadi, tutorial ini sangat cocok buat kalian yang benar-benar baru pertama kali mengenal Android Development.

Apa itu Android?

Android adalah sebuah sistem operasi yang dikembangkan oleh Google untuk smartphone dan beberapa perangkat lain seperti tablet, televisi, smartwatch dsb. Android dapat berjalan di banyak perangkat dengan diproduksi oleh berbagai produsen smartphone. Android memiliki SDK ( Software Development Kit ) untuk menulis native code dan assembling software module untuk membuat aplikasi yang akan digunakan oleh pengguna Android. Google juga menyediakan marketplace untuk mendistribusikan aplikasi yaitu PlayStore. Jadi, dapat kita pahami bahwa Android merepresentasikan sebuah ekosistem untuk aplikasi mobile.

Kenapa kita mengembangkan aplikasi Android?
Hey, kita semua tahu bahwa Android adalah platform yang paling banyak digunakan di seluruh dunia. Android digunakan di lebih dari 190 negara di dunia. Setiap harinya jutaan pengguna menggunakan Android untuk menunjang produktivitas, bermain game, berinteraksi secara digital melalui sosial media dll.

Selain itu, android sangat mudah dikembangkan. Karena dukungan dari Google yang luar biasa, mulai dari menyediakan IDE yang sangat luar biasa yaitu Android Studio, hingga memberikan akses kepada para developer ke dokumentasi yang begitu lengkap, memungkinkan para developer untuk dapat dengan mudah mempelajari dan menuangkan ide mereka ke dalam bentuk Aplikasi Android.

Arsitektur Sistem Operasi Android
Sistem Operasi Android berdiri di atas Linux Kernel yang ada di layer paling bawah yang bekerja sebagai pondasi dari Sistem Operasi Android. Berikut adalah arsitektur dari aplikasi Android.
tutorial-android-dasar-bahasa-indonesia-1
https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf

Untuk lebih jelasnya lagi, jika kamu tertarik untuk mempelajarinya lebih dalam kamu bisa mengunjungi link yang ada pada caption gambar di atas.

Install Android Studio
Nah, sebelum kita mulai tutorial ini, ada beberapa hal yang harus dipersiapkan. Yang pertama, pastikan kalian sudah menginstall Android Studio. Kalau belum, kalian bisa download Android Studio sesuai dengan sistem operasi kalian masing-masing. Download di SINI.

Yang kedua, jika spesifikasi laptop kalian tidak terlalu powerful, aku sarankan untuk tidak menggunakan emulator pada Android Studio. Karena menurutku berat banget. Aku sarankan kalian untuk menggunakan Smartphone Android kalian saja. Dan pastikan kalian sudah menyalakan opsi USB Debugging pada smartphone kalian. Gimana caranya? Silahkan Googling dengan keyword : "Cara menyalakan USB Debugging [Merek smartphone]".

Jika sudah siap semua. Berarti kamu siap untuk lanjut ke tutorial berikutnya. Di tutorial berikutnya kita akan belajar menjalankan aplikasi Android pertama kita. Yuk, jangan lama-lama langsung gas aja ke tutorial selanjutnya! 😀👇
Tutorial Android Dasar - Bahasa Indonesia - #2 Jalankan Aplikasi Pertamamu

Tutorial React Native Dasar - Bahasa Indonesia - #10 Build

tutorial-react-native-indonesia-10-build-cover

Sampailah kita pada bagian paling terakhir dari rangkaian Tutorial React Native Dasar - Bahasa Indonesia yang aku tulis. Pada bagian kali ini aku akan menjelaskan bagaimana melakukan build. Kalau Android jadi .apk, sedangkan IOS jadi .ipa sehingga aplikasinya bisa diinstal layaknya aplikasi native. Wow! keren bukan 😁

Konfigurasi app.json 
Untuk melakukan build menjadi aplikasi android. Sebelumnya kita perlu menambahkan konfigurasi pada file app.json. Kita perlu menambahkan package name untuk Android  dan bundleIdentifier untuk IOS. Langsung saja buka file app.json dan tambahkan kode seperti dibawah ini :


Sehingga file app.json akan terlihat seperti ini :

tutorial-react-native-indonesia-10-build-ss-1

Build menggunakan expo
Karena kita masih menggunakan Expo dalam membuat aplikasi. Maka kita dapat menggunakan perintah dari Expo. Buka CMD / Terminal dan arahkan terminal ke project directory. (Dengan Visual Studio Code, kalian bisa membuka salah satu file yang ada di project kalian dan menekan Command+Shift+P untuk mac, untuk windows coba saja Ctrl+Shift+P maaf kalau salah, dan pilih Open New Terminal, maka terminal akan terbuka di project kalian).

Setelah membuka CMD / Terminal, masukkan perintah berikut ini untuk melakukan build menjadi aplikasi android :
expo build:android
Untuk menjadi aplikasi IOS :
expo build:ios
Setelah beberapa saat akan muncul tampilan seperti ini di terminal :
tutorial-react-native-indonesia-10-build-ss

Kamu bisa membuka link yang ada di bawah kata 'You can monitor the build at' di browser. Untuk mengecek apakah build aplikasimu sudah jadi. Dan ketika sudah jadi kamu bisa langsung mendownload aplikasinya di website tersebut. Atau kamu dapat menunggunya sampai selesai di terminal hingga muncul tulisan 'Successfully built standalone app:' kalau gitu, kamu bisa langsung download aplikasimu di link tersebut. 😆😀😁Yay! Akhirnya kamu bisa buat aplikasi mobile dengan React Native. Selamat mencoba. Belajar terus! Jika ada kendala, jangan sungkan-sungkan untuk bertanya di kolom komentar! Sampai jumpa di rangkaian tutorial selanjutnya. 🙌🙏

Tutorial React Native Dasar - Bahasa Indonesia - #9 Input



Tentunya untuk membangun sebuah aplikasi kita butuh component yang berguna untuk menerima input dari pengguna. Nah, kali ini aku akan menggunakan salah satu dari component yang memungkinkan pengguna untuk dapat memasukkan input berupa teks. Kita akan menggunakan salah satu component bawaan React Native yaitu TextInput.

Kita menambahkan TextInput yang nantinya bisa kita gunakan untuk menambahkan data pahlawan yang sudah kita buat sebelumnya. Namun pada tutorial kali ini kita hanya akan fokus untuk membahas TextInput-nya saja.

Seperti biasa, langsung saja buka file App.js dan ubah kodenya menjadi seperti di bawah ini. Perhatikan secara detail karena pada bagian kali ini banyak sekali perubahan yang harus di lakukan. Aku udah sertakan komentar yang berisi penjelasan mengenai baris kode yang ditambahkan.

Pada tutorial kali ini kita menggunakan beberapa komponen baru yaitu FlatList, TextInput, TouchableOpacity dan KeyboardAvoidingView.

FlatList berguna untuk menampilkan list data. Pada tutorial kali ini FlatList kita gunakan untuk menampilkan data pahlawan yang kita simpan di dalam state.

TextInput berguna untuk menampilkan input berupa teks dimana pengguna dapat memasukkan input untuk menambahkan nama dan asal pahlawan.

TouchableOpacity berguna untuk membuat tombol yang ketika di tekan akan mengeksekusi fungsi untuk menambahkan data pahlawan ke dalam daftar pahlawan yang kita simpan di dalam state. TouchableOpacity sebenarnya adalah component yang ketika ditekan akan memberikan efek menghilang. atau opacity nya berkurang. Sehingga pengguna tahu bahwa tombol yang dia tekan bekerja dengan baik karena tombol tersebut memberikan feedback ketika ditekan. Banyak Touchable lain dalam React Native yang dapat kita gunakan sesuai kebutuhan kita.

KeyboardAvoidingView berguna untuk menghindari soft keyboard ketika pengguna mengetikkan input ke dalam TextInput. Jika tidak menggunakan component ini maka mungkin TextInput kita akan tertutup oleh Keyboard ketika pengguna menginputkan nama dan asal pahlawan.

Wow!, tidak terasa kita sudah hampir menyelesaikan rangkaian Tutorial React Native Dasar ini. Tinggal yang terakhir yaitu bagaimana cara untuk melakukan build agar aplikasi bisa di install di Android atau IOS. Gimana caranya? Silahkan menuju ke tutorial selanjutnya 😁👇

Tutorial React Native Dasar - Bahasa Indonesia - #8 Layout dengan Flexbox

tutorial-react-native-indonesia-layout-dengan-flexbox

Untuk menentukan layout dalam React Native, kita dapat menggunakan Flexbox. Dengan Flexbox, sebuah component dapat menentukan layout menggunakan algoritma flexbox. Dan Flexbox juga memungkinkan kita untuk membuat layout yang responsive sehingga layout tersebut dapat menyesuaikan ukurannya pada ukuran layar yang berbeda-beda.

Flex adalah salah satu opsi yang dapat kita tulis di dalam style yang sudah kita pelajari pada tutorial sebelumnya. Secara umum, biasanya kita akan menggunakan kombinasi dari flexDirection, alignItems, dan justifyContent untuk mendapatkan layout yang sesuai keinginan kita.

Flexbox pada React Native mungkin mirip dengan cara kerja flex yang ada pada CSS yang digunakan untuk mengatur tampilan web, namun ada sedikit perbedaan yaitu default dari flexDirection adalah column dan parameter flex hanya mendukung angka tunggal. Langsung saja praktek. Seperti biasa, buka App.js dan ubah kode yang ada dalam variable styles menjadi seperti dibawah ini :


Aku akan menjelaskan satu per satu sesuai dengan angka yang ada di komentar pada kode di atas. Pada kode di atas aku mengubah flexDirection menjadi row. Karena sebelumnya kita belum mengatur flexDirection maka React Native akan menggunakan default yaitu column. Untuk mengembalikan seperti semula silahkan menggantinya dengan column.

1. flexDirection
Yang pertama adalah flexDirection. Dengan flexDirection kita dapat menentukan arah dari item child sebuah component. Kita dapat memilih antara row atau column. Jika row maka child akan mengarah ke samping. Jika column maka child akan mengarah ke bawah.

2. alignItems
Yang kedua adalah alignItems.  Dengan alignItems kita dapat menentukan apakah child harus rata tengah, rata awal, rata akhir atau meregang dalam aplikasi Microsoft Word biasa kita lebih familiar dengan kata alignment. Kita dapat memilih opsi antara flex-start, center, flex-end, stretch.

3. justifyContent
Yang ketiga adalah justifyContent. Dengan justifyContent kita dapat menentukan bagaimana child berperilaku terhadap child yang lain atau dengan kata lain distribusi child berdasarkan flexDirection. Kita dapat memilih opsi antara flex-start, center, flex-end, space-around, space-between dan space-evenly. Untuk mengetahui lebih dalam, aku sarankan kalian untuk mencobanya satu per satu agar kalian benar-benar memahami fungsi dari setiap opsi. Sebenarnya fungsi dari setiap opsi bisa di logika berdasarkan namanya. 😁

Beberapa hal yang sudah dijelaskan pada tutorial ini merupakan hal yang akan sering kita temui ketika membangun aplikasi menggunakan React Native. Jadi alangkah baiknya kalian benar-benar memahami materi pada tutorial kali ini. Kalian coba-coba saja setiap opsi yang ada dan lihat efeknya pada tampilan aplikasi kalian. Jika masih ada hal yang bingung jangan sungkan-sungkan untuk bertanya dengan meninggalkan komentar di bawah.


Jika semua berjalan lancar, silahkan lanjut ke tutorial selanjutnya. 💪👇
Tutorial React Native Dasar - Bahasa Indonesia - #9 Input

Tutorial React Native Dasar - Bahasa Indonesia - #7 Style

tutorial-react-native-indonesia-7-style-img

Dengan React Native, kita tidak perlu menggunakan bahasa lain yang khusus untuk melakukan styling. Cukup menggunakan Javascript. Seperti yang sudah aku katakan sebelumnya bahwa semua Component bawaan dari React Native menerima prop yang bernama style. Cara kerja dan kegunaannya mirip dengan CSS yang ada pada web, yaitu untuk melakukan styling.

Untuk melakukan styling pada React Native kita bisa langsung mendefenisikannya dalam bentuk POJO (Plain old javascript object). Atau kita dapat menjadikan satu semua style ke dalam bentuk array untuk kemudian dapat kita panggil satu per satu.

Dengan style kita bisa melakukan banyak perubahan tampilan pada setiap Component yang ada pada aplikasi yang kita bangun. Misalnya, merubah warna, background, padding, margin dsb.

Oke, agar lebih paham, mending kita langsung praktek aja yuk. Masih dengan file yang sama yaitu App.js . Silahkan langsung buka file tersebut menggunakan Visual Studio Code. Dan ubah kode dalam App.js menjadi seperti di bawah ini :

Perhatikan kode yang kuberi komenter dengan tanda "<-- (angka)". Aku akan menjelaskan satu-satu berdasarkan angka yang pada komentar :

  • 1. Kita dapat melakukan styling dengan cara mendefinikan langsung POJO di dalam prop style.
     
  • 2a. Kita dapat memanggil style yang ktia definisikan dalam variable styles yang ada di baris paling bawah kode. Kita dapat menggabungkan beberapa style dengan cara menggunakan class Stylesheet yang merupakan bawaan dari React Native. Kita dapat menggunakan fungsi Stylesheet.create() untuk menggabungkan beberapa style menjadi satu.
     
  • 2b. Kita juga dapat mendefinisikan lebih dari satu style dengan cara mendefinisikan array dan kemudian meletakkan beberapa style ke dalam array tersebut.
     
  • 3-7. Kita dapat mendefinisikan lebih dari satu props ke dalam component. Pada kode di atas kita menambahkan prop asal.
     
  • 8 & 9. Kita membuat style yang bernama namaPahlawan yang di dalamnya terdapat pengaturan tampilan yang kita gunakan untuk merubah tampilan dari nama dalam component Pahlawan.
     
Lebih bagus yang mana? Menjadikan style dalam satu variable menggunakan Stylesheet.create() atau mendefinisikannya satu persatu pada setiap component?
Saya pribadi menyarankan untuk menjadikan satu style dalam satu variable. Kenapa? Karena dengan begitu kita dapat menggunakan style tersebut lebih dari satu kali pada banyak component. Dan dengan begitu kita dapat membuat kode kita tampak lebih rapi dan mudah dibaca.

tutorial-react-native-indonesia-7-style

Jika tidak ada error, maka tampilan aplikasimu sekarang adalah seperti gambar di atas. Oke mari lanjut ke tutorial selanjutnya. 👌👇
Tutorial React Native Dasar - Bahasa Indonesia - #8 Layout Dengan Flexbox

Tutorial React Native Dasar - Bahasa Indonesia - #6 State

tutorial-react-native-indonesia-6-state

Ada dua tipe data yang bisa digunakan untuk mengontrol Component. Yang pertama udah kita pelajari di bagian sebelumnya yaitu props dan yang kedua akan kita pelajari pada bagian ini yaitu state.

Apa perbedaan props dan state? 
Props adalah data yang diatur oleh parent dari sebuah Component dan nilainya tidak dapat diubah di dalam Component itu sendiri. Props akan tetap tersimpan selama lifetime dari Component tersebut. Sedangkan state adalah data yang diinisalisasi di dalam Component dan nilainya dapat diubah di dalam Component tersebut.

Pada tutorial sebelumnya kita kan sudah bisa menampilkan custom component yang kita buat sendiri disitu kita juga sudah belajar tentang apa itu props. Nah kali ini kita akan menambahkan state pada custom component yang kita buat. Sebenarnya yang akan kita buat ini mirip dengan dokumentasi yang ada di situs resmi React Native. Dengan state, kita akan membuat teks yang ada dalam component Pahlawan berkedip. Yuk, langsung saja buka file App.js dan tambahkan kode baru seperti di bawah ini :

Perhatikan method componentDidMount(). Disitulah kita akan mulai membuat teksnya berkedip. Method componentDidMount() dipanggil setelah method render() dipanggil. Kalian bisa melihat lifecycle dari component pada tutorial sebelumnya.

Pada kode diatas kita memanfaatkan fungsi dari javascript bernama setInterval(). Fungsi tersebut akan mengeksekusi method secara berulang-ulang sesuai dengan delay yang sudah ditentukan.

Jika berhasil, maka teks yang ada dalam component Pahlawan berkedip setiap satu detik sekali. Jika error silahkan bertanya di kolom komentar agar kita bisa solve sama-sama. 😉

Kenapa kita mengubah state menggunakan fungsi setState()?
Karena dengan menggunakan fungsi setState(), component akan tahu jika ada data yang diubah di dalam state. Setelah tahu ada data yang berubah dalam state, maka Component akan memanggil ulang method render() untuk memperbarui tampilan dalam aplikasi.

Yak, kira-kira begitulah penjelasan tentang apa itu state dalam component React Native. Seperti biasa, jika ada pertanyaan silahkan tinggalkan komentar. Jika tidak, silahkan lanjut ke tutorial selanjutnya. 😁👇
Tutorial React Native Dasar - Bahasa Indonesia - #7 Style

Tutorial React Native Dasar - Bahasa Indonesia - #5 Props

tutorial-react-native-indonesia-5-props

Setelah belajar mengenai Component, sekarang kita akan belajar satu hal yang tidak kalah penting yaitu Props. Dengan Props kita dapat membuat Component kita lebih reusable (bisa digunakan kembali). 

Misalnya pada Component Image, kita bisa mengirimkan data sumber dari gambar yang akan kita tampilkan pada Component Image tersebut. Kita bisa mengirimkan data pada Component Image melalui salah satu props-nya yaitu source. Kita juga dapat memodifikasi tampilan Component Image melalui salah satu props yang dimiliki semua Component bawaan React Native yaitu style. Props style berguna untuk memodifikasi tampilan suatu Component. Mirip dengan CSS yang digunakan untuk mengatur tampilan pada HTML.

Selanjutnya kita akan coba membuat custom component dan kita akan coba menggunakan props untuk mengirim data pada component tersebut. Seperti biasa, buka Visual Studio Code dan langsung saja buka file App.js. Ubah file App.js menjadi seperti ini :

Pada kode diatas kita sudah membuat custom component berupa sebuah class Pahlawan yang meng-extends class React.Component. Dan pada component App kita menampilkan Component pahlawan dengan mengirimkan data berupa nama pahlawan melalui props nama.

tutorial-react-native-indonesia-5-props-result

Setelah mengubah file App.js jangan lupa untuk menyimpan perubahan dengan menekan Ctrl+S. Jika berhasil maka tampilannya akan seperti gambar di atas. (Untuk kamu yang belum bisa menjalankan aplikasi react native di smartphone atau emulator bisa mengikuti tutorial bagian kedua dan keempat). 👏


Cukup mudah bukan? Jika kalian memiliki pertanyaan jangan malu-malu untuk meninggalkan komentar pada kolom komentar di bawah ini. Jika tidak, mari lanjut ke tutorial selanjutnya!. 👇
Tutorial React Native Dasar - Bahasa Indonesia - #6 State

Tutorial React Native Dasar - Bahasa Indonesia - #4 Component

tutorial-react-native-component

Setelah semua yang diperlukan sudah siap sekarang tiba saatnya kita akan mulai mendalami lebih detail tentang React Native. Kita akan tetap menggunakan project yang sudah kita buat pada tutorial sebelumnya. 👈

Pada tutorial kali ini kita akan mengenal salah satu bagian dari React Native yang bakal sering kita temui ketika membangun aplikasi dengan React Native yaitu Component.

Apa itu Component?
Aplikasi yang dibangun dengan React Native, akan terdiri dari banyak Component. Component bisa memiliki banyak child dan Component juga memiliki state nya atau propertinya masing-masing.

React Native telah menyediakan banyak Component yang dapat kita gunakan untuk membangun aplikasi. Selain menggunakan Component bawaan dari React Native, kita juga bisa membuat Component sendiri yang bisa kita atur sesuai kebutuhan kita. Berikut adalah contoh Penggunaan Component bawaan dari React Native :


Kode di atas adalah kode dari file App.js yang ada pada project React Native yang kita buat pada tutorial sebelumnya. Pada kode di atas, baris pertama dan kedua terdapat syntax import yang memanggil class React dan beberapa Component bawaan dari React Native yaitu StyleSheet, Text, View. Beberapa Component inilah yang kemudian dipanggil untuk ditampilkan dalam aplikasi dengan cara meletakkannya pada fungsi render().

Kita dapat mengatur tampilan dengan cara mirip seperti HTML, yaitu dengan menggunakan Tag dan properti yang bisa ditambahkan pada setiap tag. Walaupun mirip namun itu bukan HTML, syntax itu disebut dengan JSX.

Syntax JSX berfungsi untuk menyematkan kode XML ke dalam Javascript. Jika kalian sudah terbiasa dengan HTML tentunya kalian sudah familiar dengan struktur bahasa markup seperti ini. Beginilah cara kita untuk mengatur tampilan pada React Native.

Component dalam React Native sebenarnya adalah sebuah class yang meng-extends class Component yang ada dalam React Native. Component dalam React Native tentunya memiliki sebuah lifecycle. Berikut adalah lifecycle Component React Native :
tutorial-react-native-dasar-component-lifecycle
Pada gambar di atas, kita bisa melihat bagaimana alur hidup Component pada React Native. Lifecycle Component pada React Native dibagi menjadi 4 fase, yaitu :

  • - Initialization : Pada fase ini Component mempersiapkan Props dan State yang akan dibahas pada tutorial selanjutnya.
  • - Mounting : Pada fase ini Component melakukan render(). Render dipanggil setelah method componentWillMount() dan setelah method render() Component akan memanggil method componentDidMount().
  • - Updation : Pada fase ini React Native melakukan update ketika data dari state atau props yang dikirimkan oleh Parent berubah.
  • - Unmounting : Ini adalah fase terakhir ketika Component sudah 'mati' atau istilahnya Unmounted.

Jangan pusing dulu :D, hanya sekedar tahu aja dulu. Nanti kita akan mendalaminya satu per satu dan kita hanya akan mendalami hal-hal yang memang sering digunakan pada umumnya saja. Yang penting kalian sudah sedikit memahami apa itu Component dan siap untuk lebih mendalami React Native di tutorial selanjutnya. 👇
Tutorial React Native - Bahasa Indonesia - #5 Props

Tutorial React Native Dasar - Bahasa Indonesia - #3 Hello World

tutorial-react-native-dasar-indonesia-3-hello-world-0

Yak, pada tutorial kali ini kita akan mulai menuliskan baris kode untuk membuat aplikasi mobile menggunakan React Native. Sebelumnya pastikan semua yang diperlukan sudah ada seperti yang sudah dijelaskan di tutorial sebelumnya. 👈

Untuk membuat project React Native menggunakan Expo yang pertama kali harus dilakukan adalah menginstal Expo CLI. Buka CMD / Terminal dan eksekusi perintah di bawah ini :
npm install -g expo-cli
 Perintah diatas akan menginstal Expo CLI secara global yang ditandai dengan opsi -g . Setelah itu, buatlah folder khusus untuk membuat project React Native pada tutorial kali ini. Dan kemudian buka lagi CMD / Terminal pastikan kamu sudah menuju ke folder yang barusan kamu buat lalu eksekusi perintah di bawah ini :
expo init ReactNativeDasar 
Setelah mengeksekusi perintah diatas, akan muncul pilihan untuk memilih template, pilih saja blank lalu tekan enter. Tunggu hingga expo-cli telah selesai menyiapkan project mu. Setelah selesai ekeskusi perintah ini :
cd ReactNativeDasar
Perintah diatas adalah perintah untuk berpindah folder ke folder project yang sudah kita buat. Aku sarankan kalian belajar memahami perintah-perintah dasar CMD / Terminal. Agar kalian lebih enak dan lancar ketika belajar membuat aplikasi. Oke setelah itu silahkan eksekusi perintah berikut ini :
npm start
Perintah di atas akan menjalankan development server dan akan otomatis membuka browser untuk membuka DevTools dimana kalian bisa berinteraksi dengan development server menggunakan Web GUI (Graphical User Interface). Jika DevTools pada browser tidak terbuka, kalian bisa menekan huruf 'D' pada keyboard. Tampilan DevTools akan terlihat seperti ini :

tutorial-react-native-dasar-indonesia-3-hello-world-1

Untuk kalian yang menggunakan emulator, kalian bisa klik tombol Run on Android device/emulator atau Run on IOS emulator. Untuk kalian yang menggunakan smartphone kalian sendiri, kalian bisa buka Aplikasi Expo yang sudah kalian download dan instal di smartphone kalian masing-masing. Kemudian pilih Scan QR Code. Dan kemudian scane QR Code yang ada di browser. Tunggu beberapa saat hingga aplikasi dapat berjalan di perangkat kalian. Setelah berhasil maka tampilan pada perangkat akan terlihat seperti ini di bawah ini :

tutorial-react-native-dasar-indonesia-3-hello-world-2

Oke sekarang buka aplikasi Visual Studio Code dan klik menu File >> Add Folder To Workspace >> Pilih folder dimana project kalian berada >> Open. Lalu klik pada file App.js untuk membukanya. Tampilan Visual Studio Code akan terlihat seperti dibawah ini :

tutorial-react-native-dasar-indonesia-3-hello-world-3

Pada sidebar yang berada di sebelah kiri adalah explorer  yang berfungsi untuk menjelajahi file yang ada di project. Setelah berhasil hingga ke langkah ini, Ganti tulisan yang saya blok (lihat gambar diatas) dengan Hello World! lalu tekan Ctrl + S atau Command + S (Untuk Mac) untuk menyimpan. Setelah itu kalian bisa melihat perubahan yang terjadi pada aplikasi yang berjalan pada perangkat kalian.

tutorial-react-native-dasar-indonesia-3-hello-world-4

WOW! Sangat luar biasa bukan? Sangat sederhana dan cepat.


Oke, sekarang kamu sudah siap untuk lebih dalam lagi mempelajari React Native. Silahkan menuju ke tutorial selanjutnya. 👇
Tutorial React Native - Bahasa Indonesia - #4 Component

Tutorial React Native Dasar - Bahasa Indonesia - #2 Persiapan

tutorial-react-native-bahasa-indonesia-2-persiapan

Sebelum kita bersentuhan dengan baris kode, tentunya ada beberapa hal yang peru kita persiapkan terlebih dahulu. Karena mungkin kalian memiliki latar belakang yang berbeda-beda jadi aku akan berusaha untuk menulis tutorial React Native ini secara detail agar semua bisa mengikuti. 👌

Node.js
Yang pertama, kita butuh yang namanya Node.js. Oh iya, by the way pada tutorial kali ini kita akan menggunakan Expo, karena dengan Expo, React Native akan dapat dipelajari dengan lebih simple. Karena kita juga tidak akan membuat sesuatu yang terlalu rumit pada seri tutorial kali ini. Yuk, langsung saja bagi kalian yang belum menginstal Node.js bisa mengikuti tutorial yang saya tulis di SINI.

Source Code Editor
Yang kedua, kita butuh Source Code Editor. Apa itu?, Source Code Editor adalah aplikasi yang nantinya akan kita gunakan untuk mengetik baris kodenya. Untuk tutorial kali ini aku sarankan kalian untuk menggunakan Visual Studio Code. Visual Studio Code adalah aplikasi source code editor yang dikembangkan oleh Microsoft. Aplikasi ini cukup powerful dan yang paling penting adalah Gratis! hehe. Langsung saja kamu download di SINI.

Git Console
Yang ketiga, kita butuh Git. Karena expo perlu Git untuk melakukan penginstalan. Kalian bisa download git di SINI.

Android / IOS Emulator atau Smartphone (Android / IOS)
Yang keempat, kita membutuhkan perangkat agar kita bisa menjalankan aplikasi yang kita buat pada perangkat tersebut. Jika kalian sudah memiliki Android Studio atau XCode, atau jika kalian asing dengan kedua software tersebut kalian bisa menggunakan smartphone kalian sendiri. Yang perlu kalian lakukan jika kalian menggunakan smartphone kalian sendiri adalah menginstal aplikasi Expo mobile pada smartphone kalian, kalian bisa download aplikasinya di PlayStore atau AppStore.

tutorial-react-native-bahasa-indonesia-2-persiapan-meme
Oke, jika sudah siap semuanya. Mari kita mulai menuliskan baris kode! Lanjut ke tutorial selanjutnya. 👇
Tutorial React Native Dasar - Bahasa Indonesia - #3 Hello World

Tutorial React Native Dasar - Bahasa Indonesia - #1 Apa itu React Native


Hallo teman-teman, selamat datang di blogku. Kali ini aku akan menulis tutorial tentang React Native, mungkin sebelum membaca tutorial ini kalian sudah mencoba-coba sendiri atau mencari tahu tentang apa itu React Native dan bagaimana cara membuat aplikasi dengan react native dan ada juga mungkin dari kalian yang sama sekali belum tahu apa itu React Native. 😁

Nah, cocok sekali kalau begitu. Mau bagaimanapun latar belakang kalian, tutorial ini tetap akan cocok untuk kalian karena aku akan membahas React Native dari hal yang paling dasar sampai kalian bisa membuat aplikasi mobile sendiri dengan React Native.

Tutorial ini akan dibagi menjadi beberapa bagian, dengan begitu kalian akan lebih mudah untuk mengikutinya langkah demi langkah. Jika tidak selesai satu hari, kalian bisa melanjutkan untuk belajar di hari selanjutnya. Oke, yuk langsung saja kita mulai.

Apa itu React Native?

Bagi kalian yang mungkin berangkat dari seorang web developer, mungkin kalian sudah pernah mempelajari React, bagi kalian yang tidak berangkat dari seorang web developer mungkin asing ketika mendengar nama React. React adalah salah satu library javascript yang dikembangkan oleh Facebook. React adalah library open source yang dapat kita gunakan secara gratis bahkan kita juga dapat berkontribusi untuk mengembangkan. React merupakan User Interface Library yang digunakan untuk membangun komponen dari UI ( User Interface ).

Nah, kalau React Native sebenarnya pada dasarnya adalah React, namun jika React digunakan untuk membangun UI web, React Native digunakan untuk membangun UI untuk Mobile Native App. Dengan menggunakan React Native kita dapat langsung membuat aplikasi untuk dua platform yaitu Android dan IOS. Wow! sangat menarik bukan? 😏


Dengan React Native kita bisa membangun sebuah Hybird Mobile App. Terdengar lebih efisien, hmm, memang. Selain itu React Native juga memungkinkan kita untuk dapat berinteraksi dengan ekosistem yang berada di native platform masing-masing. Kita dapat berinteraksi dengan Kamera, Lokasi, dsb. Dengan begini, proses pengembangan aplikasi mobile akan menjadi super cepat dan efisien.

Udah ga sabar ya? Yuk langsung saja menuju ke tutorial selanjutnya. 💪👇
Tutorial React Native Dasar - Bahasa Indonesia - #2 Persiapan

Apa itu Node.js dan cara menginstalnya ( NPM )

JavaScript adalah bahasa yang sangat dekat sekali dengan para Web Developers. Mereka menggunakan javascript untuk membuat tampilan website semakin hidup dengan menambahkan interaksi-interaksi dan animasi yang menarik untuk berinteraksi dengan penggunanya.

Nah, semakin majunya teknologi khususnya pengembangan Javascript, kini javascript tidak hanya digunaan di front-end tetapi juga di back-end. Dengan Node.js, kini Javascript bisa menjadi bahasa pemrograman yang dapat berjalan di server-side. Sebenarnya sudah lama sih Node.js mulai dikembangkan yaitu pada tahun 2009 oleh Mas Ryan Dahl. Kalau pengen tahu lebih dalam, kamu bisa tonton video presentasinya di bawah ini :

Apa itu Node.js?

Node.js adalah sebuah Server Environment yang dikembangkan secara open-source jadi Node.js ini dapat digunakan dan dikembangkan oleh siapapun secara cuma-cuma alias gratis. Node.js ini dapat berjalan di banyak platform seperti Windows, Linux, Mac OS, Unix dsb. Intinya Node.js ini adalah server environment yang memungkinkan kita untuk dapat menggunakan Javascript di server.
Kode di atas adalah contoh sederhana untuk menjalankan server Node.js. Sangat menarik bukan? untuk tutorial membangun sesuatu dengan Node.js mungkin aku akan tulis di postingan-postingan selanjutnya untuk kali ini cara nginstalnya aja dulu ya, lagian cara nginstalnya cukup mudah kok seperti nginstal software pada umumnya. Langsung saja download Node.js installer disini : https://nodejs.org/en/ .

Setelah menginstal Node.js pada komputer kamu, sekarang kamu dapat mengakses Node.js menggunakan CMD / Terminal. Coba sekarang buka aplikasi CMD / Terminal, ketikan kode di bawah ini lalu tekan enter :
node -v
Perintah diatas akan menunjukkan versi Node.js yang terinstal pada komputermu saat ini. Sekarang coba ketikan kode di bawah ini lalu tekan enter :
npm -v
Perintah di atas akan menunjukkan versi NPM (Node package manager) yang terinstal di komputer kamu. Sekarang kamu sudah siap untuk menciptakan sesuatu yang luar biasa dengan Node.js. Selamat berkarya!
GALIH LARAS PRAKOSO
-
Yogyakarta, Indonesia

SEND ME A MESSAGE