Wednesday, July 3, 2019

Movie App dengan Angular JS dan Onsen UI

Kali ini saya akan share contoh aplikasi front-end web dengan bahasa pemrograman Javascript menggunakan framework Angular JS versi 1. Disini saya juga menggunakan Onsen UI (https://onsen.io/) sebagai library untuk layouting di tampilan mobile. Contoh aplikasi ini bisa digunakan untuk referensi final project pada mata kuliah Hybrid Web prodi D3 Teknik Informatika.

Untuk data yang digunakan adalah API dari themoviedb.org, yang merupakan database movie dengan dokumentasi yang lengkap dan gratis. Untuk menggunakan layanan ini silahkan melakukan registrasi terlebih dahulu untuk mendapatkan API Key yang nantinya akan kita gunakan untuk melakukan request data. 

Dibawah ini tampilan untuk halaman utama yang menampilkan data list movie yang diakses melalui url: https://api.themoviedb.org/3/discover/movie?api_key={xyz}
List Data Movie
Dari masing-masing list item movie tersebut dapat dilihat detail pada tampilan dibawah ini dengan menggunakan url: https://api.themoviedb.org/3/movie/[id]?api_key={xyz}

Detail item Movie
Untuk dapat melakukan request pada kedua url API diatas, parameter api_key harus diubah dengan data api_key anda yang didapatkan setelah login ke web themoviedb.org dengan memilih menu Setting > API > API Key (v3 auth), seperti pada tampilan dibawah ini:

API Key di themoviedb.org
Untuk code program ini bisa anda dapatkan di https://github.com/ariflaksito/movie-app-angular1. Anda bisa melakukan clone source code atau download dalam zip file. Setelah itu silahkan anda ubah 2 file yaitu:

  • js/controllers/MainController.js
  • js/controllers/MovieController.js
Yang perlu diubah adalah API Key yang anda miliki dicopykan ke code url untuk menggantikan api_key=xyz pada kedua file tersebut.

InshaAllah lain kali akan saya tulis artikel tentang penggunaan framework Angular JS

Friday, June 28, 2019

Cara mudah membuat kutipan di Microsoft Word


Dari pengalaman saya membimbing mahasiswa/i dalam penulisan skripsi atau publikasi ilmiah, tidak ada satupun yang tidak menggunakan Microsoft Word. Belum pernah saya menemukan satupun dari mereka yang menggunakan Open Office atau Libre Office dalam menuliskan naskah ilmiah, apalagi menggunakan LaTeX. Setelah beberapa kali diskusi dengan mahasiswa/i bimbingan saya ternyata beberapa dari mereka belum paham penggunaan fitur sitasi otomatis di Microsoft Word. Padahal sebagian besar saya membimbing pada prodi Informatika 😂😂

Di posting kali ini saya akan share cara mudah dalam menggunakan fitur sitasi/kutipan/referensi. Untuk contohnya disini saya gunakan Microsoft Word Office 365, untuk versi Word yang lainnya  kurang lebih sama juga caranya.

Sebelum kita mulai cara menggunakan sitasi di Word, yang perlu diperhatikan adalah sumber referensi apa saja yang bisa kita gunakan untuk karya ilmiah khususnya skripsi. Berikut daftar sumber referensi tersebut:
  1. Buku dengan nomer ISBN resmi,
  2. Jurnal Cetak atau Jurnal Online
  3. Surat kabar atau Majalah
  4. Naskah Skripsi
  5. Website resmi instansi/perusahaan yang bereputasi
Khusus website ini kita tidak bisa menggunakan web asal-asalan, seperti blog, wikipedia atau tulisan orang yang tidak ilmiah. Tetapi kita bisa mengambil sumber referensi dari website dimana yang menerbitkan adalah instansi/perusahaan yang bereputasi. Contohnya anda menggunakan sumber referensi dari dokumentasi framework CodeIngniter di website, naah.. hal itu bisa kita gunakan karena diterbitkan oleh instansi resmi yaitu British Columbia Institute of Technology sebagai pengembang framwork CodeIgniter. Amannya silahkan diskusikan dengan dosen pembimbing untuk masalah sumber referensi web ini.

Oke, kita mulai saja cara menggunakan sitasi di Word. Setelah kita buka aplikasi Word, pilih tab Referensi atau References kemudian terdapat satu blok bagian Referensi yang nantinya akan kita gunakan. Seperti pada gambar dibawah ini


Untuk menambah daftar referensi, pertama klik tombol Kelola Sumber/Citations yang akan memunculkan window Pengelola Sumber. Jika belum ada data sumber yang akan digunakan, klik tombol Baru dimana akan muncul tampilan window Buat Sumber. Selanjutnya isikan tipe sumber (buku, situs web, artikel jurnal, laporan, paten, dll), pengarang, judul, tahun, kota dan penerbit. Untuk beberapa tipe sumber field tersebut tidak wajib diisikan, tetapi lebih baiki lagi jika semua field terisi, untuk memperjelas dan lebih detail informasi sumber referensi karya kita.

Window Pengelola Sumber
Window Buat Sumber, contoh menambahkan referensi tipe Buku
Setelah kita tambahkan beberapa sumber referensi, pada window Pengelola Sumber akan muncul daftar referensi tersebut. Supaya dapat digunakan pada file kita, maka pindahkan daftar referensi tersebut ke bagian kanan (Daftar saat ini) menggunakan tombol Salin ->

Cara melakukan kutipan pada paragraf yang kita tuliskan yaitu dengan cara memilih tombol Sisipkan Kutipan/Insert Citation, kemudian pilih sumber referensi yang muncul, maka secara otomatis pada paragraf akan muncul kutipan tersebut.


Menambahkan kutipan (Dengan style IEEE)
Pada gambar diatas kita menambah kutipan dengan style IEEE. Terdapat beberapa style yang digunakan dalam membuat kutipan dan Daftar pustaka seperti, APA, Chicago, Harvard, dll. Setiap perguruan tinggi mempunyai standard style dalam penulisan skripsi/karya ilmiah, silahkan tanyakan ke dosen pembimbing atau redaksi penerbit jurnal untuk aturan style penulisannya.

Dalam membuat daftar pustaka, kita juga dapat memanfaatkan fitur di Word ini dengan memilih tombol Bibliografi, maka secara otomatis akan tergenerate daftar pustaka pada tulisan kita. Jika pada saat proses penulisan kita menambahkan beberapa referensi baru dan perlu ditampilkan di daftar pustaka, kita dapat melakukan pembaharuan dengan cara menempatkan kursor pada tulisn daftar pustaka kita, kemudia akan muncul tombol Perbarui Kutipan dan Bibliografi, pilih tombol tersebut maka daftar pustaka dan kutipan kita akan terupdate.


Membuat daftar pustaka otomatis
Kita dapat juga merubah penggunaan style dengan cara klik tombol dropdown pada bagian Gaya, kemudian pilih style yang kita inginkan, maka otomatis pada kutipan di paragraf kita dan daftar pustaka akan berubah menyesuaikan style pilihan tersebut.

Cukup mudah khan menggunakan fitur Referensi di Microsoft Word, jangan sampai masalah penulisan kutipan dan pustaka menghabiskan waktu kita dalam menyelesaikan penulisan skripsi.

Selamat mencoba, Semoga bermanfaat..

PS: Silahkan tinggalkan komentar jika ada pertanyaan

------------------------
Contoh style IEEE
------------------------
Algoritma Bee Colony telah digunakan pada pencarian rute terpendek untuk pengiriman distribusi Carica di Nida Food Wonosobo, dimana untuk distribusi pengiriman pada 13 toko diperlukan jarak terpendek yaitu 54,35 km [1]

DAFTAR PUSTAKA
[1] M. D. Arifin and A. D. Laksito, "IMPLEMENTASI ALGORITMA BEE COLONY UNTUK OPTIMASI RUTE DISTRIBUSI CARICA NIDA FOOD WONOSOBO," Jurnal Sistem Informasi (Sistemasi), pp. 243-253, 2019.
[2] A. D. Laksito, K. Kusrini, H. Sismoro, F. Rahmawati and M. Yusa, "A Comparison Study of Search Strategy on Collecting Twitter Data for Drug Adverse Reaction," in 2nd International Seminar on Application for Technology of Information and Communication, Semarang, 2018.
[3] P. S. Vilarino and C. P. Sanchez, PHP Microservices, Birmingham: Packt Publishing Ltd., 2017.

------------------------
Contoh style APA
------------------------
Algoritma Bee Colony telah digunakan pada pencarian rute terpendek untuk pengiriman distribusi Carica di Nida Food Wonosobo, dimana untuk distribusi pengiriman pada 13 toko diperlukan jarak terpendek yaitu 54,35 km (Arifin & Laksito, 2019)

DAFTAR PUSTAKA

Arifin, M. D., & Laksito, A. D. (2019). IMPLEMENTASI ALGORITMA BEE COLONY UNTUK OPTIMASI RUTE DISTRIBUSI CARICA NIDA FOOD WONOSOBO. Jurnal Sistem Informasi (Sistemasi), 243-253.

Laksito, A. D., Kusrini, K., Sismoro, H., Rahmawati, F., & Yusa, M. (2018). A Comparison Study of Search Strategy on Collecting Twitter Data for Drug Adverse Reaction. 2nd International Seminar on Application for Technology of Information and Communication. Semarang.

Vilarino, P. S., & Sanchez, C. P. (2017). PHP Microservices. Birmingham: Packt Publishing Ltd.

--------------------------
Contoh style Chicago
--------------------------
Algoritma Bee Colony telah digunakan pada pencarian rute terpendek untuk pengiriman distribusi Carica di Nida Food Wonosobo, dimana untuk distribusi pengiriman pada 13 toko diperlukan jarak terpendek yaitu 54,35 km (Arifin and Laksito 2019)

DAFTAR PUSTAKA

Arifin, Muhammad Darwis, and Arif Dwi Laksito. "IMPLEMENTASI ALGORITMA BEE COLONY UNTUK OPTIMASI RUTE DISTRIBUSI CARICA NIDA FOOD WONOSOBO." Jurnal Sistem Informasi (Sistemasi), 2019: 243-253.

Laksito, Arif Dwi, Kusrini Kusrini, Heri Sismoro, Fita Rahmawati, and Mochammad Yusa. "A Comparison Study of Search Strategy on Collecting Twitter Data for Drug Adverse Reaction." 2nd International Seminar on Application for Technology of Information and Communication. Semarang, 2018.

Vilarino, Pablo Solar, and Carlos Perez Sanchez. PHP Microservices. Birmingham: Packt Publishing Ltd., 2017.

Wednesday, June 26, 2019

Bagaimana memulai belajar Javascript?


Sebelum saya share tentang bagaimana memulai mempelajari javascript secara praktis, kita coba pahami dulu kenapa kita harus mempelajari bahasa pemrograman ini. JavaScript adalah salah satu bahasa pemrograman web yang paling kuat dan fleksibel. Apalagi bagi anda yang ingin berkarir sebagai web-developer, kemampuan yang baik dalam menggunakan bahasa ini mutlak diperlukan. Atau para mahasiswa yang mengambil tema web dalam skripsinya jangan sampai tidak paham dengan javascript, dosen pembimbing atau dosen penguji siap meberondong pertanyaan2 ke anda.

Perangkat komputer/laptop yang anda gunakan untuk menggunakan javascript tidak membutuhkan spesifikasi yang besar, kita hanya memerlukan web browser dan text editor yang sangat ringan digunakan seperti: Notepad++, Sublime atau Atom. Klopun anda memiliki spesifikasi laptop yang gahar/super bisa menggunakan PHPStorm atau Visual Studio Code.

PHPStorm ini adalah IDE dari Jetbrains yang berbayar dan anda bisa menggunakan trial 30 hari. Atau jika anda sebagai mahasiswa dosen, atau tenaga pendidik dan memiliki email resmi dari kampus, anda bisa mendaftarkan lisensi pendidikan gratis. Saya sudah menggunakan selama 3 tahun versi free educational licenses ini, dimana setiap tahun perlu mengisi form untuk extends masa aktif. Dengan satu aktivasi tersebut kita bisa mendapatkan free produk Jetbrains yang lain, seperti: Datagrip, WebStorm, AppCode, RubyMine, dll. Untuk detail free lisensinya anda bisa menuju ke link ini

Jetbrains Free Educational Licenses 

Ohh maaf, jadi pembahasan Jetbrains inih 😂😁

Untuk mempelajari javascript, paling tidak anda sudah paham dengan HTML dan CSS sebagai bahasa markup dan style untuk membangun sebuah website. Javascript sangat erat berkaitan dengan HTML dan CSS. Dimana javascript ini bertugas membuat tampilan website menjadi lebih interaktif dan dinamis.

Perlu diketahui bahwa jascript ini berbeda dengan Java, tidak ada kaitan dan hubungan antara bahasa pemrograman javascript dan Java. Java merupakan bahasa pemrograman berorientasi Objek yang di kembangkan oleh Sun dan saat ini sudah diambil alih oleh Oracle. Sedangkan javascript dikembangkan oleh Brendan Eich yang saat itu bekerja untuk Netscape dimana awalnya bernama Live Script. Kemungkinan untuk alasan marketing dan popularitas, Netscape mengubah namanya menjadi Javascript.

Konsep tentang algoritma pemrograman merupakan nilai plus untuk menguasai javascript. Meskipun anda belum pernah mempelajari algoritma pemrograman anda bisa mempelajarinya bersamaan dengan belajar javascript. Modal untuk bisa menguasai javascript adalah koneksi, konsisten dan komintmen. Yaa.. anda harus mempunyai koneksi internet yang oke dan komitmen untuk meluangkan waktu mempelajarinya. 

Berikut ini tahapan untuk memulai mempelajarinya:
  1. Pelajari blog di malasngoding.com tentang javascript. Artikel ini berbahasa indonesia dan cukup lengkap tahap-tahap untuk dasar teori dan best-practise javascript. Terdapat 13 bagian dan kurang lebih diperlukan waktu sekitar 10 jam untuk menyelesaikannya. Berikut alamat webnya: https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/

  2. Ikuti e-course gratis di dicoding.com pada materi Web Fundamental. Disini selain mempelajari javascript, juga terdapat materi HTML dan CSS. Anda harus registrasi dulu untuk bisa bergabung di course ini. Dari pengalaman saya sebelumnya e-course dicoding ini terstruktur dalam menyusun materi dan memudahkan dalam memahami konsep pemrograman yang kita pelajari. Batas waktu menyelesaikan e-course ini adalah 30 hari, maka anda harus mengatur waktu sebaik mungkin dan konsisten menyelesaikannya. Langsung saja menuju link berikut: https://www.dicoding.com/academies/123
Menurut saya dari blog dan e-course diatas sangat efektif untuk membangun dasar skill pemrograman javascript. Selain mempelajari dari 2 materi tersebut bisa juga dicoba beberapa blog atau e-course berikut ini:
Selamat belajar javacript yaa, semoga 1-2 bulan kedepan setelah membaca artikel ini anda bisa menguasai pemrograman javascript dan bisa bermanfaat untuk kehidupan anda atau orang-orang disekitar, hehee...

InshaAllah selanjutnya saya akan share artikel best-practise dalam mengembangkan web menggunakan javascript

Tuesday, April 2, 2019

Membangun REST API dengan Laravel dalam 5 menit

Beneran 5 menit bisa jadi? Serius bisa koq 😉 Hehe.. 

Saya mulai mengenal laravel setelah mendapatkan kerjaan dari salah satu vendor telekomunikasi terbesar di Indonesia untuk memaintenance sistem yang sudah ada sekitar 2 tahun yang lalu. Selain itu beberapa programmer web jaman now ga keren klo belum menggunakan laravel untuk mengembangkan web di PHP. 

Dan semester ini saya diberi amanah untuk mengajar matakuliah Hybrid Web Development, dimana mahasiswa nantinya akan membuat suatu aplikasi back-end menggunakan REST API dan front-end menggunakan javascript, dan di bagian back-end akan digunakan framework laravel untuk membangun REST API tersebut.

Laravel dengan fitur Migration dan Eloquent-nya memungkinkan kita dengan cepat membangun aplikasi berbasis web. Masalah waktu 5 menit ini sebenarnya banyak faktor yang mempengaruhi, mungkin bisa lebih cepat lagi atau malah jauh lebih lama. Saya sendiri merasakan kemudahan dan kecepatan dalam membangun aplikasi menggunakan laravel dibanding beberapa framework yang lain. Jadi 5 menit ini sebenarnya hanya kiasan saja 👌

Untuk laravel bisa didownload menggunakan composer, saat artikel ini ditulis versi laravel yang digunakan adalah 5.8.3.

Bagi yang belum tau composer, bisa menuju ke artikel ini untuk penjelasannya. Berikut perintah untuk membuat project baru laravel dengan composer. Tuliskan pada command atau terminal.

$ composer create-project laravel/laravel laravel-api --prefer-dist

Silahkan menunggu proses download file-file laravel, lama tidaknya tergantung koneksi internet anda ya.. Selanjutnya kita akan membuat file Model Mhs beserta migration-nya, silahkan dilanjutkan dengan menulis perintah ini di command atau terminal.
$ php artisan make:model Mhs -m

Pada perintah diatas, selain membuat model, kita gunakan tambahan parameter -m yang berfungsi untuk membuat file migration. Buka file migration pada direktori database/migrations/2019_04_02_22551_create_mhs_table.php, kemudian tambahkan code berikut ini pada method up():

Schema::create('mhs', function (Blueprint $table) {
 $table->bigIncrements('id');
 $table->string('nim');
 $table->string('nama');
 $table->string('email');
 $table->string('hp');
 $table->timestamps();
});

Pada tutorial ini akan digunakan 1 tabel mhs dengan field seperti pada code diatas, yaitu: id, nim, nama, email, hp. Fungsi timestamp() disini otomatis akan men-generate field created_at dan updated_at pada tabel. Selanjutnya buka file app/Mhs.php dan lengkapi code untuk model Mhs seperti dibawah ini:

class Mhs extends Model{
    protected $fillable = ['nim', 'nama', 'email', 'hp'];
}

Variabel $fillable yang digunakan diatas merupakan salah satu variabel spesial pada Eloquent di laravel yang burfungsi untuk mendaftarkan field/kolom pada tabel yang dapat digunakan untuk insert atau update data. Selain itu terdapat juga variabel $hidden, $visible, $appends, dll. Lebih detailnya bisa menuju ke artikel id-laravel.com berikut ini.

Setelah melengkapi kedua code diatas, selanjutnya jalankan perintah migrasi di command atau terminal sebagai berikut:
$ php artisan migrate

Seeding pada laravel adalah fitur untuk melakukan pengisian data pada tabel di database. Disini akan digunakan library Faker yang dapat melakukan insert ke tabel menggunakan data testing, jadi mempermudah programmer tentunya dalam melakukan pengembangan sistem.

Untuk men-generate code Seeder tersebut silahkan tuliskan perintah berikut ini di command atau terminal:
$ php artisan make:seeder MhsTableSeeder

Dari hasil execute perintah diatas akan ter-generate file di /database/seeds/MhsTableSeeder.php. Pada function run() tambahkan code berikut ini untuk melakukan insert data menggunakan Faker.

$faker = Faker::create();
 foreach(range(0,10) as $i){
  DB::table('mhs')->insert([
  'nim' => $faker->randomNumber(8),
  'nama' => $faker->name,
  'email' => $faker->email,
  'hp' => $faker->phoneNumber
 ]);
}
Untuk menjalankan proses insert data testing ke dalam tabel gunakan perintah dibawah ini pada command atau terminal
$ php artisan db:seed --class=MhsTableSeeder

Dan cek menggunakan db manager untuk memastikan bahwa data-data tersebut telah ter-create


10 data telah ditambahkan melalui seeder


Tahap selanjutnya adalah membuat file controller untuk API dan memetakan end-point dengan menggunakan route di laravel. Pertama jalankan perintah untuk membuat file controller di command atau terminal.
$ php artisan make:controller MhsController

Berikutnya buka file routes/api.php dan tambahkan code dibawah ini untuk memetakan end-pont yang akan digunakan.

Route::get('mhs', 'MhsController@index');
Route::get('mhs/{id}', 'MhsController@show');
Route::post('mhs', 'MhsController@store');
Route::put('mhs/{id}', 'MhsController@update');
Route::delete('mhs/{id}', 'MhsController@delete');

Dan terakhir, buka file app/Http/Controllers/MhsController.php. Sesuaikan dengan code berikut ini:

use Illuminate\Http\Request;
use App\Mhs;

class MhsController extends Controller
{
    public function index(){
        return Mhs::all();
    }
 
    public function show($id){
        return Mhs::find($id);
    }

    public function store(Request $request){
        return Mhs::create($request->all());
    }

    public function update(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->update($request->all());

        return $article;
    }

    public function delete(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->delete();

        return 204;
    }
}

Tahap ini telah berhasil dibuat 5 buah end-point. InshaAllah pada artikel berikutnya akan saya bahas pengujian tiap-tiap end-point menggunakan tools postman.

Selamat mencoba, Semoga bermanfaat..

Tuesday, March 19, 2019

Yuk berkenalan dengan Nasi berserat

Sejak 2 tahun terakhir ini saya sudah mengikuti channel telegram dan instagram Jurus Sehat Rasulullah, sudah sering kopdar juga sih dengan pemilik akunnya dok Zaidul Akbar, diskusi masalah bisnis 😋😉.

Nah.. sering juga saya share info dari akun tersebut ke istri yg mana seprofesi dengan dok Zaidul, ternyata si doi sepakat juga dengan beliau.. hehe

Kali ini pembahasan di https://t.me/JurusSehatRasulullah tentang nasi. Nasi memang selalu menjadi trending topik dalam pembahasan karbohidrat, kita di Indonesia belum lengkap klo makan tanpa nasi pastinya. Ternyata menurut dok Zee, nasi putih saat ini memang sudah tidak lagi mengandung serat dan mineral penting lainnya. Oleh karena itu ketika makan nasi putih saja maka otomatis gula darah jelas akan naek karena tinggiya gula di nasi putih. 

Disuruh stop makan nasi putih..? Berat deh kayaknya 😏

Beliau memberi tips sederhana agar nasi putih kita tetep ada seratnya bahkan tinggi serat. Salah satunya adalah dengan menambahkan produk topingan serat buat nasi putih. Tampilannya setelah dimasak kira-kira seperti gambar dibawah ini..

Sarapan saya pagi ini
Nama produk tersebut adalah Kongbap, teman-teman bisa mencari di supermarket atau toko-toko online. Ternyataa.. setelah ditambahkan topping tersebut, nasinya jadi enaaaak banget, dan saya cocok (ga tau juga selera teman2 yg lain). 

Cara masaknya juga gampang koq, tinggal campur aja beras dengan 1 sachet Kongbap dan masak seperti biasa. Menurut panduan di bungkusnya 1 sachet bisa digunakan untuk 2 cup nasi putih (2 liter nasi mungkin ya). Klo saya, sekali masak nasi 2 liter ditambahkan 1 sachet, gitu ajaa.  

Ini penampakan 1 sachet Kongbap
Sekitar 4-6 bulan terakhir ini saya dan keluarga sering konsumsi nasi + kongbap, ga setiap hari juga siih.. paling ga 2/3 kali seminggu. Semoga istri saya konsisten pas belanja bulanan beli kongbap sekalian..

Selamat mencoba yaaa 😉

Friday, January 4, 2019

Kembali ke Pebble watch

Pebble adalah smartwatch yang mulai muncul sekitar April 2012 dan support untuk OS Android dan iOS. Pada saat itu, Pebble merupakan satu-satunya smartwatch yang ada, belum ada saingan dari Samsung Gear, Garmin atau iWatch. Pebble Classic adalah smartwatch seri pertama yang diluncurkan oleh Pebble Techology Corporation dan pada bulan Mei 2012 berhasil memperoleh keutungan US$10,3 juta.

Saat itu harga Pebble Classic sekitar $99 dan pada periode promo bisa diorder dengan harga $70-an. Akhir tahun 2013 saya sukses mendapatkan pebble dari searching di Olx dan COD-an di TVRI Jogja dengan harga klo ga salah 800 ribu sekian.

Alasan memiliki Pebble ketika itu adalah: (1)Ga pernah punya jam tangan, (2)Smartwatch yang mendukung notifikasi di Android, (3)Terdapat berbagai macam apps dan watchface yang ada di Pebble Store/Play (Ga tau namanya), (4)Menyediakan Pebble SDK dimana kita dapat mendevelop app atau watcface (Belum kesampaian 😅)

Ternyata seri Pebble Classic ini terdapat kelemahannya, setelah menggunakan sekitar 2 tahun muncul maslaah yaitu layar pada Pebble sering blur/pecah. Setelah mencoba googling, banyak juga yang mengalami masalah ini, istilahnya "pebble screen tearing". Akhirnya saya coba untuk email ke support Pebble dan Alhamdulillah saya akan mendapatkan 1 set Pebble sebagai pengantinya. 💪

Inilah tampilan screen tearing..
Dan sekitar bulan Juli 2015 saya mendapatkan paketnya yang dikirim melalui DHL dan harus menebus sekitar Rp150,000 di Kantorpos. Hmm... seharusnya penerima ga dikenankan biaya lagi, karena ini bukan pembelian barang baru, tapi return dari perusahaan Pebble. Tapi yaa sudahlah.. susah menjelaskan ke pihak yang bersangkutan dan tidak perlu berdebat, banyak-banyak berdoa saja, InshaAllah akan lebih banyak rejeki dari berbagai arah yang tak terduga. 😁😇

Sekitar satu tahun terakhir masalah screen tearing muncul lagi, terakhir kali saya gunakan adalah bulan November 2017 saat trip ke Japan, tapi setelah itu sudah tidak tertolong lagi karena semakin parah. Berhubung perusahaan Pebble sudah  tutup sejak tahun 2016 dan di-informasikan tidak lagi ada supportnya (FYI: Pebble dibeli perusahaan Fitbit dan harga smartwatch-nya mahal-mahal 😑) maka saya pasrahkan saja untuk menyimpan rapat-rapat di kotaknya kembali.

Tetapi 2 hari kemarin koq tiba-tiba di youtube muncul recommended video dengan judul "[GUIDE] Pebble Screen Tearing Fix", penasaran khaan.. dilanjut menyimak dan melihat video-video lainnya. Selanjutnya coba degh buka kembali kotak Pebble dan setelah 1/2 jam bongkar-bongkar berhasil juga fixing Pebble.


Setelah Pebble bisa digunakan kembali rencana meminang Fitbit dibatalkan dulu, karena dari sisi kegunaan smartwatch ini sudah mencukupi. Dan untuk setup kembali ternyata harus install aplikasi rebble sebagai gateway untuk menghubungkan ke aplikasi resmi Pebble. Selanjutnya penggunaan seperti biasa, pilih-pilih watchface, pilih-pilih aplikasi dan nikmati jaman-jaman kejayaan pebble dahulu kala.. ✌😉

Kembali menemani hari-hari yang menyenangkan 😉

Sunday, December 30, 2018

Alasan kenapa update ke Android 9


Setelah dipastikan rilis Android versi 9 atau P dengan codename "Pie" pada tanggal 6 Agustus 2018 kemarin, akhirnya di penghujung tahun 2018 ini kebagian juga update di Mi A1. Seperti pada update-update Android OS sebelumnya, saya tidak begitu tertarik dengan fitur-fitur baru yang ditawarkan. Selama masih oke untuk produktifitas kerjaan dan hoby, fitur-fitur tersebut bagi saya sebagai tambahan saja.

Pada Xiaomi Mi A1, ukuran file update Android P sekitar 1074 MB atau 1GB lebih sedikit. Setelah berhasil update ke Android P, saya coba explore fitur-fitur terbarunya, seperti adaptive battery, adaptive display dan digital wellbeing.

Tetapi pada update Android versi ini, saya tertarik untuk mempelajari aplikasi Digital Wellbeing dari Google. Aplikasi ini dapat meng-identifikasi pengguna ketika melakukan aktivitas di smartphone. Bahkan bisa detail sampai ke setiap aplikasi yang ada. Misal dalam sehari kita menggunakan Whatsapp selama berapa jam, berapa kali membukanya dan berapa jumlah notifikasinya.

Aplikasi Digital Wellbeing
Screen time dan timer limit setiap aplikasi
Bahkan kita bisa mengatur limit dari setiap aplikasi dalam sehari, contohnya Whatsapp bisa kita set sehari maksimal 30 menit, maka setelah lewat dari 30 menit kita tidak dapat membuka aplikasi Whatsapp dan icon menjadi disable. Bagi yang peduli dengan produktivitas aplikasi ini sangat berguna, dengan mempelajari history statistik penggunaan smartphone bisa menjadikan motivasi untuk meningkatkan produktivitas.

Saya sendiri memanfaatkan aplikasi ini untuk mengurangi penggunaan Whatsapp dan meningkatkan penggunaan beHafizh pada beberapa minggu ini, semoga bisa menjadi lebih baik dalam meningkatkan produktifitas dan kebermanfaat banyak orang.

Selamat mencoba untuk mencicipi Pie dari Android 9

Monday, October 29, 2018

Kapan waktu efektif "coding"?



“Coding” istilah populernya.. dimana saat kita fokus mengerjakan modul, mencari solusi algoritma atau tracking error di suatu program biasanya membutuhkan waktu yang tidak sebentar. Kebanyakan programmer malam hari adalah waktu yang nyaman untuk melakukan aktivitas coding, ditemani dengan secangkir kopi panas dan camilan..  PERFECT! pastinya

Selama bertahun-tahun saya juga menikmati aktivitas coding di malam hari sampai dengan pagi. Setelah saya sadari ternyata saya banyak melewatkan hal-hal istimewa di saat pagi, yaitu tidak bisa shalat subuh berjamaah di masjid, karena sering ketiduran pas adzan, melakukan aktivitas seharian tidak fokus, karena masih kurang jatah tidurnya.

Akhirnya saya berusaha untuk merubah pola aktivitas tersebut supaya bisa mendapatkan keistimewaan dan keberlimpahan rejeki di pagi hari. Sekitar jam 8 malam, saya coba untuk mulai istirahat tidur, dan pasang alarm jam 2 atau 3 pagi. Saat bangun cobalah berwudhu dan lanjut shalat tahajud, inshaAllah hilang semua rasa kantuknya, selanjutnya mulailah aktivitas coding + kopi panas.

Alhamdulillah kebiasaan tersebut sudah terpola sejak 2-3 tahun yang lalu.

BangunAwal itu mengundang keberkahan dan keberlimpahan. "Ya Allah, berkahilah umatku di waktu pagi,” inilah doa Nabi Muhammad.

Di kesempatan lain, beliau bersabda, “Berpagi-pagilah dalam mencari rezeki, karena sesungguhnya berpagi-pagi itu membawa keberkahan dan mengantarkan pada kemenangan.”

Itulah salah satu rahasia sukses orang-orang beriman dalam melakukan penaklukan-penaklukan. Mereka melakukannya di waktu pagi. Bahkan hijrah Sang Nabi pun dilakukan di waktu pagi.

Silahkan bagi teman-teman yang ingin merubah pola waktu coding-nya bisa seperti yang saya lakukan, atau masih nyaman dengan menghabiskan waktu malam, silahkan sajaa.. 

Semoga bermanfaat..

Monday, October 8, 2018

Membuat ListView dan CustomListView di Android

Penggunaan komponen ListView sangat sering kita jumpai pada aplikasi Android, seperti pada aplikasi yang menampilkan kontak phonebook, menampilkan data report atau yang lainnya. ListView berguna menampilkan data dalam bentuk vertical/horizontal yang bisa kita scroll keatas dan kebawah.

ListView dapat berjalan menggunakan Adapter yang berfungsi mem-binding data yang akan kita tampilkan. Data-data tersebut bisa dari variabel array, file json yang di dapat dari akses ke API atau data-data dari database local seperti SQLite.

Berikut contoh membuat ListView  sederhana menggunakan ArrayAdapter untuk menampilkan data dari variabel array.

1. ListView Sederhana

Pertama siapkan komponen ListView pada file layout xml yang akan anda gunakan untuk menampilkan data
<?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"
    android:padding="8dp"
    tools:context=".MyListActivity">

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp" />

</android.support.constraint.ConstraintLayout>

Selanjutnya buatlah variabel ListView dan variabel String array untuk menyiapkan data-data yang akan ditampilkan melalui adapter.
private ListView lvItem;
private String[] players = new String[]{
   "Cristiano Ronaldo", "Paulo Dybala", "Mario Mandžukić",
      "Miralem Pjanić", "Sami Khedira", "Emre Can", "Claudio Marchisio",
      "Medhi Benatia", "Giorgio Chiellini", "Leonardo Bonuci",
      "Wojciech Szczęsny"
};

Dan yang terakhir, pada methode onCreate tambahkan Adapter dan  panggil dari lvItem menggunakan method setAdapter( ), berikut kodenya:
lvItem = (ListView) findViewById(R.id.list_view);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MyListActivity.this,
     android.R.layout.simple_list_item_1, android.R.id.text1, players);

