SHARE TUTOR PEMROGRAMAN -> ANDROID CARI DISINI

[RayMantic]

Persiapan Pemrograman Android di Linux [Android Studio]
Pada kesempatan ini, saya akan membahas persiapan yang dilakukan sebelum memulai pemrograman Android dengan Android Studio.

1. Instal JDK
JDK (Java Development Kit) merupakan bahan dasar yang kita butuhkan untuk pemrograman java. JDK menyediakan kompilator, mesin virtual, dan pustaka (library).

Ada dua jenis JDK di Linux, yaitu Open JDK dan Oracle JDK. Perbedaan Open JDK dan Oracle JDK dapat dibaca di sini. Pada persiapan ini, kita akan menginstal Open JDK saja. Ketik perintah berikut untuk menginstal.

Spoiler: perintah

sudo apt-get install openjdk-8-jdk

2. Install Android Studio
Android Studio merupakan mesin yang kita butuhkan untuk membuat atau mengembangkan aplikasi Android . Android studio yang digunakan dalam persiapan ini adalah Android Studio 2. Silahkan download Android Studio untuk sistem operasi Linux di Website Developer Android.



Setelah itu, buka file manager sebagai user root:

Spoiler: perintah

sudo thunar

kemudian ekstrak arsip zip Android Studio ke direktori /opt.


Tambahkan Android Studio di menu sistem anda. Gunakan aplikasi menu editor. di Linux (Xubuntu) yang saya gunakan menu editornya sudah tersedia. Klik kanan pada menu kemudian pilih Edit Applications.

3. Instal Android SDK
Android SDK hampir sama persis dengan JDK. Android SDK menyediakan API, Library, Emulator, dan beberapa peralatan yang diperlukan untuk membuat aplikasi.

4. Update API Android SDK
Android SDK yang beru terinstal masih membutuhkan beberapa komponen lain untuk dapat digunakan. Oleh karena itu, kita perlu melakukan update. Ketik perintah berikut id terminal.

Spoiler: perintah

android update sdk

Instal API dan Image Android yang anda butuhkan. Update API Android SDK membutuhkan koneksi internet yang cepat dan stabil. Jika semuanya diinstal, akan memakan banyak ruang (kira-kira sampai 40GB).

5. Buat Emulator
Emulator kita perlukan untuk men-debug aplikasi. Bila anda memiliki ponsel bersistem operasi android, anda bisa menggunakan ponsel tersebut.

Cara membuat emulator, ketik perintah berikut:

Spoiler: perintah

android avd

Klik tombol Create untuk membuat emulator baru.


Nilai SD Card dapat dikosongkan bila tidak bisa membuatnya.

6. Uji Coba
Buat sebuah proyek baru (Hello World), kemudian coba jalankan.

 

[RayMantic]

Instal Android SDK dan NDK di Linux
Android SDK (Software Development Kit) dan NDK (Nativte Development Kit) adalah dua alat yang harus kita persiapkan untuk membuat aplikasi Android.

Android SDK berisi peralatan, API, dan Emulator yang kita butuhkan dalam pengembangan aplikasi Android.

Sedangkan, Android NDK memungkinkan kita membuat aplikasi Android dengan bahasa pemrograman C/C++.

Pada kesempatan ini kita akan belajar cara menginstal Android SDK dan NDK di Linux.

Cara Instal Android SDK di Linux
Download Android SDK di website resmi Android Developer: http://developer.android.com/sdk/index.html, pilih SDK tools only


Buat direktori bernama Android di Home.

Spoiler: perintah

mkdir ~/Android

Tujannya agar kita mudah mendaftarkan Android SDK ke Environment Variable.



Ekstrak Android SDK ke direktori yang dibuat tadi, kemudian ganti namanya menjadi Sdk.



Tambahkan PATH Android SDK ke Environment Variable agar perintah android dapat dikenali melalui Terminal. Silahkan buka file /etc/bash.bashrc dengan teks editor sebagai root.

Spoiler: perintah

sudo nano /etc/bash.bashrc

Tambahkan kode berikut pada akhir file bash.bashrc

# Variabel untuk menentukan lokasi SDK dan NDK
export ANDROID_SDK_ROOT=$HOME/Android

# Env variabel Anrdroid SDK
export PATH=$PATH:$ANDROID_SDK_ROOT/Sdk/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/Sdk/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/Sdk/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/Sdk/platform-tools

Selain ditambahkan pada file /etc/bash.bashrc, kita juga bisa menambahkannya pada ~/.bashrc. Pilih salah satu.

1. Tekan Ctrl+x, kemudian ketik y lalu tekan Enter untuk menyimpan.

Selsai!

Untuk mencobanya, silahkan buka terminal baru dan ketik perintah android --help.

Ozynx@imajinasi:~$ android --help

Usage:
android [global options] action [action options]
Global options:
-s --silent     : Silent mode, shows errors only.
-v --verbose    : Verbose mode, shows errors, warnings and all messages.
--clear-cache: Clear the SDK Manager repository manifest cache.
-h --help       : Help on a specific command.
...

Cara Instal Android NDK di Linux
Download Android NDK di website resmi Android Developer: http://developer.android.com/ndk/downloads/index.html

Ekstrak paket bin Android NDK dengan mengeksekusinya.

Pindahkan hasil ekstraksi file Android NDK ke direktori ~/Android

Tambahkan PATH Android NDK ke Evnironment Variable. Buka kembali file bash.bashrc,

Spoiler: perintah

sudo nano /etc/bash.bashrc

Tambahkan kode berikut pada akhir file bash.bashrc

# Env variabel Android NDK
export PATH=$PATH:$ANDROID_HOME/android-ndk-r11c/

Ujicoba dengan perintah ndk-build --version:

ozynx@imajinasi:~$ ndk-build --version
GNU Make 3.81
Copyright (C) 2020  Free Software Foundation, Inc.
This is free software; see the source for copying conditions.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE.

This program built for x86_64-pc-linux-gnu

Update dan Install API Android SDK
Android SDK yang kita install tadi belum menginstal semua API Android.

Kadang hanya terinstal API level 8 saja.

Untuk mendapatkan API versi terbaru, kita harus melakukan update dan install.

Silahkan ketik perintah:

Spoiler: perintah

android sdk

Maka akan terbuka jendela Android SDK Manager, di sini kita bisa memilih API mana saja yang ingin kita install dan update.


Pilihlah versi API sesuai dengan aplikasi yang akan kamu kembangkan.

Misalnya kita ingin membuat aplikasi yang minimal bisa berjalan di atas Android 4 (kitkat), maka kita harus menginstal API untuk Kitkat yaitu API level 19.

