Tuesday 26 April 2011

Spam di Facebook

Umm, bukan berarti saya berusaha membela Facebook karena saya akan bekerja disana, namun saya ingin meluruskan beberapa hal yang mungkin menjadi salah kaprah. Tujuan post ini juga untuk melindungi kita dari serangan-serangan yang menganggu sehingga Facebook kita tetap nyaman digunakan :)

Saya ingin membahas tentang spam, penulisan status di wall, pengiriman event yang sembarangan dan message-message annoying yang tidak pernah direncanakan oleh sang pengguna. Hal ini bukan karena Facebook telah diserang oleh virus / hacker yang masuk ke sistem Facebook (well maybe yes, but I think it's not the case). Hal ini dikarenakan oleh pengguna sendiri yang secara sengaja atau tidak sengaja, meng-approve suatu aplikasi untuk mendapatkan akses terhadap hak-hak yang dimiliki pengguna, misalnya hak untuk mengirimkan pesan pribadi ke orang lain atas namanya. Bagaimana hal ini bisa dilakukan? Mari kita simak satu persatu.

Langkah yang paling umum dan paling terpikirkan oleh saya adalah melalui aplikasi Facebook. Pernahkah anda melihat aplikasi semacam "See who's your fan", "See who likes you the most", "See your best friend" atau yang sederhana semacam "See your fortune today". Judulnya saja sudah sangat menarik (apalagi kalau anda jomblo seperti saya :P). Pasti ketika kita ingin menggunakan aplikasi tersebut, akan muncul suatu pernyataan konfirmasi seperti berikut


Ya, si aplikasi akan meminta izin anda untuk melakukan akses terhadap wall post anda, akses informasi pribadi anda. Tapi aplikasi ini merupakan salah satu aplikasi yang sangat sederhana. Bagaimana misalnya si aplikasi berusaha untuk mengakses lebih dari wall post anda, seperti private message anda. Atau yang lebih menjurus seperti hak untuk menulis di wall anda, hak mendapat email anda, hak untuk menulis ke email anda, hak untuk menulis ke teman anda? Tentu hal ini bisa jadi gawat.

Setelah kita menggunakan aplikasi tersebut, dan aplikasi tersebut mengeluarkan hasil yang kita harapkan (seperti kenyataan bahwa pacar saya ternyata bukan best friend saya, dan padahal saya jomblo), kita menganggap bahwa urusan sudah selesai. Hal ini sangatlah salah. Aplikasi ini masih memiliki akses terhadap hak-hak anda yang telah anda perbolehkan. Sehingga tidak illegal bila si aplikasi mengirimkan message ke teman-teman anda, menulis ke wall post anda, membuat event dan mengajak teman-teman anda untuk menggunakan aplikasi bersangkutan. Mengapa? Karena anda telah memperbolehkannya.

Bagaimana cara menanggulangi serangan ini? Tidak ada. Karena sesungguhnya yang salah adalah si pengguna itu sendiri. Ini bagaikan anda memberikan mobil, kunci mobil beserta STNK anda ke seseorang yang anda tidak kenal dan anda mengharapkan bahwa mobil itu tidak hilang keesokan harinya maupun hari-hari berikutnya.

Mungkin cara terbaik adalah dengan sesedikit mungkin menggunakan aplikasi Facebook yang terlihat fishy (apalagi bila seorang teman yang pernah menggunakannya telah terjebak aplikasi tersebut). Atau mungkin Facebook pada kedepannya akan membuat AI untuk mendeteksi aplikasi-aplikasi yang berbahaya ini? Saya pun tidak tahu.

Maaf bila mungkin bahasa saya terlalu kasar, seperti biasa kritik dan saran sangat diterima :).

Sunday 17 April 2011

Manga Mobile Coding Series : Membuat Main Menu

Yup, untuk sebagian besar aplikasi, pasti memerlukan Main Menu untuk melakukan navigasi mula-mula. Bisa dibilang Main Menu adalah bagian terpenting dari sebuah aplikasi. Karena itu, pada kesempatan kali ini kita akan membahas :
  1. Bagaimana memulai activity baru dari activity sebelumnya.
  2. Bagaimana membuat layout Main Menu
  3. Bagaimana membuat event listener. Pada kasus ini event listener pada button.
