Hello Tizen

Sesi ini menjelaskan bagaimana cara membuat aplikasi Tizen sederhana yaitu Hello World. Tutorial ini membantu kita mengenali proses pembuatan aplikasi Tizen secara Native (Tizen Native Application), menggunakan Tizen SDK dan instalasi aplikasi yang telah dibuat pada emulator atau pada Tizen Device.

Saat kita membuat aplikasi yang rumit, kita dapat menggunakan tools yang telah disertakan pada Tizen SDK untuk memudahkan proses pembuatan fitur serta desain antarmuka aplikasi (User Interface).

Berikut langkah-langkah yang diperlukan untuk membuat aplikasi Tizen sederhana "Hello World".

Membuat Proyek Baru

Untuk membuat proyek baru, jalankan aplikasi Tizen IDE.

Pada Tizen IDE, pilih menu File > New > Project...

Pilih Tizen Native Project sebagai tipe proyek. Kemudian klik tombol Next.

Pilih Basic UI sebagai template project. Berikan nama untuk Project name dan Package name. Pilih mobile sebagai Profile. Gunakan versi 2.4 sebagai Version dari aplikasi Tizen yang akan dibuat. Klik tombol Finish untuk mengkonfirmasi pembuatan proyek Tizen baru.

Apabila proses pembuatan project baru sudah selesai, kita akan mendapatkan kode program sesuai dengan template yang dipakai.

Proyek baru HelloWorld telah terlihat di Project Explorer pada Tizen IDE. Pada project explorer, terdapat file konfigurasi project bernama tizen-manifest.xml dan beberapa file kode program lain nya seperti:

  • folder inc : direktori header file untuk aplikasi
  • folder src : direktori C file untuk implementasi kode program

Konfigurasi Aplikasi

Untuk konfigurasi aplikasi, ada dua hal yang bisa dilakukan:

  • Mengubah project properties dengan memodifikasi file tizen-manifest.xml.Berikut merupakan isi dari tizen-manifest.xml.

  • Implementasi kode untuk aplikasi pada helloworld.c

Saat membuat kode program untuk aplikasi Tizen, harap diingat bahwa Tizen API mengikuti beberapa prinsip dasar berikut ini:

  • Ownership of returned strings

    Semua variabel dengan tipe data string yang di-return sebagai pointer harus dihapus oleh caller kecuali dibutuhkan oleh bagian program lain.

    Tidak menghapus string pada memori dapat menyebabkan memory leaks. Sistem memori yang tidak cukup dapat memicu notifikasi 'system low memory', sebuah notifikasi yang memberikan informasi bahwa memori pada sistem tidak cukup untuk menjalankan operasi pada aplikasi. Sistem operasi Tizen menggunakan algoritma heuristic untuk memilih dan menghentikan aplikasi yang menggunakan banyak memori karena penggunaan memori yang besar dapat menyebabkan sistem operasi menjadi tidak stabil. 

    char *app_id_string = NULL;
if (!app_get_id(&app_id_string))
{
  // Use app_id_string
  if (app_id_string != NULL)
      free(app_id_string);
}

  • Handle

    Sebuah handle menyediakan sarana untuk mengelola sebuah instance yang terasosiasi dengan handle. Handle digunakan sangat banyak pada Tizen Native API untuk alasan kompatibilitas. Pembuatan (creation) dan penghancuran (destruction) fungsi disediakan untuk setiap tipe handle. Fungsi tidak membuat dan menghancurkan handle dengan sendiri nya, tetapi mengasosiasikan pada instance yang terasosiasi dengan handle yang diberikan. Ini berarti, handle tidak valid sampai fungsi yang dibuat telah dipanggil. Accessor fungsi (getters/setters) juga disediakan untuk mengakses members valriable dari struktur tersembunyi yang diidentifikasi oleh handle yang diberikan.

    // Text message direpresentasikan oleh handle
messages_message_h sms_msg;

// Buat message dan asosiasikan dengan handle
messages_create_message(MESSAGES_TYPE_SMS, &sms_msg);

// hapus message
messages_destroy_message(sms_msg);

