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 konten- konten 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
Skripsi
sebagai salah satu syarat untuk memperoleh gelar Sarjana Ilmu Komputer
pada
Departemen Ilmu Komputer
PENGEMBANGAN APLIKASI IPB NEWS BERBASIS UNIVERSAL WINDOWS PLATFORM
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR
BOGOR 2016
PERALTA CHRIST PERDAMAIAN ZEGA
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 3
2 Hasil pengumpulan kebutuhan IPB News 4
3 Deskripsi use case IPB News 6
DAFTAR GAMBAR
1 Paradigma proses waterfall 3
2 Jadwal pengembangan IPB News 5
3 Use case diagram IPB News 5
4 Activity diagram memilih kategori 6
5 Sequence diagram memilih kategori 7
6 Class diagram komponen MVVM IPB News 8
7 Mockup IPB News versi mobile 9
8 Mockup IPB News versi desktop 9
9 Class Feed 9
10 Class FeedContext 10
11 Tabel Feed 10
12 Method removeFromFavorites 10
13 Impelementasi Visual State Manager pada MainView 11
14 Package.appxmanifest 12
DAFTAR LAMPIRAN
1 Deskripsi detil dari use case 15
2 Activitiy diagrams 18
3 Sequence diagrams 20
4 Mockups 22
5 Skenario dan hasil pengujian IPB News 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 URL Website Menyediakan
RSS
Tidak Menyediakan
RSS
Tidak Dapat Diakses
cda.ipb.ac.id Ya
iirc.ipb.ac.id Ya
ipb.ac.id Ya
katalog.perpustakaan.ipb.ac.id Ya
perpustakaan.ipb.ac.id Ya
procurement.ac.id Ya
research.ipb.ac.id Ya
spp.ipb.ac.id 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.
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.
Communication
Planning
Modeling
Construction
Deployment
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.
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
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 - Start: 10/02/16 - End: 29/02/2016 - Duration: 17 days
Construction - Start: 01/03/16 - End: 28/04/2016 - Duration: 51 days
Deployment - Start: 29/04/16 - End: 30/04/2016 - Duration: 2 days
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 daftar favorit
Pengguna dapat memilih konten-konten yang ingin disimpan untuk dibaca kembali.
Menghapus konten favorit
Pengguna dapat menghapus konten-konten yang telah 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.
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.
Call message Return message
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.
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.
Gambar 12 Method removeFromFavorites
public void removeFromFavorites() {
using (var db = new FeedContext()) {
var feed = db.Feeds.First(f => f.Title == GlobalVariable.Title);
db.Feeds.Remove(feed);
db.SaveChanges();
} }
public class FeedContext : DbContext {
public DbSet<Feed> Feeds { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
optionsBuilder.UseSqlite("Filename=IpbRss.db");
} }
Gambar 10 Class FeedContext
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.
5 Pengujian
Pengujian aplikasi dilakukan bersama pihak DIDSI IPB menggunakan black- box 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
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="360"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SplitView.DisplayMode" Value="Overlay" />
<Setter Target="SplitView.OpenPaneLength" Value="360" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SplitView.DisplayMode" Value="CompactOverlay" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Gambar 13 Impelementasi Visual State Manager pada MainView
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 sub- menu 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-of- visual-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/en- us/windows/uwp/get-started/universal-application-platform-guide
15 Lampiran 1 Deskripsi detil dari use case
A. Memilih kategori
Use case name: Memilih kategori.
Scenario: Memilih konten-konten yang ditampilkan berdasarkan kategori yang dipilih.
Triggering event: Aktor memilih salah satu menu yang mewakili setiap kategori.
Brief description: Use case ini mendeskripsikan kegiatan aktor untuk memilih kategori dari konten yang akan ditampilkan sistem.
Actors: Pembaca.
Related use case:
Stakeholders:
Preconditions:
Postconditions: Sistem menampilkan konten-konten berdasarkan kategori pilihan aktor.
Flow of activities:
Actor System
1 Memilih salah satu menu kategori.
1.1 Menampilkan konten berdasarkan kategori yang dipilih.
Exception conditions:
B. Membaca konten
Use case name: Membaca konten.
Scenario: Membaca konten yang dipilih.
Triggering event: Aktor memilih salah satu konten dari daftar konten.
Brief description: Use case ini mendeskripsikan kegiatan aktor untuk memilih konten yang ingin dibaca.
Actors: Pembaca.
Related use case:
Stakeholders:
Preconditions:
Postconditions: Sistem menampilkan informasi lengkap dari konten.
16
Lampiran 1 Lanjutan Flow of activities:
Actor System
1 Memilih salah satu konten.
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
‘Add to favorites’.
1.1 Menyimpan konten ke dalam daftar 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: Pembaca.
Related use case:
Stakeholders:
Preconditions: Aktor memilih kategori ‘Favorites’.
Aktor telah memilih konten untuk dibaca.
Konten yang dipilih telah ditambahkan ke dalam daftar favorit.
Postconditions: Sistem menampilkan halaman ‘Favorites’.
Flow of activities:
Actor System
1 Memilih menu
‘Unfavorites’.
1.1 Menghapus konten dari daftar favorit.
1.2 Menampilkan halaman ‘Favorites’.
Exception conditions:
E. Membagikan konten
Use case name: Membagikan konten.
Scenario: Membagikan konten yang dipilih ke aplikasi tujuan.
Triggering event: Aktor memilih menu ‘Share’.
Brief description: Use case ini mendeskripsikan kegiatan aktor untuk membagikan konten ke aplikasi tujuan.
Actors: Pembaca.
Related use case:
Stakeholders:
Preconditions: Aktor telah memilih konten untuk dibaca.
Postconditions:
Flow of activities:
Actor System
1 Memilih menu
‘Share’.
2 Memilih aplikasi tujuan
1.1 Menampilkan daftar aplikasi tujuan.
2.1 Mengirim salinan konten ke aplikasi tujuan yang dipilih.
Exception conditions:
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
Kebutuhan
Defenisi Kebutuhan
Skenario Uji Hasil yang Diharapkan
Hasil Uji IPBN-001 Memilih
kategori
Pembaca memilih item pada menu split view yang mewakili kategori konten
Menampilkan konten- konten berdasarkan kategori yang dipilih
Berhasil
IPBN-002 Membaca konten
Pembaca memilih konten dari daftar konten
Menampilkan informasi lengkap dari konten
Berhasil
IPBN-003 Menambahkan konten ke daftar favorit
Pengguna membaca konten lalu memilih menu
‘Add to favorites’
Pengguna memasuki halaman Favorites dan konten
pilihan berada di dalam daftar favorit
Berhasil
IPBN-004 Menghapus konten dari daftar favorit
Pengguna memilih konten dari halaman Favorites lalu memilih menu
‘Unfavorite’
Pengguna memasuki halaman Favorites dan konten terhapus dari daftar favorit
Berhasil
IPBN-005 Membagikan konten
Pengguna memilih konten,
memilih menu
‘Share’, lalu memilih aplikasi tujuan
Menampilkan halaman Share dan konten pilihan dibagikan pada aplikasi tujuan
Berhasil
26
Lampiran 5 Lanjutan
B. Skenario dan hasil pengujian pada perangkat smartphone Kode
Kebutuhan
Defenisi Kebutuhan
Skenario Uji Hasil yang Diharapkan
Hasil Uji IPBN-001 Memilih
kategori
Pembaca memilih item pada menu split view yang mewakili kategori konten
Menampilkan konten- konten berdasarkan kategori yang dipilih
Berhasil
IPBN-002 Membaca konten
Pembaca memilih konten dari daftar konten
Menampilkan informasi lengkap dari konten
Berhasil
IPBN-003 Menambahkan konten ke daftar favorit
Pengguna membaca konten lalu memilih menu
‘Add to favorites’
Pengguna memasuki halaman Favorites dan konten
pilihan berada di dalam daftar favorit
Berhasil
IPBN-004 Menghapus konten dari daftar favorit
Pengguna memilih konten dari halaman Favorites lalu memilih menu
‘Unfavorite’
Pengguna memasuki halaman Favorites dan konten terhapus dari daftar favorit
Berhasil
IPBN-005 Membagikan konten
Pengguna memilih konten,
memilih menu
‘Share’, lalu memilih aplikasi tujuan
Menampilkan halaman Share dan konten pilihan dibagikan pada aplikasi tujuan
Berhasil
27
RIWAYAT HIDUP
Penulis lahir pada tanggal 31 Desember 1993 di Nias. Penulis adalah anak ke- 1 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.
