Đăng ký
Cộng đồng phát triển game Việt - kết nối đam mê !

bởi

Ngày nay, với sự phát triển của HTML5, ngày càng có nhiều nhà phát triển nuôi tham vọng sử dụng công nghệ này như một món vũ khí để tiến đánh vào thị trường Moblie vì những ưu điểm của nó.


Trên thực tế, HTML5 đã có một khởi đầu khá thành công trên nền tảng PC, tính tới thời điểm này đã có rất nhiều trình duyệt hỗ trợ HTML5 và con số này có vẻ như không có ý định dừng lại.


Thế nhưng, trên mảnh đất màu mỡ mà chúng ta không ít người đang nhắm đến - Mobile. Thì đây lại là một câu chuyện khác.


Trước tiên em xin điểm qua các khái niệm của ứng dụng Mobile.


Ngày nay, lĩnh vực phát triển ứng dụng di động tồn tại 3 khái niệm là: Native Application, Web Application Hybird Application.


  • Native Application: Là những ứng dụng được xây dựng theo cách chính thống với các ngôn ngữ lập trình / nền tảng do các nhà sản xuất di động quy định (ví dụ: Objective-C cho iOS và Java cho Android, .NET cho Windows Phone,...). Ưu điểm của Native App là nhà phát triển có thể thoải mái truy cập vào hệ thống, phần cứng của thiết bị (như hệ thống file, camera, microphone, accelerometer...). Nhược điểm là bị bó buộc với công nghệ và nền tảng mà NSX đưa ra.
  • Web Application: Là các ứng dụng được xây dựng trên nền tảng web (mà điển hình là HTML5), chỉ hoạt động trên trình duyệt của điện thoại. Tiền thân của ý tưởng này là những trang web có giao diện tùy biến cao, chạy được trên nhiều độ phân giải màn hình, về sau phát triển mạnh và hình thành nên một hướng đi mới cho việc phát triển ứng dụng di động. Ưu điểm là có thể thoải mái phát triển ứng dụng mà không cần quan tâm tới nền tảng vì nó cross-platform. Nhược điểm là không có được sức mạnh truy cập sâu vào hệ thống và thiết bị như native app.
  • Hybird Application: Là con lai giữa 2 khái niệm Native App và Web App kia. Có thể hiểu nôm na các ứng dụng này là: một native app chỉ có một đối tượng webview trên màn hình, dùng để hiển thị nội dung trang web app, và web app giao tiếp với native app thông qua một cầu nối (bridge) để mang lại sức mạnh của native app cho web app.
  • Các thể loại khác: em sẽ đề cập sau

Và anh bạn chúng ta đang nói đến ngày hôm nay: PhoneGap - là một đại diện tiêu biểu của các giải pháp Hybird Application.



 Để hiểu thêm về PhoneGap, mọi người có thể đọc bài viết của a Hải tại đây: http://vietgamedev.net/blog/54/phonegap-quot-k%E1%...


Trong bài viết này em xin phép tập trung vào việc xây dựng một ứng dụng web sử dụng Canvas với PhoneGap chạy trên iOS (có thể áp dụng để làm một vài game nhỏ)


Quy trình làm việc với PhoneGap có thể tóm tắt bằng hình sau



 Đầu tiên chúng ta sẽ xây dựng ứng dụng của chúng ta trên nền web, sau đó tạo một project PhoneGap mới và build ra thành ứng dụng chạy trên thiết bị di động.


1) Mần web trước cái đã


Giả sử chúng ta đã xây dựng xong ứng dụng web như đoạn code dưới đây:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="HuyTD" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GDVN PhoneGap thần chưởng</title>
</head>
 
<style>
body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}
*  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
</style>
 
<script>
preventDefaultScroll = function(event) {
    // Chặn không cho người dùng rê trang web khi chạy trên mobile
    event.preventDefault();
    window.scroll(0,0);
    return false;
};
window.document.addEventListener('touchmove', preventDefaultScroll, false);
</script>
 
<body>
 
<canvas id="canvas" width="320" height="480"></canvas>
 
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fps = 300;
var cfps = 0, now, lastUpdate = (new Date)*1 - 1;
var mouseX; var mouseY;
var dx = 1; var x = 1;
canvas.width = 320; canvas.height = 480;
  
function clear(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 320, 480);
}
 