Melanjutkan dari pembuatan Splash Screen di sini, pertama kita buat dahulu layout Main Menu yang kita kehendaki. Berikut kode XML layout sederhana Main Menu yang saya beri nama main_menu.xml :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/main_layout" 
    android:background="@drawable/main_menu">
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_linear"    
        android:orientation="vertical"
        android:gravity="center_horizontal"
    >
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/read_button"
            android:text="Read"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/favorite_button"
            android:text="My Favorites"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/setting_button"
            android:text="Setting"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
    </LinearLayout>
        
</RelativeLayout>

Ada banyak cara membuat .xml baru, salah satunya adalah meng-copy .xml yang sudah ada, lalu me-rename dan mengganti kode didalamnya.

Disini ada beberapa atribut baru yang cukup baru. Pertama adalah android:gravity="center_horizontal". Atribut ini bertujuan untuk menengahkan tombol-tombol yang ada didalam LinearLayout. Sedangkan android:orientation="vertical" berguna untuk menjaga agar tombol yang satu dan yang lain disusun secara vertikal. Setelah itu, didalam LinearLayout kita buat beberapa tombol. Pada kode diatas saya mendefinisikan isi text (android:text), warna text (android:textColor), ID dari tiap button (android:id), background button (android:background) dan jarak antar satu button dengan button lain (android:layout_margin).

Sebagai referensi, saya menggunakan 2 gambar ini untuk background Main Menu dan background button.

main_menu.png

bg_button.png


Lalu kita buat sebuah Activity baru bernama MainMenuAct. Cara membuat Activity sama dengan saat kita membuat SplashScreenAct hanya saja ada beberapa perubahan kode :

package gogo.mobile.mm;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainMenuAct extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_menu);
        
        mRead = (Button)findViewById(R.id.read_button);
        mRead.setOnClickListener(new View.OnClickListener() {
            
            public void onClick(View v) {
                //startActivity(new Intent(MainMenuAct.this, SelectMangaAct.class));
            }
        });
        
    }
    
    private Button mRead;
}

Perhatikan bahwa pada kode diatas kita mendapatkan definisi button Read dan Favorite dari main_menu.xml yang telah kita definisikan sebelumnya (dan ini menjadi penyebab mengapa saya lebih suka memainkan layout lewat kode daripada menggunakan IDE). Pada kode diatas, kita juga telah membuat sebuah event listener untuk button Read yang nanti akan kita isi untuk melakukan navigasi.

Lalu kita harus membenarkan SplashScreenAct kita. Cukup ubah kode ini :

SplashScreenAct.this.finish();

menjadi :

SplashScreenAct.this.finish();
startActivity(new Intent(SplashScreenAct.this.getApplicationContext(), MainMenuAct.class));

Sampai tahap ini, kita telah berhasil membuat MainMenuAct yang akan dijalankan setelah Splash Screen selesai. Namun kode ini masih belum bisa berjalan dengan sempurna. Kita harus memberitahu Android bahwa MainMenuAct adalah bagian dari activity kita. Tambahkan pada AndroidManifest.xml

<activity android:name=".MainMenuAct" />

dimanapun dalam tag <application> setara dengan tag <activity> milik SplashScreenAct.

Jalankan aplikasi. Bila lancar, maka akan muncul seperti berikut :

Splash Screen

Dan 5 detik kemudian, muncullah MainMenuAct.

Sekarang mari kita buat Main Menu ini bisa melakukan navigasi. Buatlah sebuah Activity kosong bernama SelectMangaAct.

package gogo.mobile.mm;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SelectMangaAct extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}

Lalu uncomment kode


//startActivity(new Intent(MainMenuAct.this, SelectMangaAct.class)


pada MainMenuAct. Tambahkan juga


<activity android:name=".SelectMangaAct" />