Perhatikan juga System Image emulator yang akan diinstal, di sana ada yang untuk Wear (jam tangan), TV, dan HP.



Jika aplikasi yang akan kamu kembangkan bisa berjalan di Android Wear, maka kamu harus menginstal emulator untuk Wear. Tapi, kalau hanya untuk HP saja, ya cukup instal yang untuk HP.

Jika kamu nekat instal semua, siap-siap tambah hardisk .

 

[RayMantic]

Mobile dengan Flutter #1

ini saya menggunakan LINUX , kalo agan menggunakan Windows tinggal di sesuaikan .

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.

Apa bedanya membuat aplikasi android menggunakan Android Studio (native) dengan Flutter?

Perbedaan pertama:

Ada fitur hot reload yang disediakan oleh Flutter.



Ini akan membuat kita ngoding android terasa seperti ngoding web. Setiap ada perubahan, kita tidak perlu kompilasi atau build ulang untuk melihat hasilnya.

Sedangkan pada Android Studio, kita harus melakukan build APK di setiap kali kita ingin men-debug dan melihat hasil aplikasi pada emulator.

Kadang proses ini memakan waktu yang cukup lama, apalagi spek komputer yang digunakan tidak terlalu tinggi.

Perbedaan kedua:

Kemudian perbedaan berikutnya dari bahasa pemrograman yang digunakan. Flutter menggunakan bahasa pemrograman DART.

Apa itu Dart?
Dart adalah bahasa pemrograman yang dikembangkan oleh Google untuk kebutuhan umum (general-purpose programming language).

Ia bisa digunakan untuk membuat aplikasi android, front-end web, IoT, backend (CLI), dan Game.

Contoh beberapa aplikasi yang dibangun dengan Dart:

• Google Adsense (front-end)
• Google AdWords (front-end)
• Google Fiber (front-end)
• Hamilton (Android dan iOS)
• dll.

Selengkapnya, bisa dilihat pada: Who Uses Dart

Platform Dart
Dart dapat digunakan pada tiga platform ini:



Apabila kita ingin membuat aplikasi Android dan iOS dengan bahasa pemrograman Dart, maka kita harus menggunakan framework Flutter.

Flutter adalah sebuah framework yang dirancang khusus untuk membangun antarmuka (UI) aplikasi mobile.

Web

Penggunaan Dart pada web biasanya dalam bentuk front-end. Kode program Dart dapat dikompilasi (transpile) menjadi kode Javascript, sehingga web browser dapat mengeksekusinya.

Biasanya, pengembangan web dengan Dart menggunakan framework:

• AngularDart
• Material Design Lite (MDL)/Dart
• OverReact

Server

Dart dapat juga digunakan pada server untuk membuat program berbasis teks (CLI), program IoT, backend, dll.

Beberapa framework yang bisa digunakan untuk mengembangkan backend:

• Jaguar
• Angel
• Aqueduct
• Express

Peralatan untuk Belajar Dart
Ada dua peralatan yang harus disiapkan untuk mengikuti tutorial ini:

1. text-editor-vscode + Ekstensi Dart;
2. Dart SDK (berisi library, compiler, transpiler, dll. yang dibutuhkan untuk coding Dart).

Selain menggunakan dua peralatan tersebut, kita juga dapat menggunakan Dartpad untuk mencoba kode program dart.

Syntaks Dasar Dart
Dart memiliki sintak yang mirip seperti C++, C#, Java, dan Javascript. Karena Dart menggunakan standar ECMA-408.

Jadi, buat kamu yang sudah pernah belajar bahasa C++, C#, Java, dan javascript sebelumnya, saya yakin akan cepat memahami tutorial ini.

Sekarang coba perhatikan Contoh program hello world:

main() {
  print('Hello World!');
}

Sederhana sekali bukan.

Lalu, bagaimana cara kita mengeksekusi program tersebut?

Pertama, kita harus install dulu Dart. Baru nanti bisa dieksekusi.

Kalau begitu mari kita lanjut ke tahap:

Instalasi Dart
Dart dapat kita install dengan berbagai cara, tergantung dari sistem operasi yang digunakan.

Pada tutorial ini, saya akan menginstal Dart pada Kubuntu 18.04 melalui apt.

Silahkan ikuti langkah berikut:

Buka terminal, lalu paste perintah ini untuk menambahkan repository Dart.

Spoiler: perintah

sudo apt-get update
sudo apt-get install apt-transport-https
sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

--! Perintah di atas di-copas satu per satu. --



Setelah itu lakukan update dan install Dart:

Spoiler: perintah

sudo apt-get update
sudo apt-get install dart

Tunggu sampai prosesnya selesai:


Setelah itu, ketik perintah dart --version untuk memeriksa versi yang terinstal:


demikian cara instal DART dan pengertian serta struktur nya [untuk lebih lanjut silahkan cari di google cara belajar pemrograman DART itu sendiri ]

---

lanjut Ke FLUTTER

Contoh-contoh aplikasi yang dibangun dengan Flutter:

• Alibaba (Android);
• Google AdWords (Android);
• App Tree (Android);
• Topline (Android);
• Hamilton (Android dan iOS);
• dll. (selengkapnya cek di: showcase).

Apa Saja Peralatan yang Harus disiapkan untuk Belajar Flutter?
Ada beberapa peralatan yang harus kita install untuk memulai belajar dan membuat aplikasi dengan Flutter:

1. Java Development Kit (JDK);
2. Android Studio;
3. Android SDK;
4. Flutter SDK;
5. Teks Editor (atau bisa juga pakai Android Studio).

Lah, kenapa kok harus install JDK dan Android Studio?

Begini penjelasannya:

Install JDK
Peralatan esensial yang paling dibutuhkan sebenarnya Flutter SDK, Android SDK, dan Teks Editor saja.

Namun, karena kita butuh Android Studio untuk menginstal Android SDK, maka kita juga harus install Java JDK donk!

Silahkan install Java JDK di Linux dengan perintah ini:

Spoiler: perintah

# install versi 11
sudo apt install openjdk-11-jdk openjdk-11-jre openjdk-11-jdk-headless
# install versi 8
sudo apt install openjdk-8-jdk openjdk-8-jdk-headless openjdk-8-jre

Pada komputer saya, JDK yang digunakan adalah versi 10. Ini mungkin bawaan dari Kubuntu 18.04.



Install Android Studio dan Android SDK
Kita membutuhkan Android Studio untuk menginstall Android SDK, (cara ada di atas )

Setelah itu, nanti kita akan memiliki direktori Android di dalam direktori home. Direktori ini berisi Android SDK yang kita butuhkan untuk pengembangan aplikasi android.



Ukurannya cukup besar, bahkan sampai puluhan GB jika kita install semua system image dan API Android-nya.

