Làm app android từ css, html và js bằng PhoneGap

Mở đầu

Xin chào các bạn, tình hình là mình muốn làm client là 1 app android cho dự-án-(cực)-nhỏ-làm-lúc-rảnh-rỗi của mình (vẫn chưa bắt đầu 😄). Thật sự là mình đã từng học java từ hồi học ĐH, ra ngoài đi làm cũng suýt mấy lần (bị) rẽ hướng sự nghiệp sang android nhưng đến tận bây giờ mình vẫn cảm thấy kiến thức java của mình đạt mốc 0.1% và cảm hứng đọc những dòng code java là 0% =))

Hiện nay thì có nhiều công cụ hỗ trợ đa nền tảng, ví dụ Xamarin, nhưng mà mình thấy PhoneGap đúng là thứ mình cần, dùng javascript và css để build ứng dụng đa nền tảng, đọc thấy hỗ trợ build app cho Amazon Fire OS, Android, BB 10, Firefox Os, iOs, Ubuntu, Wp8, Windows, và Tizen. Thật là ghê gớm. 😄

Để làm quen với anh bạn này, mình có demo 1 game viết bằng jquery rồi build thành file apk, thành quả là như thế này:

Screenshot_2016-05-28-21-44-33.png

Nhưng trước hết, ta phải cài đặt PhoneGap đã.

Cài đặt PhoneGap

Các bạn vào đây để xem document của họ, còn không thì đọc mấy cái hướng dẫn sau của mình cũng được, hơi khác 1 chút vì mình làm theo hướng dẫn của họ thì không chạy được app:

  • Cài desktop app: MacOs thì tải bản cho MacOs, Windows thì tải bản cho Windows
  • Chưa xong, các bạn cần cài NodeJs đã, vào đây download về, ai dùng OS gì thì download cái đó. Mình dùng windows nên download cái này
  • Sau khi cài xong NodeJs, các bạn cài PHONEGAP CLI bằng dòng lệnh sau:
npm install -g phonegap
  • Tiếp theo là cài Cordova CLI
npm install -g cordova

Mấy cái vừa rồi toàn là cho windows thôi nhé, những command tiếp theo mình giới thiệu cũng là cho windows, còn chi tiết các OS khác các bạn vào chỗ này để đọc nhé 😄

À, quên, nếu các bạn muốn build app android thì cần cài JavaAndroid SDK, nếu là app wp8 thì cần cài Windows phone 8 SDK, còn iOs thì mình không biết :-\

  • Cài đặt mobile app: Cái này hay cực, khi bạn build 1 app trên máy tính, thì cái phoneGap này chạy 1 cái server, kiểu thế này:

2.JPG

sau đó gõ cái địa chỉ 192.168.43.196:3000 vừa rồi vào app mobile, thế là cái điện thoại chạy luôn cái app mình đang làm trên máy tính mà ko cần phải cài đặt gì cả:

Screenshot_2016-05-28-22-33-58.png

Tải mobile app cho iOs, AndroidWindows Phone

Ok, giờ đến phần tiếp theo.

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

  • Mở PhoneGap, Chọn File > Create new project (hoặc nếu đã có project rồi thì chọn cái Add existing project) hoặc các bạn ấn vào dấu + cho nhanh 😄
  • Sau khi điền đầy đủ thông tin rồi thì project của ta sẽ chạy như phần trước mà mình đã mô tả.
  • Các bạn mở trình duyệt ra và gõ địa chỉ localhost:3000 để xem kết quả code và debug

1.jpg

Làm game Tetris bằng Jquery

Chúng ta sẽ code html, js, css như bình thường, tất cả các file cho vào trong thư mục path-to-project/www

HTML

  • Đầu tiên là ta tạo 1 table, đó chính là cái ô để mấy hình nó chạy xuống xếp vào nhau

haizz, khá là bực mình vì thời điểm mình viết bài Viblo hiển thị tag HTML bị lỗi, các bạn nhìn ảnh tạm nhé, sau này mình edit lại bài viết sau 😃

table.JPG

  • Table nhỏ hơn này dùng để hiển thị hình tiếp theo rơi xuống

