Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Tạo một Ứng dụng Di động để Hiển thị Nội dung RSS của Trang Web Với Ionic

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách viết một ứng dụng di động hiển thị nội dung RSS của một trang web. Chúng ta sẽ cấu hình URL của RSS và ứng dụng sẽ tải nó về, phân tích nó và hiển thị các bài viết từ RSS.

Để tạo ra ứng dụng di động này, chúng ta sẽ sử dụng Ionic Framework v1 cùng với AngularJS. Để hoàn thành hướng dẫn này, bạn cần phải có một số kiến thức về JavaScript và HTML. Ngoài ra, sẽ rất hữu ích nếu bạn đã từng làm việc với AngularJS.

Nếu bạn chưa từng làm việc với Ionic Framework trước đây, thì tôi khuyên bạn ít nhất hãy đọc hướng dẫn Làm quen vì nó sẽ giúp bạn hiểu sâu hơn về cách mọi thứ hoạt động.

Hãy bắt đầu thôi!

Thiết lập dự án Ionic

Tôi sẽ giả định rằng bạn đã cài đặt Node trên hệ thống của bạn và bạn cũng đã có npm (trình quản lý gói cho Node). Việc cài đặt Ionic framework thì đơn giản, chỉ cần chạy lệnh sau:

Lệnh này sẽ cài đặt cả Cordova và Ionic trên máy tính của bạn.

Cordova là công nghệ cốt lõi dùng trong Ionic, và về cơ bản, nó cho phép chúng ta có một trình duyệt nhúng trong ứng dụng di động của chúng ta. Trên trình duyệt đó, chúng ta sẽ có thể chạy tất cả code HTML và JavaScript của chúng ta. Đây được gọi là một ứng dụng di động lai, vì ứng dụng này không chạy code gốc, mà chạy bên trong trình duyệt.

Bên cạnh Cordova, Ionic còn bổ sung thêm khả năng sử dụng AngularJS để viết code, và nó cũng thêm một UI framework rất đơn giản.

Sau khi có Ionic, chúng ta có thể tạo ra dự án bằng Ionic CLI, một công cụ dòng lệnh rất hữu ích. Ionic cung cấp ba mẫu dự án mặc định có thể được sử dụng như là một cái sườn ban đầu:

  • blank: như tên gọi của nó, là một dự án rỗng, chỉ chứa các thành phần tối thiểu.
  • tabs: một ứng dụng sử dụng các tab để điều hướng qua lại giữa các màn hình của nó.
  • sidemenu: một ứng dụng sử dụng một menu cạnh bên tiêu chuẩn trên ứng dụng di động để điều hướng.

Đối với hướng dẫn này, chúng ta sẽ sử dụng mẫu ứng dụng tabs. Để bắt đầu dự án của chúng ta, hãy chạy lệnh:

Ionic sẽ tải về và cài đặt tất cả các thành phần cần thiết, và nó sẽ tạo ra thư mục dự án có tên là myWebsiteOnMobile. Truy cập vào thư mục dự án bằng cách chạy lệnh:

Bởi vì ứng dụng của chúng ta là một ứng dụng di động lai, nên chúng ta có lợi thế là có thể chạy ứng dụng bên trong một trình duyệt. Để làm điều này, Ionic tích hợp sẵn một máy chủ web nhẹ, ứng dụng của chúng ta có thể được chạy như sau:

Việc này sẽ mở một trình duyệt với ứng dụng của chúng ta được nạp, và nó sẽ trông như sau:

The Ionic homescreen

Để dừng máy chủ, sử dụng Control-C trên màn hình dòng lệnh của bạn. Để hình dung rõ hơn về ứng dụng trông như thế nào trên điện thoại di động, bạn có thể sử dụng:

Thao tác này sẽ mở ứng dụng trong trình duyệt, hiển thị một bản xem trước của ứng dụng iOS và Android nằm cạnh nhau.

The iOS and Android Preview

Mẫu ứng dụng tabs có ba tab: Status, Chats và Account. Trong các bước tiếp theo, chúng ta sẽ điều chỉnh ứng dụng cho phù hợp với nhu cầu của chúng ta.

Cách Điều chỉnh Mẫu Ứng dụng Tabs Mặc định

Ứng dụng của chúng ta sẽ có hai tab:

  • Lates post: hiển thị một danh sách các bài viết mới nhất truy vấn được từ nguồn dữ liệu RSS.
  • Settings: màn hình cài đặt, nơi người dùng sẽ có thể cấu hình một số phần của ứng dụng.