lvItem.setAdapter(adapter);

2. Custom ListView

Custom ListView adalah suatu list dari beberapa item dengan tampilan content yang bisa kita sesuaikan dan mendukung multi-content. Misalkan kita ingin menampilkan data dengan beberapa tipe content, kita bisa menggunakan Custom ListView ini.

Pada tutorial ini kita akan coba menambahkan tampilan data position dan number dari data players yang sudah kita buat pada listView sebelumnya. Anda bisa buat Activity baru lagi dan tambahkan variabel array lagi seperti dibawah ini:

private ListView lvCustom;
private String[] players = new String[]{
    "Cristiano Ronaldo", "Paulo Dybala", "Mario Mandžukić",
    "Miralem Pjanić", "Sami Khedira", "Emre Can", "Claudio Marchisio",
    "Medhi Benatia", "Giorgio Chiellini", "Leonardo Bonuci",
    "Wojciech Szczęsny"
};

private String[] pos = new String[]{
    "Forward", "Forward", "Forward",
    "Midfilder", "Midfilder", "Midfilder", "Midfilder",
    "Defender", "Defender", "Defender",
    "Goal Keeper"
};

private int[] num = {7,10,17,5,6,23,8,4,3,19,1};

Untuk Adapter Custom ini, kita perlu siapkan file xml untuk membuat tampilan view yang kita inginkan. Selain itu kita juga perlu membuat Class di java yang merupakan extends/turunan dari BaseAdapter. Untuk layout xml utama masih sama seperti pada point 1 ListView Sederhana, kita harus menambahkan komponen ListView pada layout tersebut. Berikut contoh kode xml yang anda simpan pada file /res/layout/list_players.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_vertical"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ic_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_player"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="#000000"
                android:text="Paulo Dybala"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/tv_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="16dp"
                android:text="10"
                android:textAlignment="viewEnd"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_pos"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:text="Forward"
                android:textColor="@color/colorPrimaryDark" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Dan berikut ini adalah kode dari Custom Adapter yang kita siapkan untuk mengatur data dari variabel-variabel array sebeumnya. Kita simpan dengan nama JuveAdapter.java

