[Tutorial] Viết ứng dụng di động một cách dễ dàng với Ionic Framework

Như mình đã giới thiệu ở một số bài viết trước, lập trình ứng dụng di động đang là một lĩnh vực khá hot mà các lập trình viên nên quan tâm. Theo cách truyền thống (hoặc khi viết native app), bạn cần phải học Java, Objective-C, C# để viết ứng dụng cho Android, iOS, Windows-Phone.

Tuy nhiên, nếu viết ứng dụng theo hướng hybrid app, sử dụng một số framework như Cordova, Phonegap, … bạn có thể viết 1 ứng dụng hoàn toàn bằng HTML, CSS và Javascript, chạy được trên cả iOS, Android và Window Phone. Các bạn web developer có thể dễ dàng nhảy qua mảng mobile mà không cần tốn quá nhiều công sức để học ngôn ngữ mới.

Trong phạm vi bài viết này, mình sẽ hướng dẫn các bạn tạo, viết và chạy ứng dụng trực tiếp trên di động một cách nhanh và đơn giản với IonicFramework – một framework xây dựng dựa trên AngularJS và Cordova. Ưu điểm của IonicFramework là:

  • Cài đặt rất nhanh và nhẹ. Thay vì phải tải IDE như Android Studio, Xcode cùng với bộ SDK nặng nề, ta chỉ cần tải NodeJS và dùng command prompt để cài ionic và cordova, rất nhanh và tiện lợi. Ta có thể dùng Notepad++ hoặc Sublime Text để code.
  • Chỉ cần biết HTML, CSS, JS và AngularJS. Nếu muốn thêm 1 số chức năng như rung, camera, chỉ cần bỏ 5p để xem API ngCordova là làm được ngay.
  • Tích hợp sẵn IonicViewer, cho phép ta test app vừa viết ngay trên di động, không cần cắm dây hay kết nối phức tạp (Việc debug thì còn hơi phức tạp đôi chút…). Kết hợp với Phonegap Build, ta có thể xuất file apk ngay và luôn.

ionic

Bắt tay vào làm thôi nào! Nếu chưa biết về AngularJS, bạn có thể google và tìm một số bài viết tiếng Việt, hoặc đọc tutorial trên blog của bạn mình để ủng hộ: https://codeaholicguy.wordpress.com/category/angularjs-cho-nguoi-moi/

1. Cài đặt Ionic

Đầu tiên, bạn vào https://nodejs.org/ để tải nodeJS về và cài đặt, nhớ dùng bản 4 nhé, bản 5 chưa hỗ trợ Ionic.

1

Sau khi cài xong, bạn mở cửa sổ console lên, nhập vào:

npm install -g cordova ionic

Chờ khoảng 10p, việc cài đặt đã xong rồi đấy. Rất nhanh gọn lẹ phải không nào, chúng ta có thể bắt đầu viết ứng dụng rồi.

2. Tạo ứng dụng đầu tiên

Ở đây, mình sẽ tạo ứng dụng vào 1 folder có tên ionicApp. Để tạo ứng dụng, bạn cd vào thư mục, dùng câu lệnh phía dưới để tạo 1 ứng dụng có sẵn tabs. Chờ một chút, ứng dụng sẽ được tạo. Các bạn có thể đọc thêm ở đây: http://ionicframework.com/getting-started/.

ionic start sampleApp tabs

2

Để chạy thử, ta chỉ cần cd vào thư mục sampleApp, gõ câu lệnh “ionic serve” để chạy thử ứng dụng trên nền web. 3

Ta có thể thu nhỏ trình duyệt, hoặc dùng Chrome Developer Tool để xem thử ứng dụng hiển trị như thế nào trên mobile. Nhớ thử touch các tab và scroll lên xuống thử nhé.

3

3. Chỉnh sửa ứng dụng

Toàn bộ code của ứng dụng sẽ nằm trong thư mục sampleApp/www. Trông quen quá nhỉ, chỉ có HTML, CSS, Javascript thôi. Mình khuyên các bạn nên dùng Sublime Text để mở toàn bộ thư mục, dễ chỉnh sửa hơn.

4

Do AngularJS sử dụng routing và template, một vài màn hình sẽ được lưu trong thư mục templates. Bạn thử chỉnh sửa file tab-dash.html trong thư mục templates và save lại nhé. Ionic hỗ trợ live reload, khi ta sửa một file, app sẽ tự refresh lại, không cần phải F5 gì cả.

4. Chạy ứng dụng trên di động

Tiếp tục ở cửa sổ console thần thánh, ta sử dụng câu lệnh sau để upload app lên server của ionic.

ionic upload

Nếu là lần đầu, bạn cần phải tạo một tài khoản và đăng nhập. Ở các lần sau ionic sẽ tự nhớ các thông tin này, bạn chỉ cần sửa app và bấm ionic upload thôi.

5

Sau đó, bạn lên AppStore và tải IonicView về (IOS hay Android đều có cả). Cài đặt app và đăng nhập bằng tài khoản bạn vừa đăng kí nhé. Bạn sẽ thấy app của mình nằm ngay đó sau khi đăng nhập. Click vào và chịch… nhầm, nghịch thôi. Chúc mừng bạn đã hoàn thành bài hướng dẫn này.

aa

Ngoài ra, nếu muốn build ứng dụng thành file apk để đăng lên mạng, đưa bạn bè, bạn có 2 lựa chọn:

  • Sử dụng ionic build android, cách này nhanh và đơn giản, nhưng bạn sẽ phải cài 1 đống SDK android khá nặng nề.
  • Sử dụng Git để đưa project lên github, sau đó sử dụng Adobe Phonegap Build để build online. Cách này hơi lòng vòng, nhưng không cần cài đặt làm nặng máy. Đây là một ứng dụng game nhỏ nhỏ mà mình đã viết bằng Ionic, sử dụng Phonegap Build để build ra file apk: https://dl.dropboxusercontent.com/u/46157401/ladyboy-debug.apk

Bài viết tới đây là hết. Nếu có thắc mắc hay khó khăn gì, bạn có thể đặt câu hỏi trong phần comment nhé. Chúc các bạn may mắn.

Advertisements

12 thoughts on “[Tutorial] Viết ứng dụng di động một cách dễ dàng với Ionic Framework”

  1. Cảm ơn chia sẻ của vị huynh đệ.

    Tôi chưa từng luyện angularJS 1, và tôi cũng không định luyện nó. Tôi sẽ luyện angularJS 2, vì theo tôi hiểu, nó khác hẳn với angularJS 1 (chứ nó không được kế thừa từ angularJS 1).

    Nhưng “IonicFramework – một framework xây dựng dựa trên AngularJS và Cordova”, vậy việc ko luyện angularJS 1, có ảnh hưởng gì đến việc tiếp cận với tâm pháp Ionic này không?

    Cũng như tôi luyện angularJS 2 có thuận lợi gì khi luyện tiếp Ionic ko ?

    Like

  2. Mình muốn sử dụng cordova để phát triển 1 app chạy trên android và OS có sử dụng rất nhiều loại graphics charts. Bạn có biết tài liệu nào chi tiết hơn để phát triển 1 phần mềm. Cũng như library nào để vẽ biểu đồ có thể kết hợp với cordova không ạ.

    Like

    1. nghe có vẻ như bn xài ionic 2 nên cấu trúc ko có folder template, lib… ==>
      For Ionic 1 projects, use ionic start project_name blank –type ionic1

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s