pada AndroidManifest.xml. Kira-kira isi tag <application> pada AndroidManifest.xml saat ini adalah :

<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">
    <activity android:name=".SplashScreenAct" android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity android:name=".MainMenuAct"/>
<activity android:name=".SelectMangaAct" />
</application>

Jalankan aplikasi, dan bila sukses bin lancar muncullah seperti berikut :
Splash Screen

5 detik kemudian muncul MainMenuAct. Pencet button Read

Yap, kita berhasil melakukan navigasi ke Activity lain.

Sekian kombo pembahasan Splash Screen dan Main Menu. Nantikan pembahasan selanjutnya yang (semoga) lebih seru. Kritik dan saran tentunya masih saya terima.

Saturday 16 April 2011

Manga Mobile Coding Series : Membuat Splash Screen

Yup, akhirnya punya cukup waktu luang untuk menuliskan artikel ini. Pada artikel ini saya akan memaparkan beberapa hal tentang bagaimana cara membuat Splash Screen.

Bagi anda mau memulai membuat project dan melakukan setting emulator, anda bisa melakukannya disini.
Pada project kali ini, saya menggunakan konfigurasi berikut

  1. Project Name = MangaMobile
  2. Build Target Android 2.1 yang memiliki API version 7
  3. Application Name = MangaMobile
  4. Package Name = gogo.mobile.mm
  5. Tidak membuat Activity (checkbox Create Activity tidak dicentang)
  6. Min SDK Version = 7
Kurang lebih akan muncul tampilan seperti berikut di Project Explorer anda (bila anda tidak bisa menemukan Project Explorer, klik Window > Show View > Project Explorer) :


Pada tahap ini, anda telah berhasil membuat sebuah project yang tidak bisa dijalankan (karena tidak ada Activity yang bisa dijalankan). Sekarang buka src, dan pada package gogo.mobile.mm, klik kanan > New > Class. Akan muncul tampilan seperti berikut

Yang paling penting untuk dilakukan adalah mengisi nama kelas di Name dan mengosongkan Superclass. Lalu langsung saja klik Finish. Kelas yang kita buat ini tidak akan langsung menjadi sebuah Splash Screen.

Sekarang kita memerlukan gambar untuk Splash Screen. Saya sarankan resolusi gambar tersebut adalah 320x480 seperti ini :
Simpan gambar ini di folder res > drawable-mdpi > splash.png (nama file gambarnya terserah, tapi pastikan hanya terdiri dari huruf kecil dan garis bawah). Kembali ke Eclipse, klik kanan pada project anda (pada kasus ini : MangaMobile) lalu pilih Refresh. Bila gambar anda berhasil dimasukkan, file tersebut akan muncul di folder res > drawable-mdpi pada project dan muncul juga di gen > gogo.mobile.mm > R.java > R > drawable > splash sebagai sebuah pointer ke resource gambar splash.png.

Setelah memiliki gambar untuk splash dan Android Project telah mendeteksi gambar kita, kita perlu membuat layout. Lihat pada Project Explorer, folder res > layout > main.xml. Akan muncul tampilan seperti layar HP. Saya tidak terlalu suka berkutat ditampilan ini karena tidak terlalu fleksibel. Pada bagian bawah, klik main.xml. Akan muncul tampilan XML. Ganti isi XML menjadi seperti berikut

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/main_layout" 
    android:background="@drawable/splash">    
</RelativeLayout>

Pada baris pertama <?xml version="1.0" encoding="utf-8"?> digunakan untuk mendefinisikan tipe XML yang digunakan. Pada Splash Screen kita menggunakan layout RelativeLayout (layout akan dibahas di post lain). Layout ini akan memenuhi seluruh layar (karena android:layout_width  dan android:layout_height bernilai fill_parent yang artinya ia akan memenuhi seluruh parent-nya dimana parent-nya adalah layar HP itu sendiri). Yang paling penting disini adalah properti ID dan Background. Disini ID nya saya set dengan main_layout sementara Background nya saya isi dengan splash (sesuai dengan nama file yang kita masukkan di res > drawable-mdpi).