t2.JPG

  • Khu vực thông tin chỉ số về level, điểm,...

111.JPG

  • Nút stop, start

ss.JPG

  • Nút điều hướng

aa.JPG

Js

  • Định nghĩa các biến về màu sắc, hình dạng của khối hình, điểm bắt đầu khối hình rơi xuống
var tetris = {

	colors: ['#eaeaea','#ff6600','#eec900','#0000ff',
		'#cc00ff','#00ff00','#66ccff','#ff0000'],

	startAt: [0, -1, -1, -1, 0, -1, -1, 0],

	points: [0, 40, 100, 300, 1200],

	shapes: [
		[],

		[[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
		 [[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]]],

		[[[0,0,0,0],[1,1,1,0],[0,1,0,0],[0,0,0,0]],
		 [[0,1,0,0],[1,1,0,0],[0,1,0,0],[0,0,0,0]],
		 [[0,1,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
		 [[0,1,0,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],

		[[[0,0,0,0],[1,1,1,0],[1,0,0,0],[0,0,0,0]],
		 [[1,1,0,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
		 [[0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
		 [[0,1,0,0],[0,1,0,0],[0,1,1,0],[0,0,0,0]]],

		[[[1,0,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
		 [[0,1,1,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
		 [[0,0,0,0],[1,1,1,0],[0,0,1,0],[0,0,0,0]],
		 [[0,1,0,0],[0,1,0,0],[1,1,0,0],[0,0,0,0]]],

		[[[0,0,0,0],[1,1,0,0],[0,1,1,0],[0,0,0,0]],
		 [[0,0,1,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],

		[[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]],
		 [[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]]],

		[[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]]],
}
  • Hàm khởi tạo game:
init: function() {
		var i, j, k;
		tetris.cells = [];
		for (i = -3; i < 18; ++i) {
			tetris.cells[i] = [];
			for (j = 1; j < 11; ++j) {
				k = String.fromCharCode(i + 97);
				tetris.cells[i][j] = $(['#', k, j].join(''));
			}
		}
		tetris.bound = $.browser == 'msie' ? '#tetris' : window;
	},
  • Khi bắt đầu chơi game
start: function() {

		tetris.level = 0;
		tetris.lines = 0;
		tetris.score = 0;

		tetris.grid = [
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
			[1,1,1,1,1,1,1,1,1,1,1,1]];
		$('#grid td').css('backgroundColor', tetris.colors[0]);
		$('#start').unclick(tetris.start).val('pause').click(tetris.pause);
		$('#stop').set('disabled', false);
		tetris.navKey();
		tetris.next = tetris.newShape();
		tetris.shift();
		tetris.duration = 600;
		tetris.refresh();
		tetris.timer = window.setInterval(tetris.moveDown, tetris.duration);
	},
  • Nói chung khá là dài, những hàm khác các bạn đọc ở github > tetris.js của mình nhé.

css

Thêm 1 chút css cho đẹp, dùng Bootstrap cho nhanh 😄

Sau khi đã hoàn thành được game, tiếp theo là chúng ta build nó thành file apk để cài cho android.

Build app

  • tại thư mục project, gõ lệnh:
D:\Projects\firt>cordova platform add android
  • Sau khi nó chạy 1 hồi thành công, gõ tiếp lệnh:
D:\Projects\firt>cordova build android

3.JPG

File apk được build tại thư mục path-to-project/platforms/android/build/outputs/apk

Ngoài ra

Nếu các bạn muốn build file cho windows phone 8, thay android thành wp8

D:\Projects\firt>cordova platform add wp8
D:\Projects\firt>cordova build wp8

Mình chưa thử với những OS còn lại. 😄

Hoặc các bạn có thể add toàn bộ platform trước, sau đó gõ lệnh

D:\Projects\firt>cordova build

Tất cả platform sẽ được build.

Thành quả

tetris.gif

Kết luận

  • Mã nguồn của demo vừa rồi có thể download tại Github
  • Hướng dẫn của PhoneGap
  • Đặc biệt cảm ơn tới Google