Pembuatan Aplikasi Saat Teduh Makanan Rohani di Windows 8 Metro

Pembuatan Aplikasi Saat Teduh “Makanan Rohani” di Windows 8 Metro Erico Darmawan Handoyo Jurusan Teknik Informatika Fakultas Teknologi Informasi, Universitas Kristen Maranatha Jl. Prof. Drg. Suria Sumantri no. 65 Bandung Email: [email protected]; [email protected]

Abstrak Teknologi internet kini berkembang dengan sangat pesat. Berbagai informasi yang dahulu harus didapatkan melalui buku, majalah, dan media cetak lainnya, kini dapat diakses di mana saja dan kapan saja tanpa harus membawa atau memiliki media cetak tersebut. Aplikasi Makanan Rohani dibuat untuk membantu umat Kristiani dalam mendapatkan bahan renungan/saat teduh mereka di mana saja dan kapan saja bahkan ketika mereka tidak memiliki atau tidak membawa bahan renungan tersebut. Selain itu, aplikasi ini juga dapat membantu mereka untuk mendapatkan bahan renungan yang diberikan dalam bentuk website rohani tanpa perlu menghafalkan alamat dari situs-situs tersebut. Aplikasi Makanan Rohani akan dibuat sebagai aplikasi Windows 8 Metro. Dengan demikian, aplikasi ini dapat diinstall di komputer dan tablet yang memiliki sistem operasi Windows 8 atau 8.1. Aplikasi ini diterbitkan di Windows Store dan dapat diperoleh secara gratis oleh seluruh masyarakat Indonesia.

Abstract Nowadays, internet technology develops rapidly. There are so many information which can be obtained only from books, magazines, and other printed media in the past days. Now, many of it can be accessed anywhere and anytime without a must to have its printed version. “Makanan Rohani” was made to help Christians getting their devotional material anywhere and anytime even if they don’t have it or they forget to bring it. In addition, this application can also help them to get the materials provided in the form of a spiritual website without the need to memorize the addresses of these sites. “Makanan Rohani” application was made as a Windows 8 Metro application. Thus, this application can be installed on computers and tablets that have Windows 8 or 8.1 operating system on it. This application was published at Windows Store and can be obtained for free by all Indonesian people. 1. Pendahuluan Teknologi internet kini berkembang dengan sangat pesat. Hampir semua orang kini memiliki gadget, telepon genggam, telepon pintar (smartphone), tablet, ataupun komputer (PC / laptop) yang terhubung dengan dunia luar melalui teknologi internet. Teknologi ini telah membuat segalanya lebih praktis dan mudah. Berbagai informasi yang dahulu harus didapatkan melalui buku, majalah, dan media cetak lainnya, kini dapat diakses di mana saja dan kapan saja tanpa harus membawa atau memiliki media cetak tersebut.

Umat Kristiani memiliki waktu untuk bersaat teduh yaitu waktu di mana mereka membaca dan merenungkan Firman Tuhan serta merefleksikannya ke dalam kehidupannya sehari-hari. Ketika bersaat teduh, mereka biasa dibantu oleh bahan bacaan/renungan yang dapat ditemui di berbagai toko-toko buku Kristiani. Aplikasi Makanan Rohani dibuat untuk membantu umat Kristiani dalam mendapatkan bahan renungan/saat teduh di mana saja dan kapan saja bahkan ketika bahan renungan tersebut tidak dimiliki atau tidak terbawa. Selain itu, aplikasi ini juga dapat membantu untuk mendapatkan bahan renungan yang diberikan dalam bentuk website rohani tanpa perlu menghafalkan alamat dari situs-situs tersebut. Aplikasi Makanan Rohani akan dibuat sebagai aplikasi Windows 8 Metro. Dengan demikian, aplikasi ini dapat diinstall di komputer dan tablet yang memiliki sistem operasi Windows 8 atau 8.1. Aplikasi ini diterbitkan di Windows Store dan dapat diperoleh secara gratis oleh seluruh masyarakat Indonesia. 2. Landasan Teori, Analisa, dan Design Aplikasi Makanan Rohani dibuat sebagai aplikasi Windows 8 Metro yang memiliki desain antar muka berbasis XAML. Penggunaan XAML pada aplikasi Windows 8 Metro hampir serupa dengan penggunaan XAML di Windows Presentation Foundation (WPF).

2.1 Windows Presentation Foundation (WPF) WPF (Windows Presentation Foundation) adalah sebuah framework dari Microsoft yang digunakan untuk membangun antarmuka pengguna yang menarik dan sulit atau bahkan mustahil dibuat menggunakan framework sebelumnya.

Gambar 1. Arsitektur WPF

