Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Angular

Buat Aplikasi Mobile untuk Menampilkan Konten RSS Situs Web Anda Dengan Ionic

by
Read Time:15 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dalam tutorial ini kita akan melihat pembuatan aplikasi mobile yang menampilkan konten RSS dari sebuah situs web. Kami akan mengkonfigurasi URL RSS dan aplikasi akan mengunduhnya, menguraikannya dan menampilkan tulisan dari RSS.

Untuk membuat aplikasi mobile, kami akan menggunakan Ionic Framework v1 bersama dengan AngularJS. Untuk menyelesaikan tutorial ini, Anda perlu memiliki pengalaman dengan JavaScript dan HTML. Juga, ada baiknya jika Anda pernah bekerja dengan AngularJS sebelumnya.

Jika Anda belum pernah bekerja dengan Framework Ionic sebelumnya, saya sarankan setidaknya lihat panduan Memulai karena memberi Anda wawasan cepat tentang cara kerja berbagai hal.

Mari kita mulai!

Menyiapkan Proyek Ionic

Saya akan berasumsi bahwa Anda telah menginstal Node pada sistem Anda dan Anda juga memiliki npm (manajer paket Node). Memasang framework Ionic semudah menjalankan yang berikut:

Ini akan menginstal kedua Cordova dan Ionic di komputer Anda.

Cordova adalah teknologi inti untuk Ionic, dan pada dasarnya memungkinkan kami untuk memiliki browser yang tertanam dalam aplikasi mobile kami. Di browser itu kita akan bisa menjalankan semua kode HTML dan JavaScript kita. Ini disebut aplikasi mobile hibrida, karena aplikasi tidak menjalankan kode asli, tetapi berjalan di dalam browser.

Di samping Cordova, Ionic menambahkan bahwa kemungkinan menggunakan AngularJS untuk menulis kode kami, dan itu juga menambahkan kerangka UI yang sangat rapi.

Dengan Ionic di tempat, kita dapat membuat proyek kami menggunakan Ionic CLI, alat baris-perintah yang sangat berguna. Ionic menyediakan tiga template proyek default yang dapat digunakan sebagai titik awal:

  • blank: seperti namanya mengatakan, ini adalah proyek kosong dengan hanya komponen yang diperlukan minimal di tempat.
  • tabs: aplikasi menggunakan tab untuk menavigasi melalui layarnya.
  • sidemenu: aplikasi menggunakan menu sisi mobile standar untuk navigasi.

Untuk tutorial ini, kita akan menggunakan template aplikasi tab. Untuk memulai proyek kami, mari kita jalankan:

Ionic akan mengunduh dan menginstal semua komponen yang dibutuhkan, dan itu akan membuat folder proyek bernama myWebsiteOnMobile. Pergilah ke direktori proyek dengan menjalankan:

Karena aplikasi kami adalah aplikasi mobile hibrida, kami memiliki keuntungan karena dapat menjalankan aplikasi di dalam browser. Untuk melakukan ini, Ionic menyediakan server web terintegrasi rapi yang menjalankan aplikasi kami seperti ini:

Ini akan membuka browser dengan aplikasi kami dimuat, dan akan terlihat seperti ini:

The Ionic homescreenThe Ionic homescreenThe Ionic homescreen

Untuk menghentikan server, gunakan Control-C pada layar command-line Anda. Untuk mendapatkan gambaran yang lebih baik tentang bagaimana aplikasi terlihat di ponsel, Anda dapat menggunakan:

Ini akan membuka aplikasi di browser, menampilkan iOS dan pratinjau Android dari sisi aplikasi secara berdampingan.

The iOS and Android PreviewThe iOS and Android PreviewThe iOS and Android Preview

Tab Template aplikasi Ionic memiliki tiga tab: Status, Obrolan, dan Akun. Pada langkah selanjutnya kami akan menyesuaikan aplikasi agar sesuai dengan kebutuhan kami.

Cara Menyesuaikan Aplikasi Template Tab Ionic Default

