Monday, August 20, 2018

Membuat Splash Screen di Android

Pada beberapa aplikasi Android, terdapat splash screen yang akan tampil saat aplikasi pertama di jalankan. Fungsi dari splash screen tersebut bermacam-macam, ada yang digunakan untuk load data, untuk menjalankan file konfigurasi, atau untuk proses suatu algoritma tertentu.

Ada juga splash screen yang tidak ada fungsinya sama sekali, khusus digunakan untuk tampilan awal saja. Pada artikel ini akan saya bahas pembuatan splash screen yang digunakan untuk tampilan saja, tidak ada fungsi khusus di dalamnya. 

Setelah membuat project baru dari AndroidStudio, buat activity baru dengan nama SplashActivity. jadikan activity tersebut sebagai launcher dan tambahkan code untuk file manifests/AndroidManifest.xml sebagai berikut:
<activity android:name=".MainActivity"></activity>
<activity android:configchanges="orientation|keyboardHidden|screenSize" 
    android:name=".SplashActivity" 
    android:theme="@style/AppTheme.Fullscreen">
     <intent-filter>
          <action android:name="android.intent.action.MAIN">
          <category android:name="android.intent.category.LAUNCHER">
     </category></action></intent-filter>
</activity>
Pada code diatas masih muncul error di editor, karena tema yang digunakan SplashActivity tidak ditemukan, selanjutnya tambahkan code berikut di file /res/values/styles.xml:
<style name="AppTheme.Fullscreen">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
</style>
Untuk tampilan layout-nya, kita bisa sesuaikan file /res/layout/activity_splash.xml dengan code dibawah ini:
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimaryDark"
    android:orientation="vertical"
    tools:context=".SplashActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content"
        android:contentDescription="Logo"
        app:srcCompat="@drawable/logo_movie" />
</RelativeLayout>


Dalam pembuatan logo contoh aplikasi ini saya gunakan web online https://logomakr.com/, dimana kita tinggal sesuaikan saja dengan icon dan font yang bisa kita butuhkan dan edit secara online. File logo dalam format png silahkan di-copy pada folder /res/drawable dan di panggil sesuai namanya seperti pada code diatas.

Terakhir, pada file SplashActivity tambahkan code berikut pada fungsi onCreate( ). Code tersebut berfungsi mengarahkan ke MainActivity setelah delay waktu 2 detik.
new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}, 2000);
Dan tampilan akhirnya kurang lebih seperti pada gambar dibawah ini:


Silahkan untuk dicoba code diatas untuk membuat splash screen di Android, jika ada yang ingin ditanyakan bisa tinggalkan di kolom pesan yaa

Sunday, August 19, 2018

Bagaimana menyimpan API KEY di Android?

Sebelumnya saya selalu menyimpan API Key dalam suatu class di android pada field tertentu. Ternyata hal ini sangat tidak dianjurkan dalam best practice pengembangan aplikasi Android. Kenapa? 

Karena saat kita menaruh code program kita di suatu repository, misal Github, maka orang lain akan bisa mengakses API Key milik kita, dimana jika ada orang yang menyalahgunakan akan berakibat kerugian dari kita sendiri.

Berikut ini caranya supaya API Key kita tetap aman meskipun code kita dishare melalui repository:
  1. Setelah membuat project dan diintegrasikan dengan version control, misalnya git. Tambahkan file /gradle.properties pada gitignore dari project tersebut. Seperti pada baris ke-11 file .gitignore dibawah ini:
    *.iml
    .gradle
    /local.properties
    /.idea/libraries
    /.idea/modules.xml
    /.idea/workspace.xml
    .DS_Store
    /build
    /captures
    .externalNativeBuild
    /gradle.properties
    
  2. Tambahkan baris kode API berikut pada file project:gradle.properties. Pada contoh berikut saya gunakan 2 API Key dari TheMovieDB dan OpenWeather:
    #API KEY
    TheMovieDBApi = 4b5017168cac6677269cxxxxxx
    TheOpenWeatherApi = 4de4dd041e499ca8axxxxxx
    
  3. Selanjutnya buka file app: build.gradle, tambahkan code seperti pada baris ke-3 sampai dengan baris ke-6 dan code pada baris ke-17 sampai dengan baris ke-20 seperti dibawah ini:
    apply plugin: 'com.android.application'
    
    // Define Variable API Key
    def STRING = 'String'
    def THEMOVIEDB_API_KEY = '"' + TheMovieDBApi + '"' ?: '"Define your The Movie DB API Key!"'
    def OPENWEATHER_API_KEY = '"' + TheOpenWeatherApi + '"' ?: '"Define your The Openweather API Key!"'
    
    android {
        compileSdkVersion 28
        defaultConfig {
            applicationId "net.ariflaksito.katalogfilm"
            minSdkVersion 15
            targetSdkVersion 28
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
            each { type ->
                type.buildConfigField STRING, 'TheMovieDBApi', THEMOVIEDB_API_KEY
                type.buildConfigField STRING, 'TheOpenWeatherApi', OPENWEATHER_API_KEY
            }
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        implementation 'com.android.support:appcompat-v7:28.+'
        implementation 'com.android.support.constraint:constraint-layout:1.0.2'
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'com.android.support.test:runner:1.0.1'
        androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    }
    
  4. Setelah itu anda bisa memanggil API Key tersebut melalui class di Android.
    static String MOVIE_API = BuildConfig.TheMovieDBApi;
    static String WEATHER_API = BuildConfig.TheMovieDBApi;
Alhamdulillah mendapatkan ilmu ini dari masukan reviewer di submission pertama pada project kelas MADE di dicoding, yang belum tau dicoding bisa menuju ke artikel saya yang ini.

Semoga bermanfaat yaa.. 

Thursday, August 16, 2018

Belajar Android dengan Dicoding


Sekitar 2 bulan yang lalu, salah satu rekan dosen mengajak saya untuk mengikuti beasiswa Google dengan kurikulum dari dicoding. Apa itu dicoding? Silahkan pelajari informasi detailnya di https://www.dicoding.com.

Awalnya saya pikir ini seperti online course lainnya yang membosankan dan tidak sesuai dengan kebutuhan industri, lebih enak belajar langsung dari stackoverflow.com degh 😅😁

Ternyata kurikulum di dicoding berbedaa, selain materi yang terstruktur seperti pada dokumentasi resmi di Android Developer dengan cita rasa bahasa indonesia, terdapat juga penjelasan dalam bentuk video oleh pakar-pakar yang berkompeten dan yang paling menarik adalah adanya code review dari setiap submission yang kita kerjakan.

Menurut saya yang paling menarik dan kereen adalah adanya fitur code review di dicoding. Disini kita bisa belajar banyak dari masukan-masukan yang diberikan oleh reviewer untuk code yang kita submit. Selanjutnya kita tinggal ikuti masukan-masukan tersebut untuk submission yang kita kerjakan atau untuk submission selanjutnya. Setelah menyelesaikan kelas Menjadi Android Developer Expert (MADE), banyak sekali pengalaman yang saya dapatkan dalam mengembangkan aplikasi Android kedepannya, dan pastinya sangat bermanfaat untuk teman-teman yang sedang belajar atau yang sudah berkecimpung di industri pengembangan aplikasi Android.

Oiyaa.. bagi mahasiswa aktif atau dosen bisa mendapatkan beasiswa dari Google untuk kelas MADE di dicoding, untuk dosen bisa dipelajari pada tautan berikut ini: https://goo.gl/AhXoWD. Sedangkan untuk mahasiswa bisa menuju ke tautan ini: https://goo.gl/YAt6ea

Bagi mahasiswa dibutuhkan referral dari dosen, silahkan bisa menggunakan link berikut ini:
  1. Belajar Membuat Aplikasi Android untuk Pemula, https://www.dicoding.com/s/G8Mw1nwQ
  2. Menjadi Android Developer Expert (MADE), https://www.dicoding.com/s/vwAvBXvW
Menurut saya, bagi yang benar-benar serius ingin belajar membuat aplikasi Android, beasiswa ini perlu diperjuangkan. Silahkan bisa di cek di tokopedia atau bukalapak untuk harga resmi course ini adalah 2,2 juta rupiah
Saat anda berhasil menyelesaikan suatu course di dicoding, anda akan mendapatkan sertifikat dimana bermanfaat khususnya bagi yang akan apply ke industri-industri aplikasi digital.

Pada artikel berikutnya akan saya bahas tentang salah satu submission di kelas MADE Dicoding.

Semoga bermanfaat.

Wednesday, August 15, 2018

Berkenalan dengan Composer

Pada artikel saya sebelumnya tentang Membangun REST API menggunakan Slim, saya menggunakan suatu package & dependencies manager yang akan saya bahas di posting kali ini.

Beberapa tahun terakhir ini, konsep pemrograman di php mengalami perubahan yang cukup membuat banyak programmer beralih karena kemudahannya. Dengan adanya suatu dependencies manager yang populer akhir-akhir ini yaitu composer, konsep pemrograman di php jadi lebih terstruktur dan rapi.

Dengan composer dan autoload-nya serta namespace, kita bisa bebas mengakses file-file php tanpa harus ribet meng-include atau me-require semua file atau class yang kita butuhkan, autoload dari composer sudah melakukan semua itu out of the box. Sehingga OOP dalam php benar-benar nyamaan.

Kemampuan composer dalam hal dependencies sangat membantu programmer saat menggunakan suatu paket tertentu dimana paket tersebut membutuhkan paket-paket lainnya juga. Secara otomatis composer akan mengatur dan menyesuaikan ketergantungan suatu paket dengan paket lainnya juga.

Paket yang dapat digunakan bisa diakses di https://packagist.org. Sampai saat artikel ini ditulis, jumlah paket yang sudah terdaftar adalah 191, 491.

Berikut ini beberapa kendala yang bisa diselesaikan menggunakan composer:
  1. Mengatasi masalah denpendencies PHP package,
  2. Mengatasi masalah include file dengan autoload,
  3. Mengatasi masalah update paket.

Instalasi Composer

Composer membutuhkan PHP dengan versi 5.3.2+. Berikut cara instalasi di Sistem Operasi Linux & Mac:
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
Sedangkan untuk pengguna Windows dapat melakukan instalasi dengan download file instaler dari alamat di https://getcomposer.org/Composer-Setup.exe.

Setelah instalasi selesai, anda bisa cek dengan menjalankan perintah berikut di command atau terminal:
composer -V

Penggunaan

Misalkan kita ingin menampilkan tanggal dengan berbagai macam format, disini sudah terdapat paket yang sering digunakan yaitu Carbon. Kita bisa mengetahui nama paket dengan melakukan pencarian pada web https://packagist.org. Setelah menemukan nama paketnya (contohnya disini: nesbot/carbon), kita jalankan perintah berikut di command atau terminal untuk mennggunakannya:
composer require nesbot/carbon
Maka composer akan otomatis mendownload paket tersebut dan membuat file baru composer.json, composer.lock dan folder vendor.

Perhatikan file composer yang otomatis ter-create tadi.
{
    "require": {
        "nesbot/carbon": "^1.33"
    }
}
Disitu terdapat informasi dalam format json dimana kita menggunakan paket nesbot/carbon dengan versi 1.33, jika ingin menambahkan paket yang lain, kita tinggal edit file tersebut dan jalankan perintah composer update.

Selanjutnya kita bisa buat satu file php, misal kita simpan dengan nama index.php. Pada baris awal kita tambahkan fungsi require autoload.php yang otomatis sudah menyertakan semua paket yang kita butuhkan. Kemudian kita bisa gunakan fungsi use untuk instansiasi class nya. Detail code di index.php seperti berikut ini:
<?php require 'vendor/autoload.php';

use Carbon\Carbon;

$date = Carbon::createFromDate(1990, 11, 19);
$now  = Carbon::now();

$str = "Usia anda saat ini %y tahun, %m bulan dan %d hari\n";
printf($date->diff($now)->format($str));
Hasil dari code diatas akan menampilkan usia yang dihitung dari tanggal pada variable date dengan selisih hari ini yang ditampilkan dalam format tahun, bulan dan hari. Lebih detail fitur-fitur yang ada di paket carbon silahkan pelajari pada dokumentasinya di tautan https://carbon.nesbot.com/docs/.

Menambahkan paket baru

Untuk menambah paket yang lainnya, silahkan edit file composer.json dan tambahkan nama paket yang akan digunakan. Contohnya akan ditambahkan paket untuk membuat qr-code dengan nama endroid/qr-code, berikut code di file composer.json setelah diupdate:
{
    "require": {
        "nesbot/carbon": "^1.33",
        "endroid/qr-code": "^3.2"
    }
}
Kemudian jalankan perintah berikut di command atau terminal:
composer update
Setelah proses download dan instalasi secara otomatis dari composer sukses, maka paket tersebut siap digunakan. Untuk menampilkan qr-code menggunakan paket tersebut sama seperti contoh sebelumnya, disini anda tidak perlu lagi meng-include / me-require nama paket yang baru, karena di fungsi require vendor sudah mengakomodasi semua paket yang terdownload melalui composer. Anda tinggal menginstansiasi saja nama class nya menjadi object di code php.

Berikut contoh code untuk menampilkan qr-code yang berisi suatu text "Hello World":
<?php require 'vendor/autoload.php';

use Endroid\QrCode\QrCode;

$qrCode = new QrCode('Hello World');

header('Content-Type: '.$qrCode->getContentType());
echo $qrCode->writeString();
Kesimpulan dari artikel ini, silahkan segera beralih menggunakan composer bagi programmer php yang belum, karena seperti dituliskan diatas ada 3 kemudahan yang didapatkan saat anda mulai menggunakannya.

Yang penting segera dicoba degh 😉

Tuesday, August 14, 2018

Membangun REST API menggunakan Framework Slim PHP

Pada salah satu project penelitian saya tentang sinkronisasi database, dimana terdapat 2 aplikasi yaitu: rest api dan android, saya berkesempatan menggunakan Framework Slim PHP untuk membangun aplikasi rest api. 

Ternyata Slim menawarkan kemudahan dalam membangun rest api. Detailnya bisa langsung menuju ke official web dari Slim di tautan berikut: https://www.slimframework.com/

Untuk memulai menggunakan Slim cukup mudah, silahkan dari command atau terminal ketikan perintah berikut ini:
composer require slim/slim "^3.0"
Jika komputer anda belum terinstal composer, silahkan bisa download dari tautan berikut ini.

Setelah anda jalankan perintah composer tersebut, maka akan akan ter-create folder /vendor dan file composer.json dan composer.lock.

Selanjutnya kita buat 1 file index.php dengin menambahkan code seperti dibawah ini:
<?php

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require 'vendor/autoload.php';
$app = new \Slim\App();

$app->get('/', function (Request $req,  Response $res, $args = []) {
    return $res->getBody()->write('Hello Slim Framework');
});

$app->run();
Anda bisa cek hasilnya melalui browser ke alamat project yang anda buat, atau bisa juga menjalankan menggunakan internal web server dari php dengan menjalankan perintah berikut ini melalui command atau terminal pada path project anda:
php -S localhost:8090
Dan akses melalui browser di alamat http://localhost:8090

Untuk mendapatkan output dalam format json, bisa anda ubah pada baris ke 10 dengan code berikut ini:
$data = array("hello" => "slim framework", "version" => "3.10");
return $res->withJson($data);
Maka akan diperoleh hasil seperti berikut ini:
{"hello":"slim framework","version":"3.10"}
Untuk menambahkan end-point yang lain pada rest api anda tinggal menambahkan code seperti pada baris-9 sampai baris-11 pada contoh code sebelumnya. Misalkan berikut ini end-point yang akan membaca parameter dari alamat web
$app->get('/name/{you}', function (Request $req,  Response $res, $args = []) {
    $name = $args['you'];
    $data = array("hello" => $name, "message" => "have a nice day");
    return $res->withJson($data);
});
Dan anda bisa melihat hasilnya dengan akses ke alamat http://localhost:8090/name/arif laksito, maka akan terlihat hasilnya di halaman browser. Perhatian, untuk web server Apache atau Nginx anda perlu menambahkan file .htaccess pada project anda supaya alamat web tersebut dapat dikenali. Berikut ini script dari file .htaccess
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.php [L]
Selain method GET seperti pada contoh diatas, anda bisa juga menggunakan method yang lainnya seperti POST, PUT, DELETE. Begitulah cerita saya dalam menggunakan Slim framework, lebih detail lagi anda bisa menuju ke halaman dokumentasi/manual dari Slim framework yang sudah cukup lengkap di https://www.slimframework.com/docs/.

Untuk contoh file project yang menggunakan Slim bisa anda dapatkan/clone di github saya dengan alamat https://github.com/ariflaksito/web-data-sync. Pilih di branch basic, karena branch master sudah terupdate fitur menggunakan Eloquent dan Middleware untuk validasi token. InshaAllah akan saya share juga artikel tentang penggunaan Eloquent dan Middleware tersebut.

Semoga bermanfaat, jangan lupa untuk dicoba yaa