Tugas kita berikutnya adalah menambahkan direktori ~/Android/Sdk ke dalam file ~/.bashrc, agar perintah android dapat digunakan pada terminal dan flutter juga dapat mendeteksinya.

Silahkan buka file ~/.bashrc dengan nano:

Spoiler: perintah

nano ~/.bashrc

Lalu pada bagian akhir tambahkan baris ini:

Spoiler: perintah

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools

Sehingga akan menjadi seperti ini:

Tutup teks editor nano dengan menekan Ctrl+x lalu ketik y untuk menyimpan dan terakhir tekan Enter.

Setelah itu, coba buka terminal baru dan ketik perintah:

Spoiler: perintah

android --version

Jika muncul seperti ini:


System Requirement Flutter
Untuk bisa menginstal Flutter, pastikan kamu memnuhi requirement berikut:

• Gunakan Sistem Operasi Linux (64 bit)
• Memiliki ruang kosong sebesar 600MB

Lalu tools berikut harus sudah terinstal:

• bash
• curl
• git versi 2 ke atas
• mkdir
• rm
• unzip
• which
• xz-utils
• libglu1-mesa

Silahkan install mereka semua dengan perintah berikut ini:

Spoiler: perintah

sudo apt install curl git unzip xz-utils libglu1-mesa

Install Flutter SDK
Peralatan yang dibutuhkan berikutnya adalah Fluter SDK.

Silahkan buka ini untuk mendownload Flutter SDK: https://flutter.io/get-started/install/

Flutter SDK tersedia untuk tiga platform: Windows, Linux, dan MacOs.

Silahkan pilih sesuai sistem operasi yang digunakan. Saya sendiri tentunya akan memilih: Linux.

Nanti kita akan diberikan link download SDK, pilih salah satu.


Setelah mendapatkan arsip tar.xz, silahkan esktrak ke tempat yang digininkan.

Saya sendiri akan ekstraknya ke ~/apps/, karena di sana saya biasanya menaruh beberapa aplikasi.

Setelah itu, buka lagi file ~/.bashrc dan tambahkan direktori Flutter di bagian akhir.

export PATH=$PATH:~/apps/flutter/bin/

Setelah disimpan, silahkan buka terminal baru dan ketik perintah:

Spoiler: perintah

flutter

Maka, kita sudah berhasil menginstal Flutter.

Pemeriksaan dengan Flutter Doctor
Sebelum kita membuat aplikasi dengan Flutter, kita perisksa dulu kesiapan peralatan yang kita install.

Silahkan ketrik perintah berikut untuk memeriksanya:

Spoiler: perintah

flutter doctor

Apabila tampila centang seperti ini:


Berarti, Flutter sudah siap digunakan untuk membuat aplikasi Android.

Bila kamu mendapatkan masalah seperti:

• Library yang dibutuhkan belum terinstall di komputer kita;
• Android SDK tidak dapat terdeteksi oleh Flutter
• dll.

Biasanya akan ada saran link yang harus dibuka dan perintah yang harus diketik.

Contoh:

Error tersebut disebabkan karena saya belum menyetujui lisensi Android SDK. Di sana saya diminta untuk mengetik perintah flutter doctor --android-licences.

 

[RayMantic]

Membuat Aplikasi Android dengan Flutter # 1.1

Cara membuat aplikasi baru, kita bisa ketik perintah:

Spoiler: perintah

# Membuat project baru
flutter create nama_apps

# pindah ke direktori project
cd nama_apps

Sebagai contoh, saya akan membuat aplikasi bernama hello_apps:

Tunggu sampai selesai, dan jangan lupa langsung masuk ke direktori project-nya.

Isi direktori project Flutter akan seperti ini:

Tidak perlu mengubah apapun di dalam aplikasi ini, kita langsung coba jalankan pada emulator.

Kita bisa menggunakan emulator dari Android Studio dan juga handphone fisik.

Saya akan menggunakan handphone fisik dengan OS Android Kitkat dan prosesor ARM.

Catatan: Saat ini Flutter belum mendukung build untuk prosesor x86. (cek ke Faqs)

Silahkan tancapkan handphone ke laptop/komputer dengan kabel data. Pastikan handphone-nya sudah diaktifkan developer options.

Kemudian, coba ketik perintah berikut:

Spoiler: perintah

fluter devices

Jika tampil seperti ini:

Artinya, handphone kita berhasil terdeteksi oleh Flutter.

Selanjutnya kita tinggal ketik perintah:

Spoiler: perintah

flutter run

Perintah tersebut untuk melakukan kompilasi, pembuatan APK, dan menjalankannya ke handphone.

Pastikan komputer terkoneksi dengan internet, karena Flutter akan membutuhkan beberapa dependency saat baru pertama kali melakukan build.

Hasilnya:

Lalu pada Android:

 

[RayMantic]

MEMBUAT APLIKASI DEKTOP #FLUTTER 1.2
Pada kesempatan kali ini, kita akan belajar cara membuat aplikasi desktop dengan Flutter.
Persiapan Awal
Ada beberapa hal yang harus dipersiapkan untuk membuat aplikasi desktop dengan Flutter:

1. Git;
2. Flutter versi terakhir (^1.6.1);
3. VS Code atau Android Studio untuk coding;
4. Beberapa Tools dan setup Environment.

Upgrade Flutter ke Versi Terbaru
Pastikan Flutter sudah terinstal di komputermu

Setelah itu, lakukan upgrade ke versi terbaru, gunakan channel master untuk mendapatkan versi terakhir.

Ketik perintah berikut pada terminal atau CMD:

Spoiler: perintah

# ubah channel ke master
flutter channel master

# upgrade versi flutter
flutter upgrade

Tunggulah sampai prosesnya selesai…

Catatan: Channel master menyediakan versi terakhir, tapi versi yang belum stabil. Untuk menggunakan Flutter versi stabil, kita harus mengubahnya kembali ke channel stabil dengan perintah:

flutter channel stable.

Setup Tools dan Environmnet
Beberapa tools yang harus dipersiapkan:1

• Linux: GCC versi terakhir (^7.4.0);
• MacOS: Xcode versi terbaru;
• Windows: Visual Studio 2017 atau 2019 dengan dukungan C++ development.

Pada tutorial ini, saya akan menggunakan Linux Kubuntu 18.04. Artinya, saya butuh GCC. GCC (GNU Compiler Collection) adalah paket yang berisi compiler untuk C/C++/Objective-C, dll.

Berikut ini perintah unutk menginstal GCC di Linux:

Spoiler: perintah

sudo apt install gcc

Setelah itu ketik gcc --version untuk mengecek versi yang terinstal.