Untuk aplikasi kami, kami akan memiliki dua tab:

  • Tulisan terbaru: menampilkan daftar posting terbaru yang diambil dari RSS feed.
  • Pengaturan: di mana pengguna akan dapat mengkonfigurasi beberapa aspek aplikasi.

Dari tab Posting terbaru, pengguna akan dapat mengklik salah satu posting terbaru dan melihat informasi lebih lanjut tentang posting, dengan kemungkinan membuka posting di browser eksternal.

Karena tab posting terbaru kami mirip dengan tab Obrolan yang disediakan oleh template, kami akan menggunakan kembali itu bersama dengan tab Akun, yang akan menjadi tab Pengaturan kami. Kita bisa melakukan semua modifikasi dengan webserver Ionic berjalan, dan Ionic akan memuat ulang aplikasi untuk kita. Ini adalah fitur yang sangat rapi yang akan mempercepat pengembangan.

Seperti disebutkan sebelumnya, Ionic menggunakan AngularJS, dan seluruh aplikasi sebenarnya adalah modul AngularJS. Modul didefinisikan dalam www/js/app.js, dan di sini juga di mana jalur atau rute dari aplikasi didefinisikan. Setiap layar aplikasi memiliki rute yang sesuai.

Mari hapus tab Status karena kami tidak membutuhkannya. Untuk melakukan ini, pertama kita perlu mengubah layar default (atau rute) dari aplikasi kita untuk menunjuk ke layar Chats, yang akan menjadi layar utama kita. Layar default dikonfigurasi melalui $urlRouterProvider.otherwise(), jadi mari kita ubah ke:

Jika sekarang kita memuat ulang http://localhost:8100 di browser kita, kita akan melihat bahwa tab Obrolan akan dimuat secara default.

Untuk menghapus tab Status, kita perlu mengedit file www/templates/tabs.html yang menyimpan template untuk komponen tab. Kami akan menghapus elemen:

Saat menyimpan, kita akan melihat bahwa aplikasi sekarang hanya memiliki dua tab: Obrolan dan Akun.

Saat berada di file www/template/tabs.html kami melihat bahwa ada beberapa tag HTML yang bukan HTML standar, seperti ion-tabs, ion-tab, dan ion-nav-view. Ini sebenarnya adalah arahan AngularJS yang didefinisikan oleh Framework Ionic. Arahan adalah tag yang mengemas fungsi di belakangnya, dan mereka adalah cara yang sangat mudah untuk menulis kode yang lebih terstruktur dan lebih ringkas.

Dalam kasus kami, direktif ion-tabs adalah komponen tab, yang untuk setiap tab memerlukan direktif ion-tab.

Mari kita mengubah tab dari Obrolan dan Akun ke nama yang diperlukan. Postingan dan Pengaturan terbaru kami. Untuk melakukan ini, kami akan memodifikasi beberapa hal di file www/templates/tabs.html:

  • atribut title elemen ion-tab yang menentukan teks pada tombol tab. Kami akan mengubah itu ke posting dan Pengaturan Terkini masing-masing.
  • atribut href elemen ion-tab yang menunjuk ke rute atau URL layar. Kami akan mengubahnya menjadi #/tab/latest-posts dan #/tab/settings.
  • beri name atribut elemen-elemen ion-nav-view ke tab-latest-posts dan tab-settings. Ini adalah pengidentifikasi untuk templat tampilan yang digunakan untuk tulisan Terkini dan layar Pengaturan.

Hasilnya, www/template/tabs.html akan terlihat seperti ini:

Setelah melakukan perubahan ini, kami akan mendapatkan beberapa kesalahan. Ini karena kami juga harus menyesuaikan rute kami untuk menggunakan pengenal baru yang telah kami gunakan. Di www/js/app.js, kita perlu mengubah pengenal negara, pengidentifikasi tampilan, dan url untuk setiap rute sesuai dengan apa yang telah kita tetapkan di atas.

