Link tài nguyên thiết kế Mockup cho ứng dụng Bếp Việt: https://www.dropbox.com/s/derg11jaxumqyl3/BepViet-DesignResources.zip?dl=0
Website thiết kế Prototype – Proto.io: https://proto.io
Playlist của khóa học: https://www.youtube.com/watch?v=ewi2FZ7YbD4&list=PLrYzmTLQ3nmBIU0fVRASwABOFkkB-uZle
Để tham gia nhiều khóa học miễn phí hơn, vui lòng truy cập: VietDevelopers.com bạn nhé!
Link tài nguyên thiết kế Mockup cho ứng dụng Bếp Việt: https://www.dropbox.com/s/derg11jaxumqyl3/BepViet-DesignResources.zip?dl=0
Website thiết kế Mockup – Figma: https://www.figma.com
Trang tìm kiếm icon miễn phí: https://www.flaticon.com
Playlist của khóa học: https://www.youtube.com/watch?v=ewi2FZ7YbD4&list=PLrYzmTLQ3nmBIU0fVRASwABOFkkB-uZle
Để tham gia nhiều khóa học miễn phí hơn, vui lòng truy cập: VietDevelopers.com bạn nhé!
Xin chào tất cả các bạn!
Từ hôm nay mình sẽ “sản xuất” một loạt bài mới về lập trình iOS với Swift 3. Ở loạt bài này, chúng ta sẽ cùng nhau phát triển một ứng dụng iOS tên là Flavr – là một ứng dụng dành cho tín đồ đam mê nấu nướng. Trong quá trình phát triển ứng dụng Flavr chúng ta sẽ cùng nhau tìm hiểu về cách phát triển một ứng dụng iOS như thế nào và những thành phần cấu thành nên một ứng dụng hoàn chỉnh.
Như thường lệ, khi bắt đầu tìm hiểu một ngôn ngữ, bài học vỡ lòng đầu tiên mà chúng ta sẽ học sẽ là Hello World – một câu chào đến với thế giới lập trình. Vì vậy, đừng chần chừ nữa, hãy cùng mình bắt tay vào làm và khám phá thế giới lập trình iOS nhé!
Bạn nào đang đọc đến đây đều cũng sẽ đặt ra thắc mắc là bắt đầu học lập trình iOS thì sẽ cần những gì? Dưới đây là những gì bạn cần có:
✅ Một chiếc máy Mac đang cài hệ điều hành tối thiểu là Mac OS X 10.11.4 (OS X EL Capitan)
✅ Tải Xcode trên App Store về và nhớ là Xcode phải là phiên bản Xcode 8 trở lên nhé. Nhiệm vụ của các bạn là phải cài xong rồi mới được đọc tiếp nhé 
✅ Nếu bạn mới tìm hiểu về lập trình iOS thì bạn sẽ chưa cần mua tài khoản Developer của Apple, chúng ta sẽ có một bài viết về chủ đề này
✅ Bạn có thể sử dụng máy ảo (Simulator) để test ứng dụng, tuy nhiên nếu có thiết bị iOS thật thì càng tuyệt cú mèo
Phần duy nhất mà bạn cần nữa là sự đam mê và chăm chỉ mày mò. Sẽ chẳng có lối đi tắt nào để đến thành công cả, Chiến thôi 
Việc đầu tiên, chúng ta sẽ mở Xcode lên:
Khi bật lên thì sẽ có giao diện như sau:
Sau đó các bạn chọn vào phần Create a new Xcode project để tạo một project mới nhé. Tiếp đến bạn bạn chọn mục iOS và chọn Single View Application để tạo một ứng dụng iOS nhé.
Các bạn có thể thấy là ở bước này chúng ta có thể chọn một trong nhiều loại khác nhau như Single View Application, Game, Tabbed Application… Bản chất là với mỗi một loại project, Xcode sẽ tạo sẵn cho chúng ta những phần cần thiết liên quan đến từng loại kiểu ứng dụng, ví dụ như Tabbed Application thì Xcode sẽ tạo ra cho ta một project mẫu có các tab ở phía dưới màn hình (Ứng dụng có các tab nhỏ ở màn hình chính). Ở bài này, chúng ta sẽ chọn Single View Application, Xcode sẽ tạo ra một project trắng tinh để các bạn tha hồ khám phá. Nói chung, Single View Application là loại project mà chẳng có gì trong đó sất, và các bạn phải tự làm hết mọi thứ
Bạn nhấn Next để tiếp tục việc tạo 1 iOS project, và bạn phải điền các thông tin như hình dưới đây:
Như hình trên thì chúng ta sẽ phải điền các thông tin như dưới đây:
Product Name: Tên của project mà chúng ta sẽ phát triển, ở đây ta đặt tên là Flavr
Team: Ở phần này chúng ta có thể chọn nhóm hoặc account phát triển, mặc định ta chọn None
Organization Name: Tên tổ chức/công ty/nhóm của bạn – bạn có thể đặt tên gì cũng được
Organization Identifier: Đây là địa chỉ hoặc định danh của nhóm/tổ chức/công ty của bạn, thông thường sẽ đặt theo tên miền đảo ngược, ví dụ mình là khachuong.com thì mình sẽ đặt ngược lại là com.khachuong – Các bạn lưu ý là các bạn không nhất thiết phải có tên miền mới đặt được nhé, bạn có thể đặt gì cũng được, nhưng nên là dạng tên miền theo chiều ngược lại. Bạn nhớ là đặt tên không dấu, không khoảng cách nhé!
Bundle Identifier: Chà, phần này rất quan trọng vì phần này sẽ thể hiện ứng dụng của bạn duy nhất. Nó được tạo ra bởi sự kết hợp giữa Project Name và Organization Identifier
Language: Tất nhiên là chúng ta đang sử dụng Swift để phát triển ứng dụng, nên chúng ta sẽ chọn Swift
Devices: Bạn định phát triển ứng dụng cho mình iPhone, iPad hay cho tất cả các thiết bị? Nếu phát triển cho tất cả các thiết bị iOS thì bạn chọn Universal nhé, ở project này chúng ta sẽ chỉ phát triển cho iPhone, nên chúng ta sẽ chọn iPhone
Ở 3 phần chọn cuối, chúng ta bỏ chọn cả 3 phần nhé. Mình sẽ giải thích cụ thể ở các phần sau. Sau khi bạn hoàn tất bạn nhấn Next để tiếp tục. Xcode sẽ hiển thị ra một popup mà bạn có thể chọn một thư mục để lưu trữ project này. Mình chọn Desktop để lưu, sau đó bạn nhấn Create để tạo.
Phù, cuối cùng thì cũng đã khởi tạo được project Flavr. Giao diện Xcode sẽ như sau:
Giao diện Xcode được chia thành nhiều vùng với nhiều tác vụ khác nhau. Mình sẽ giải thích chức năng của từng vùng như sau:
Vùng 01: Cho phép bạn chạy hoặc dừng ứng dụng trên một thiết bị nào đó, bạn có thể chọn thiết bị để test. Ở đây thiết bị có thể là máy ảo hoặc máy thật
Vùng 02: Bạn để ý nhé, sẽ có 3 nút tương ứng với việc ẩn hoặc hiện các thành phần bên tay trái (03), tay phải (02) và phía dưới (05). Mục đích giúp bạn có thể tuỳ biến sao cho bạn có thể code thuận tiện và dễ dàng điều hướng nhất. Ngoài ra, toàn bộ các chức năng ở khối bên tay trái đều gọi là khối tiện ích (Utilities)
Vùng 03: Là phần điều hướng của project, nó sẽ liệ kê ra các thư mục, file thuộc project đó. Bạn sẽ dễ dàng điều hướng và di chuyển giữa các file. Đây còn gọi là khối điều hướng (Navigator)
Vùng 04: Là vùng trung tâm của màn hình, code của bạn có thể hiển thị ở đây hoặc bất cứ thứ gì mà bạn mở ở vùng 03 đều sẽ hiển thị ở vùng trung tâm này
Vùng 05: Khi bạn chạy một ứng dụng, nếu có lỗi hoặc log thì bạn có thể dễ dàng xem tại đây. Đây còn gọi là phần Debug (Debug area)
Ok, bây giờ chúng ta hãy chạy ứng dụng lần đầu tiên xem ứng dụng của chúng ta hiện có gì. Bạn hãy chọn một thiết bị máy ảo ở vùng số 01 và nhấn nút chạy nhé. Dưới đây là thành quả của chúng ta ở lần chạy đầu tiên:
Hehe, app của chúng ta chỉ hiển thị một màn hình trắng. Bình thường thôi, vì ứng dụng của bạn chưa hề hoàn thành mà, đây chỉ là lần chạy đầu tiên. Để dừng chạy ứng dụng của bạn, hãy nhấn vào nút “Stop” ở trên thanh công cụ.
Nhiệm vụ tiếp theo chúng ta phải thực hiện là tạo ra một nút có tên là “Say Hello” và khi nhấn vào nút đó thì màn hình sẽ hiện ra chữ “Hello World” thay vì một màn hình trắng phau như ở trên.
Đầu tiên ta sẽ mở file Main.Storyboard ở phía tay trái ra, và chọn vào màn hình View Controller:
File Storyboard là gì?
Chúng ta có thể hiểu file Storyboard là file để chúng ta có thể bố cục giao diện cho các màn hình của app. Đồng thời, chúng ta cũng có thể sử dụng Storyboard để kiểm soát luồng hoạt động của ứng dụng. Trong Xcode sẽ có một công cụ tên là Interface Builder – cho phép lập trình viên có thể kéo thả các thành phần giao diện của một ứng dụng. Thay vì phải tự code lên giao diện, thì chúng ta có thể sử dụng Interface Builder để kéo thả, việc này sẽ dễ dàng hơn nhiều so với code chay.
Trong một ứng dụng, mỗi màn hình mà ứng dụng hiển thị lên thì được gọi là một Scene trong Storyboard. Như vậy, ở trong file Main.Storyboard hiện tại của chúng ta có một Scene tên là View Controller -> chính là màn hình trắng mà chúng ta đã thấy ở lần chạy đầu tiên. Mỗi một Scene thì phải tương ứng với một file code, ở trong ví dụ này ta có thể thấy Scene có tên là View Controller thì sẽ có một file code tên là ViewController.swift ở bên tay trái. Ok, tạm gác tại đó, mình sẽ giải thích cụ thể hơn ở các bài viết sau.
Quay lại với phần thiết kế giao diện (Interface Builder), ở file Storyboard, chúng ta sẽ kéo vào một nút (button) và đặt tên button đó là Say Hello. Một button được xem là một UI component (thành phần giao diện) Ở góc màn hình bên tay phải, chúng ta sẽ có thể tìm một thành phần giao diện (UI component) và kéo vào màn hình View Controller.
Các bước thực hiện như sau:
Bước 1: Bạn chọn vào nút thứ 3 (Show Object Library) là nơi liệt kê ra danh sách các đối tượng (object) giao diện
Bước 2: Tìm đến object có tên là Button
Bước 3: Giữ vào kéo Button vào giữa Scene View Controller
Tiếp đến chúng ta sẽ thay đổi chữ Button bằng chữ Say Hello, bạn có thể click đúp vào nút Button ở giữa màn hình và đổi lại thành chữ Say Hello:
Bây giờ nếu chúng ta chạy lại ứng dụng, ta sẽ thấy màn hình không còn trắng trơn nữa, thay vào đó là một nút Say Hello. Tuyệt cú mèo 
Nếu bạn thử nhấn vào nút Say Hello thì chẳng có gì xuất hiện cả, bởi vì chúng ta còn thiếu một bước, đó là hiển thị ra dòng thông báo “Hello World” khi có sự kiện nhấn vào nút Say Hello. Bây giờ hãy bắt tay vào code chút nhé!
Đầu tiên, hãy mở file ViewController.swift ra và viết những câu lệnh dưới đây ngay trên dòng override func didReceiveMemoryWarning()
@IBAction func btnSayHelloPressed(_ sender: Any) {
let alert = UIAlertController(title: "Notification", message: "Hello World!", preferredStyle: UIAlertControllerStyle.alert)
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
self.present(alert, animated: true, completion: nil)
}
Toàn bộ code của bạn sẽ như hình dưới đây:
Chúng ta vừa viết xong một hàm chức năng tên là btnSayHelloPressed() với mục đích là khi người dùng nhấn vào nút Say Hello thì hàm này sẽ xử lý và hiển thị lên màn hình câu chào. Đoạn code trong hàm này sẽ được diễn giải như sau:
let alert = UIAlertController(title: "Notification", message: "Hello World!", preferredStyle: UIAlertControllerStyle.alert)
2. Thêm một hành động (action) có tên là OK vào thông báo alert phía trên
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
3. Hiển thị (present) thông báo alert trên lên màn hình hiện tại
self.present(alert, animated: true, completion: nil)
Đến thời điểm hiện tại, bạn chỉ cần hiểu được luồng hoạt động của ứng dụng là ok rồi, mình sẽ giải thích sâu hơn nữa ở các bài viết tiếp theo. Bây giờ bạn thử chạy lại ứng dụng và nhấn vào nút Say Hello xem có gì xảy ra không? Tất nhiên là không rồi bởi vì chưa có sự kết nối (link hoặc connection) nào từ phần giao diện Interface Builder đến code mà chúng ta vừa viết cả. Vậy, việc cuối cùng chúng ta cần làm là kết nối nút Say Hello với hàm btnSayHelloPressed:
Để kết nối nút Say Hello với hàm btnSayHelloPressed: bạn chỉ cần nhấn giữ phím Ctrl và kéo chuột từ nút Say Hello vào View Controller và chọn hàm btnSayHelloPressed: như hình dưới đây:
Như vậy là xong việc kết nối (link) giữa nút Say Hello ở phần giao diện (Interface Builder) với hàm btnSayHelloPressed: trong file ViewController.swift. Bây giờ bạn thử chạy lại app, kết quả là chúng ta sẽ có một thông báo Hello World! khi nhấn vào nút Say Hello. Kết quả sẽ như hình dưới đây:
Vola, như vậy là chúng ta đã xây dựng thành công ứng dụng iOS đầu tiên có tên là Hello World sử dụng ngôn ngữ Swift 3 và Xcode 8. Thật tuyệt vời phải không? Mình biết là còn rất nhiều thắc mắc, khó hiểu trong quá trình làm ứng dụng này. Tuy nhiên, bạn sẽ hiểu sâu hơn ở các bài viết tiếp theo. Bây giờ hãy nghỉ ngơi và dành thời gian cho những ý tưởng xây dựng ứng dụng mới, sau loạt bài viết này bạn sẽ có thêm kinh nghiệm và kiến thức để có thể tự mình xây dựng được ứng dụng của riêng mình.
Source code của bài này bạn có thể download tại đây: Sourcecode_Flavr_Day1
Hẹn các bạn ở bài viết tiếp theo!
Chú ý: Bản quyền thuộc về blog VietDevelopers do Khả Chương phát triển, mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Các nhà tài trợ có thể ủng hộ chi phí duy trì cho blog xin liên hệ email: khachuongvn@hotmail.com. Mọi sự đóng góp của các bạn sẽ góp phần blog phát triển hơn. Xin cảm ơn và chúc các bạn học tốt!
Ở bài trước các bạn đã được học về cách sử dụng song song 2 ngôn ngữ Objective-C và Swift trong cung 1 project để hiển thị ra câu chào Hello World. Nếu các bạn chưa xem bài trước thì các bạn có thể xem tại đây: Link
Ở bài hôm nay chúng ta sẽ cùng nhau tìm hiểu về các kiến thức cơ bản trong lập trình như khai báo biến, hằng số, kiểu dữ liệu, mảng, vòng lặp, câu điều kiện. Ở mỗi video mình sẽ giao cho các bạn 1 bài tập nho nhỏ, các bạn có thể gửi bài giải về cho mình tại email: khachuongvn@hotmail.com. Mình hy vọng các bạn có thể học được nhiều kiến thức từ blog này.
Bài học hôm nay:
Bài tập hôm nay: Hãy tìm số gà và chó trong bài toán sau (Đáp án sẽ được cung cấp ở video sau)
Vừa gà vừa chó
Bó lại cho tròn
Ba mươi sáu con
Một trăm chân chẵn.
Sách tham khảo về Swift của Apple các bạn có thể tải tại đây: Link
Source code trong video các bạn tải tại đây: Link
Chú ý: Bản quyền thuộc về blog VietDevelopers do Khả Chương phát triển, mọi trích dẫn, hay copy vui lòng ghi rõ nguồn và được sự đồng ý của tác giả. Các nhà tài trợ có thể ủng hộ chi phí duy trì cho blog xin liên hệ email: khachuongvn@hotmail.com. Mọi sự đóng góp của các bạn sẽ góp phần blog phát triển hơn. Xin cảm ơn và chúc các bạn học tốt!
Xin chào tất cả các bạn đã đến với loạt bài mới về lập trình iOS cơ bản sử dụng ngôn ngữ lập trình mới của Apple đó là Swift. Ở bài đầu tiên này chúng ta sẽ sử dụng song song 2 ngôn ngữ Objective-C và Swift để xem sự khác nhau như thế nào. Hãy bắt đầu với Hello World nào 😀
Lập trình iOS Cơ bản 