Từ tab Latest posts, người dùng sẽ có thể nhấp vào các bài viết mới nhất và xem chi tiết bài viết đó, với khả năng mở bài viết trong một trình duyệt bên ngoài.

Vì tab Latest posts của chúng ta tương tự như tab Chats được cung cấp bởi template này, chúng ta sẽ sử dụng lại nó cùng với tab Account, cái mà sẽ trở thành tab Settings của chúng ta. Chúng ta có thể thực hiện tất cả các thay đổi trong khi máy chủ web Ionic đang chạy, và Ionic sẽ tải lại ứng dụng cho chúng ta. Đây là một tính năng hữu ích giúp đẩy nhanh tốc độ phát triển.

Như đã đề cập, Ionic sử dụng AngularJS, và toàn bộ ứng dụng là một mô-đun AngularJS thực thụ. Mô-đun được định nghĩa trong www/js/app.js, và đây cũng là nơi mà các đường dẫn hoặc các tuyến của ứng dụng được định nghĩa. Mỗi màn hình của ứng dụng có một tuyến tương ứng.

Hãy xoá bỏ tab Status vì chúng ta sẽ không cần đến nó. Để làm điều này, trước tiên chúng ta cần phải thay đổi màn hình mặc định (hoặc tuyến mặc định) của ứng dụng trỏ đến màn hình Chats, nó sẽ trở thành màn hình chính của chúng ta. Màn hình mặc định được cấu hình thông qua $urlRouterProvider.otherwise(), vì vậy hãy đổi nó thành:

Bây giờ nếu chúng ta tải lại http://localhost:8100 trong trình duyệt, chúng ta sẽ thấy tab Chats sẽ được nạp mặc định.

Để xóa tab Status, chúng ta cần chỉnh sửa tập tin www/templates/tabs.html chứa mẫu cho thành phần tab. Chúng ta sẽ xoá bỏ các thành phần sau:

Khi lưu lại, chúng ta sẽ thấy rằng ứng dụng hiện giờ chỉ có hai tab: Chats và Account.

Khi đang ở trong tập tin www/templates/tabs.html, chúng ta thấy rằng có một số thẻ HTML không phải là HTML tiêu chuẩn, ví dụ như ion-tabs, ion-tabion-nav-view. Đây thật sự là các chỉ thị AngularJS được định nghĩa bởi Ionic Framework. Các chỉ thị là những thẻ đóng gói tính năng đằng sau chúng, và chúng là những cách rất thuận tiện để viết code có cấu trúc hơn và ngắn gọn hơn.

Trong trường hợp của chúng ta, chỉ thị ion-tabs là thành phần tabs, mà đối với mỗi tab yêu cầu một chỉ thị ion-tab.

Hãy thay đổi các tab của chúng ta từ Chats và Account thành các tên theo yêu cầu của chúng ta Latest posts và Settings. Để làm việc này, chúng ta sẽ sửa đổi vài thứ trong tập tin www/templates/tabs.html:

  • Thuộc tính title của các phần tử ion-tab xác định văn bản trên nút tab. Chúng ta sẽ thay đổi nó tương ứng thành Latest posts và Settings.
  • Thuộc tính href của các phần tử ion-tab trỏ đến tuyến hoặc URL của màn hình. Chúng ta sẽ thay đổi chúng thành #/tab/latest-posts#/tab/settings.
  • Thuộc tính name của các thành phần ion-nav-view thành tab-latest-poststab-settings. Đây là những định danh cho các view được sử dụng cho màn hình Latest posts và Settings.

Kết quả là, www/templates/tabs.html sẽ giống như sau:

Sau khi thực hiện những thay đổi này, chúng ta sẽ gặp một số lỗi. Điều này là bởi vì chúng ta còn phải điều chỉnh các tuyến để sử dụng các định danh mới mà chúng ta đã sử dụng. Trong www/js/app.js, chúng ta cần phải thay đổi các định danh trạng thái, các định danh view và url cho mỗi tuyến tuỳ theo những gì chúng ta đã thiết lập ở trên.

Đối với mỗi tuyến (hoặc màn hình), có một controller được định nghĩa. Đây là một mẫu thiết kế MVC cơ bản (Model-View-Controller) Các controller được định nghĩa bên trong tập tin www/js/controllers.js. Để cho nhất quán, chúng ta sẽ thay đổi tên của các controller trong cả www/js/app.jswww/js/controller.js:

  • ChatsCtrl trở thành LatestPostsCtrl.
  • ChatDetailCtrl trở thành PostDetailCtrl.
  • AccountCtrl trở thành SettingsCtrl.