Terakhir, kita tinggal memasukkan kode yang diperlukan di SplashScreenAct.java. Tambahkan kode sedemikian menjadi seperti berikut :

package gogo.mobile.mm;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

public class SplashScreenAct extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Thread timer = new Thread() {
            @Override
            public void run() {
                long startTime = System.currentTimeMillis();
                // lakukan sesuatu pada saat memulai game
                
                long now = System.currentTimeMillis();
                if (now - startTime < 5000){
                    try {
                        sleep(5000 - (now - startTime));
                    } catch (InterruptedException iEx){
                        
                    }
                }
                
                SplashScreenAct.this.finish();
                //kita belum akan membuat activity baru disini setelah splash screen selesai
                //startActivity(new Intent(SplashScreenAct.this.getApplicationContext(), MainMenuActivity.class));
            }
        };
        
        timer.start();
    }
}

Hal yang perlu diperhatikan adalah, kelas ini sekarang meng extend Activity. Saya sarankan untuk melakukan segala sesuatu dengan Ctrl + Space. Sebagai contoh tulis Activi lalu pencet Ctrl + Space, lalu pilih Activity pada intellisense. Hal ini akan membuat Eclipse secara otomatis mengimport segala hal yang diperlukan untuk membuat Activity.

Pada Activity, kita harus selalu mengimplementasikan onCreate(Bundle savedInstanceState)(cara paling mudah adalah dengan menulis onCreate, lalu pencet Ctrl + Space, lalu pilih onCreate yang sesuai pada intellisense). Jangan lupa untuk menambahkan super.onCreate(savedInstanceState) karena tanpa sebaris kode tersebut Activity tidak akan bisa di-start. Yap, pada tahap ini kita sudah membuat sebuah Activity yang bisa dijalankan. Tapi bila kita mencoba menjalankan project ini, tentu akan terdapat error.

Lalu untuk membuat Activity ini menggunakan layout yang telah kita buat, kita harus menambahkan setContentView(R.layout.main) dimana main disini adalah nama layout yang kita buat (main.xml).

Berikutnya kita membuat Thread yang akan melakukan sesuatu selama 5000 millisecond. Dan setelah 5000 millisecond, Thread ini akan menutup SplashScreenAct dan akan membuat Activity baru. Namun pada tutorial ini pembuatan Activity baru tidak akan dibahas. Yap, Splash Screen sudah selesai dibuat.

Apakah program ini akan berjalan? Belum! Kita perlu memberitahukan Android bahwa aplikasi kita memiliki Activity bernama SplashScreenAct dan aplikasi kita dimulai dari sana. Pada Project Explorer klik pada AndroidManifest.xml. Dan lagi-lagi pencet AndroidManifest.xml pada bagian bawah jendela. Pada tag <application>, edit kodenya sehingga menjadi seperti berikut

<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">
    <activity android:name=".SplashScreenAct" android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        </activity>    
</application>

Hal ini membuat Android mengetahui bahwa aplikasi kita dimulai dari SplashScreenAct yang bisa distart dari launcher (icon yang kita klik untuk memulai aplikasi).

Yap sekarang Splash Screen kita telah selesai. Silakan dicoba :

memulai emulator

ketika kita buka menu utama Android, kita dapat melihat aplikasi kita

Yes, that's our Splash Screen

Bila anda mengikuti tutorial ini hingga seri kedepan, maka tampilan ini akan muncul

Sunday 3 April 2011

Manga Mobile Coding Series : Membuat Widget

Maap kalau seri nya mungkin agak ngacak. Tapi kebetulan saya lagi penasaran mau membuat Widget untuk Manga Mobile atas saran dari teman saya (tag : dieend).

Jadi anggap saja kita sudah mempunya Android Project di Eclipse dan sudah men-develop-nya sedemikian rupa sehingga sudah bisa digunakan (detail pembuatan project di Eclipse dan development-nya akan saya tulis dikemudian hari). Lalu kita ingin membuat sebuah widget, misalnya untuk kasus aplikasi Manga Mobile saya, saya ingin memberikan update manga terbaru. Pada contoh ini, saya hanya akan membuat sebuah tombol di widget saya, yang bila dipencet, akan langsung membuka aplikasi Manga Mobile.