public class JuveAdapter extends BaseAdapter {

    Context context;
    String[] players;
    String[] positions;
    int[] number;
    LayoutInflater inflater;

    public JuveAdapter(Context context, String[] players, String[] positions,
                       int[] number) {
        this.context = context;
        this.players = players;
        this.positions = positions;
        this.number = number;
        this.inflater = (LayoutInflater.from(context));
    }

    @Override
    public int getCount() {
        return players.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflater.inflate(R.layout.list_players, null);
        TextView tvPlayers = (TextView) view.findViewById(R.id.tv_player);
        TextView tvPositions = (TextView) view.findViewById(R.id.tv_pos);
        TextView tvNumbers = (TextView) view.findViewById(R.id.tv_number);

        tvPlayers.setText(players[i]);
        tvPositions.setText(positions[i]);
        tvNumbers.setText(number[i]+"");

        return view;
    }
}

Dan terakhir kita perlu menambahkan kode berikut di method onCreate untuk men-set Custom Adapter yang telah kita buat pada slistview.

lvCustom = findViewById(R.id.list_view);
JuveAdapter adapter = new JuveAdapter(this, players, pos, num);
lvCustom.setAdapter(adapter);

Tampilan ListView dan Custom ListView sebagai berikut:

 

Jika ada pertanyaan dari kode tutorial kode diatas, silahkan tinggal pesan pada kolom komentar, Semoga bermanfaat

