Chủ Nhật, 7 tháng 7, 2013

1. Xây dưng giao diện ứng dụng trong XCode "Hello World"


-       Trước khi bạn tạo 1 ứng dụng demo hello world, tôi khuyên bạn nên xem qua nhưng bài viết khác của tôi về xcode :
-       Giới thiệu các vùng trên xcode (http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-2.html )
-       Hướng dẫn cách debug và giới thiệu về emulator (http://learn-ios-objective-c.blogspot.com/2013/06/gioi-thieu-ve-xcode-part-3.html )
-       Và bạn cũng nên xem loạt bài về giới thiệu ngôn ngữ Objective-C (http://learn-ios-objective-c.blogspot.com/2013/06/lap-trinh-objective-c-part-1.html )
-       Chắc bạn đã từng học qua 1 ngôn ngữ lập trình, nên bạn sẽ biết hello world là 1 bài học đầu tiên của mọi ngôn ngữ lập trình, mục đích đơn giản là để xuất ra đoạn text “hello world” và tác dụng khác :
o   Giúp cho bạn có cái nhìn tổng quan về cấu trúc và cú pháp của ngôn ngữ Objective-C.
o   Giúp có bạn biết qua về môi trường xcode, biết cách tạo ra 1 project trong xcode.
o   Giúp cho bạn biết về cách biên dịch build, debug, test xem kết quả của mình sau khi hoàn thành.
o   Giúp bạn thấy được làm 1 ứng dụng ios vô cùng đơn giản, không khó khăn. (vạn sự khởi đầu nan mà
-       Nói nhiều quá rồi, bây giờ chúng ta bắt đầu nhé

a. Tạo dự án:
-       Chọn biểu tượng Xcode
-       Sau khi khởi động xcode sẽ hiển thị màn hình hộp thoại, chọn “Create a new Xcode project” để bắt đầu 1 project mới.

-        Lúc này xcode sẽ hiển thị danh sách các mẫu project khác nhau để  chọn lựa, ở demo này tôi chọn “Single View Application” và nhấp “Next”.

-        Bạn cần nhập các thông tin cần thiết của project của bạn vào.
o   Product Name: HelloWorld – đây là tên ứng dụng của bạn
o   Company Identifier: com.tinhnq – đây là 1 tên miền của bạn, được viết kiểu ngược lại “tinhnq.com”
o   Class Prefix: HelloWorld – đây là tên tiền tố, đặt tên lớp tự động, bạn có thể không nhập cũng được. ở bài này tôi nhập là HelloWorld
o   Device Family: iPhone – bài hướng dẫn này là tạo ứng dụng trên Iphone nên tôi chọn Iphone
o   Use Storyboards: sử dụng lớp giao diện có sẵn, tôi không chọn
o   Use Automatic Reference Counting:  tự động sử dụng các quản lý bộ nhớ (ARC), tôi chọn vào cái này
o   Include Unit Tests: bao gồm các chức năng kiểm thử đơn vị, tôi cũng không chọn
-       Sau đó nhấp “Next” để tiếp tục, xcode sẽ hỏi bạn muốn lưu dự án của bạn vào thư mục nào. Sau đó nhấp “Create” để tiếp tục.
-       Xcode đã tạo ra thành 1 project HelloWorld mới dự theo những tiêu chí của bạn đưa ra, như ở trên :

b. Giới thiệu sơ về không gian làm việc của xcode:

c. Chạy ứng dụng:
-       chỉ cần nhấn vào button “Run” sau đó xcode sẽ tự động build ứng dụng và hiển thị lên simulator
-       Bạn có thấy màn hình trống không đúng không? Chưa viết gì mà
-       Muốn dừng ứng dụng lại bạn nhâp nút “Stop”
d. Code chương trình demoHelloWorld
-       Bạn vào khu vực Navigator của dự án
-        Chọn “HelloWorldViewController.xib”
-       Xcode sẽ hiển thị ra màn hình giao diện Builder có view trống rỗng
-       Bạn có thấy từ khu vực thư viện có nhiều đối tượng như label, button… trong demo này, tôi chọn 1 button sau đó tôi kéo button đó vào trong khu vực màn hình view, và thả ra.

-       Kích đúp chuột vào button và thay đổi text từ “button” -> “Hello World”
-       Ok, bây giờ chạy lại ứng dụng demo Hello World lần nữa, sẽ cho ra kết quả trên simulator
 

 -       Đã hiển thị Button “Hello World” còn khi nhấp vào button thì không có gì hết. Bây giờ chúng ta sẽ tiếp tục tới phần xử lý sự kiện khi click vào button

-        Quay trở lại khu vực navigator chọn file HelloWorldViewController.h, toàn bộ source code của file được chọn sẽ hiển thị tại khu vực Editor.
Thêm dòng mã sau trước “@end”

- (IBAction) ShowMessage;

-       giống như trong hình

-        chọn tiếp file HelloWorldViewController.m, Thêm dòng mã này trước “@end”
- (IBAction)showMessage
{
    UIAlertView *helloWorldAlert = [[UIAlertView alloc]
                                    initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
 
    // Display the Hello World Message
    [helloWorldAlert show];
}
-       Đoạn code này mục đích hiển thị 1 popup chứa đoạn message “hello word”
-       giống như trong hình

-       kết nối đoạn đoạn code với hành động click vào button “Hello World” và message popup. Quay trở lại khu vực navigator chọn “HelloWorldViewController.xib” và quay trở lại giao diện builder. Nhấp phím “control” đồng thời dung chuột kích vào button “Hello World”, giữ chuột và kéo vào “File’s Owner”, giống như thế này


-       Sau đó sẽ thấy popup “Sent Events” xuất hiện, trong đó có “showMessage”, chọn showMessage để có sự kết nối giữa button và hành động “showMessage”.
-       Và đây là kết quả

-       Chúc mừng bạn đã có được 1 ứng dụng iOS đầu tiên chạy trên Iphone. Đơn giản đúng không?
Các bài viết tham khảo
http://developer.apple.com/library/ios/#documentation/iphone/conceptual/iphone101/Articles/01_CreatingProject.html
http://www.appcoda.com/hello-world-build-your-first-iphone-app/























Không có nhận xét nào:

Đăng nhận xét