// Mengubah properti dari text message
messages_set_text(sms_msg, "Hello, how are you?"); 
messages_add_address(sms_msg, "01020157919", MESSAGE_RECIPIENT_TO);

  • Pemanggilan fungsi Asynchronous

    Beberapa fungsi pada Tizen Native API adalah asynchronous. Sebuah fungsi asynchronous mulai mengeksekusi proses dan return/kembali sebelum proses selesai dijalankan. Pada kasus ini, perlu dibuat suatu notifikasi kepada caller saat fungsi asynchronous telah menyelesaikan semua proses nya.

  • Code assist

    Tizen IDE menyediakan fitur API assist dan API hover features untuk membuat kode program pada editor semakin cepat dan efisien.

    Saat mengubah kode program, tekan tombol CTRL+SPACE untuk melihat ketersediaan API yang dapat digunakan.

Membuat User Interface dengan EFL

EFL adalah singkatan dari Enlightenment Foundation Library, kumpulan toolkit grafis yang digunakan untuk membuat aplikasi Tizen. Berikut langkah-langkah yang dilakukan untuk membuat user interface untuk aplikasi tizen dengan menggunakan EFL.

  1. Menambahkan User Interface

    Untuk menambahkan user interface kedalam aplikasi, perlu diketahui container dan component yang diperlukan. Pada tutorial ini ada beberapa container dan component yang digunakan.

    • Sebuah window untuk menyimpan semua container dan component diatasnya
    • Sebuah conformant, yang menampilkan keyboard virtual
    • Sebuah naviframe untuk menampilkan beberapa screen/tampilan diatasnya beserta transisi antar screen/tampilan.
    • Sebuah box horizontal yang berisi sebuah label dengan beberapa baris teks dan sebuah button.

  2. Menambahkan Application Skeleton dengan Appcore

    Sebuah pointer untuk objek yang penting, baik objek control (container atau component) ataupun objek data dalam aplikasi disimpan pada struktur data berikut. 

    typedef struct appdata 
{
     Evas_Object *win;
     Evas_Object *conform;
     Evas_Object *naviframe;
} appdata_s;

    Struktur data diatas didesain sebagai pointer untuk menyimpan alamat memori untuk objek-objek yang akan digunakan pada aplikasi. Dari struktur data diatas dapat diketahui bahwa semua container dan component pada aplikasi Tizen bertipe Evas_Object.

    • *win

      Digunakan untuk menyimpan alamat memori dari objek window yang dibuat

    • *conform

      Digunakan untuk menyimpan alamat memori dari objek conformant yang dibuat

    • *naviframe

      Digunakan untuk menyimpan alamat memori dari objek naviframe yang dibuat

    Pointer untuk struktur data diatas dibuat dan diinisialisasi hanya dengan nilai 0 (nol) pada fungsi main(). Cara yang sama juga digunakan untuk membuat dan menginisialisasi struktur data dengan tipe app_event_callback_s, yang menyimpan fungsi-fungsi callbacks dari core aplikasi (app-core).

    static bool
app_create(void *data)
{
     appdata_s *ad = data;

     create_base_gui(ad);

     return true;
}

 int
 main(int argc, char *argv[])
 {
       appdata_s ad = {0,};
       int ret = 0;

       ui_app_lifecycle_callback_s event_callback = {0,};
       app_event_handler_h handlers[5] = {NULL, };

       event_callback.create = app_create;
       event_callback.terminate = app_terminate;
       event_callback.pause = app_pause;
       event_callback.resume = app_resume;
       event_callback.app_control = app_control;

       ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
       ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
       ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
       ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
       ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);

       ret = ui_app_main(argc, argv, &event_callback, &ad);
       if (ret != APP_ERROR_NONE) 
       {
           dlog_print(DLOG_ERROR, LOG_TAG, "app_main() is failed. err = %d", ret);
       }

       return ret;
 }

    Catatan:

    Untuk informasi lainnya tentang Appcore, buka Handling the Application Fundamentals pada link https://developer.tizen.org/development/tutorials/native-application/application-framework/application#fundamentals.

  3. Membuat objek GUI

    GUI (Graphical User Interface) dibuat pada fungsi create_base_gui(). Fungsi tersebut menerima sebuah pointer dengan nama ad untuk diisi dengan objek-objek dengan tipe yang sesuai dengan tipe-tipe yang telah dideklarasikan pada struktur data appdata_s.

    Buat fungsi create_base_gui() sebagai fungsi static karena fungsi ini hanya dapat dicapai dari unit kompilasi saat ini (yang memungkinkan compiler untuk menghasilkan lebih cepat dan ukuran kode program lebih kecil).

    Didalam fungsi create_base_gui(), buat objek window dan buat "Hello World" sebagai nama dan title dari window. Tambahkan sebuah callback pada event "delete,request". Callback untuk event "delete,request" ini akan dieksekusi saat objek window akan ditutup oleh sistem.

    static void
create_base_gui(appdata_s *ad)
{
     // buat objek window 
     // simpan objek window yang dibuat kedalam pointer ad->win
     ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
     elm_win_autodel_set(ad->win, EINA_TRUE);

     // tambahkan jenis rotasi yang akan didukung pada aplikasi
     if (elm_win_wm_rotation_supported_get(ad->win)) 
     {
         int rots[4] = { 0, 90, 180, 270 };
         elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
     }

     // tambahkan callback untuk event "delete,request".
     // callback ini akan dieksekusi saat sistem akan menutup objek window
     evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);

     // tambahkan callback untuk event "back key"
     // callback ini akan dieksekusi saat user menekan tombol 'back'
     eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

    Selanjutnya kita akan membuat objek conformant dan meletakkannya didalam objek window. Mulai saat ini, baik container dan component akan diletakkan didalam conformant.

         // buat objek conformant 
     // dan jadikan window sebagai parent dari conformant 
     // simpan object conformant yang dibuat kedalam pointer ad->conform
     ad->conform = elm_conformant_add(ad->win);

     // buat conformant agar bisa menampilkan phone indicator
     elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
     elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);

     // buat agar objek conformant menempati semua space yang ada secara vertical dan horizontal
     evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

     // buat conformant sebagai resize object dari window
     // ukuran conformant akan berubah bersamaan dengan ukuran window
     elm_win_resize_object_add(ad->win, ad->conform);

     // tampilkan objek conformant
     // karena semua UI container dan component secara default adalah hidden/collapsed (tersembunyi)
     evas_object_show(ad->conform);

    Selanjutkan kita akan menambahkan object naviframe kedalam conformant. Naviframe adalah container sangat berguna untuk aplikasi agar dapat menampilkan beberapa screen/tampilan secara bergantian. Naviframe memungkinkan untuk menampilkan satu screen, menganti ke screen lain nya, kembali menampilakan lagi screen pertama, dan bisa melakukan transisi dengan beberapa screen lain nya.

    Pada tutorial ini, hanya akan ada satu screen yang dibuat. Naviframe akan dibuat dan diletakkan didalam conformant.

         // buat objek naviframe, dan jadikan conformant sebagai parent dari naviframe
     ad->naviframe = elm_naviframe_add(ad->conform);

     // jadikan naviframe sebagai content dari conformant
     elm_object_content_set(ad->conform, ad->naviframe);

     // tampilkan naviframe
     evas_object_show(ad->conform);

    Selanjutnya kita akan menambahkan container box, yang dapat menampung component atau container lainnya secara vertical maupun horizontal. Box adalah container yang serupa dengan LinearLayout pada Android dan StackPanel pada Windows Phone. Pada tutorial ini, satu container box akan diletakkan didalam naviframe.

         // buat objek box dan jadikan naviframe sebagai parent nya
     Evas_Object *box = elm_box_add(ad->naviframe);

     // set objek box agar menampilan element didalamnya secara vertical
     elm_box_horizontal_set(box, EINA_FALSE);

     // buat agar box merentang saat content nya membutuhkan lebih banyak space
     evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

     // buat box agar mengisi space yang ada pada parent
     evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

     // tambahkan box sebagai container pada naviframe
     elm_naviframe_item_push(ad->naviframe, "Hello World", NULL, NULL, box, NULL);

     // tampilkan objek box
     evas_object_show(box);

    Selanjutnya kita akan menambahkan satu objek label yang dapat menampilkan teks dalam beberapa baris dengan format menggunakan tag HTML.

         // buat objek label dan jadikan box sebagai parent dari label
     Evas_Object* label = elm_label_add(box);

     // Set teks untuk label dan set format yang digunakan dengan tag HTML:
     // - teks "Hello World!" diletakkan ditengah pada baris pertama
     // - tambahkan satu baris kosong (tag <br>)
     // - Tambahkan teks yang lebih panjang yang tidak cukup untuk satu baris,
     //   teks akan di wrap ke baris berikutnya
     elm_object_text_set(label,
         "<align=center>Hello World!</align><br>"
                 "<br>"
                 "<wrap = word>Clicking on the button below closes the application.</wrap>");

     // set agar label dapat merentang saat
     // content nya membutuhkan lebih banyak space
 evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND,
 EVAS_HINT_EXPAND);

     // set agar box mengisi space yang tersedia pada horizontal axis dan
     // terletak ditengah secara vertical (diletakkan di 0.5 secara vertical,
     // atau diletakkan ditengah secara vertical
     evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);

     // tambahkan label sebagai element dari box
     elm_box_pack_end(box, label);

     // tampilkan objek label
     evas_object_show(label);

    UI component terakhir yang akan ditambahkan adalah Button. Button ini akan membuat keluar dari aplikasi saat ditekan.

         // buat objek button dan jadikan box sebagai parent
     Evas_Object *button = elm_button_add(box);

     // button akan merentang saat content nya membutuhkan lebih banyak space
     evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND,
         EVAS_HINT_EXPAND);

     // set agar button mengisi space yang tersedia pada horizontal axis dan
     // terletak diakhir secara vertical (1 berarti button diletakkan
     // diakhir box secara vertical,
     // koordinat mulai pada (0, 0) dipojok kiri atas
     evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);

     // set teks 'Close!' sebagai content dari button
     elm_object_text_set(button, "Close!");

     // Tambahkan sebuah callback pada button untuk event "clicked";
     // fungsi callback bernama clicked_cb
     evas_object_smart_callback_add(button, "clicked", clicked_cb, NULL);

     // tambahkan button sebagai element dari box; karena koordinat dimulai dari pojok kiri atas,
     // dan box adalah vertical, button akan berada dibawah label
     elm_box_pack_end(box, button);

     // tampilkan objek button
     evas_object_show(button);

    Selanjutnya kita akan membuat window menampilkan semua container dan component diatasnya pada screen.

         /* Tampilkan window setelah semua base gui dibuat */
     evas_object_show(ad->win);
}

  4. Keluar dari Aplikasi (GUI)

    Fungsi callback clicked_cb() harus dibuat agar kita bisa menghentikan/keluar dari aplikasi saat button ditekan. Fungsi callback untuk button diberikan melaui perintah evas_object_smart_callback_add(). Letakkan fungsi clicked_cb() diatas fungsi create_base_gui() karena bahasa pemrograman C tidak dapat memanggil fungsi yang dideklarasikan setelah/dibawah fungsi pemanggil nya.

    Penjelasan lebih detail tentang callbacks dapat melihat halaman Evas Smart Object Events guide pada link https://developer.tizen.org/development/ui-practices/native-application/efl/event-handling/event-types#evas_smart_object.

    Berikut merupakan implementasi dari fungsi callback clicked_cb().

    static void clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
{
     // menghentikan/keluar dari aplikasi
     elm_exit();
}