Wednesday, October 3, 2018

Deploy Aplikasi menggunakan PHPloy

Bagi pengembang aplikasi web saat ini, baik back-end, front-end ataupun fullstack, seharusnya sudah tidak menggunakan tools FTP Client untuk deploy aplikasi ke server. Sudah tidak lazim drap and drop file dari window satu ke window yang lainnya. Atau tidak perlu lagi menggunakan lagi cpanel file manager untuk upload file zip untuk membuat aplikasinya live di server.

Hehe.. ini menurut pendapat saya looh dan mungkin juga banyak yang setuju koq.. ✌😉

Pengertian deployment di web adalah proses memindahkan kode (terupdate) ke live server. Dan menurut Baki Goxhaj dalam blognya di wplancer.com, banyak developer paham tentang proses ini dan ternyata hanya sedikit orang saja yang melakukanya dengan cara yang professional.

Sudah ada beberapa tools untuk memudahkan proses deployment tersebut, seperti menggunakan Jenkins atau Capistrano. Sebelumnya saya juga menggunakan tools online seperti FTPloy dan Deploybot, tapi disini ada kelemahan yaitu hanya menyediakan 1 project saja untuk deployment, lebih dari itu maka silahkan menyesuaikan dengan tarif yang ada 😅


Untuk menggunakan PHPloy ini pastikan project anda sudah menggunakan Git sebagai code collaboration. Konsep kerja PHPloy ini adalah melakukan perubahan(upload/delete) file-file yang telah ter commit pada git ke server, sangat simple dan mudah digunakan. Proses deployment PHPloy menggunakan command pada terminal dengan perintah-perintah yang telah didefinisikan.

Untuk memulai menggunakan PHPloy anda bisa mengikuti langkah-langkah berikut ini:
  1. Gunakan composer dengan menambah paket di file composer.json. Belum tau apa itu composer? silahkan pelajari artikel di link berikut ini.
    {
        "require": {
            "banago/phploy":"4.8.5"
        }
    }
    
  2. Selanjutnya dari terminal jalankan perintah:
    composer update
    
  3. Copykan file /vendor/banago/phploy/bin/phploy ke root project anda
  4. Buat file baru dengan nama phploy.ini, yang berisi kode konfigurasi berikut
    [production]
    user = username
    pass = s0m3p455w0rd
    host = yourdomain.com
    path = /public_html/folder
    exclude[] = 'phploy'
    exclude[] = 'phploy.ini'
    exclude[] = 'composer.json'
    exclude[] = 'composer.lock'
    port = 21
    passive = true
    
  5. Setelah itu cek apakah phploy dan konfigurasinya sudah sesuai dengan menjalankan perintah di terminal
    [unix/mac]
    ./phploy -v
    
    [windows]
    php phploy -v
    
    [akan menampilkan seperti dibawah ini]
    C:\Users\Arif Laksito\www>php phploy -v
    -------------------------------------------------
    |                     PHPloy                    |
    -------------------------------------------------
    PHPloy v4.8.5
  6. Setelah melakukan perubahan kode-kode program, jalankan perintah git add dan git commit.
  7. Untuk melihat file-file apa saja yang akan di deploy, gunakan perintah berikut di terminal
    ./phploy -l
    
  8. Dan terakhir untuk proses deploy ketikan perintah phploy. Selanjutnya akan muncul proses deploy di terminal, silahkan menunggu proses tersebut.
    ./phploy
    
  9. Jika dirasa ingin membatalkan proses deployment tersebut bisa dilakukan rollback dengan perintah:
    ./phploy –rollback
    
Menurut saya tools ini sangat simple dan mudah sekali dalam penggunaan atau konfigurasinya. Bahkan PHPloy ini bisa juga digunakan untuk deployment ke beberapa server sekaligus.