header-object

[Webapp Tutorial] Xây dựng ứng dụng di động dùng HTML5 - Bài cuối

Bản thân Object C có cú pháp khá “khác lạ” khi so sánh với các ngôn ngữ lập trình phổ biến khác như C, C++, Pascal, Java, PHP…, vì vậy muốn hiểu được code các bạn nên nghĩ tới việc lập một kế hoạch nghiêm túc.

 

9.1 Tạo Project dùng Xcode

Mở Xcode, ở hộp thoại đầu tiên hiện ra chọn tùy chọn đầu tiên “Create a new Xcode Project như hình minh họa sau:
b1

 

Cửa sổ Xcode mở ra việc chọn loại ứng dụng. Hãy chọn “Single View Application” như trong hình sau:


b2

 

Bước tiếp theo là nhập các thông tin cho ứng dụng đang tạo. Ở màn hình này chúng ta sẽ chọn việc tạo ra một ứng dụng cho IPad, các bạn cũng chú ý check tùy chọn “Use Storyboards” như hình minh họa sau:


b3

 

Bước thứ 4 là chọn nơi lưu trữ mã nguồn của Project đang tạo. Chọn một thư mục nào đó và nhấn nút Create để tạo Project (xem hình minh họa bước 4 ngay sau).


b4

 

Khi Xcode tạo xong project cho chúng ta. Nó sẽ hiển thị Project của chúng ta ở cột bên trái. Click vào tên project và Xcode sẽ hiển thị màn hình để bạn thiết lập các thông tin khác cho ứng dụng như hình sau:


b5

 

Như bạn thấy ở hình minh họa trên. Cột bên trái là cấu trúc tập tin, thư mục của ứng dụng. Chúng ta sẽ thiết lập các thông tin khác cho ứng dụng DanwebDrawing. Chúng ta sẽ làm việc đó ngay sau đây:

  • Trong phần iOS Application Target chúng ta chọn Devices là IPad và Deployment Target (phiên bản hệ điều hành iOS) là 6.0 (như ở hình trên).
  • Trong phần IPad Deployment Info chúng ta sẽ lần lượt chọn các hướng cầm máy được hỗ trợ, chọn các hình ảnh làm icon của ứng dụng.
  • Kéo thanh trượt xuống, tiếp tục chúng ta sẽ chọn các hình làm intro cho ứng dụng. Ở đây yêu cầu chúng ta phải có 4 hình ảnh (nằm ngang, nằm dọc. Mỗi chiều lại cần có cho màn hình thường và màn hình retina). Các hình ảnh được chọn ở đây bắt buộc phải có kích thước chính xác được quy định sẵn. (Bạn có thể tải các hình ảnh làm icon và intro ở đây iOS-Resource.zip ). Nếu mọi chuyện diễn ra suôn sẻ chúng ta sẽ thấy hiển thị như sau:

b6

 

Chúng ta sẽ thực hiện việc tiếp sau là tích hợp các tập tin (html, javascript, css) đã tạo ở các bài trước vào trong project.

 

9.2 Tích hợp các tập tin resouce vào ứng dụng

Có nhiều cách để chép các tập tin resource vào để dùng trong project. Tuy nhiên, cách đơn giản nhất là bạn hãy kéo thư mục chứa toàn bộ resource và thả vào mục Supporting Files trong Project. Sau khi thả Xcode sẽ hiện ra hộp thoại tùy chọn như hình sau:
b7

 

Trên hộp thoại này hãy check tùy chọn trong mục “Destination” và trong mục “Folders” hãy chọn tùy chọn thứ 2 là “Create folder references for any added folders” rồi nhấn Finish.
Nếu mọi việc diễn ra đúng, ở cột bên trái trong thư mục “Supporting Files” chúng ta sẽ thấy xuất hiện thư mục chứa resource của chúng ta (ở đây là dwdrawing) như hình sau:


b8

 

Việc chúng ta sẽ phải làm là load tập tin Supporting Files/dwdrawing/dwdrawing.html lên trên giao diện ứng dụng. Chúng ta sẽ tiến hành việc này ngay sau đây.

 

9.3 Tạo màn hình chính của ứng dụng chứa Webview

Ở cột bên trái của Xcode chọn tập tin MainStoryboard.storyboard bằng cách nhấn chuột. Hiện tại ứng dụng của chúng ta có một thành phần View Controller (một màn hình) hiển thị ở khung chính giữa Xcode như trong hình minh họa sau:
b9

 