Salah satu keunggulan dari WPF adalah integrasi yang erat dengan DirectX. Seluruh tampilan yang dihasilkan oleh WPF dilakukan oleh Engine DirectX. Hal ini memungkinkan WPF untuk memaksimalkan penggunaan hardware dan software untuk rendering. WPF membutuhkan komponen yang disebut milcore untuk menjembatani antara WPF dengan DirectX. Gambar 1 menunjukkan letak komponen

tersebut pada arsitektur WPF. WPF menggunakan XAML (Extensible Application Markup Language) yaitu sebuah bahasa berbasis XML yang diciptakan Microsoft untuk membuat tiap komponen antarmuka dalam aplikasinya.

2.2 Extensible Application Markup Language (XAML) XAML adalah sebuah declarative markup language. XAML dibuat untuk menyederhanakan pembuatan UI (user interface/tampilan antar muka pengguna) untuk aplikasi .NET Framework. Dengan meggunakan XAML, programmer dapat memisahkan pembuatan antar muka pengguna dengan pembuatan logika program melalui class parsial (partial class). XAML memungkinkan cara bekerja di mana beberapa kelompok yang terpisah mengerjakan bagian antarmuka pengguna (user interface) dan bagian logika dari sebuah aplikasi secara bersamaan dengan menggunakan tools yang berbeda (Visual Studio, Expression Blend, dan Expression Design). Pototongan kode XAML berikut ini adalah contoh bagaimana membuat sebuah tombol sebagai bagian dari UI pada sebuah aplikasi WPF. <Window xmlns=“http://schemas.microsoft.com/ 2006/xaml/presentation” Title=“Main Window” Width=“250” Height=“100”> <Button Name=“button”> Click Me!

2.3 Aplikasi Windows 8 Metro Aplikasi Windows 8 Metro merupakan teknologi terbaru Microsoft yang dibawa bersamaan dengan diluncurkannya Sistem Operasi Windows 8. Tujuan dari diadakannya aplikasi ini adalah agar para programmer tidak perlu mengeluarkan banyak usaha ketika mereka ingin memasang aplikasi mereka ke dalam komputer, tablet, ataupun smartphone. Dengan membuat aplikasi Windows 8 Metro, aplikasi tersebut langsung dapat dijalakan di komputer dan tablet yang memiliki Sistem Operasi Windows 8. Seperti yang telah dijabarkan dalam website resmi Windows 8, berikut ini adalah beberapa hal yang dapat ditemukan dalam aplikasi Windows 8 Metro: 1. Aplikasi Windows 8 Metro mendukung layout dan view yang berbeda untuk menciptakan pengalaman user yang luar biasa dengan berbagai faktor bentuk dan ukuran layar.

Gambar 2. Windows 8 mendukung layout dan view yang berbeda

2. Ketika pengguna meng-install aplikasi Windows 8 Metro, aplikasi tersebut akan muncul sebagai tile pada start screen. Aplikasi ini dapat menampilkan isi/informasinya melalui tile tersebut meskipun aplikasi tidak sedang berjalan. Dengan menggunakan live tile ini, aplikasi dapat menampilkan data/informasi yang berguna dalam waktu sekilas pada pegguna. Aplikasi juga dapat mengkonfigurasi sistem untuk meminta update secara berkala dari web service terlepas apakah aplikasi sedang berjalan atau tidak.

Gambar 3. Tampilan Windows 8

3. Fasilitas App bar disediakan untuk meyediakan berbagai perintah atau tool yang dapat digunakan pengguna di dalam sebuah aplikasi. App bar disembunyikan secara default dan tampil ketika pengguna menggeser jarinya dari sisi bawah layar.

Gambar 4. App bar pada aplikasi Windows 8

4. Charms bar diberikan untuk menyediakan sekumpulan tombol yang konsisten dan akan muncul di setiap aplikasi apapun, seperti search, share, devices, setting, dan start. Bagian setting juga dapat digunakan oleh sebuah aplikasi untuk membiarkan pengguna mangkonfigurasi aplikasi tersebut sesuai dengan keinginannya.

Gambar 5. Charm bar pada aplikasi Windows 8

5. Aplikasi Windows 8 Metro bekerja dengan baik dengan berbagai macam sumber input, termasuk sentuhan, pen, mouse, dan keyboard.

Gambar 6. Input sentuhan pada Windows 8

6. Aplikasi Windows 8 Metro didistribusikan melalui Windows Store. DEngan menggunakan Windows Store, sebuah aplikasi dapat didistribusikan ke seluruh dunia dengan lebih dari 100 bahasa.

Gambar 7. Windows 8 Store