Berikutnya kita harus membuat variabel environment dengan ENABLE_FLUTTER_DESKTOP dan isinya true.

Pada Linux, silahkan buat di dalam file ~/.bashrc dengan export.

Spoiler: perintah

export ENABLE_FLUTTER_DESKTOP=true

Sehingga menjadi seperti ini:

Untuk pengguna Fish Shell, silahkan buat variabel environment di dalam file .config/fish/config.fish dengan perintah berikut.

Spoiler: perintah

set -x ENABLE_FLUTTER_DESKTOP true

Untuk pengguna Windows, variabel Env bisa dibuat melalui Properties->Advenced->Environtment Variable.

Silahkan lakukan pencarian, kemudian ketik env.

Kemudian klik Environment Variables…

Buatlah variabel baru dengan nama ENABLE_FLUTTER_DESKTOP dan bernilai true.

Sehingga akan menjadi seperti ini:

Setelah itu, coba ketik perintah berikut:

Spoiler: perintah

flutter doctor
flutter devices

Jika muncul seperti ini:

Maka komputer kita sudah siap dipakai untuk membuat aplikasi Flutter.

Membuat Aplikasi Desktop dengan Flutter
Flutter belum menyediakan perintah untuk membuat aplikasi desktop, karena saat ini masih dalam tahap eksperimental.

Mungkin ke depan nanti akan disediakan, sehingga kita bisa pakai perintah flutter create untuk memulai membuat aplikasi desktop.

Untuk saat ini kita bisa memanfaatkan repositori sampel dari Github.

Silahkan clone ke lokal, ketik perintah berikut:

Spoiler: perintah

git clone --depth 1 https://github.com/google/flutter-desktop-embedding.git

Kemudian buka folder example yang ada pada flutter-desktop-embedding

Folder example pada repository flutter-desktop-embedding adalah sampel struktur proyek aplikasi desktop dengan Flutter.

Jika kamu akan membuat proyek baru, kamu bisa copy semua isi dari folder ini.

Jika kita perhatikan, struktur direktorinya hampir sama seperti aplikasi mobile dan web.

Pada aplikasi dekstop, terdapat direktori linux, macos, dan windows. Sedangkan pada mobile ada folder android dan ios.

Menjalankan Aplikasi Flutter di Desktop
Tanpa merubah apapun, kita langsung saja coba menjalankan aplikasi Flutter di Desktop. Namun sebelum melakukan itu, ada beberapa ritual yang harus dilakukan.

Pertama, install semua paket yang dibutuhkan.

Caranya:

Buka terminal di VS Code, kemudian ketik perintah:

Spoiler: perintah

flutter packages get

Tunggulah sampai prosesnya selesai.

Kedua, install build tools. Ketik perintah berikut:

Spoiler: perintah

flutter precache --linux

Untuk kamu yang menggunakan OS selain linux, silahkan ubah flag --linux menjadi --windows untuk Windows dan --macos untuk pengguna MacOS.

Perintah-perintah di atas diketik sekali saat awal saja. Selanjutnya kita tidak akan mengetiknya lagi, kecuali kalau kita instal package baru. Maka harus mengetik flutter packages get untuk mengambil paketnya dari internet.

Terakhir, ketik perintah:

Spoiler: perintah

flutter run

Untuk menjalankan aplikasi.

Tunggulah sampai prosesnya selesai…

…maka akan muncul jendela baru.

Build Aplikasi Flutter
Oke sekarang mari kita build aplikasinya.

Silahkan ketik perintah berikut:

Build untuk Linux:

Spoiler: perintah

flutter build linux

Build untuk Windows:

Spoiler: perintah

flutter build windows

Build untuk MacOS:

Spoiler: perintah

flutter build macos

Tunggu sampai selesai…

Hasilnya:

Akan ada folder baru pada folder build bernama linux (sesuai target build) dan di dalamnya terdapat folder release yang berisi file binary, library, dan data.

File binary ini bisa langsung kita eksekusi, coba saja klik 2x. Maka aplikasi akan terbuka.

Pada Windows, file ini akan berekstensi .exe.

Selanjutnya kita bisa distribusikan file binary ini ke user.

Biasanya dilakukan packaging dalam bentuk file .deb untuk distro Linux keluarga Debian dan .appimage untuk semua distro Linux.

Akhir Kata…
Hebat ya, satu framewrok bisa dipakai di berbagai platform.

 

[RayMantic]

MEMBUAT APLIKASI WEB # FLUTTER 1.3

Flutter awalnya dibuat untuk memudahkan pembuatan UI pada aplikasi mobile.

Tapi kini sudah semakin berkembang…

Flutter tidak hanya untuk Android dan iOS, Flutter kini juga bisa digunakan untuk membuat aplikasi web dan desktop.

Jadi…

Satu code base, bisa di-build ke berbagai platform.

Enak kan, nggak perlu capek-capek ngoding.

Berikut ini adalah arsitektur, bagaimana aplikasi Flutter untuk Desktop berkerja.

Bagian paling atas adalah kode dari aplikasi kita. Lalu di bawahnya akan menggunakan Flutter dan Flutter Engine untuk membangun aplikasi.

Nah Platform-spesific embeder ini tugasnya membungkus aplikasi agar bisa dijalankan di berbagai platform seperti Linux, Windows, Mac OS, dan Chrome OS.

Lalu untuk web bagaimana?

Hampir sama dengan yang desktop…

Flutter untuk web menggunakan Dart2js untuk kompilasi kode Flutter menjadi Javascript. Sehingga akan bisa dijalankan pada web browser.

Tugas kita cukup fokus pada kode aplikasi di bagaian paling atas.

Untuk bagian yang bawah, biarkan Flutter yang urus.

Baiklah, sekarang mari kita coba…

Membuat Proyek Baru
Silahkan buka VS Code, lalu tekan Ctrl+Shift+p, lalu ketik flutter dan pilih New Web Project.

Jika muncul seperti ini…

Langsung saja klik Update.

Setelah itu isi nama proyeknya.

Tunggulah sampai proyeknya selesai dibuat…

Setelah itu kita membutuhkan paket webdev untuk menjalankan server.