function update() {
    clear();
    ctx.write
    ctx.fillStyle = '#FFF';
    ctx.fillText("Testing Canvas with PhoneGap hohoho", 50, 200);
    ctx.fillRect(x, 250, 50, 50);  
     
    x += dx;
    if (x > 268) dx = -1;
    if (x
     
    ctx.fillText(cfps.toFixed(1) + "fps", 10, 20);
    
    var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
    cfps += (thisFrameFPS - cfps) / fps;
    lastUpdate = now * 1 - 1;
}
 
window.setInterval(update,1000/fps);
 
</script>
 
</body>
 
</html>


Demo: https://dl.dropbox.com/u/6934517/Tutorials/phonega...


 


Ở đoạn code trên có sự xuất hiện của hàm preventDefaultScroll, mục đích của hàm này là để cố định màn hình ứng dụng khi người dùng kéo rê nó (các trình duyệt trên di động thường làm cho nó kéo rê như thế này, nhưng với ứng dụng thì như thế rất khó chịu).


Ngoài ra, nếu muốn ứng dụng của mình có thể tương tác được với các thành phần của phần cứng thiết bị, bạn phải link một file javascript đi kèm với phiên bản PhoneGap bạn đang dùng, sau đó có thể gọi các hàm tương tác phần cứng được cung cấp trong bộ API của PhoneGap. (em không đề cập chuyên sâu vào vấn đề này vì bài viết này đang nói tới việc dùng canvas làm game trên mobile thôi 04)


2) Giờ thì đến lúc build lên mobile rồi


Như đã nói ở đầu bài, em chỉ hướng dẫn cách tạo project và build cho iOS. Có bác nào lập trình Android giúp em viết phần hướng dẫn cho Android không?


Đầu tiên, để build ứng dụng web đã xây dựng trên kia thành một ứng dụng iOS có thể đem bán tại AppStore, bạn cần có:


  • Một máy Mac (máy thật hoặc máy ảo, miễn là chạy Mac OS để cài được XCode)
  • Bộ công cụ XCode và iPhone SDK
  • Tài khoản Apple Developer (cái này miễn phí ) và đã tham gia chương trình iOS Developer Program (cái này 99$/năm)

Sau khi đã cài đặt để PhoneGap có thể làm việc với XCode ( cách cài đặt khá là dễ, chỉ click 1 phát rồi xong nên em cũng không biết phải hướng dẫn kiểu gì ), chúng ta khởi động XCode và tạo một Project mới.



Chọn kiểu project là Cordova-based Application (Cordova là tên gọi khác của PhoneGap sau này)



Nhập vào tên Project của chúng ta



Và sau khi quá trình khởi tạo hoàn tất, chúng ta sẽ có kết quả như hình sau



Bây giờ chúng ta sẽ đưa ứng dụng web của chúng ta vào. Bạn cần tạo một thư mục trên đĩa cứng, đặt tên là www và bỏ toàn bộ các tập tin của ứng dụng web đã xây dựng vào đó. (www là thư mục gốc, file index sẽ nằm ở www/index.html).


Sau đó trong Xcode, bạn click phải vào cây thư mục của Project và chọn Add files to "...tên project..."



Chọn thư mục www mà chúng ta vừa tạo, nhớ tick chọn mục Create folder references for any folders (sau khi chọn cái này thì thư mục www add vào sẽ có màu xanh)



Kết quả sau khi add đúng cách, thư mục www sẽ có màu xanh



Giờ thì ta chỉ việc build và chạy thư thôi




Đến lúc này, việc còn lại là build ra thành file IPA và submit lên AppStore, sau đó thì bắt đầu make money thôi 


Cách 2: Build bằng dịch vụ PhoneGap Build


Ngoài cách build đã giới thiệu ở trên, nếu bạn không có điều kiện mua máy Mac hay lười cài Android SDK, vẫn có một cách để bạn build ứng dụng của mình mà không cần phải thực hiện mấy cái bước dông dài trên kia. Và đây là chức năng hấp dẫn nhất của PhoneGap.


PhoneGap cung cấp dịch vụ PhoneGap Build giúp chúng ta dễ dàng upload ứng dụng web của mình lên server của họ và ứng dụng sẽ được tự động build ra nhiều phiên bản cho nhiều hệ điều hành khác nhau (bao gồm: iOS, Android, Windows Phone, Blackberry, WebOS, Symbian)


Đầu tiên chúng ta truy cập vào địa chỉ https://build.phonegap.com