Untuk membuat widget, kita memerluka 3 hal :

  1. AppWidgetProviderInfo : yaitu widget itu sendiri. Disini kita akan mendefinisikan layout widget, frekuensi melakukan update dan provider yang akan mengupdate widget.
  2. AppWidgetProvider : yaitu class yang meng-update isi widget.
  3. Layout dari widget itu sendiri.

Pertama, mari kita definisikan AppWidgetProviderInfo dalam bentuk xml. Saya menyimpan file ini di /res/xml/widget.xml

<?xml version="1.0" encoding="utf-8"?>

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="294dp"
    android:minHeight="72dp"
    android:updatePeriodMillis="1000"
    android:initialLayout="@layout/widget_layout"
    >
</appwidget-provider>

Penjelasan singkat : kita membuat widget menggunakan XML. Widget ini ukurannya paling kecil 294 x 72 dp (Density-Independent-Pixel). Widget ini akan mengupdate dirinya sendiri (dengan memanggil suatu method di provider yang akan kita definisikan nanti) setiap 1000 milliseconds. Tampilan widget ini juga akan dikonfigurasi oleh @layout/widget_layout (yang juga akan kita definisikan setelah ini).

Lalu kita membutuhkan WidgetProvider, yaitu class yang akan meng-update isi dari widget ini. Saya menamai kode dibawah ini = MangaMobileWidget.java

package gogo.mobile.mm;

import android.app.PendingIntent;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.content.Intent;
import android.widget.RemoteViews;

public class MangaMobileWidget extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        final int widgetSize = appWidgetIds.length;
        
        for (int i = 0; i < widgetSize; ++i){
            Intent intent = new Intent(context, SplashScreenActivity.class);
            PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);

            // Get remote layout
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout);
            views.setOnClickPendingIntent(R.id.widget_button, pendingIntent);

            // update widget
            appWidgetManager.updateAppWidget(appWidgetIds[i], views);
        }
    }
}

Method pada kode diatas akan dipanggil setiap beberapa millisecond (pada kasus ini 1000 milliseconds). Disini saya membuat Intent yang akan memanggil SplashScreenActivity yang sudah saya buat di aplikasi saya. Intent ini dikirim apabila suatu button dipencet. Button yang dimaksud sudah saya definisikan di @layout/widget_layout.

Lalu sekarang saatnya kita mendefinisikan layout dari widget itu sendiri. Layout ini saya simpan di /res/layout/widget_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="200dp"
    android:layout_height="160dp"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/widget_layout" 
    android:background="@drawable/bg_button">
     <Button 
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/widget_button"
        android:text="Widget Button Test"
     />
 </LinearLayout>

Saya tidak akan membahas dengan detail tentang pembuatan layout disini. Disini intinya saya membuat sebuah  LinearLayout yang memiliki sebuah button didalamnya. Button ini memiliki ID (R.id.widget_button), sehingga bisa diakses oleh WidgetProvider yang telah saya buat.

Lalu, belum selesai sampai sini, kita harus mendefinisikan widget kita ke AndroidManifest.xml. Kode berikut saya letakkan antara tag  dan 

<receiver android:name=".MangaMobileWidget" >
    <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data android:name="android.appwidget.provider" android:resource="@xml/widget" />
</receiver>


Disini kita mendefinisikan widget, dan mengatakan bahwa widget tersebut dikontrol oleh MangaMobileWidget sebagai WidgetProvider. Resource disini adalah AppWidgetInfo yang telah kita definisikan diatas.

Lalu jalankan emulator :


Home-nya emulator


Klik Menu dulu baru klik Add.



Klik Widgets



Ups, saya melihat icon saya


Yup itu dia widget nya. Coba di klik ah


Yep, Manga Mobile is ready.

Sekian dari saya, semoga bermanfaat. Masukan sangat diterima untuk seri koding selanjutnya