Silahkan buka terminal pada VS Code, tekan Ctrl+` (backtik). Lalu ketik perintah berikut:

Spoiler: perintah

flutter packages pub global activate webdev
flutter packages upgrade

Tunggulah sampai prosesnya selesai.

Memahami Struktur Proyek Flutter untuk Web
Jika kita perhatikan, struktur direktori proyek flutter untuk web seperti pada android dan iOS.

Bedanya, di sini ada direktori web. Kalau di flutter untuk mobile ada direktori ios dan android.

• lib/main.dart adalah file tempat kita menulis kode untuk aplikasi.
• web/main.dart adalah file entri point untuk aplikasi.
• web/index.html adalah file HTML yang akan digunakan sebagai wadah aplikasi.

Menjalankan Web Server
Oke sekarang tanpa merubah apapun, kita coba jalankan servernya.

Ketik perintah berikut:

Spoiler: perintah

webdev serve

Tunggu sampai muncul seperti ini:

Sekarang coba buka web browser dan arahkan ke alamat tersebut (https://localhost:8080/).

Maka hasilnya:

Nah untuk mengaktifkan hot reload atau live-reload, kita bisa pakai perintah berikut:

Spoiler: perintah

webdev serve --live-reload

#atau

webdev serve --auto restart

Tunggu sampai muncul seperti ini:

Berikutnya refresh browser, kemudian cobalah membuat sebuah perubahan pada file lib/main.dart.

Oh iya, live reload baru bisa bekerja di Google Chrome. Saya sudah coba di Firefox dan tidak bisa.

Modifikasi Kode
Sekarang mari kita coba modifikasi kode programnya. Ubahlah isi file lib/main.dart menjadi seperti ini:

import 'package:flutter_web/material.dart';

void main() => runApp(Petanikode());

class Petanikode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Petanikode - Belajar Membuat Web dengan Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyWebsite(),
    );
  }
}

class MyWebsite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Petani Kode'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: new NetworkImage(
                          "https://avatars2.githubusercontent.com/u/16254602?v=4",
                        )))),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Text(
                'Selamat datang di Flutter untuk Web',
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
            ),
            Column(
              children: <Widget>[
                Text("Ini adalah demo aplikasi web yang dibuat dengan Flutter."),
                SizedBox(height: 30),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Setelah itu ubah isi file web/index.html menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Ini adalah demo aplikasi web yang dibuat dengan Flutter">
  <meta name="keywords" content="Flutter, Hummingbird">
  <meta name="author" content="Petani Kode">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Petanikode: Belajar Membuat Aplikasi Web dengan Flutter</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

Maka hasilnya:

Build dan Deploy
Ketika aplikasinya sudah jadi, kita bisa melakukan build dan deploy.

Hasil build dari apalikasi ini akan berupa web statis dan ini bisa kita hosting di mana saja.

Baiklah, silahkan ketik perintah berikut untuk melakukan build.

Spoiler: perintah

webdev build

Tunggulah sampai selesai.

Maka kita akan punya folder baru bernama build.

Semua isi dari folder inilah yang akan kita upload ke web hosting.

Kita akan coba deploy atau hosting ke surge.sh. Surge adalah layanan hosting untuk web statis.

Kita akan menggunakan NPX untuk menjalankan perintah surge. Silahkan ketik perintah berikut:

Spoiler: perintah

npx surge build

Tunggulah sampai prosesnya selesai.

Oh iya, kita akan diminta alamat domain, alamat email dan password untuk login atau mendaftar ke surge

Source code dari aplikasi ini dapat di-download di Github

[ Download Source Code]

 

[RayMantic]

Menggunakan Widget Dasar dan Widget Layout [FLUTTER]

beberapa widget dasar, seperti:

• Text() untuk membuat teks;
• Image() untuk menampilkan gambar;
• Widget Layout seperti Center(), Column(), dan Row().

Mari kita mulai…

1. Membuat Project Baru
Buatlah project baru dengan nama first_app. Saya akan membuatnya dengan Android Studio.

Kelik menu File->New Flutter Project…

Kemudian tentukan jenis project yang akan dibuat. Kita akan membuat project Flutter Application.

Berikutnya tentukan nama aplikasi dan lokasi flutter SDK-nya.

Berikutnya tentukan nama package untuk aplikasinya.

Selesai…

2. Membuat StateLessWidget
StatelessWidget adalah class widget yang propertinya immutable, artinya nilainya tidak bisa diubah.

Cara membuat StatelessWidget adalah dengan membuat class turunan (extends) dari class StatelessWidget.

Contoh:

class MyApp extends StatelessWidget { }

Mari kita coba di dalam aplikasi.

Silahkan buka file lib/main.dart kemudian hapus semua isinya dan ganti dengan kode ini:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Setelah itu, coba jalankan aplikasi di emulator.

Maka hasilnya:

Penjelasan kode program di atas:

Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget MaterialApp(). Kemudian di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan Text.

Sehingga strukturnya akan terlihat seperti ini:

Ini adalah widget dasar…

Penjelasan:

• MyApp adalah StatelessWidget, merupakan widget induk;
• MaterialApp adalah widget yang membungkus beberapa widget yang menggunakan tema material design 1;
• Scaffold adalah widget untuk struktur dasar material design;
• AppBar adalah widget untuk membuat AppBar;
• Center adalah Widget layout untuk membuat widget ke tengah;
• Text adalah wdiget untuk membuat teks.

3. Mengubah Warna dan Teks
Oke, karena kita sudah tahu fungsi masing-masing widget…

…sekarang mari kita coba mengubah warna dan teksnya.

Sehingga kode aplikasnya menjadi seperti ini:

Hasilnya:

3. Menggunakan Widget Layout
Pada contoh sebelumnya, kita menggunakan widget layout Center() untuk membuat widget di dalamnya berada di posisi tengah-tengah.

Sekarang kita coba menggunakan widgetColumn() untuk membuat layout.

Ubahlah kode lib/main.dart menjadi seperti ini:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Aplikasi Flutter Petanikode'),
            backgroundColor: Colors.deepOrange,
          ),
          body:  Column(
              children: <Widget>[
                Image.network('https://www.petanikode.com/img/flutter/flutter.png'),
                Text(
                  'Belajar Flutter untuk Pemula',
                  style: TextStyle(fontSize: 24, fontFamily: "Serif", height: 2.0),
                ),
                Text('oleh Petani Kode')
            ]
          )

      ),
    );
  }
}

Widget Column() merupakan widget layout yang dapat berisi beberapa layout.

Widget yang berada di dalam widget Column() akan ditata dalam satu kolom. Sehingga akan berjejer ke bawah.

Hasilnya akan seperti ini:

Widget Image() dan Text() ditata dalam satu kolom.

Selain widget Column() ada juga widget Row() yang fungsinya menata widget di dalamnya dalam satu baris ke samping.

Contoh:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Aplikasi Flutter Petanikode'),
            backgroundColor: Colors.deepOrange,
          ),
          body:  Column(
              children: <Widget>[
                Image.network('https://www.petanikode.com/img/flutter/flutter.png'),
                Text(
                  'Belajar Flutter untuk Pemula',
                  style: TextStyle(fontSize: 24, fontFamily: "Serif", height: 2.0),
                ),
                Text('oleh Petani Kode'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Image.network('https://www.petanikode.com/img/flutter/flutter-sqr.png'),
                    Image.network('https://www.petanikode.com/img/flutter/flutter-sqr.png')
                  ],
                )
            ]
          )
      ),
    );
  }
}

Hasilnya:

Widget Column() dan Row() adalah widget Layout yang fungsinya untuk menanta widget lainnya.

Ini adalah perbedaan widget Column() dengan Row().

Apa Selanjutnya?
Kita sudah belajar menggunakan beberapa widget dasar. Tentu saja ini belum cukup.

Masih banyak widget yang belum kita coba. Daftar widget Flutter dapat kamu lihat di Widget Catalog.




UNTUK TUTORIAL FLUTTER SUDAH SELESAI
AKAN DI LANJUTKAN PADA TUTOR ANDROID DENGAN METODE LAIN

 

[RayMantic]

TUTOR SELANJUTNYA MENGGUNAKAN KOTLIN UNTUK MEMBUAT APLIKASI ANDROID

ViewPager dan TabLayout

Dalam membuat aplikasi android, ada banyak pilihan layout yang bisa kita gunakan.

Salah satunya dengan ViewPager dan TabLayout.

ViewPager dan TabLayout biasanya digunakan untuk menampilkan kategori seperti ini:

Contoh lain, kamu bisa temukan di aplikasi WhatshApp.
Lalu bagaimana cara membuat layout yang seperti ini?

Gampang…

Ada dua yang kita butuhkan:

1. ViewPager
2. TabLayout

ViewPager akan bertugas menampilkan fragment, lalu TabLayout akan menjadi navigasinya.

Perhatikan gambar ini:

Setiap page bisa berisi layout yang berbeda-beda, karena akan ditangani oleh Fragment dan kita bisa mengisinya dengan apapun yang diinginkan.

Pada tutorial ini, kita akan membuat tiga halaman dan mengisinya dengan teks Page 1, Page 2, dan Page 3.

Sebenarnya terserah kamu mau diisi dengan apa.

Saya menggunakan Page 1, Page 2, dan Page 3 agar mudah dipahami.

Ok, langsung saja kita mulai…

Membuat Project Baru
Tahap pertama, kita harus membuat project terlebih dahulu.

Buatlah project baru dengan nama Kotlin Pager:

Klik Next…

Klik Next…

Klik finish…
Setelah itu tambahkan library support design pada build.gradle (Module:app):

implementation 'com.android.support:design:27.1.0'

Library ini akan kita butuhkan untuk membaut ViewPger dan TabLayout.

Sekarang file build.gradle akan menjadi seperti ini:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.petanikode.kotlinpager"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test***nner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.0'
    implementation 'com.android.support:design:27.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    implementation 'com.android.support:support-v4:27.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test🏃1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Jika kamu mandapatkan error, coba samakan versinya dengan versi di atas.

• compileSdkVersion 27
• targetSdkVersion 27
• implementation 'com.android.support:design:27.1.0'

Setelah itu, klik Sync Now.

Tunggu sampai proeses Sync selesai. Setelah itu silahkan lanjutkan…

Membuat Layout
Buka file activity_main.xml kemduian ubah isinya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

Perhatikan kode diatas!

Kita memberikan id viewpager_main untuk ViewPager. Ini nanti akan menjadi nama objek untuk mengakses ViewPager pada Kotlin.

Selanjutnya silahkan tambahkan beberapa fragment.

Membuat Fragment
Buatlah fragment sebanyak tiga dengan nama:

1. FirstFragment() untuk halaman 1
2. SecondFragment() untuk halaman 2
3. ThridFragment() untuk halaman 3

Ketiga fragment tersebut akan menjadi sebuah page yang akan kita tampilkan dalam activity.

Silahkan klik New->Fragment->Blank Fragment:

Saat membuat Fragment, jangan centang Include fragment factory methods? dan Include interface callbacks? agar kode fragment yang dibuat tidak ramai .

Lakukan lagi, buat juga SecondFragment dan ThridFragment.

Kemudian setiap Layout fragment, isi seperti ini.

File: layout/fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 1" />

</FrameLayout>

File: layout/fragment_second.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 2" />

</FrameLayout>

File: layout/fragment_thrid.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 3" />

</FrameLayout>

Layout tersebut hanya untuk menampilkan teks “Page X”.

Selesai urusan fragment, selanjutnya kita akan membuat adapter.

Membuat Kustom Adapter untuk Pager
Adapter berfungsi untuk menghubungkan Fragment dengan ViewPager.

Kita akan membuat kustom adapter yang dituruntkan dari class FragmentPagerAdapter.

Pada kustom adapter ini, kita bisa menentukan Fragment mana saja yang akan dibuka dan title untuk tabs.

Sekarang buatlah Class baru bernama MyPagerAdapter, kemudian isi dengan kode berikut:

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter

class MyPagerAdapter(fm: FragmentManager): FragmentPagerAdapter(fm){

    // sebuah list yang menampung objek Fragment
    private val pages = listOf(
            FirstFragment(),
            SecondFragment(),
            ThridFragment()
    )

    // menentukan fragment yang akan dibuka pada posisi tertentu
    override fun getItem(position: Int): Fragment {
        return pages[position]
    }

    override fun getCount(): Int {
        return pages.size
    }

    // judul untuk tabs
    override fun getPageTitle(position: Int): CharSequence? {
        return when(position){
            0 -> "First Tab"
            1 -> "Second Tab"
            else -> "Third Tab"
        }
    }
}

Menambahkan Adapter untuk Pager
Setelah membuat kustom Adapter, selanjutnya kita gunakan adapter tersebut pada ViewPager.

Silahkan buka MainActivity.kt, kemudian tambahkan kode berikut pada method onCreate().

viewpager_main.adapter = MyPagerAdapter(supportFragmentManager)

Kita menggunakan kotlin extension dalam mengakses objek ViewPager.

Karena itu…

…Pastikan kotlin extension sudah diimpor di dalam MainActivity.kt.

import kotlinx.android.synthetic.main.activity_main.*

Sehingga sekarang kode lengkapnya akan menjadi seperti ini:

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewpager_main.adapter = MyPagerAdapter(supportFragmentManager)
    }
}

Beres!

Sekarang coba jalankan aplikasinya.

 

[kepurhon]

Mantap hu, pengen belajar jg..

 

[RayMantic]

Mantap hu, pengen belajar jg..

Mantap gan..belajar sama sama hu

 

[RayMantic]

Kotlin: Belajar Menggunakan Listview dengan ArrayAdapter
ListView adalah salah satu cara menampilkan data di dalam aplikasi android. Biasanya digunakan untuk menampilkan sekumpulan data.

Pada kesempatan ini, kita akan belajar cara menggunakan ListView di Anrdoid dengan data bersumber dari sebuah List atau Array.

Baiklah.

Mari kita mulai…

Membuat Project Baru
Buatlah project baru bernama Kotlin List dan jangan lupa untuk memilih include kotlin support:

Klik Next…

Klik Next…

Klik finish…


Setelah itu, untuk memastikan versi library yang kamu gunakan sama dengan versi pada tutorial ini. Silahkan buka file build.gradle (app).

Pastikan versi yang digunakan seperti ini ya…

• compileSdkVersion 27
• targetSdkVersion 27
• implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
• implementation 'com.android.support:appcompat-v7:27.1.0'

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.petanikode.kotlinlist"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test***nner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test🏃1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Setelah itu klik Sync Now:

Tunggu sampai proeses Sync selesai. Setelah itu silahkan lanjutkan…

Membuat Layout ListView
Berikutnya silahkan buka layout/activity_main.xml.

Kita akan menggunakan <ListView>, silahkan ubah kode layout-nya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv_languages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></ListView>

</LinearLayout>

Pada kode layout di atas, kita menggunakan id lv_languages untuk ListView. Id ini nanti akan kita gunakan untuk menakses ListView dari Kotlin.

Berikut ini tampilan preview dari kode layout di atas:

Menampilkan Data ke ListView
Untuk dapat menampilkan data ke ListView, kita membutuhkan sebuah adapter.

Adapter ini bertugas untuk menghubungkan sumber data (data source) dengan ListView.

Ada berbagai macam adapter yang bisa kita gunakan. Kita juga bisa membut kustom adapter dengan membuat Class turunan dari adapternya.

Pada tutorial ini, kita akan mencoba menggunakan ArrayAdapter, karena sumber data yang akan kita gunakan berasal dari sebuah List atau Array.

Silahkan buka file MainActivity.kt kemdian impor class-class yang dibutuhkan.

import android.R.layout.simple_list_item_1
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ArrayAdapter
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

Setelah itu tambahkan kode berikut pada fungsi onCreate.

// data yang akan kita tampilkan ke dala ListView
val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")

// memberikan adapter ke ListView
lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)

Pada kode di atas, kita membuat sebuah list bernama languages yang menyimpan nama-nama bahasa pemrograman.

List ini akan menjadi sumber data yang akan ditampilkan ke dalam ListView.

lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)

Arti kode tersebut:

Kita akan menggunakan ArrayAdapter untuk ListView yang sudah dibuat. ArrayAdapter memiliki tiga parameter penting:

1. Context: this
2. Layout: layout yang akan digunakan oleh item ListView. simple_list_item_1 adalah layout bawaan Android yang akan kita gunakan.
3. Data: languages data yang akan kita tampilkan ke ListView.

Okay, sekarang kode lengkap untuk MainActivity.kt akan menjadi seperti ini:

import android.R.layout.simple_list_item_1
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ArrayAdapter
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // data yang akan kita tampilkan ke dalam ListView
        val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")

        // memberikan adapter ke ListView
        lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)
    }
}

Sekarang, cobalah untuk menjalankan aplikasinya.

Maka hasilnya akan seperti ini:

Kita sudah berhasil menampilkan data ke dalam ListView.

Pertanyaanya:

Bagaimana cara memberikan respon ketika salah satu item diklik?

Jawabannya, kita harus membuatkan handler untuk event tersebut. Silahkan lanjutkan…

Menangani Klik pada ListView
Buka file MainActivity.kt, kemudian tambahkan kode berikut di dalam fungsi onCreate. Tepat di bawah kode yang kita buat tadi.

// menangani item saat dilklik
lv_languages.setOnItemClickListener { parent, view, position, id ->
    Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
}

Sehingga akan class MainActivity menjadi seperti ini:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // data yang akan kita tampilkan ke dalam ListView
        val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")

        // memberikan adapter ke ListView
        lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)

        // menangani item saat dilklik
        lv_languages.setOnItemClickListener { parent, view, position, id ->
            Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
        }
    }
}

…dan coba jalankan lagi aplikasinya:

Penjelasan:

Pada kotlin, kita bisa langsung memberikan listener dengan cara seperti ini:

// menangani item saat dilklik

lv_languages.setOnItemClickListener { parent, view, position, id ->

    Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()

}

Lebih sederhana dibandingkan java bukan…

Pada kode di atas terdapat empat parameter yang perlu diperhatikan:

• parent adalah view dari induknya, dalam hal ini mengacu ke ListView;
• view adalah view dari baris yang diklik yang ada di dalam ListView;
• position adalah posisi item yang diklik;
• id adalah ID dari view item yang diklik;

Kita menggunakan position untuk mengakses indeks dari List, sehingga menampilkan bahasa pemrograman yang diklik.

Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()

Kita menggunakan Toast untuk menampilkannya.

Selain menampilkan pesan Toast, kita juga bisa melakukan hal lain di sini. Misalnya: membuka activity lain, menghapus item dari list, dll.

Kita sudah belajar cara menggunakan ListView dengan ArrayAdapter. Masih banyak adapter lain yang perlu kita coba.

Seperti:

• BaseAdapter;
• CursorAdapter;
• ListAdapter;
• SimpleAdapter;
• SimpleCursorAdapter;
• SpinnerAdapter;
• dan adapter yang lainnya.

 

[-saitama-]

ijin untuk ikutan belajar

 

[RayMantic]

KEMUNGKINAN UNTUK ANDROID SUDAH CUKUP SAMPAI DISINI SEMENTARA

[JIKA ADA KESALAHAN PENULISAN CODE DAN PERINTAH BISA DI INGATKAN]

 

[Ratamahatta]

nice suhuu pengen belajar coding2 nih bisa hu?

 

[RayMantic]

nice suhuu pengen belajar coding2 nih bisa hu?

Semua yg keliatan bisa di pelajari kalo mau hu

 

[kepurhon]

Hu, ajarin ane bkin aplikasi streaming music ato aplikasi ringtone.. Kmrn ane bkinnya pake appybuilders, skrg udh gk bsa dipake lg.. Soalnya msih api26 gk ditingkatkan lg sma pengembang nya.. Adsense ane gk nmbah2 lg jdinya..

 

[RayMantic]

Hu, ajarin ane bkin aplikasi streaming music ato aplikasi ringtone.. Kmrn ane bkinnya pake appybuilders, skrg udh gk bsa dipake lg.. Soalnya msih api26 gk ditingkatkan lg sma pengembang nya.. Adsense ane gk nmbah2 lg jdinya..

Baik saya bikinin via android studio
bisa ngoding apa mau bikin tanpa ngoding ..
kalo yang tanpa ngoding saya juga perlu belajar dari aplikasi penyedianya .. tapi kalo ngoding via android studio bisa langsung saya bikinin cuma ya basic bisa kembangin sendiri ...
kemungkinan 2 hari saya kerjain selesai .. saya sambi sama piket malam saya bisa

 

[kepurhon]

Baik saya bikinin via android studio
bisa ngoding apa mau bikin tanpa ngoding ..
kalo yang tanpa ngoding saya juga perlu belajar dari aplikasi penyedianya .. tapi kalo ngoding via android studio bisa langsung saya bikinin cuma ya basic bisa kembangin sendiri ...
kemungkinan 2 hari saya kerjain selesai .. saya sambi sama piket malam saya bisa

Trima kasih hu, yg badic pun gk ap2..
Ane bsa sambil belajar, cma nti klo mentok ane tanya2 lg ya..

 

[RayMantic]

Trima kasih hu, yg badic pun gk ap2..
Ane bsa sambil belajar, cma nti klo mentok ane tanya2 lg ya..

ya kalo bingung tinggal posting disini dan kalo ada yang error bisa di SC biar saya paham kenapanya.
jadinya lusa malam

 

[RayMantic]

Membuat Aplikasi Audio Player [Android Studio]
Cara Membuat Aplikasi Audio Player Keren Dengan Android Studio:
1. Buat Project Baru, kemudian kasi nama project sesuai aplikasi yang akan kamu buat, lalu klik Next.


2. Selanjutnya pilih perangkat yang bisa menjalankan aplikasi yang kamu buat. Disini kita membuat aplikasi untuk phone dan tablet. Jadi silahkan pilih Phone dan tablet. Jangan lupa pilih API atau minimum SDK yang dapat menjalankan palikasi mu, saran saya pilih versi paling bawah. Jika sudah kamu bisa klik Next.


3. Kemudian pilih activity pada mobile.activity ini harus kamu sesuaikan dengan aplikasi yang akan kamu buat, karena kita mau buat apllikasi pemutar music kita pilih saja yang Empty activity. Jika sudah klik Next.


4. Selnjutnya, isi nama activity sesuai keinginan mu, atau biarkan default. Lalu klik Next.


5. Selanjutnya, kita akan membuat satu folder baru di dalam ress untuk meletakkan music-music yang akan diputar. Caranya klik kanan pada folder “ress” lalu pilih “New” kemudian pilih “Directory”.


6. Maka akan muncul kotak dialog baru penamaan directory, silahkan kamu isi nama directory nya dengan nama “raw”. Jika sudah langsung klik OK.


7. Setelah itu, kamu copykan sebuah lagu lalu pastekan kedalam directory “raw” tadi. Cara pengcopyannya sama seprty copy paste biasa.


8. Jika sudah, sekarang kita desain tampilan aplikasinya. Silahkan kamu masukkan komponen berikut:


9. Susun komponen tersebut seprti ini:


10. Anda juga bisa mendesain tamilan melalu koding caranya klik tab TEXT yang berada di bawah atau di saping DESIGN. Lalu ketikkan lah koding berikut:
Coding MainActivity.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/activity_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:background="@drawable/bg"
   tools:context="com.bacacoding.audioplayer.MainActivity">
    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Play Your Music"
       android:id="@+id/textView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true"
       android:layout_marginTop="48dp"
       android:textStyle="normal|bold"
       android:textColor="@android:color/background_light"
       android:textSize="30sp"
       android:textAlignment="center"
       android:fontFamily="casual" />
    <Button
       android:text="Play"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginLeft="16dp"
       android:layout_marginStart="16dp"
       android:id="@+id/button"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_marginBottom="74dp" />
    <Button
       android:text="Pause"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignTop="@+id/button"
       android:layout_centerHorizontal="true"
       android:id="@+id/button2" />
    <Button
       android:text="Stop"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/button3"
       android:layout_alignBaseline="@+id/button2"
       android:layout_alignBottom="@+id/button2"
       android:layout_alignParentRight="true"
       android:layout_alignParentEnd="true"
       android:layout_marginRight="11dp"
       android:layout_marginEnd="11dp" />
</RelativeLayout>

11. Jika anda ingin mengganti background seperti diatas sialhkan copykan sebuah gambar, lalu pastekan ke folder “ress>>drawable”.


12. Kemudian kamu cari pada activity_main.xml koding “ android:background=”@drawable/bg”. Kamu ganti “bg” sesuai nama file gambar yang kamu pastekan.


13. Selanjutnya kita masuk ke tab MainActivity.Java. silahkan kamu ketikkan kodeing berikut:


14. Jika kurang jelas, berikut saya lampirkan script codingan nya. Note: usahakan di ketik manual biar ingat dan Jago atau jika ingin copas, copy lah dengan Package nya sekalian biar tidak error.
Coding MainActivity.Java:

package com.bacacoding.audioplayer;
import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.io.IOException;
public class MainActivity extends AppCompatActivity {
    Button btn_play, btn_pause, btn_stop;
    MediaPlayer mPlayer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_play = (Button)findViewById(R.id.button);
        btn_pause = (Button)findViewById(R.id.button2);
        btn_stop = (Button)findViewById(R.id.button3);
        stateAwal();
        btn_play.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view){
                play();
                btn_play.setEnabled(false);
                btn_pause.setEnabled(true);
                btn_stop.setEnabled(true);
            }
        });
        btn_pause.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view){
                pause();
            }
        });
        btn_stop.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view){
                stop();
            }
        });
    }
    public void stateAwal(){
        btn_play.setEnabled(true);
        btn_pause.setEnabled(false);
        btn_stop.setEnabled(false);
    }
    private void play(){
        mPlayer = MediaPlayer.create(this,R.raw.happy);
        try {
            mPlayer.prepare();
        }catch (IllegalStateException e){
            e.printStackTrace();
        }catch (IOException e){
            e.printStackTrace();
        }
        mPlayer.start();
        mPlayer.setOnCompletionListener(new MediaPlayer.OnCompletionListener(){
            @Override
            public void onCompletion (MediaPlayer mediaPlayer){
                stateAwal();
            }
        });
    }
    public void pause(){
        if (mPlayer.isPlaying())
            if (mPlayer!=null){
                mPlayer.pause();
    }else{
        if (mPlayer!=null){
            mPlayer.start();
        }
    }
}
public void stop(){
    mPlayer.stop();
    try {
        mPlayer.prepare();
        mPlayer.seekTo(0);
    }catch (Throwable t){
        t.printStackTrace();
    }
    stateAwal();
}
}

15. Sekarang coba RUN kan Program anda, jika sukses hasilnya akan seperti ini: