Cách tạo 1 Hybird App sử dụng HTML, CSS, JS

Có bao giờ bạn có suy nghĩ là sẽ cho ra đời 1 sản phẩm app sử dụng những ngôn ngữ của web (HTML, CSS, JS) chưa.
Dùng ngôn ngữ của web để xây dựng nên 1 mobile app --> cái này gọi là Hybrid app ( nôm na là giao thoa giữa mobile web app và native app)
Hiện nay thì có nhiều framework hỗ trợ cho việc tạo 1 hibrid app ví dụ như là Ionic hay là Mobile Angular UI... Blog này mình xin giới thiệu về Ionic nhé
Ionic hiện tại hỗ trợ cho iOS 6+ và Android 4.0+.
Ionic hiện nay có 1 bộ CSS components khá hùng hậu, rất là hữu dụng và bạn có thể custom nó một cách dễ dàng , còn về vấn đề bạn muốn thêm vào những tính năng tương tác với người dùng thì bạn nên tìm hiểu về AngularJS.
Chúng ta vào bắt đầu vào phần cài đặt nhé:
Bước 1: Cài đặt cordova ( Cordova là 1 nền tảng để build 1 app khi sử dụng với HTML, CSS, JS)

$ sudo npm install -g cordova

Bước 2: Cài đặt Ionic

$ sudo npm install -g ionic

Bước 3: Tạo 1 project

$ ionic start Todo blank

Trong đó:

  • Todo là tên của app
  • blank là tuỳ chọn kiểu app mà Ionic hỗ trợ
    • tabs
    • sidemenu
    • blank alt text

Bước 4: Cấu hình cho nền tảng

$ cd Todo

Dùng cho iOS

$ ionic platform add ios ( dùng cho iOS) 

Dùng cho Android

$ ionic platform add android ( dùng cho Android)

Bước 5: Khởi động project

Dùng cho iOS

$ ionic build ios
$ ionic emulate ios

Dùng cho Android

$ ionic run android

Đây là demo của mình đã từng làm, các bạn có thể xem qua để đánh giá chất lượng của hybrid app. App này mình làm cách đây cũng khá lâu, khoảng nữa năm về trước nên về UI nó ko được đẹp mắt cho lắm :D
alt text

Các bạn có thể tải về dùng thử Tại đây

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

34 bài viết.
186 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
23 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết hơn 3 năm trước
23 21
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết hơn 3 năm trước
21 8
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết 2 năm trước
19 9
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
186 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!