2.4 Asynchronous Programming Asynchronous programming sangatlah penting untuk aktivitas – aktivitas yang berpotensi menghambat jalanya sebuah aplikasi, seperti ketika sebuah aplikasi berusaha untuk mengakses sebuah website. Pengaksesan kepada sebuah sumber data yang terdapat di web terkadang dapat berlangsung secara lamban ataupun terlambat. Jika aktivitas semacam itu terjadi pada proses synchronous, maka seluruh aplikasi harus menunggu hingga proses tersebut selesai. Dalam sebuah proses asynchronous, sebuah aplikasi dapat melanjutkan aktivitas lainnya yang tidak tergantung pada sumber di web tersebut hingga proses yang menghambat tersebut selesai dikerjakan. Proses asynchronous sangat terpakai untuk aktivitas-aktivitas yang berhubungan dengan UI (user interface) karena semua aktivitas yang berhubungan dengan UI biasanya hanya berbagi satu buah thread. Jika ada sebuah proses yang menghalangi dalam sebuah proses synchronous, maka semuanya akan terhalang. Aplikasi akan berhenti merespon, dan pengguna akan berpikir bahwa aplikasi tersebut gagal menjalankan tugasnya (atau mungkin mengalami hang) meskipun sebenarnya user hanya perlu menunggu hingga proses tersebut selesai. Ketika menggunakan asynchronous method, aplikasi akan tetap merespon pada aktivitas-aktivitas UI (seperti resize atau minimize). Keyword async dan await dalam bahasa pemrograman C# adalah jantung dari asynchronous programming. Keyword async digunakan untuk menunjukkan bahwa sebuah method adalah asynchronous method. Keyword await digunakan untuk menunggu hasil dari asynchronous method. Berikut ini adalah contoh penggunaan keyword async dan await [1]: // Three things to note in the signature: // - The method has an async modifier. // - The return type is Task or Task. Here, it is Task // because the return statement returns an integer. // - The method name ends in "Async." async Task AccessTheWebAsync() { // You need to add a reference to System.Net.Http to declare // client. HttpClient client = new HttpClient(); // GetStringAsync returns a Task<string>. That means that when // you await the task you'll get a string (urlContents). Task<string> getStringTask = client.GetStringAsync("http://msdn.microsoft.com"); // You can do work here that doesn't rely on the string from // GetStringAsync. DoIndependentWork();

// The await operator suspends AccessTheWebAsync. // - AccessTheWebAsync can't continue until getStringTask is // complete. // - Meanwhile, control returns to the caller of // AccessTheWebAsync. // - Control resumes here when getStringTask is complete. // - The await operator then retrieves the string result from // getStringTask. string urlContents = await getStringTask; // The return statement specifies an integer result. // Any methods that are awaiting AccessTheWebAsync retrieve the // length value. return urlContents.Length; }

Jika method AccessTheWebAsync tidak memiliki pekerjaan apapun yang perlu dilakukan antara memanggil GetStringAsync dan proses menunggu penyelesaiannya (ditandai oleh keyword await), maka kode program tersebut dapat disederhanakan menjadi: string urlContents = await client.GetStringAsync();

2.5 Analisis Kebutuhan Berdasarkan latar belakang yang telah dijelaskan pada bagian Pendahuluan, dapat disimpulkan beberapa kebutuhan dari pengguna aplikasi Makanan Rohani, yaitu: 1. Kebutuhan untuk mendapatkan bahan saat teduh tiap harinya secara otomatis. 2. Kebutuhan untuk mendapatkan beberapa pilihan bahan saat teduh, yaitu Renungan Harian, Santapan Harian, dan Refleksi Harian. Pilihan ini diambil karena ketiga bahan renungan ini memang diperbolehkan untuk digunakan secara gratis untuk tujuan non-commercial. 3. Kebutuhan untuk mendapatkan tampilan aplikasi yang baik dalam berbagai ukuran layar, resolusi, dan orientasi. Kebutuhan ini muncul dikarenakan oleh bedanya ukuran layar dan resolusi monitor komputer yang digunakan user. Selain itu aplikasi Windows 8 juga dapat digunakan pada tablet Windows 8 yang selain ukuran dan resolusinya berbeda, orientasi aplikasi dapat diubah menjadi portrait atau landscape.

2.6 Desain Sistem Aplikasi “Makanan Rohani” akan dibagi menjadi 3 buah fitur utama yaitu menampilkan Renungan Rohani, Santapan Rohani, dan Refleksi Rohani pada hari tersebut. Berikut ini adalah diagram aktivitas yang terdapat dalam aplikasi “Makanan Rohani”:

Pengguna

Sistem Mengambil Renungan Harian hari ini [bahan = Renungan Harian] [bahan = Santapan Harian]

Memilih bahan saat teduh

Mengambil Santapan Harian hari ini

[bahan = Refleksi Harian]

