PENGEMBANGAN APLIKASI IPB NEWS BERBASIS UNIVERSAL WINDOWS PLATFORM
PERALTA CHRIST PERDAMAIAN ZEGA
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2016
PERNYATAAN MENGENAI SKRIPSI DAN SUMBER INFORMASI SERTA PELIMPAHAN HAK CIPTA Dengan ini saya menyatakan bahwa skripsi berjudul Pengembangan Aplikasi IPB News Berbasis Universal Windows Platform adalah benar karya saya dengan arahan dari komisi pembimbing dan belum diajukan dalam bentuk apa pun kepada perguruan tinggi mana pun. Sumber informasi yang berasal atau dikutip dari karya yang diterbitkan maupun tidak diterbitkan dari penulis lain telah disebutkan dalam teks dan dicantumkan dalam Daftar Pustaka di bagian akhir skripsi ini. Dengan ini saya melimpahkan hak cipta dari karya tulis saya kepada Institut Pertanian Bogor. Bogor, Oktober 2016 Peralta Christ Perdamaian Zega NIM G64120121
ABSTRAK PERALTA CHRIST PERDAMAIAN ZEGA. Pengembangan Aplikasi IPB News Berbasis Universal Windows Platform. Dibimbing oleh IRMAN HERMADI. IPB News adalah aplikasi agregator berita yang mengumpulkan kontenkonten terbaru dari beberapa situs dalam domain ipb.ac.id. Aplikasi ini dikembangkan untuk memudahkan pengguna memperoleh informasi-informasi terbaru dari berbagai website tersebut tanpa harus mengunjunginya berulang kali. IPB News dikembangkan berbasis Universal Windows Platform untuk dapat mendukung perangkat dekstop dan mobile yang memiliki platform Windows 10. Pendekatan yang dipakai adalah waterfall model dan diimplementasikan dalam C# dengan MVVM pattern. Pengujian aplikasi menggunakan metode black-box. Hasil pengujian menunjukan fungsi utama aplikasi dapat berjalan, baik di perangkat desktop maupun mobile. Kata kunci: aplikasi multi-device, mvvm, rss, universal windows platform
ABSTRACT PERALTA CHRIST PERDAMAIAN ZEGA. Development of IPB News Application Using Universal Windows Platform. Supervised by IRMAN HERMADI. IPB News is an aggregator application that aggregates newest contents within ipb.ac.id domain. This application was developed to help users obtain newest informations from available websites without having to visit them repeatedly. IPB News was developed using Universal Windows Platform that support desktop and mobile devices powered by Windows 10. The approach used in this development is waterfall model and implemented in C# with the MVVM pattern. Black-box method was used for testing. The testing results showed that the main functions of the application can work properly as designed, both on desktop and mobile devices. Keywords: multi-device application, mvvm, rss, universal windows platform
PENGEMBANGAN APLIKASI IPB NEWS BERBASIS UNIVERSAL WINDOWS PLATFORM
PERALTA CHRIST PERDAMAIAN ZEGA
Skripsi sebagai salah satu syarat untuk memperoleh gelar Sarjana Ilmu Komputer pada Departemen Ilmu Komputer
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2016
Penguji: 1 Ir Meuthia Rachmaniah, MSc 2 Auzi Asfarian, SKomp MKom
Judul Skripsi : Pengembangan Aplikasi IPB News Berbasis Universal Windows Platform Nama : Peralta Christ Perdamaian Zega NIM : G64120121
Disetujui oleh
Irman Hermadi, SKom MSc PhD Pembimbing
Diketahui oleh
Dr Ir Agus Buono, MSi MKom Ketua Departemen
Tanggal Lulus:
PRAKATA Puji dan syukur penulis panjatkan kepada Tuhan Yesus Kristus atas segala karunia-Nya sehingga karya ilmiah ini berhasil diselesaikan. Tema yang dipilih dalam penelitian yang dilaksanakan sejak bulan Februari 2016 ini ialah software engineering, dengan judul Pengembangan Aplikasi IPB News Berbasis Universal Windows Platform (UWP). Penulis menyadari bahwa dalam proses penulisan skripsi ini banyak mengalami kendala, namun berkat bantuan, bimbingan, kerjasama dari berbagai pihak dan anugerah dari Tuhan Yesus Kristus, kendala-kendala yang dihadapi tersebut dapat diatasi. Untuk itu penulis menyampaikan ungkapan terima kasih kepada kedua orang tua, Bapak Törözatulö Zega dan Ibu Karyawati Sarumaha serta seluruh keluarga atas doa dan dukungannya. Ucapan terima kasih dan penghargaan kepada Bapak Irman Hermadi, SKom MSc PhD selaku pembimbing yang telah dengan sabar, tulus, dan ikhlas meluangkan waktu, dan pikiran memberikan bimbingan, motivasi, arahan, dan saran-saran yang sangat berharga kepada penulis selama menyusun skripsi. Ucapan terima kasih juga saya tujukan kepada Ir Ibu Meuthia Rachmania, MSc dan Bapak Auzi Asfarian, SKomp MKom selaku penguji atas segala masukan dan saran yang telah diberikan. Semoga karya ilmiah ini bermanfaat.
Bogor, Oktober 2016 Peralta Christ Perdamaian Zega
DAFTAR ISI DAFTAR TABEL
vi
DAFTAR GAMBAR
vi
DAFTAR LAMPIRAN
vi
PENDAHULUAN
1
Latar Belakang
1
Perumusan Masalah
1
Tujuan Penelitian
2
Manfaat Penelitian
2
Ruang Lingkup Penelitian
2
METODE
2
Data Penelitian
2
Tahapan Penelitian
3
Lingkungan Pengembangan
4
HASIL DAN PEMBAHASAN
4
Communication
4
Planning
5
Modeling
5
Construction
9
Deployment
11
SIMPULAN DAN SARAN
12
Simpulan
12
Saran
13
DAFTAR PUSTAKA
13
LAMPIRAN
15
RIWAYAT HIDUP
27
DAFTAR TABEL 1 Daftar website berdasarkan ketersediaan RSS 2 Hasil pengumpulan kebutuhan IPB News 3 Deskripsi use case IPB News
3 4 6
DAFTAR GAMBAR 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Paradigma proses waterfall Jadwal pengembangan IPB News Use case diagram IPB News Activity diagram memilih kategori Sequence diagram memilih kategori Class diagram komponen MVVM IPB News Mockup IPB News versi mobile Mockup IPB News versi desktop Class Feed Class FeedContext Tabel Feed Method removeFromFavorites Impelementasi Visual State Manager pada MainView Package.appxmanifest
3 5 5 6 7 8 9 9 9 10 10 10 11 12
DAFTAR LAMPIRAN 1 2 3 4 5
Deskripsi detil dari use case Activitiy diagrams Sequence diagrams Mockups Skenario dan hasil pengujian IPB News
15 18 20 22 25
PENDAHULUAN Latar Belakang Di zaman ini perubahan terjadi sangat cepat (Wang et al. 2006) sehingga informasi tidak lagi berubah dalam skala minggu, hari, atau jam, melainkan dalam skala menit dan detik. Hal ini membuat website menjadi sumber informasi yang populer karena pembaharuan informasinya yang cepat dan dapat diakses setiap saat selama perangkat berada di dalam jaringan internet. Institut Pertanian Bogor (IPB) sebagai salah satu kampus pertanian di Indonesia memiliki berbagai website sebagai media informasi, terutama bagi civitas akademikanya. Setiap website memberikan jenis informasi yang berbeda, misalnya admisi.ipb.ac.id memberikan informasi secara garis besar tentang IPB bagi mahasiswa baru sedangkan cda.ipb.ac.id memberi informasi seputar lowongan pekerjaan dan pelatihan bagi mahasiswa dan alumni. Hal ini membuat pengguna harus berulang kali mengunjungi situs-situs tersebut untuk mengetahui informasi-informasi terbaru. Menurut Blekas et al. (2006), RSS atau Really Simple Syndication adalah sebuah file berbasis Extensible Markup Language (XML) yang meringkas konten website. Dengan RSS, pengguna dapat berlangganan ke berbagai website yang menyediakan RSS feed (umpan web). Artinya, pengguna dapat mengetahui informasi-informasi terbaru tanpa harus mengunjungi setiap website. Selain itu, RSS feed dari berbagai website dapat dikumpulkan ke dalam sebuah single client yang disebut RSS reader (Aizenbud-Reshef et al. 2009) atau agregator berita. Hammersley (2003) mengungkapkan bahwa RSS feed dapat dibaca menggunakan aplikasi web-based, dekstop-based, atau mobile-device-based. Artinya, sebuah aplikasi agregator berita dapat dibangun di berbagai device. Akan tetapi, arsitektur aplikasi setiap device berbeda sehingga kode program yang dipakai untuk mengembangkan sebuah aplikasi tidak dapat digunakan ulang untuk mengembangkan aplikasi yang sama di device lain (Chmielewski dan Walczak 2012). Oleh sebab itu, pengadaan proyek aplikasi baru tidak dapat dihindari sehingga membutuhkan biaya, tenaga, dan waktu yang lebih banyak. Hasiholan (2010) dan Utomo (2014) sebelumnya telah melakukan pengembangan sistem agregator berita IPB. Akan tetapi, sistem tersebut masih berbasis web. Ma et al. (2013) mengungkapkan bahwa banyak perangkat lunak berbasis web didesain khusus untuk PC sehingga kurang baik ketika ditampilkan pada smartphone. Ma et al. (2013) menambahkan bahwa usaha (effort) dalam mengembangkan perangkat lunak berbasis web cenderung kurang berarti dan memakan waktu. Salah satu solusi untuk masalah di atas adalah mengembangkan aplikasi berbasis Universal Windows Platform (UWP). UWP adalah inovasi dari Microsoft yang memungkinkan pengembangan aplikasi multi-device yang berbasis Windows yang efisien dengan tetap mempertahankan user experience di setiap perangkat (Kennedy et al 2016). Perumusan Masalah Berdasarkan latar belakang di atas, diketahui bahwa sistem agregator berita IPB masih berbasis web. Selain itu, pengguna menginginkan aplikasi yang dapat
2 tersedia di berbagai perangkat desktop dan mobile (aplikasi multi-device). Akan tetapi, dalam membangun sebuah aplikasi multi-device dibutuhkan biaya, tenaga, dan waktu yang lebih banyak. Pendekatan yang dilakukan untuk mengatasi permasalahan di atas ini adalah dengan mengembangkan aplikasi agregator berita IPB berbasis Universal Windows Platform (UWP). Aplikasi ini selanjutnya akan disebut sebagai IPB News.
Tujuan Penelitian Tujuan penelitian ini adalah menyatukan informasi-informasi dari berbagai website IPB ke dalam sebuah agregator berita. Agregator berita ini dikembangkan dengan basis UWP untuk dapat mendukung perangkat desktop dan mobile berbasis Windows.
Manfaat Penelitian Pengembangan IPB News berbasis Universal Windows Platform dapat memberikan manfaat kepada pengguna dalam memperoleh informasi-informasi terbaru dari berbagai website IPB tanpa harus berulang kali mengunjungi berbagai website tersebut. Selain itu, IPB News adalah aplikasi multi-device sehingga tidak hanya mendukung perangkat mobile saja. Aplikasi ini dikembangkan dengan basis UWP sehingga sumber daya yang dibutuhkan selama proses pengembangan lebih efisien. Sumber daya dalam hal ini adalah lama waktu, tenaga programmer, dan banyak dana yang diperlukan selama pengembangan.
Ruang Lingkup Penelitian Agregator berita yang akan dikembangkan mengumpulkan RSS feed dari beberapa website dalam domain ipb.ac.id yang mendukung fasilitas RSS dan menyediakan informasi-informasi yang umum sehingga website milik fakultas dan departemen di IPB tidak dimasukkan. Oleh karena itu, website yang menjadi sumber data di dalam penelitian ini adalah ipb.ac.id, procurement.ipb.ac.id, dan repository.ipb.ac.id. Aplikasi ini mendukung perangkat desktop dan mobile yang berjalan pada sistem operasi Windows 10. Untuk penyimpanan data menggunakan SQLite. Tahapan pengembangan menggunakan model waterfall dengan teknik pemograman berorientasi objek dan diimplementasikan menggunakan C# dan MVVM pattern.
METODE Data Penelitian Data yang digunakan dalam penelitian ini adalah RSS feed yang berasal dari beberapa website dalam domain ipb.ac.id yang menyediakan fasilitas RSS. Website
3 yang menjadi sumber data dipilih dari berbagai website IPB yang menyediakan informasi-informasi yang bersifat umum. Oleh karena itu, website yang merupakan milik fakultas atau departemen di IPB tidak dimasukkan. Tabel 1 merupakan daftar website yang menyediakan informasi umum berdasarkan ketersediaan RSS. Tabel 1 Daftar website berdasarkan ketersediaan RSS Tidak URL Website Menyediakan Menyediakan RSS RSS cda.ipb.ac.id Ya iirc.ipb.ac.id ipb.ac.id Ya katalog.perpustakaan.ipb.ac.id perpustakaan.ipb.ac.id procurement.ac.id Ya research.ipb.ac.id Ya spp.ipb.ac.id Ya
Tidak Dapat Diakses Ya Ya Ya
Tahapan Penelitian Penelitian ini mengikuti kaidah pengembangan perangkat lunak waterfall. Melalui metode ini pengembang dapat membangun perangkat lunak secara linear dari tahap communication ke deployment (Pressman 2015). Hal ini disebabkan karena IPB News dikembangkan berdasarkan sistem yang telah ada sehingga secara fungsional dapat digambarkan secara jelas. Gambar 1 merupakan tahapan-tahapan yang dilakukan pada pengembangan sistem metode waterfall. Communication Planning Modeling Construction Deployment
Gambar 1 Paradigma proses waterfall Tahapan penelitian yang dilakukan dalam membangun IPB News ini mengikuti kaidah model proses waterfall sebagai berikut. 1 Communication Pengembang perangkat lunak bertemu dengan stakeholder untuk menganalisis kebutuhan pengguna aplikasi IPB News. 2 Planning Tahap ini dilakukan dengan perencanaan jadwal pengerjaan aplikasi.
4 3 Modeling Pada tahapan ini dilakukan pemodelan rancangan aplikasi dalam bentuk use case diagram, class diagram, activity diagram, sequence diagram dan mockup. 4 Construction Tahap construction adalah proses pembuatan aplikasi sebagai implementasi hasil dari tahap sebelumnya ke dalam bentuk aplikasi UWP. Setelah itu, proses pengujian akan dilakukan. 5 Deployment Pada tahapan ini implementasi program kepada pengguna dilakukan. Lingkungan Pengembangan Lingkungan perangkat keras dan perangkat lunak yang digunakan untuk penelitian ini adalah sebagai berikut: 1 PC dengan spesifikasi a Operating system: Windows 10 Pro 64-bit b Processor: Intel Pentium CPU G3240 3.10 GHz c Memory: 8192 MB RAM d Monitor: AOC E2070L 19” (1600 x 900) e VGA: NVIDIA GeForce GTX 750 Ti (6057 MB) 2 Compiler dan editor: Visual Studio Community 2015 3 Text editor: Sublime Text 2 4 Software design tool: Visual Paradigm 12 5 Wireframing tool: Balsamiq Mockups 2
HASIL DAN PEMBAHASAN Communication Tahap communication merupakan proses bertemunya pengembang aplikasi dengan dengan pihak DIDSI selaku pengelola dari berbagai website IPB. Di dalam tahap ini dilakukan diskusi mengenai kebutuhan pengguna aplikasi IPB News yang akan dikembangkan. Hasil dari tahap ini adalah aplikasi IPB News memiliki satu kategori pengguna yang disebut sebagai pembaca. Kebutuhan pembaca untuk aplikasi IPB News antara lain aplikasi menyediakan konten-konten yang telah dikategorikan, aplikasi dapat melakukan penambahan konten ke dalam daftar favorit, melakukan penghapusan konten favorit, menampilkan konten, dan membagikan konten. Tabel 2 merupakan hasil pengumpulan kebutuhan aplikasi IPB News. Tabel 2 Hasil pengumpulan kebutuhan IPB News Kategori Pengguna Kebutuhan Pengguna Pembaca Memilih kategori konten Membaca konten Menambahkan konten ke dalam daftar favorit Menghapus konten favorit Membagikan konten
5 Planning Setelah berdiskusi dengan pihak DIDSI, dilakukan perencanaan jadwal pengembangan aplikasi IPB News. Pengembangan aplikasi IPB News diperkirakan dapat selesai selama tiga bulan. Gambar 2 menunjukan jadwal pengembangan aplikasi IPB News. Start adalah tanggal dimulainya suatu tahap dan end adalah tanggal berakhirnya tahap tersebut. Duration adalah jumlah hari kerja yang dibutuhkan untuk mengerjakan sebuah tahap. Hari kerja di dalam penelitian ini adalah hari Senin sampai Sabtu. Communication - Start: 01/02/16 - End: 06/02/2016 - Duration: 6 days
Planning - Start: 08/02/16 - End: 09/02/2016 - Duration: 2 days
Modeling
Construction
- Start: 10/02/16 - End: 29/02/2016 - Duration: 17 days
- Start: 01/03/16 - End: 28/04/2016 - Duration: 51 days
Deployment - Start: 29/04/16 - End: 30/04/2016 - Duration: 2 days
Gambar 2 Jadwal pengembangan IPB News Modeling Use Case Diagram Use case diagram digunakan untuk menggambarkan business rule dari IPB News. Gambar 3 merupakan gambar dari use case diagram IPB News sedangkan Tabel 3 merupakan deskripsi singkat dari use case.
Gambar 3 Use case diagram IPB News
6 Tabel 3 Deskripsi use case IPB News Aktivitas Deskripsi Memilih kategori Pengguna dapat memilih konten-konten yang akan ditampilkan menurut kategori konten. Pengkategorian dilakukan berdasarkan sumber RSS feed. Membaca konten Pengguna dapat membaca konten dari aplikasi. Menambahkan konten ke Pengguna dapat memilih konten-konten yang ingin daftar favorit disimpan untuk dibaca kembali. Menghapus konten Pengguna dapat menghapus konten-konten yang telah favorit disimpan sebelumnya. Membagikan konten Pengguna dapat memilih konten untuk dibagikan ke aplikasi tujuan. Terdapat satu aktor dan lima fungsi di dalam use case yang dihasilkan. Aktor di dalam perancangan IPB News disebut pembaca. Terdapat dua aktivitas utama yang dapat dilakukan oleh pembaca, yaitu memilih kategori dan membaca konten. Di dalam aktivitas memilih kategori pembaca memilih jenis konten yang akan ditampilkan oleh aplikasi. Konten-konten di dalam IPB News dikelompokan berdasarkan sumber website dari konten tersebut. Pembaca juga dapat memilih salah satu konten untuk dibaca. Aplikasi akan mengarahkan pembaca ke halaman yang menampilkan informasi penuh dari konten yang dipilih. Dari halaman tersebut pembaca dapat memilih untuk menambah atau menghapus konten tersebut dari daftar favorit serta membagikannya ke berbagai aplikasi native yang telah terpasang di dalam device pembaca. Deskripsi lengkap dari use case diagram IPB news dapat dilihat pada Lampiran 1. Activity Diagram Activity diagram digunakan untuk menggambarkan business flow. Gambar 4 merupakan salah satu representasi activity diagram yang mengacu pada use case memilih kategori. Activity diagram pada Gambar 4 menggambarkan alur bisnis yang dapat dilakukan oleh pembaca ketika memilih kategori konten yang akan ditampilkan aplikasi. Keseluruhan activity diagram dapat dilihat pada Lampiran 2.
Gambar 4 Activity diagram memilih kategori
7 Sequence Diagram Sequence diagram menggambarkan perpindahan pesan dan fungsi yang terjadi dalam satu alur use case. Diagram ini merupakan penjelasan lebih lanjut dari sebuah activity diagram. Gambar 5 merupakan contoh sequence diagram dari use case memilih kategori. Pada sequence diagram tersebut pembaca memilih kategori lalu View mendefinisikan value dari Link berdasarkan kategori yang dipilih. Link di dalam penelitian ini merupakan atribut yang merepresentasikan alamat (link) dari sebuah RSS. Selanjutnya, FeedViewModel mengambil feeds dari alamat RSS tersebut melalui fungsi loadRss. Di dalam fungsi ini FeedViewModel memperbarui data-data di dalam class Feed lalu mengubahnya ke dalam bentuk yang dapat diakses dengan mudah oleh View (Microsoft 2012). Keseluruhan sequence diagram dapat dilihat pada Lampiran 3.
Call message Return message
Gambar 5 Sequence diagram memilih kategori Perancangan Menggunakan MVVM Pattern Microsoft (2012) di dalam website resminya menyatakan bahwa MVVM pattern adalah pattern yang dibuat untuk pengembangan aplikasi-aplikasi yang berbasis XAML seperti UWP karena memiliki fitur data binding, commands, dan behaviours. MVVM adalah kepanjangan dari model, view, view model. Model adalah bagian yang bertugas untuk menyediakan data, misalnya nama, NIM, dan jurusan. View bertanggungjawab dalam mendefinisikan struktur, layout, dan tampilan dari apa yang dilihat oleh pengguna pada layar. View model berperan sebagai penghubung antara view dan model. View model mengambil data dari model dan mengubahnya ke dalam bentuk yang dapat diakses dengan mudah oleh view. Data yang disediakan tersebut ditampilkan oleh view kepada pengguna dengan data binding.
8 MVVM diimplementasikan dengan memisahkan application logic dengan user interface (UI). Pemisahan ini memudahkan proses testing, maintaining, dan evolving dari sebuah aplikasi. Selain itu, UI menjadi modul yang independen sehingga developer-designer lebih leluasa dalam berkreasi untuk membuat tampilan aplikasi yang baik. Gambar 6 merupakan class diagram yang merepresentasikan ketiga komponen dari MVVM di dalam IPB News. Feed adalah objek yang menjadi model dan bertanggungjawab dalam menyediakan data-data berupa Id, Title, PublishedDate, dan Link. Data-data tersebut mewakili atribut-atribut dari sebuah RSS feed. Class FeedViewModel berperan sebagai view model yang menghubungkan model dan view. Modul view di dalam IPB News adalah FeedList, MainView, dan ReadView.
Gambar 6 Class diagram komponen MVVM IPB News Mockups Mockup adalah rancangan awal dari tampilan aplikasi. Mockup merupakan gambar model atau prototype yang menjadi acuan dalam pengimplementasian UI pada tahap construction. Pembuatan mockup di dalam tahap ini hanya sebatas layout dan navigasi. Aplikasi yang digunakan adalah Balsamiq Mockups 2. Gambar 7 adalah contoh mockup IPB News versi mobile dan Gambar 8 adalah contoh mockup versi desktop. Pada kedua mockup tersebut tampilan aplikasi dibagi ke dalam dua bagian, yaitu head dan body. Head berbentuk title bar yang berisi judul halaman dan hamburger button. Ketika hamburger button dipilih (clicked) akan memunculkan menu navigasi yang disebut split view. Keseluruhan mockup dapat dilihat pada Lampiran 4.
9
Gambar 7 Mockup IPB News versi mobile
Gambar 8 Mockup IPB News versi desktop Construction Construction melakukan pengimplementasian dan pengujian aplikasi berdasarkan tahap sebelumnya. Proses yang dilakukan meliputi: 1 Implementasi model Pengimplentasian model menghasilkan sebuah class Feed yang memiliki atribut Id, Title, Link dan PublishedDate seperti pada Gambar 9. public class Feed { public int Id { get; set; } public string Title { get; set; } public string Link { get; set; } public DateTimeOffset PublishedDate { get; set; } }
Gambar 9 Class Feed
10 2 Implementasi SQLite database SQLite adalah server-less database yang bersifat open source. Server-less artinya database tidak memerlukan server sendiri untuk menjalankan fungsinya sehingga sangat cocok digunakan pada aplikasi mobile device. SQLite pada IPB News menyimpan data berbentuk file yang berekstensi db di dalam media penyimpanan device seperti pada Gambar 10. public class FeedContext : DbContext { public DbSet
Feeds { get; set; } protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) { optionsBuilder.UseSqlite("Filename=IpbRss.db"); } }
Gambar 10 Class FeedContext Pada implementasi SQLite database dilakukan migration, yaitu pembuatan tabel berdasarkan model yang telah dibuat. Tabel yang dihasilkan dapat dilihat pada Gambar 11.
Gambar 11 Tabel Feed Seluruh proses dalam implementasi ini menggunakan NuGet Package Manager Console. NuGet Package Manager merupakan tools Visual Studio yang digunakan untuk melakukan instalasi terhadap library-library dari pihak ke tiga. Tahap-tahap implementasi ini meliputi: Pembaruan Microsoft.NETCore.UniversalWindowsPlatform Pemasangan Entity Framework Pemasangan Entity Framework commands package Melakukan initial migration dari model yang telah dibuat 3 Implementasi view model Tahap ini menghasilkan class FeedViewModel. Gambar 12 merupakan salah satu contoh method yang ada di dalam class FeedViewModel, yaitu removeFromFavorites. Method ini berfungsi untuk menghapus konten dari daftar favorit. public void removeFromFavorites() { using (var db = new FeedContext()) { var feed = db.Feeds.First(f => f.Title == GlobalVariable.Title); db.Feeds.Remove(feed); db.SaveChanges(); } }
Gambar 12 Method removeFromFavorites
11 4
Implementasi view Pengimplementasian view menggunakan bahasa markup XAML. Hal yang perlu diperhatikan ketika melakukan implementasi view terhadap aplikasi multi-device adalah adaptive interface yang dapat berjalan sesuai dengan ukuran layar, orientasi, dan resolusi setiap perangkat (Baydachnyy 2015). Pendekatan yang dipakai untuk mewujudkan adaptive interface di dalam aplikasi yang berbasis UWP adalah dengan Visual State Manager. Gambar 13 merupakan contoh pengimplementasian Visual State Manager pada MainView. <Setter Target="SplitView.DisplayMode" Value="Overlay" /> <Setter Target="SplitView.OpenPaneLength" Value="360" /> <Setter Target="SplitView.DisplayMode" Value="CompactOverlay" />
Gambar 13 Impelementasi Visual State Manager pada MainView 5
Pengujian Pengujian aplikasi dilakukan bersama pihak DIDSI IPB menggunakan blackbox testing. Pengujian dilakukan masing-masing pada perangkat laptop dan smartphone. Hasil pengujian dapat dilihat pada Lampiran 5. Spesifikasi dari perangkat pengujian adalah sebagai berikut: Laptop - Device name: Samsung RV408 - CPU: Pentium Dual-core 2.3 Ghz - RAM: 4 GB - OS: Windows 10 Pro 64 bit - Screen resolution: 1366 x 768 Smartphone - Device name: Lumia 453 - CPU: Snapdragon Dual-core 1.2 GHz Cortex-A7 - RAM: 1 GB - OS: Windows 10 mobile 1607 - Screen resolution: 480 x 800 Deployment
Pada tahap ini dilakukan pendistribusian aplikasi kepada pengguna. Ketika akan mendistribusikan, hal yang penting dan diperlukan adalah sebuah appxupload package. Sebelum membuat appxupload package perlu dilakukan konfigurasi pada
12 file Package.appxmanifest seperti pada Gambar 14. File ini terdiri atas berbagai tab yang berisi informasi tentang aplikasi. Informasi yang dikonfigurasi di dalam penelitian ini adalah informasi-informasi umum yang ada pada tab application dan icon aplikasi pada tab visual assests. Untuk memulai pembuatan package file dapat dilakukan dengan memilih Create App Packages yang ada menu Project lalu submenu Store.
Gambar 14 Package.appxmanifest Deployment aplikasi UWP menghasilkan satu app package yang dapat berjalan di berbagai perangkat Windows 10. Hal ini disebabkan karena UWP dapat memanggil berbagai API yang secara khusus berjalan pada perangkat-perangkat tertentu (Whitney 2016), misalnya Win32 untuk desktop dan Silverlight untuk mobile.
SIMPULAN DAN SARAN Simpulan Aplikasi IPB News dapat berjalan sesuai kebutuhan yang telah didefinisikan. Pengembangan aplikasi lebih efisien karena hanya membutuhkan satu proyek aplikasi dengan menghasilkan satu app package yang dapat berjalan di perangkat laptop dan smartphone. Akan tetapi, app package yang dihasilkan hanya dapat berjalan universal pada perangkat-perangkat Windows 10 saja.
13 Saran Saran bagi penelitian selanjutnya yang terkait dengan IPB News adalah: 1. Sinkronisasi data konten-konten favorit antar perangkat yang dipakai pengguna. 2. Menyediakan menu pengaturan jumlah baris yang ditampilkan pada judul konten. 3. Penambahan fitur live tile. 4. Daftar konten jangan berwarna merah.
DAFTAR PUSTAKA Aizenbud-Reshef N, Guy I, Jacovi M. 2009. Collaborative feed reading in a community. Di dalam: Teasley S, Havn E, Prinz W, Lutters W, editor. Proceedinfs of the ACM 2009 International Conference on Supporting Group Work - GROUP '09; May 10-13 2009; Sanibel Island, Florida. New York (US): ACM Press. hlm 277. Baydachnyy S. 2015. UWP: New features of visual state manager (part 1) [Internet]. [Diunduh 2016 Agustus 25]. Tersedia pada: https://blogs.msdn.microsoft.com/cdndevs/2015/06/26/uwp-new-features-ofvisual-state-manager-part-1/ Blekas A, Garofalakis J, Stefanis V. 2006. Use of RSS feeds for content adaptation in mobile web browsing. Di dalam: Proceedings of the 2006 International Cross-Disciplinary Workshop on Web Accessibility (W4A) Building the Mobile Web: Rediscovering Accessibility? - W4A; 2006; Edinburgh, UK. New York (US): ACM. hlm 80 Chmielewski J, Walczak K. 2012. Application architectures for smart multi-device applications. Di dalam: Proceedings of the Workshop on Multi-Device App Middleware - Multi-Device '12; 2012 Des 3-7; Montreal, Canada. New York (US): ACM. hlm 1. Hammersley B. 2003. Content Syndication with RSS: [Sharing Headlines and Information Using XML]. Ed ke-1. Beijing [u.a.] (ID): O'Reilly. Hasiholan D. 2010. Pengembangan sistem agregator berita institut pertanian bogor berbasis web [skripsi]. Bogor (ID): Fakultas Matematika dan Ilmu Pengetahuan Alam, Insititut Pertanian Bogor. Kennedy J, Koren A, Groce J. 2016. What's a universal windows platform (UWP) app? [Internet]. [diunduh 2016 Agustus 09]. Tersedia pada: https://msdn.microsoft.com/en-us/windows/uwp/get-started/whats-a-uwp Ma Y, Fang Y, Zhu X, Liu X, Huang G. 2013. Mobitran. Di dalam: Proceedings Demo & Poster Track of ACM/IFIP/USENIX International Middleware Conference on - MiddlewareDPT '13; 2013 Des 9-13; Beijing, China. Sl (AU): ACM. hlm 1. Microsoft. 2012. The MVVM pattern [internet]. [diunduh 2016 Agustus 21]. Tersedia pada https://msdn.microsoft.com/en-us/library/hh848246.aspx Pressman RS, Ph.D., Maxim BR, Ph.D. 2015. Software Engineering: A Practitioner's Approach. New York (US): McGraw-Hill. Utomo HBP. 2014. Pengembangan agregator berita IPB [skripsi]. Bogor (ID): Fakultas Matematika dan Ilmu Pengetahuan Alam, Insititut Pertanian Bogor.
14 Wang T, Yu N, Li Z, Li M. 2006. Nreader: reading news quickly, deeply and vividly. Di dalam: CHI '06 Extended Abstracts on Human Factors in Computing Systems - CHI EA '06; 2006 April 22-27; Montréal, Québec, Canada. New York (US): ACM. hlm 1386. Whitney T. 2016. Guide to universal windows platform (UWP) apps [Internet]. [diunduh 2016 Agustus 26]. Tersedia pada: https://msdn.microsoft.com/enus/windows/uwp/get-started/universal-application-platform-guide
15 Lampiran 1 Deskripsi detil dari use case A. Memilih kategori Use case name: Scenario: Triggering event: Brief description:
Actors: Related use case: Stakeholders: Preconditions: Postconditions:
Memilih kategori. Memilih konten-konten yang ditampilkan berdasarkan kategori yang dipilih. Aktor memilih salah satu menu yang mewakili setiap kategori. Use case ini mendeskripsikan kegiatan aktor untuk memilih kategori dari konten yang akan ditampilkan sistem. Pembaca.
Sistem menampilkan konten-konten berdasarkan kategori pilihan aktor.
Flow of activities: Actor 1 Memilih salah satu menu kategori.
System 1.1 Menampilkan konten berdasarkan kategori yang dipilih.
Exception conditions: B. Membaca konten Use case name: Scenario: Triggering event: Brief description: Actors: Related use case: Stakeholders: Preconditions: Postconditions:
Membaca konten. Membaca konten yang dipilih. Aktor memilih salah satu konten dari daftar konten. Use case ini mendeskripsikan kegiatan aktor untuk memilih konten yang ingin dibaca. Pembaca.
Sistem menampilkan informasi lengkap dari konten.
16 Lampiran 1 Lanjutan Flow of activities: 1
Actor Memilih salah satu konten.
System 1.1 Menampilkan informasi lengkap dari konten yang dipilih.
Exception conditions: C. Menambahkan konten ke daftar favorit Use case name: Menambahkan konten ke daftar favorit. Scenario: Menambah konten yang dipilih ke dalam daftar favorit. Triggering event: Aktor memilih menu ‘Add to favorites’. Brief description: Use case ini mendeskripsikan kegiatan aktor untuk menambahkan konten ke dalam daftar favorit. Actors: Pembaca. Related use case: Stakeholders: Preconditions: Aktor telah memilih konten untuk dibaca. Konten yang dipilih belum ditambahkan ke dalam daftar favorit. Postconditions: Sistem menampilkan halaman ‘Favorites’. Flow of activities: Actor System 1 Memilih menu 1.1 Menyimpan konten ‘Add to ke dalam daftar favorites’. favorit. 1.2 Menampilkan halaman ‘Favorites’. Exception conditions: D. Menghapus konten dari daftar favorit Use case name: Menghapus konten dari daftar favorit. Scenario: Menghapus konten yang dipilih dari daftar favorit. Triggering event: Aktor memilih menu ‘Unfavorite’. Brief description: Use case ini mendeskripsikan kegiatan aktor untuk menghapus konten dari daftar favorit.
17 Lampiran 1 Lanjutan Actors: Related use case: Stakeholders: Preconditions:
Postconditions: Flow of activities:
Pembaca.
Aktor memilih kategori ‘Favorites’. Aktor telah memilih konten untuk dibaca. Konten yang dipilih telah ditambahkan ke dalam daftar favorit. Sistem menampilkan halaman ‘Favorites’.
1
Actor Memilih menu ‘Unfavorites’.
System 1.1 Menghapus konten dari daftar favorit. 1.2 Menampilkan halaman ‘Favorites’.
Exception conditions: E. Membagikan konten Use case name: Scenario: Triggering event: Brief description: Actors: Related use case: Stakeholders: Preconditions: Postconditions: Flow of activities:
Membagikan konten. Membagikan konten yang dipilih ke aplikasi tujuan. Aktor memilih menu ‘Share’. Use case ini mendeskripsikan kegiatan aktor untuk membagikan konten ke aplikasi tujuan. Pembaca.
Aktor telah memilih konten untuk dibaca.
1 2
Exception conditions:
Actor Memilih menu ‘Share’. Memilih aplikasi tujuan
System 1.1 Menampilkan daftar aplikasi tujuan. 2.1 Mengirim salinan konten ke aplikasi tujuan yang dipilih.
18 Lampiran 2 Activitiy diagrams A. Memilih kategori
B. Membaca artikel
C. Membagikan konten
19
Lampiran 2 Lanjutan D. Menambah atau menghapus konten dari daftar favorit
20 Lampiran 3 Sequence diagrams A. Memilih kategori
B. Membaca konten
21 Lampiran 3 Lanjutan C. Menambah atau menghapus konten dari daftar favorit
D. Membagikan konten
22 Lampiran 4 Mockups A. Halaman utama versi mobile
B. Halaman utaman versi desktop
23 Lampiran 4 Lanjutan C. Daftar konten versi mobile
D. Daftar konten versi desktop
24 Lampiran 4 Lanjutan E. Halaman membaca konten versi mobile
F. Halaman membaca konten versi desktop
25 Lampiran 5 Skenario dan hasil pengujian IPB News A. Skenario dan hasil pengujian pada perangkat laptop Kode Defenisi Skenario Uji Hasil yang Kebutuhan Kebutuhan Diharapkan IPBN-001 Memilih Pembaca Menampilkan kategori memilih item kontenpada menu split konten view yang berdasarkan mewakili kategori yang kategori konten dipilih IPBN-002 Membaca Pembaca Menampilkan konten memilih konten informasi dari daftar lengkap dari konten konten IPBN-003 Menambahkan Pengguna Pengguna konten ke membaca memasuki daftar favorit konten lalu halaman memilih menu Favorites dan ‘Add to konten favorites’ pilihan berada di dalam daftar favorit IPBN-004 Menghapus Pengguna Pengguna konten dari memilih konten memasuki daftar favorit dari halaman halaman Favorites lalu Favorites dan memilih menu konten ‘Unfavorite’ terhapus dari daftar favorit IPBN-005 Membagikan Pengguna Menampilkan konten memilih halaman konten, Share dan memilih menu konten ‘Share’, lalu pilihan memilih dibagikan aplikasi tujuan pada aplikasi tujuan
Hasil Uji Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
26 Lampiran 5 Lanjutan B. Skenario dan hasil pengujian pada perangkat smartphone Kode Defenisi Skenario Uji Hasil yang Kebutuhan Kebutuhan Diharapkan IPBN-001 Memilih Pembaca Menampilkan kategori memilih item kontenpada menu split konten view yang berdasarkan mewakili kategori yang kategori konten dipilih IPBN-002 Membaca Pembaca Menampilkan konten memilih konten informasi dari daftar lengkap dari konten konten IPBN-003 Menambahkan Pengguna Pengguna konten ke membaca memasuki daftar favorit konten lalu halaman memilih menu Favorites dan ‘Add to konten favorites’ pilihan berada di dalam daftar favorit IPBN-004 Menghapus Pengguna Pengguna konten dari memilih konten memasuki daftar favorit dari halaman halaman Favorites lalu Favorites dan memilih menu konten ‘Unfavorite’ terhapus dari daftar favorit IPBN-005 Membagikan Pengguna Menampilkan konten memilih halaman konten, Share dan memilih menu konten ‘Share’, lalu pilihan memilih dibagikan aplikasi tujuan pada aplikasi tujuan
Hasil Uji Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
27
RIWAYAT HIDUP Penulis lahir pada tanggal 31 Desember 1993 di Nias. Penulis adalah anak ke1 dari 4 bersaudara dari pasangan Tõrõzatulõ Zega dan Karyawati Sarumaha. Pada tahun 2012, penulis lulus dari SMAN 1 Matauli Pandan dan diterima sebagai mahasiswa di Departemen Ilmu Komputer, Institut Pertanian Bogor melalui jalur BUD. Selama menjadi mahasiswa, penulis aktif di unit kegiatan mahasiswa Persekutuan Mahasiswa Kristen (PMK) sebagai anggota dari komisi diaspora. Selain itu penulis juga mengikuti organisasi kemhasiswaan IMKN (Ikatan Mahasiswa Kepulauan Nias). Pada tahun 2015, penulis melaksanakan kegiatan Praktik Kerja Lapangan (PKL) di Pusdatin Kementrian Perdagangan Republik Indonesia selama 35 hari kerja.