Đồng thời, đối với mỗi tuyến chúng ta có một view được định nghĩa, vì vậy chúng ta cũng phải thay đổi chúng. Chỉnh sửa www/js/app.js và sửa templateUrl như sau:

  • Thay đổi tab-chats.html thành tab-latest-posts.html. Đồng thời đổi tên tập tin www/templates/tab-chats.html thành www/templates/tab-latest-posts.html.
  • Thay đổi chat-detail.html thành post-detail.html. Đồng thời đổi tên tập tin www/templates/chat-detail.html thành www/templates/post-detail.html.
  • Thay đổi tab-account.html thành tab-settings.html. Đồng thời đổi tên tập tin www/templates/tab-account.html thành www/templates/tab-settings.html.
  • Cuối cùng, thay đổi view được nạp mặt định thành latest-posts bằng cách sử dụng $urlRouterProvider.otherwise('/tab/latest-posts').

Nếu tất cả đều ổn thì bạn sẽ có được www/js/app.js giống như sau:

Và tập tin www/js/controllers.js đã được dọn dẹp của chúng ta sẽ như sau:

Bây giờ chúng ta đã tái cấu trúc ứng dụng để phù hợp với các yêu cầu của chúng ta, giờ hãy chuyển sang phần tiếp theo và thêm một số tính năng.

Cách Truy xuất một Nguồn RSS Với Ionic

Để hiển thị danh sách các bài viết mới nhất, thì ứng dụng của chúng ta sẽ cần phải truy vấn nguồn dữ liệu RSS từ một URL. Theo cách làm tốt nhất, thì tính năng này nên nằm trong lớp dịch vụ của ứng dụng. Bằng cách này, chúng ta có thể sử dụng nó một cách dễ dàng hơn trong controller và sau đó trình bày nó cho người dùng bằng cách sử dụng một view.

Dịch vụ RSS sẽ tận dụng YQL REST API của Yahoo để truy vấn RSS từ trang web của chúng ta. Để gọi REST API, chúng ta sẽ sử dụng bộ $http do AngularJS cung cấp.

Các dịch vụ của Ionic thường được định nghĩa bên trong tập tin www/js/services.js, vì vậy đó cũng sẽ là nơi mà chúng ta sẽ lưu các dịch vụ của chúng ta. Code sẽ giống như sau:

Chúng ta khai báo dịch vụ bằng phương thức service() do AngularJS cung cấp. Sau đó, chúng ta đưa mô-đun $http của Angular vào để chúng ta có thể gọi nó trong dịch vụ của chúng ta.

Biến self là một tham chiếu đến dịch vụ RSS để cho chúng ta có thể gọi nó từ bên trong các phương thức của dịch vụ. Phương thức chính của dịch vụ này là phương thức download(), dùng để tải thông tin từ nguồn dữ liệu và xử lý nó. Có hai định dạng chính được sử dụng cho nguồn dữ liệu trang web: RSS và ATOM. Đối với ứng dụng này, chúng ta sử dụng nguồn dữ liệu từ Tuts+ https://tutorials.tutsplus.com/posts.atom trong định dạng ATOM, nhưng để cho đầy đủ, chúng ta cũng tính đến định dạng RSS.

Phương thức download() gọi YQL API và phân tích các kết quả bằng phương thức parseAtom() hoặc parseRSS() tùy thuộc vào kiểu của nguồn dữ liệu. Ý tưởng ở đây là có được định dạng đầu ra tương tự nhau sẽ được truyền qua hàm callback next(). Với dịch vụ RSS đã xong, chúng ta có thể chuyển sang controller.

Gắn Dịch vụ RSS vào Controller Latest Posts

Trong tập tin www/js/controllers.js, chúng ta cần phải nạp dữ liệu RSS và truyền nó vào view của chúng ta. Để làm điều đó, chúng ta chỉ cần sửa đổi controller LatestPostsCtrl như sau:

Bằng cơ chế nạp phụ thuộc của Angular, chúng ta chỉ cần định nghĩa biến $scopeRSS như là các tham số của phương thức, và nó sẽ biết làm thế nào để nạp các mô-đun đó. Mô-đun $scope (phạm vi) cho phép chúng ta thiết lập các biến trên model ràng buộc với view. Bất kỳ giá trị nào được thiết lập trong phạm vi này sau đó có thể được truy xuất và hiển thị bên trong view gắn liền với controller đó.