Mengambil Refleksi Harian hari ini

Melakukan Proses parsing dan membuang informasi-informasi yang tidak diperlukan Menampilkan hasil parsing ke layar

Gambar 8. Diagram aktivitas pada aplikasi "Makanan Rohani"

Agar aplikasi “Makanan Rohani” dapat digunakan dalam berbagai posisi pada (portrait, landscape, dan snap), aplikasi ini memiliki 3 buah layout dasar. Berikut ini adalah rancangan layout dari aplikasi “Makanan Rohani”:

Gambar 9. Rancangan tampilan aplikasi "Makanan Rohani" - Landscape View

Gambar 10. Rancangan tampilan aplikasi "Makanan Rohani" - Snap View

Gambar 11. Rancangan tampilan aplikasi "Makanan Rohani" - Portrait View

3. Implementasi Aplikasi “Makanan Rohani” Terdapat dua proses utama pada tahap implementasi aplikasi “Makanan Rohani”, yaitu: 1. Proses pengambilan materi saat teduh dari website yang dituju. Pada tahap ini, proses pengabilan harus dilakukan sebagai proses asynchronous agar aplikasi tetap berjalan meskipun koneksi internet lambat. Pengambilan data dari website dapat menggunakan class HttpClient yang telah disediakan oleh .NET Framework. 2. Proses parsing. Proses ini adalah proses memilah data yang diperoleh dari website dan mengambil data yang diperlukan saja. Proses ini dapat dilakukan dengan Regex ataupun dengan meggunakan method-method manipulasi string yang juga telah disediakan oleh .NET Framework.

Gambar 12. Tampilan aplikasi "Makanan Rohani" - Landscape View

Gambar 13. Tampilan aplikasi "Makanan Rohani" - Portrait dan Snap View

Pada tahap implementasi desain antarmuka aplikasi “Makanan Rohani”, terdapat tiga buah layout, yaitu landscape, portrait, dan snap view. Gambar 12 dan 13 adalah tampilan dari aplikasi “Makanan Rohani”. 4. Simpulan Melalui pembuatan aplikasi “Makanan Rohani” ini, dapat disimpulkan beberapa hal berikut: 1. Sebuah aplikasi perantara dapat digunakan oleh penggunanya untuk mendapatkan informasi yang diinginkannya tanpa harus tahu atau mengingat tahu alamat dari wesite yang bersangkutan. 2. Struktur pemrograman aplikasi Windows 8 memudahkan programmer dalam mengembangkan aplikasi di desktop dan tablet Windows 8. 3. Seperti yang dapat dilihat pada gambar 14, sebuah aplikasi dapat didistribusikan dengan lebih mudah dengan menggunakan sebuah app store (Dalam kasus ini adalah Windows Store) sebagai media pendistribusiannya. Dengan menggunakan Windows Store ini, maka aplikasi ini dapat diperoleh dengan mudah oleh semua orang di seluruh dunia baik di komputer ataupun tablet.

Gambar 14. Laporan distribusi aplikasi Makanan Rohani selama 3 bulan terakhir

Ide-ide yang dapat menjadi pertimbangan untuk mengembangkan aplikasi “Makanan Rohani” ini di masa yang akan datang adalah: 1. Penyediaan isi dari ayat-ayat / perikop alkitab yang digunakan dalam saat teduh. 2. Pengguna dapat memilih tanggal untuk mendapatkan materi saat teduh pada tanggal tersebut. Pada saat ini, belum ada control DateTimePicker yang disediaka oleh Visual Studio sehingga perlu dibuat secara manual dengan menggunakan UserControl. 3. Materi saat teduh dapat ditambahkan agar lebih banyak pilihan. Selain itu, dapat ditambahkan pula berbagai artikel rohani yang dapat memperkaya pengetahuan pengguna akan Firman Tuhan. 5. Daftar Pustaka [1] Microsoft, "Asynchronous Programming with Async and Await (C# and Visual Basic)," [Online]. Available: http://msdn.microsoft.com/enus/library/vstudio/hh191443.aspx#BKMK_WhentoUseAsynchrony. [Accessed 2 11 2013]. [2] Microsoft, "XAML Overview (WPF)," [Online]. Available: http://msdn.microsoft.com/en-us/library/ms752059.aspx. [Accessed 1 11 2013]. [3] R. Eisenberg and C. Bennage, Sams Teach Yourself WPF in 24Hours, Pearson Education. Inc, 2009. [4] L. Moroney, Foundation of WPF : An Introduction to Windows Presentation Foundation, New York: Appress, 2006. [5] Microsoft, "The Basic," [Online]. Available: http://msdn.microsoft.com/enus/library/windows/apps/hh974576.aspx. [Accessed 1 11 2013].