Untuk setiap rute (atau layar), ada kontroler yang ditentukan. Ini adalah pola desain MVC (Model-View-Controller) dasar. Kontrol didefinisikan dalam file www/js/controllers.js. Untuk tujuan konsistensi, kami akan mengubah nama pengontrol di www/js/app.js dan www/js/controller.js:

  • ChatsCtrl menjadi LatestPostsCtrl.
  • ChatDetailCtrl menjadi PostDetailCtrl.
  • AccountCtrl menjadi SettingsCtrl.

Juga, untuk setiap rute, kita memiliki template tampilan yang didefinisikan, jadi mari kita ubah juga. Edit www/js/app.js dan ubah templateUrl seperti ini:

  • Mengubah tab-chats.html ke tab-latest-posts.html. Juga mengubah nama file www/templates/tab-chats.html untuk www/templates/tab-latest-posts.html.
  • Mengubah chatting-detail.html ke posting-detail.html. Juga mengubah nama file www/templates/chat-detail.html ke www/templates/post-detail.html.
  • Mengubah tab-account.html ke tab-settings.html. Juga mengubah nama file www/templates/tab-account.html ke www/templates/tab-settings.html.
  • Akhirnya, ubah tampilan yang dimuat secara default ke latest-posts dengan menggunakan $urlRouterProvider.otherwise('/tab/latest-posts').

Jika semua berjalan dengan baik maka Anda harus berakhir dengan file www/js/app.js yang terlihat seperti ini:

Dan file www/js/controllers.js dibersihkan kami terlihat seperti ini:

Sekarang setelah kami merestrukturisasi aplikasi agar sesuai dengan kebutuhan kami, mari kita lanjutkan ke bagian selanjutnya dan menambahkan beberapa fungsi.

Cara Mengambil RSS Feed Dengan Ionic

Untuk menampilkan daftar posting terbaru, aplikasi kami perlu mengambil RSS feed dari URL. Sebagai praktik terbaik, disarankan agar fungsi semacam ini berada di lapisan layanan aplikasi. Dengan cara ini kita dapat menggunakannya dengan lebih mudah di controller kami dan kemudian menyajikannya kepada pengguna dengan menggunakan tampilan.

Layanan RSS akan menggunakan Yahoo's YQL REST API untuk mengambil RSS dari situs web kami. Untuk memanggil REST API, kita akan menggunakan penyedia $http yang ditawarkan oleh AngularJS.

Layanan ionic biasanya didefinisikan dalam file www/js/services.js, jadi disitulah kami akan menempatkannya juga. Kode akan terlihat seperti ini:

Kami menyatakan layanan menggunakan service() metode yang disediakan oleh AngularJS. Kami kemudian menyuntikkan modul $http Angular sehingga kami dapat menyebutnya dalam layanan kami.

Variabel self adalah referensi ke layanan RSS sehingga kita dapat memanggilnya dari dalam metode layanan. Metode utama layanan ini adalah metode download(), yang mengunduh informasi umpan dan memprosesnya. Ada dua format utama yang digunakan untuk feed situs web: RSS dan ATOM. Untuk aplikasi kami, kami telah menggunakan feed tutorial dari Tuts+ https://tutorials.tutsplus.com/posts.atom yang dalam format ATOM, tetapi untuk kelengkapan kami telah memperhitungkan format RSS juga.

Metode download() memanggil API YQL dan mem-parsing hasil menggunakan metode parseAtom() atau parseRSS() tergantung pada jenis umpan. Idenya di sini adalah memiliki format output yang sama yang akan dilewati lebih lanjut melalui callback next(). Dengan layanan RSS di tempat, kita bisa melanjutkan ke controller.

Mengaitkan Layanan RSS ke Pengontrol Kiriman Terkini

Di file www/js/controllers.js kami, kami perlu memuat data RSS dan menyebarkannya ke tampilan kami. Untuk melakukan itu, kita hanya perlu memodifikasi pengendali LastPostsCtrl kami seperti ini:

Dengan menggunakan mekanisme injeksi ketergantungan Angular, kita hanya perlu menentukan $scope dan variabel RSS sebagai parameter metode, dan ia akan tahu cara memuat modul-modul itu. Modul $scope memungkinkan kita untuk mengatur variabel pada model yang terikat ke tampilan. Nilai apa pun yang ditetapkan dalam cakupan dapat kemudian diambil dan ditampilkan di dalam tampilan yang terkait dengan pengontrol.

