Lập trình ứng dụng iOS cơ bản – Phần 3: Làm quen giao diện Xcode và các công cụ

Hi all, chúng ta đi tiếp vào phần 3 luôn nha.

Đối với bất kì nền tảng nào, điều cần đầu tiên ở người mới học đó là tìm hiểu xem chúng ta sẽ xây dựng mọi thứ từ cái gì, đâu là nơi bắt đầu. Ở đây cũng vậy, sau khi tạo project, chúng ta sẽ cần phải làm quen với giao diện làm việc của Xcode (nơi thiết kế, viết code, debug, cài đặt chung,…). Vì thế mục tiêu chính ở phần này là giới thiệu giao diện Xcode và các công cụ. Ngoài ra, mình sẽ cố gắng chia sẻ một tí xíu về ngôn ngữ ta sẽ làm việc là Objective-C.

Phần 1: Xcode Interface Builder

Đầu tiên, chúng ta làm quen với giao diện Xcode trước nhé. Dưới đây là giao diện Xcode mà mình đã chú thích lại các “vùng” làm việc. Mình sẽ mô tả cụ thể ở dưới:

Xcode Interface Builder

Mỗi vùng thì có chứa khá nhiều công cụ khác nhau, mình làm dần dần đụng tới nó sẽ biết cách sử dụng thôi 🙂 . Vì vậy, mình xin liệt kê các vùng chính làm việc như sau:

Toolbar: Đây là vùng chứa mấy tuỳ chọn chung. Ta để ý 2 phần: phần bên trái toolbar (kế bên cụm buttons đóng/mở cửa số đấy – nút tam giác đen đen đó) là cụm buttons để chọn devices và RUN app. Phần bên phải toolbar (cụm 6 buttons đó) là mấy nút để tuỳ chọn cửa sổ để code (vùng nút này để ẩn/hiện mấy vùng khác như Navigator, Editor, Inspector, Debug và Library).

Navigator: Vùng này là vùng chứa cấu trúc và các công cụ thao tác với project của mình (cây thư mục).

+ Navigator selector bar: là cụm công cụ của navigator, nó sẽ chứa các công cụ (mình liệt kê từ trái sang phải nha): Cây thư mục project, Symbol (các class này nọ trong project), Find (tìm kiếm từ, cụm từ trong project), Issue (nơi tập trung các error hoặc là warning của project), Test (cái này thôi bỏ qua do mình không có thực hiện Unit hay UI Test), Debug (khi mình debug thì quá trình chạy debug, các thread đang chạy,… sẽ hiện ở đây), Breakpoint (tổng hợp hết các điểm đặt breakpoint trong project), Report (nơi này nó sẽ tổng hợp mấy cái mình in ra debug hoặc quá trình chạy project hệ thống in ra lỗi gì cũng được hiện ở đây. Cái này mình chả bao giờ mò tới nữa, chắc “chưa” cần 😛 ). Khá là nhiều cửa sổ sẽ làm việc, nhưng mà cái này chỉ cần làm vài project là quen hết à 😀 .

+ Filter bar: Cái này khác với cái Find ở trên nha. Cái này nó sẽ tìm nội dung có . Với các dự án tổ chức nhiều thư mục, có rất nhiều file, thì việc dùng filter là rất cần thiết.

+ Phần nằm giữa Navigator selector bar và Filter bar là phần thể hiện của các công cụ (nội dung của mấy cái Symbol, Find, Issue,…).

Editor: Đây là vùng hiển thị chính của chúng ta, nội dung các file đều hiển thị ở đây. Ở editor có nhiều công cụ khác, nhưng mình sẽ liệt kê 2 cái đó là Jump bars và Breakpoint gutter.

+ Jump bars: cái này y như là địa chỉ của file đang được hiển thị ở editor vậy, chọn địa chỉ khác thì nó sẽ mở file khác, giống giống như “cây thư mục” thu gọn vậy đó. Thay vì chọn tập tin từ Navigator thì mình chọn từ cái Jump bars này nè.

+ Breakpoint gutter: đây là thanh đặt các điểm debug, muốn debug ở đâu thì mình đặt các breakpoint ở đó thôi. Bạn nào chưa bao giờ debug thì tìm hiểu các debug đi nha, quan trọng lắm đấy, không debug được thì không làm ăn gì được đâu 😀 .

Debug: Đây là vùng hiển thị các thông tin debug nè. Là vùng hiển thị các kết quả in log của chúng ta đó, các error hay warning gì nếu có cũng sẽ hiện ở đây. Nói thêm về cách log kết quả các biến trong lúc debug một chút nha. Các bạn để ý màn hình debug chia làm 2 màn hình, cái bên trái là danh sách các biến tại điểm breakpoint, giá trị của nó cũng sẽ xuất hiện tại đó. Tuy nhiên, đôi lúc giá trị nó sẽ không được hiển thị, vậy ta phải dùng câu lệnh “po” để in log ra màn hình. Cụ thể là bạn gõ “po tên-biến” (ví dụ po sothunhat hoặc po tong) rồi enter (gõ câu lệnh này vào màn hình bên phải ấy), kết quả biến đó sẽ hiện ra. Đây cũng là một cách debug thường xuyên được dùng.

Inspector: Các thuộc tính của 1 file hay 1 control (ví dụ button, view,…) được hiển thị ở đây. Tuỳ theo file hay control mà phần inspector này sẽ hiển thị khác nhau (ví dụ như thông tin file, hoặc là các thuộc tính của control đó chẳng hạn,…). Mình chỉ giới thiệu chung về cái này, chi tiết nó nhiều cái hay lắm, nhưng để từ từ phía sau chúng ta thực hành sẽ thấy nha.