Sau đó tạo một tài khoản và đăng nhập. Khi vừa đăng nhập, sẽ xuất hiện màn hình thông báo tạo một ứng dụng mới, chúng ta nhập tên ứng dụng và chọn upload an archive or index.html file (bạn có thể nén toàn bộ thư mục ứng dụng thành 1 file zip để up lên, hoặc nếu ứng dụng đơn giản chỉ có 1 file html thì up file đó lên)



Ngoài ra, bạn còn có thể lựa chọn build ứng dụng từ git hoặc svn nếu có.


Sau khi điền đầy đủ thông tin, nhấn Create đến đây PhoneGap Build sẽ bắt đầu build ứng dụng mà bạn đã upload.



Hình trên cho thấy ứng dụng đang được build cho các nền tảng khác (android, wp, blackberry, webos, symbian) còn iOS thì không build được (vì chưa add certificate và provisioning profile vào)


ít phút sau...



thêm ít phút nữa....



Xong rồi, chỉ 1 click và bạn đã có thể test hay thậm chí là submit lên các store để bán ứng dụng của mình mà chẳng tốn tí công sức hay kiến thức Obj-C, Java nào cả. 


Khi đã cập nhật phiên bản mới cho code, bạn có thể upload lại và rebuild. Tất cả chỉ tốn chưa đầy 5 phút.

Tường Trần
Hiện tại update bản ADT version 17.0.0 trở lên thì thằng phonegap gặp vấn đề, có ai bị ko dzị
  • tháng 6 7, 2012
  • ·
  • Thích
  • ·
Tai Van Vu
demo oke rồi. nhưng chưa đề cập tới Tương tác các phần cứng thiết bị.
  • tháng 1 1, 2013
  • ·
  • Thích
  • ·
DNS
Trong phone gap cho mình tương tác với các phần cứng thiết bị theo những api riêng của nó như camera, gps etc ...

Bạn có thể nói rõ hơn ko ?
  • tháng 3 11, 2013
  • ·
  • Thích
  • ·
aydada
Link đã cũ:
1. http://kevinwhinnery.com/post/22764624253/comparin...
2. http://www.asyncdev.net/2012/10/phonegap-a-misunde...

Một trong những lí do khiến phong trào cross-platform nửa mùa kiểu này (dùng web technologies) là thu hút 1 lượng rât lớn các web developer dễ dàng tiếp cận các platform mới: ...
  • tháng 3 11, 2013
  • ·
  • Thích
  • ·
Huy Trần
Điển hình là anh Mark đã phải cho viết lại hoàn toàn app Facebook native cho iOS và Android thay cho version crossplatform dùng HTML5
  • tháng 3 11, 2013
  • ·
  • Thích
  • ·
DNS
@aydada: Vậy theo bạn là ko nên dùng nó trong tất cả trường hợp ?

Giả sử trong trường hợp mình muốn 1 game đơn giản cho nhiều platform thì mình nên chọn giải pháp android + ios + web hay nên dùng đại loại như phonegap ?
  • tháng 3 11, 2013
  • ·
  • Thích
  • ·
aydada
1. Bạn là pro developer, bạn thành thạo các technologies, pick cái nào thì tuỳ bạn, bạn có tiêu chí đánh giá riêng.
2. Bạn biết native, và nghĩ rằng dev cross platform với hmtl5 sẽ đỡ tốn công sức của bạn => bạn tìm hiểu phonegap?
- Nên benchmark sức mạnh html5 trên các platform
- Bạn thấy ok, cứ go wi...
  • tháng 3 11, 2013
  • ·
  • Thích
  • ·
fám jkjà ksfh
cái này có hổ trợ php không nhĩ
  • tháng 10 28, 2013
  • ·
  • Thích
  • ·
Luc Nguyen
Cảm ơn Huy về bài viết, mình đã thử và build thành công
https://play.google.com/store/apps/details?id=tiny...
  • tháng 3 24, 2014
  • ·
  • Thích
  • ·
Nguyen Tam
cho mình hỏi. mình làm theo hướng dẩn nhưng mình code bang java android, nhưng những button(view) native android, khi build ra thì không thấy, mình vẩn không hiểu lắm về cách code này, vậy các giao diện native không hiện và bắt buộc phải tạo bằng HTML hả bạn??????????
  • tháng 4 11, 2014
  • ·
  • Thích
  • ·
HC Giàu
Chi tiết, ngắn gọn. Cám ơn bạn
  • tháng 8 6, 2014
  • ·
  • Thích
  • ·
Captcha Challenge