Ketika tampilan untuk posting terbaru dimuat, ia akan memanggil pengendali LastPostsCtrl, dan ini pada gilirannya akan menggunakan layanan RSS untuk mengunduh informasi feed. Hasilnya diuraikan dan dilewatkan sebagai larik menggunakan variabel post, yang kami simpan dalam lingkup saat ini.

Dengan semua yang keluar dari jalan, kita sekarang dapat beralih ke bagian tampilan, menampilkan daftar tulisan yang diambil dari umpan.

Mengaitkan Tulisan Terbaru Lihat ke Data Feed

Kami sekarang perlu mengubah pandangan kami untuk posting terbaru. Jika Anda ingat, ini dikonfigurasi dalam file www/js/app.js melalui atribut templateUrl, dan menunjuk ke file www/templates/tab-latest-posts.html.

Yang ingin kami lakukan adalah menampilkan daftar feed. Karena informasi feed mungkin berisi HTML, dan ini hanya akan mengacaukan daftar posting terbaru, kita memerlukan sesuatu untuk mengekstrak teks tanpa tag HTML dari konten posting. Cara termudah untuk melakukannya adalah dengan mendefinisikan filter AngularJS yang menghapus tag HTML dari teks. Mari lakukan di www/js/services.js dengan menambahkan:

Tidak kembali ke tampilan kami di dalam file www/templates/tab-latest-posts.html, mari kita memodifikasinya agar terlihat seperti ini:

Kami menggunakan komponen UI daftar Ionic bersama dengan perintah ng-repeat Angular, yang akan mengulangi melalui posts yang ditetapkan pada cakupan pengontrol kami. Untuk setiap entri posting, kita akan memiliki item daftar dengan judulnya dan dengan deskripsi yang dilucuti dari tag HTML dengan menggunakan filter htmlToPlaintext. Perhatikan juga bahwa mengklik posting harus membawa kita ke detail posting karena atribut href diset ke #/tab/latest-posts/{{post.id}}. Itu belum berfungsi, tetapi kami akan mengurusnya di bagian selanjutnya.

Jika kita sekarang menjalankan aplikasi menggunakan ionic serve --lab, kita harus mendapatkan sesuatu seperti ini:

Viewing Latest PostsViewing Latest PostsViewing Latest Posts

Menampilkan Detail Pos

Ketika mengklik posting di daftar, kami pergi ke layar rincian posting dari aplikasi. Karena setiap layar aplikasi memiliki pengontrol sendiri dan oleh karena itu ruang lingkupnya sendiri, kami tidak dapat mengakses daftar posting untuk menampilkan posting tertentu. Kami dapat memanggil layanan RSS lagi, tetapi itu tidak efisien.

Untuk mengatasi masalah ini, kita dapat menggunakan petunjuk $rootScope yang ditawarkan oleh Angular. Referensi ini lingkup yang mencakup semua pengendali dalam aplikasi. Mari kita memodifikasi LatestPostCtrl kami untuk mengatur posting di $rootScope dan kemudian mencari posting spesifik yang diklik pengguna di PostDetailCtrl. Kode yang dihasilkan di www/js/controllers.js akan terlihat seperti ini:

Kami cukup menyuntikkan $rootScope di kedua pengontrol dan menggunakannya untuk mengirimkan posts di antara dua pengontrol. Harap perhatikan bahwa kami tidak perlu membuat perubahan apa pun dalam tampilan posting terbaru kami karena $rootScope dan $scope keduanya dapat diakses dengan cara yang sama dari tampilan.

Di dalam pengontrol PostDetailCtrl, kami hanya mencari kiriman dengan id yang diteruskan di tautan yang diklik oleh pengguna. Kami melakukannya dengan membandingkan setiap ID posting dengan nilai di URL yang dilewatkan melalui variabel $stateParams.postId. Jika kami menemukan kecocokan maka kami mengatur post pada ruang lingkup sehingga kami dapat menggunakannya dalam pandangan kami.

