Hướng dẫn html5 to apk - html5 cho apk

File đính kèm

Các tệp sau đây đã được gắn vào hướng dẫn này:

Bản dịch

Hướng dẫn này đã không được dịch.

Giấy phép

Hướng dẫn này được cấp phép theo CC bởi 4.0. Vui lòng tham khảo văn bản giấy phép nếu bạn muốn sử dụng lại, chia sẻ hoặc phối lại nội dung có trong hướng dẫn này.

Hello !

Well , if you were thinking if you could directly make an Android App (.apk file) from the HTML 5 Export in Construct 2 .

Yes , you can !

Just Download this "Quick-App-v1.1.zip" file :-

Quick-App-v1.1.zip

Ok , so now we can start !

1. Extract that above "Quick-App-v1.1.zip" file .

2. Open "Quick App.cmd"

3. After starting "Quick App.cmd" , you will be asked to :-

    a. Export your Construct 2 project as HTML5 website.

    b. Copy all the files from your Exported folder to "assets" folder give in Quick App
        So , now your assets folder should have the main "index.html" file.
        (Note. index.html file is loaded into the app)

    c. After that , just enter a name for your app
        (Note. there should be no space in your name)

    d. Now wait for some time and you will get you app (.apk signed file).

Yea... , DONE !!

You can also read the README.txt file in the Quick App Folder !

Well thats it , but keep in mind :

1. The app uses "WebView" , so your app might lag.. !

2. well this is just for Quick test your app on android !

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% =))

). 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:

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 Java và Android 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:

sau đó gõ cái địa chỉ

npm install -g phonegap

0 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ả:

Tải mobile app cho iOs, Android và Windows 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ỉ

  npm install -g phonegap
  

  1 để xem kết quả code và debug

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

npm install -g phonegap

2

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 nhỏ hơn này dùng để hiển thị hình tiếp theo rơi xuống

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

• Nút stop, start

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

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

File apk được build tại thư mục

npm install -g phonegap

3

Ngoài ra

Nếu các bạn muốn build file cho windows phone 8, thay

npm install -g phonegap

4 thành

npm install -g phonegap

5

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ả

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