Chuyện coding

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

21 Comments

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.

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

  3. thiếu Adobe Air bạn nhé, mình vừa viết ứng dụng Vinaok bằng adobe air, khá nhanh

    Like

    Reply

  4. 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

    Reply

  6. 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

    Reply

    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

      Reply

  8. console ionic upload mình đăng nhập hoài k dc, cứ báo là
    Request: POST https://api.ionic.io/login
    Response: 404
    Body:
    { type: ‘NotFound’,
    message: ‘No user found by that email’,
    link: null }

    Bạn đăng nhập đc chưa giúp mình với.

    Like

    Reply

  9. Các bạn ơi , sao mình mới cài xong cái node-v4.9.1-x86
    rồi open và nhập vào dòng lệnh
    > npm install -g cordova ionic
    mình gặp thông báo:
    > npm should be run outside of the node repl, in your normal shell.
    Các bạn hỗ trợ mình tí nhé, thks

    Like

    Reply

    1. Dòng lệnh đó ko phải gõ ở trong cửa sổ nodejs vừa cài.
      Bạn ấn “window+R” hoặc tìm Command Promt ở start menu ( mở bằng chế độ Admin).

      Like

      Reply

  10. Cho em hỏi, máy ở cty em ko cho vào internet (kể cả máy có mạng cũng chặn hầu hết các trang để có thể download các thư viện). Nên em bị lỗi ở bước 2. Vậy có cách nào ko ạ? Thanks.

    Like

    Reply

  11. em tạo project mới mà bị lỗi này, đã search nhưng không sửa được, anh có thể giúp e không ạ?
    TypeError: You must specify a “protocol” for the proxy type (http, https, socks, socks4, socks4a, socks5, socks5h,
    pac+data, pac+file, pac+ftp, pac+http, pac+https)

    at mapOptsToProxy (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\node_modules\proxy-agent\index.js:100:11)
    at new ProxyAgent (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\node_modules\proxy-agent\index.js:150:17)
    at ProxyAgent (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\node_modules\proxy-agent\index.js:145:45)
    at Request.proxy
    (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\node_modules\superagent-proxy\index.js:71:15)
    at C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\lib\utils\http.js:32:21
    at Generator.next ()
    at fulfilled (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic\node_modules\tslib\tslib.js:104:62)
    at

    Like

    Reply

  13. mình nhập dòng npm install -g cordova ionic mà nó báo lỗi phải run as admin nhưng mình dùng MacOS ko có cái đó, nên làm gì bây giờ chủ tus ?

    Like

    Reply

Leave a reply to Tran Vinh Nhật Cancel reply