Nhấn vào khung hiển thị View Controller này để kích hoạt nó (chuyển qua màu xanh như hình trên). Trong panel bên phải cuộn thanh cuộn và tìm Object có tên là Web View (như trong hình trên) nắm nó và thả vào khung hiển thị View Controller.
Khá đơn giản, như vậy là ứng dụng của chúng ta đã có một màn hình, trên màn hình này chúng ta đã đặt một đối tượng Web View rộng toàn màn hình. Việc tiếp sau chúng ta sẽ làm là viết code để Web View của chúng ta load tập tin dwdrawing.html.

 

9.4 Load tập tin dwdrawing.html lên Web View

Chúng ta sẽ viết một vài dòng code đơn giản. Như đã nói từ đầu mình sẽ không giải thích cặn kẽ từng dòng mã. Nếu quan tâm các bạn có thể comment sau bài viết hoặc post bài đặt câu hỏi lên facebook của Dânweb.
Đầu tiên hãy mở tập tin ViewController.h và thêm vào các dòng lệnh để có được mã như sau:

#import <UIKit/UIKit.h>
@interface JialioViewController : UIViewController {
    IBOutlet UIWebView * webView;//khai báo thuộc tính webView
}
@property (nonatomic, retain) UIWebView * webView;//set&get tự động khi synthesize
@end

Ở trên, chúng ta đã thêm 2 dòng lệnh có comment ở phía sau. Các bạn tham khảo ý nghĩa trong phần comment.
Tiếp sau, hãy mở tập tin ViewController.m, đây là tập tin định nghĩa các phương thức đã khai báo trong tập tin ViewController.h ở bên trên.
Chúng ta sẽ viết một vài dòng lệnh đươn giản ở đây. Các dòng mã được viết thêm là các dòng đi kèm với comment.

#import "JialioViewController.h"
@interface JialioViewController ()
@end
@implementation JialioViewController
@synthesize webView;//synthesize thuộc tính webView
- (void)viewDidLoad
{
    [super viewDidLoad];
	
    //đường dẫn đến tập tin cần load
    NSString *path = [[NSBundle mainBundle] pathForResource:@"dwdrawing" ofType:@"html" inDirectory:@"dwdrawing"];
    
    //tạo đối tượng URL
    NSURL *url = [NSURL fileURLWithPath:path];
    
    //tạo dối tượng Request
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    //dùng webView và truy vấn file
    [webView loadRequest:request];
    
    //loai bo hieu ung Bounces
    webView.scrollView.bounces = NO;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

Việc cần làm tiếp sau là gán thuộc tính webView (trong code) cho đối tượng Web View chúng ta đã đặt ở trên giao diện trong bước trước. Để làm được điều này các bạn thực hiện như sau.

  • B1. Bấm vào tập tin MainStoryboard.storyboard
  • B2. Bấm chọn Web View mà chúng ta đã đặt trên màn hình (ViewController)
  • B3. Ở cột bên phải, trong phần Connections inspector (nút hình mũi tên trỏ sang phải) dùng chuột kéo nút tương ứng với thuộc tính webView và kéo thả vào khu vực đối tượng Web View trên giao diện (xem hình minh họa phía sau).

b10

 

9.5 Đóng gói và cài đặt thử nghiệm

Bước tiếp theo là kiểm tra kết quả đã thực hiện được trên Simulator và trên IPad. Hình sau là kết quả thực thi ứng dụng trên iOS 6.0
b11 Bạn có thể tải về toàn bộ mã nguồn của Project này để tham khảo tại đây: DanwebDrawing-iOS-Project

HẾT.

 

Đào Ngọc Giang

Bình luận  

 
0 #4 fdas Thứ 4-12-15 21:41
fsdafasd
Trích dẫn
 
 
0 #3 Trần Thiều Thứ 5-10-15 15:27
Trước hết tôi xin cám ơn tác giả của loạt bài hướng dẫn rất hay và chi tiết này, nhờ bài này tôi đã viết được một ứng dụng game cho iOS. Tôi còn một số vướng mắc trong ứng dụng này là việc liên kết ứng dụng của tôi với Game Center của Apple và các mạng xã hội phổ biến như Facebook, Twitter và Google++. Khó khăn ở đây là làm sao để webview có thể tương tác với các các đối tượng kể trên. Rất mong tác giả và các anh em khác giúp đỡ.
Trích dẫn
 
 
0 #2 Ngọc Vũ Thứ 3-09-14 23:59
Cái app này dùng csdl gì để lưu trữ nhỉ, với lại k bik kết hợp dc với PHP k
Trích dẫn
 
 
0 #1 Nguyễn Đình Hùng thứ 7-09-14 15:05
Hay quá, cám ơn bạn đã chia sẻ, mình đang cần các kiến thức này.

Phần code javascrip khó hiểu quá, mình chịu khó tìm hiểu js mãi mà chưa thông

cám ơn
Trích dẫn
 

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 844 khách đang truy cập
2492005