Sekarang mari kita menyesuaikan tampilan detail pos kami www/templates/post-detail.html seperti ini:

Inilah yang kami lakukan dalam tampilan:

  • Kami telah menempatkan judul pos di tajuk layar.
  • Kami telah menempatkan tombol 'Open' di header di sebelah kanan. Tombol ini akan membuka tautan posting di browser eksternal karena atribut target="_system". Kami harus melakukan ini karena aplikasi sudah berjalan di browser karena Cordova. Jika kami tidak menetapkan atribut itu, pos akan terbuka di browser yang sama dengan aplikasi, dan kemudian kami tidak akan memiliki cara untuk kembali ke aplikasi.
  • Kami menampilkan deskripsi posting sebagai HTML dengan menggunakan instruksi ng-bind-html Angular.

Saat menjalankan aplikasi, saya perhatikan bahwa jika deskripsi posting berisi gambar, beberapa di antaranya jatuh dari layar. Ini mungkin terjadi dengan elemen HTML lain seperti video. Kita dapat dengan mudah memperbaikinya dengan menambahkan aturan CSS berikut di www/css/style.css.

Jika kita sekarang melihat aplikasi dan mengklik salah satu posting, kita akan melihat sesuatu seperti ini:

Seeing posts for Tuts articlesSeeing posts for Tuts articlesSeeing posts for Tuts articles

Dan aplikasi kami hampir selesai. Di bagian selanjutnya, kita akan melihat pada mengimplementasikan layar pengaturan.

Menambahkan Pengaturan untuk Aplikasi Ionic kami

Untuk layar pengaturan kami, kami akan menerapkan cara untuk menunjukkan berapa banyak posting yang ditampilkan di layar utama aplikasi. Kami akan menyimpan pengaturan ini di memori localStorage, yang tidak terhapus ketika aplikasi ditutup. Mari kita edit file pengontrol www/js/controllers.js dan ubah pengontrol SettingsCtrl seperti ini:

Juga, kita perlu memodifikasi layar pengaturan di www/templates/tab-settings.html seperti ini:

Controller mengambil pengaturan myWebsiteOnMobile.maxPosts dari localStorage. Jika tidak ada, itu akan menjadi null, dan kami akan mempertimbangkan bahwa tidak ada batasan untuk jumlah posting maksimum.

Kami memanggil metode $scope.$Watch() untuk memonitor perubahan dari variabel settings.maxPosts, yang terikat pada kontrol radio di layar pengaturan.

Dengan semua ini di tempat, setiap kali kita mengubah jumlah maksimum posting pada layar pengaturan, pengaturan akan disimpan di localStorage, dan itu akan diambil dari sana ketika aplikasi dimulai ulang.

Sekarang mari kita gunakan pengaturan ini. Ini semudah menambahkan ini di LatestPostsCtrl dari www/js/controllers.js:

Dan menambahkan petunjuk di layar posting terbaru www/templates/tab-latest-posts.html:

Perhatikan limitTo:maxPosts filter Angular. Ini akan membatasi jumlah posting yang ditampilkan ke nomor yang diambil dari localStorage. Secara default, ini akan menjadi null, yang akan menampilkan semua feed yang diambil oleh layanan RSS.

Selamat! Kami sekarang memiliki aplikasi yang berfungsi penuh menampilkan RSS feed.

Kesimpulan

Dalam tutorial ini, kami telah melihat cara membuat aplikasi mobile hibrida menggunakan Framework Ionic dan AngularJS. Hanya ada satu hal yang harus dilakukan: jalankan aplikasi pada perangkat mobile atau emulator mobile. Ini sangat sederhana dengan Ionic. Untuk menjalankan aplikasi pada emulator Android, jalankan saja:

Jika Anda ingin mengunduh template aplikasi Ionic sebelum dibuat untuk mengubah situs web apa pun menjadi aplikasi mobile, coba Situs Web ke Template Aplikasi Ionic Mobile dari CodeCanyon.

An application template on CodeCanyonAn application template on CodeCanyonAn application template on CodeCanyon
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.