Khi view latest posts được nạp, nó sẽ gọi đến controller LatestPostsCtrl, và đến lượt điều này sẽ sử dụng dịch vụ RSS để tải thông tin từ nguồn dữ liệu. Các kết quả được phân tích và truyền ngược trở lại dưới dạng một mảng bằng biến posts, biến mà chúng ta lưu trữ trong phạm vi hiện tại.

Sau khi giải quyết tất cả những điều đó, chúng ta có thể chuyển đến phần view, hiển thị danh sách các bài viết được truy xuất từ nguồn dữ liệu.

Gắn Nguồn Dữ liệu vào View Latest Posts

Bây giờ chúng ta cần phải thay đổi view của chúng ta cho các bài viết mới nhất. Nếu bạn còn nhớ, điều này được cấu hình trong tập tin www/js/app.js thông qua thuộc tính templateUrl và trỏ đến tập tin www/templates/tab-latest-posts.html.

Những gì chúng ta cần làm là hiển thị danh sách của nguồn dữ liệu. Vì thông tin nguồn dữ liệu có thể chứa code HTML và điều này sẽ làm xáo trộn danh sách các bài viết mới nhất, nên chúng ta cần một thứ gì đó để trích xuất văn bản mà không chứa các thẻ HTML từ nội dung của một bài viết. Cách dễ nhất để làm điều đó là bằng cách định nghĩa một bộ lọc AngularJS dùng để lược bỏ các thẻ HTML ra khỏi văn bản. Hãy làm điều đó trong www/js/services.js bằng cách thêm:

Bây giờ quay trở lại với view của chúng ta bên trong tập tin www/templates/tab-latest-posts.html, hãy sửa nó thành như sau:

Chúng ta sử dụng thành phần UI list của Ionic cùng với chỉ thị ng-repeat của Angular, cái mà sẽ lặp qua biến posts được thiết lập trên phạm vi của controller. Đối với mỗi bài viết, chúng ta sẽ có một phần tử list với tiêu đề của nó và với mô tả đã được loại bỏ các thẻ HTML bằng bộ lọc htmlToPlaintext. Đồng thời lưu ý rằng, khi nhấp vào bài viết sẽ đưa chúng ta đến chi tiết của bài viết vì thuộc tính href được thiết lập thành #/tab/latest-posts/{{post.id}}. Nó vẫn chưa hoạt động, nhưng chúng ta sẽ làm cho nó hoạt động trong phần tiếp theo.

Bây giờ nếu chúng ta chạy ứng dụng bằng lệnh ionic serve --lab chúng ta sẽ nhận được một thứ gì đó như thế này:

Viewing Latest Posts

Hiển thị Chi tiết của một Bài viết

Khi nhấp vào một bài viết trong danh sách, chúng ta được chuyển đến màn hình chi tiết của bài viết. Bởi vì mỗi màn hình của ứng dụng có controller riêng của nó và do đó có phạm vi riêng của nó, chúng ta không thể truy cập vào danh sách các bài viết để hiển thị một bài viết cụ thể. Chúng ta có thể gọi đến dịch vụ RSS một lần nữa, nhưng điều đó sẽ không hiệu quả.

Để giải quyết vấn đề này, chúng ta có thể tận dụng chỉ thị $rootScope do Angular cung cấp. Điều này tham chiếu đến một phạm vi mà bao quát tất cả các controller trong ứng dụng. Hãy sửa đổi LastPostCtrl của chúng ta để thiết lập các bài viết trong $rootScope và sau đó tìm kiếm bài viết cụ thể mà người dùng đã nhấp vào trong PostDetailCtrl. Kết quả, code trong www/js/controllers.js sẽ trông như sau:

Chúng ta chỉ cần thêm $rootScope trong cả hai controller và sử dụng nó để truyền biến posts giữa hai controller. Xin lưu ý rằng, chúng ta không cần phải thực hiện bất kỳ sự thay đổi nào trong view Latest posts của chúng ta vì $rootScope$scope đều có thể được truy cập theo cùng một cách từ view.

Bên trong controller PostDetailCtrl, chúng ta chỉ cần tìm kiếm bài viết với id được truyền trong liên kết được nhấp bởi người dùng. Chúng ta làm điều đó bằng cách so sánh mỗi ID của bài viết với giá trị trong URL được truyền thông qua biến $stateParams.postId. Nếu khớp thì chúng ta thiết lập bài viết trên phạm vi để chúng ta có thể sử dụng nó trong view của chúng ta.

Bây giờ, hãy tinh chỉnh view chi tiết www/templates/post-detail.html như sau:

Đây là những gì chúng ta đã thực hiện trong view:

  • Chúng ta đặt tiêu đề của bài viết trong phần header của màn hình.
  • Chúng ta đặt một nút "Open" trong phần header ở phía bên phải. Nút này sẽ mở liên kết đến bài viết trong trình duyệt bên ngoài nhờ thuộc tính target="_ system". Chúng ta phải làm điều này bởi vì ứng dụng đang chạy trong một trình duyệt do Cordova. Nếu chúng ta không thiết lập thuộc tính đó, bài viết chắc chắn sẽ được mở trong cùng một trình duyệt với ứng dụng, và như vậy chúng ta sẽ không có cách nào để quay trở lại ứng dụng.
  • Chúng ta hiển thị mô tả của bài viết dưới dạng HTML bằng cách sử dụng chỉ thị ng-bind-html của Angular.

Trong khi đang chạy ứng dụng, tôi nhận thấy rằng nếu mô tả của bài viết có chứa hình ảnh, một số sẽ nằm ra ngoài màn hình. Việc này có thể xảy ra với các phần tử HTML khác như video. Chúng ta có thể dễ dàng khắc phục lỗi này bằng cách thêm thuộc tính CSS sau trong www/css/style.css.

Bây giờ nếu chúng ta nhìn vào ứng dụng và nhấp vào một trong các bài viết, chúng ta sẽ thấy một số thứ như sau:

Seeing posts for Tuts articles

Và ứng dụng của chúng ta gần như đã hoàn tất. Trong phần tiếp theo, chúng ta sẽ cài đặt màn hình Settings.

Thêm Settings vào Ứng dụng Ionic của chúng ta

Đối với màn hình Settings, chúng ta sẽ cài đặt một cách để nhận biết có bao nhiêu bài viết hiển thị trên màn hình chính của ứng dụng. Chúng ta sẽ lưu trữ cài đặt này trong bộ nhớ localStorage, bộ nhớ này không bị xóa khi đóng ứng dụng. Chúng ta hãy chỉnh sửa các tập tin controller www/js/controllers.js và thay đổi controller SettingsCtrl như sau:

Đồng thời, chúng ta cần phải sửa đổi màn hình Settings trong www/templates/tab-settings.html như sau:

Controller này sẽ truy xuất cài đặt myWebsiteOnMobile.maxPosts từ localStorage. Nếu nó không tồn tại, nó sẽ là null, và chúng ta sẽ xem như là không có giới hạn cho số lượng bài viết tối đa.

Chúng ta gọi phương thức $scope.$watch() để giám sát các thay đổi của biến settings.maxPosts, bến được ràng buộc với điều khiển radio trong màn hình Settings.

Khi thực hiện xong những việc này, mỗi khi chúng ta thay đổi số lượng bài viết tối đa trên màn hình Settings, thì cài đặt này sẽ được lưu trong localStorage và nó sẽ được truy xuất từ đó khi ứng dụng khởi động lại.

Bây giờ hãy sử dụng thiết lập này. Đơn giản là thêm cài đặt này vào trong LastPostsCtrl từ www/js/controllers.js:

Và thêm một chỉ thị vào trong màn hình bài viết mới nhất www/templates/tab-latest-posts.html:

Lưu ý bộ lọc limitTo:maxPosts của Angular. Bộ lọc này sẽ giới hạn số lượng bài viết được hiển thị thành số lượng được truy xuất từ localStorage. Mặc định, nó sẽ là null, nó sẽ hiển thị tất cả các nguồn dữ liệu lấy được từ dịch vụ RSS.

Xin chúc mừng! Giờ đây chúng ta đã có một ứng dụng đầy đủ hiển thị một nguồn dữ liệu RSS.

Phần Tóm tắt

Trong hướng dẫn này, chúng ta đã học được cách viết một ứng dụng di động lai bằng Ionic Framework và AngularJS. Chỉ còn một việc duy nhất nữa phải làm thôi: đó là chạy ứng dụng trên thiết bị di động hoặc emulator. Việc này rất đơn giản với Ionic. Để chạy ứng dụng trên emulator của Android, chỉ cần chạy:

Nếu bạn muốn tải về một mẫu ứng dụng Ionic được làm sẵn để chuyển đổi bất kỳ trang web nào sang ứng dụng di động, hãy thử Mẫu Ứng dụng Ionic từ Trang web tới Di động trên CodeCanyon.

An application template on CodeCanyon
Advertisement
Advertisement
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.