Library: Đại khái là nơi chứa 1 mớ các nút, view, code mẫu, tạo file… tùm lum thứ mà iOS cung cấp sẵn để chúng ta làm việc cho lẹ.

Phần giới thiệu về giao diện Xcode và các công cụ cơ bản là vậy thôi nha. Các bạn siêng nghịch một tí là sẽ quen với các công cụ này thôi. Cố gắng nhé các bạn ♥.

Để bắt đầu code được thì chúng ta tìm hiểu một chút về Objective-C (Obj-C) nha. Những điều mình viết ở phần này chỉ là kiến thức cơ bản nhất của Obj-C, chúng ta cần nắm chắc các quy tắc code cơ bản để đi tiếp cho nhanh nha.

Phần 2: Sơ lược Objective-C

Nội dung Objective-C cơ bản hơn mình sẽ nói ở phần tiếp theo nhé, vì thế ở đây mình sẽ giới thiệu một vài điều về Obj-C thôi.

Đầu tiên, vì Obj-C đi ra từ gốc là ngôn ngữ C, cho nên trong Obj-C thì ngôn ngữ C vẫn được sử dụng như bình thường, vẫn biên dịch ngon lành hết nha (nhưng mình nghĩ trong code Obj-C thì tốt nhất ta cứ nên dùng Obj-C, không nhảy lung tung qua lại giữa Obj-C và C, trừ vài trường hợp phải dùng tới C). Các kiểu code C như int, float,.. thì bên Obj-C là NSInteger, CGFloat,… Obj-C có hỗ trợ hết mấy kiểu này, không nên lúc thì dùng int, lúc thì NSInteger loạn xì ngầu 😛 .

Dưới đây là hình mô tả 1 đoạn Obj-C trong 1 project của Xcode:

Objective-C cơ bản

Tiếp theo là về cách xây dựng 1 class. Ở trên là nội dung của 2 file ViewController.h (nửa màn hình trái) và ViewController.m (nửa màn hình phải). Trong Obj-C thì 1 class thường được xây dựng bởi 2 file có phần mở rộng là .h.m. File .h là header file, trong C lẫn Obj-C. Còn .m là source file của Obj-C. Như vậy, các tên các phương thức sẽ được chứa ở file .h, còn nội dung các phương thức cụ thể sẽ được hiện thực tại file .m.

Mỗi câu lệnh trong Obj-C cũng được kết thúc bởi dấu chấm phẩy (;) như C đó nha.

Các bạn để ý những dòng màu xanh lá, đó là những dòng comment. Khi biên dịch thì trình biên dịch sẽ bỏ qua các dòng này. Trong Obj-C thì có 2 cách để comment, đó là dùng dấu // hoặc dùng cặp /**/. Việc comment code là một việc chúng ta rất hay quên, nhưng các bạn cố gắng tập thói quen comment code. Bởi vì 1 dự án các bạn làm chung với rất nhiều người khác nhau, mỗi người có phong cách và cách thức code khác nhau, không ai có thể hiểu code bạn đang viết gì (hoặc mất nhiều thời gian để mò 😛 ) nếu không comment. Hoặc đôi khi bạn cần xem lại đoạn code đó sau một khoảng thời gian dài, việc quên đi những gì mình viết cũng thường tình thôi. Vậy nên comment code, tóm tắt ý tưởng code là điều rất cần nha, cố gắng tập thói quen này nha.

Các bạn cũng đừng lo lắng về màu sắc của các đoạn code, cái này do Xcode điều chỉnh để dễ nhìn code mà thôi, mình có thể tuỳ chỉnh theo sở thích mỗi người nha 😉 .

Cách in log ra màn hình debug là cái mình sẽ nói tới tiếp theo. Trong Obj-C thì ta dùng câu lệnh NSLog(@”Nội dung muốn in log viết ở đây!”). NSLog cũng in các giá trị của các biến ra được nha các bạn, không phải chỉ in chuỗi không đâu nha. Tuy nhiên với các giá trị về thời gian thì cẩn thận kết quả khi in log tí nha, có thể sẽ sai lệch về múi giờ (chỉ sai khi log, chứ giá trị thực của biến vẫn đúng). Việc ghi log này là cách debug và xem luồng chạy của app mình 1 cách tốt nhất (quan điểm cá nhân của mình), bởi khi ứng dụng chạy thì chỉ có ghi log mới thấy được app đang chạy tới đâu, chưa kể gặp những đoạn code chạy bất đồng bộ (asynchrony) thì phải dùng log mới biết luồng chạy nó ra sao.

Chuỗi (String) trong Obj-C được bắt đầu với dấu @ và tiếp theo là cặp dấu “”

Phần này mình cũng chỉ mang tính chất giới thiệu sơ về code Obj-C thôi. Phần tiếp theo mình sẽ viết về Obj-C cơ bản. Nói là cơ bản nhưng rất là nhiều kiến thức nên mình cũng cố gắng lọc ra những gì đơn giản để làm quen từ từ. Có gì góp ý thì các bạn cứ thoả mái, cũng chia sẻ để cùng học hỏi. Vậy nha, hẹn gặp lại ở phần tiếp theo nha. BYE!

Các bạn copy nhớ ghi rõ nguồn của https://hocitvn.com giúp mình.

 

Leave a reply:

Your email address will not be published.

Site Footer