Building and Packaging the Application

Setelah semua kode program untuk aplikasi selesai diimplementasi dan sebelum menjalankan aplikasi, kita harus melakukan kompilasi pada kode project kita dengan cara klik kanan pada folder project di Project Explorer, kemudian build project. Tunggu beberapa saat dan pastikan tidak ada error pada kode program yang kita buat.

Menjalankan Aplikasi

Kita dapat menjalankan aplikasi yang telah kita buat pada emulator ataupun pada Tizen Device seperti Smartphone, Wearable (Smart Watch), ataupun Smart TV.

Signing Application

Sebelum kita menjalankan aplikasi, kita harus melakukan sign pada aplikasi yang kita buat dengan meng-generate author certificate dan mendaftarkan nya pada Tizen IDE.

Jika kita telah memiliki sertifikat yang teregistrasi didalam Tizen IDE, proses sign aplikasi akan dilakukan secara otomatis saat menjalankan aplikasi.

Berikut tahapan membuat sertifikat untuk aplikasi Tizen.

  1. Buka pengaturan Security Profiles melalui menu Window -> Preferences > Tizen SDK > Security Profiles.

  2. Kemudian klik tombol Add untuk menambahkan profile

  3. Masukkan Profile Name, kemudian klik tombol OK.

  4. Setelah profile selesai dibuat, klik Generate untuk membuat Auhtor Certificate. Kemudian isi semua field yang dibutuhkan pada dialog Certificate Generator. Kemudian klik tombol OK untuk membuat certificate.

  5. Klik Yes pada kotak dialog yang muncul.

  6. Proses pembuatan profile dan author certificate telah selesai. Kemudian klik tombol Apply untuk menggunakan nya.

  7. Klik tombol OK untuk mengaktifkan security profile dan author certificate yang telah dibuat. Kemudian lakukan clean project dengan cara klik kanan pada folder utama project.

  8. Setelah clean project, maka proses pembuatan dan pengaktifan security profiles dan author certificate telah selesai.

Menjalankan Aplikasi pada Tizen Emulator

Untuk menjalankan aplikasi pada Tizen Emulator, klik kanan pada folder utama project, kemudian pilih Run As > Tizen Native Application.

Kemudian kotak dialog untuk Tizen emulator akan muncul. Jika sudah pernah membuat tizen emulator, maka pilih tizen emulator yang pernah dibuat, lalu klik Launch.

Klik Allow access jika muncul Firewall Exception.

Tunggu beberapa saat hingga Tizen OS dimuat dalam emulator dan emulator siap untuk digunakan. Berikut tampilan dari kode program yang telah kita buat.

Jalankan Program ke Tizen Device

Berikut merupakan langkah-langkah untuk menjalankan Aplikasi Tizen pada Tizen Device.

  1. Hubungkan Smartphone Tizen ke komputer dengan kabel USB.

  2. Smartphone Tizen yang dihubungkan ke komputer akan terdeteksi pada Connection Explorer di Tizen IDE. Pada gambar diatas, Samsung Z1 telah terdeteksi terhubung dengan komputer.

  3. Pilih Smartphone Tizen yang terhubung ke komputer pada Connection Explorer.

  4. Pada Project Explorer, klik kanan pada folder project, dan pilih Run As > Tizen Native Application. Sebagai alternatif, untuk menjalankan aplikasi pada Smartphone Tizen, tekan tombol Play pada toolbar atau tekan Ctrl+F11 pada keyboard. Tunggu beberapa saat, maka aplikasi akan berjalan pada Smartphone Tizen. Samsung Z1 | height = 100px

Debugging Aplikasi

Bagi pembaca yang sudah pernah memiliki pengalaman menggunakan IDE Eclipse maka proses debugging pada Tizen IDE akan memiliki pengalaman yang sama.

Cukup klik kanan pada kode program yang akan dianalisa dan nanti akan keluar menu, pilih Add BreakPoint.

Kemudian akan ada bulatan warna biru disamping kode program yang akan kita lakukan debugging.

Sekarang kita melakukan debugging dengan cara klik kanan pada folder utama project dan pilih menu Debug As > Tizen Native Application - Attach.

Check atau centang pada checkbox Remember my decision, kemudian klik tombol Yes.

Kemudian Tizen Debugger akan berjalan.

Proses debugging akan berhenti pada setiap breakpoint yang telah kita tentukan/buat.

Klik tombol ikon merah (stop) untuk mengakhiri proses debugging.

Klik Tizen Native pada bagian kanan atas untuk kembali ke mode code editor.

Ok, cukup mudah bukan proses debugging nya?