Android Bài 6: Dạo Qua Ứng Dụng TourNote & Thực Hành Debug Ứng Dụng

Posted by

baner6.png

Được chỉnh sửa ngày 1/1/2017.

Chào mừng các bạn quay trở lại với bài học số 6 trong chương trình học Android của Yellow Code Books

Hẳn các bạn đã có một chuỗi dài chờ đợi diện mạo của ứng dụng mà chúng ta sắp sửa xây dựng – Ứng dụng TourNote Bài hôm nay sẽ “vén màn” bí mật đó, và từ đây về sau chúng ta cùng từng bước xây ứng dụng này trong suốt các bài thực hành nhé.

Dạo Qua Ứng Dụng TourNote

Main Screen.png

Như bạn có thể thấy, ứng dụng TourNote của bạn, đúng rồi ứng dụng này sẽ là của bạn, nếu bạn cùng với mình đi đến cuối các bài giảng của chương trình Android này, ứng dụng của chúng ta sẽ có giao diện hiện đại theo chuẩn Material Design của Android.

Có một điều thú vị là trong khi thông tin về TourNote đang chuẩn bị trình làng cho mọi người ở bài hôm nay, thì Google cũng vừa tung ra một ứng dụng liên quan đến du lịch, đó là Google Trip. Có thể nói là trùng ý tưởng!!! Để thêm phần thú vị nữa thì bạn có thể xem TourNote là một bản thu nhỏ của Google Trip đi, mình cũng không chắc chúng sẽ giống nhau bao nhiêu phần trăm, nhưng có vẻ chúng giống nhau ở ý tưởng giúp ghi chú lại những gì bạn đã trải qua và sẽ được bạn thực hiện trong chuyến du lịch nào đó trong tương lai. Bạn vẫn có thể học hỏi Google Trip để bổ sung thêm cho TourNote của mình được hoàn hảo hơn cả các bài thực hành này của mình.

Có thể nói thêm là TourNote sẽ như một quyển sổ tay, giúp người dùng của bạn sưu tầm các địa chỉ ăn uống, du lịch, tham quan,… Đặc biệt hơn, bạn sẽ tận dụng dịch vụ map của Google để lưu vị trí, gợi nhắc người dùng khi ở gần vị trí nào đó,…

Trước mắt, không như Google Trip, ứng dụng TourNote sẽ được xây dựng dưới dạng offline, tức mọi thứ sẽ được lưu trữ trên thiết bị Android của bạn (hoặc máy ảo). Điều này cũng có nghĩa là nếu bạn xóa app, hay xóa data của thiết bị, thì mọi dữ liệu sẽ bị mất :(. Bạn có tùy chọn share các note của mình lên các công cụ online khác như Facebook, Twitter, hay gửi cho bạn bè qua email,… để lưu giữ lại. Mình hi vọng là ứng dụng sẽ có khả năng lưu trữ online ở mục nâng cao cuối chương trình.

Hiện tại như hình trên, mình có thiết kế sẵn 3 màn hình chính. Bao gồm màn hình Home (màn hình đầu tiên) chứa các chủ đề (là các tab ở trên màn hình) và danh sách các note theo từng chủ đề đó. Màn hình thứ hai là khi người dùng nhấn vào nút   fab, khi đó sẽ có các tùy chọn cho người dùng thêm/sửa Chủ Đề hay Ghi Chú. Cuối cùng là màn hình Thêm Ghi Chú. Các màn hình còn lại sẽ xuất hiện từ từ khi chúng ta đi vào chi tiết bài thực hành.

Trước khi đi vào xây dựng ứng dụng, bạn nhất thiết phải biết debug ứng dụng cái đã. Để biết debug ứng dụng là gì thì mời bạn xem qua phần dưới đây nhé.

Thực Hành Debug Ứng Dụng

Debug Là Gì?

Debug là một khái niệm trong lập trình, nó bao gồm 2 hành động, đó là Tìm Kiếm LỗiSửa Lỗi. Thông thường khi có bất kỳ Lỗi nào phát sinh xảy đến cho ứng dụng của bạn – Tất nhiên Lỗi không thể do chủ ý của một người lập trình giỏi giang như bạn được, mà Lỗi xuất hiện bất ngờ và rất khó lường – Khi đó việc Tìm Kiếm xem Lỗi xảy ra do đâu là rất quan trọng. Sau khi tìm thấy Lỗi, bạn phải sửa được Lỗi đó. Kết hợp cả 2 quá trình Tìm Kiếm – Sửa Lỗi lại chúng ta tạo ra khái niệm Debug.

Vậy có tất cả các cách debug gì mà Môi Trường Lập Trình Android hỗ trợ cho chúng ta? Hãy cùng nhau tìm hiểu các cách sau.

Debug Bằng Cách Ghi Log

Log sẽ được hiển thị ở tab logcat trong cửa sổ Android Monitor. Nếu các bạn còn nhớ Bài 3, phần Tổng Quan Về Project có nhắc đến Tool windows (các cửa sổ công cụ), thì hôm nay chúng ta làm quen với Android Monitor – một trong các cửa sổ công cụ đó.

Screen Shot 2016-09-19 at 22.08.33.png

Trước khi đi vào cách thức debug với log, chúng ta làm quen với logcat một chút. Như bạn thấy ở trên, logcat chứa các dòng log liên quan đến hệ thống, và cả những dòng log từ phía ứng dụng của bạn nữa, là do chủ động bạn show ra hay được xây dựng sẵn từ các thư viện cấp thấp hơn. Logcat hiển thị log tức thời theo thời gian thực (realtime), và còn được lưu giữ lại nữa, nên chúng ta hoàn toàn có thể tận dụng loagcat để debug một ứng dụng.

Ẩn Hiện Android Monitor

Logcat được hiển thị trong cửa sổ Android Monitor, nhưng nếu bạn không thấy cửa sổ này đâu cả, thì hãy tìm và nhấn vào am-icon.png ở dưới cùng của cửa sổ chính.

Nhấn vào am-icon.png một lần nữa để ẩn cửa sổ này đi.

Hoặc bạn cũng có thể vào menu View > Tool Windows > Android Monitor để ẩn/hiện cửa sổ này.

Cách Ghi Log

Khi muốn ghi log, bạn hãy chọn một trong các hàm sau đây, việc phân biệt log theo các hàm ngoài mục đích log của bạn sẽ được xuất hiện đúng màu chủ đạo để dễ tìm trong một rừng log, thì bạn còn có thể lọc (filter) các log theo từng dạng mà chúng ta sẽ nhắc đến ở dưới. Nên nhớ là nếu bạn ghi log này ở đâu trong code, thì khi hệ thống thực thi đến dòng code đó, log của bạn sẽ xuất hiện ngay lập tức ở cửa sổ logcat. Các hàm ghi log được liệt kê như sau.

Để in ra log dạng lỗi (error)

Log.e(String, String);

Để in ra log dạng cảnh báo (warning)

Log.w(String, String);

Để in ra log kiểu cung cấp thông tin (information)

Log.i(String, String);

Để in ra log cho các nhu cầu debug

Log.d(String, String);

Và log cho các nhu cầu khác (verbose)

Log.v(String, String);

Mặc dù mình không tìm thấy bất kỳ sự ràng buộc nào cho việc lựa chọn các dạng ghi log trên đây, tất cả là nằm ở bạn, nhưng có một số lời khuyên, chẳng hạn như bạn đừng nên show ra các log dạng verbose hay debug khi tung ứng dụng ra thị trường, nó chỉ được dùng cho mục đích kiểm tra trong quá trình xây dựng ứng dụng mà thôi. Trong khi đó các log dạng error, warning hay information thì hoàn toàn được phép xuất xưởng.

Như bạn thấy ở trên, hàm log nào cũng có 2 tham số truyền vào, tham số thứ nhất cho phép bạn đặt một nhãn gọi là tag, tag dùng để gom nhóm hay phân biệt các loại log với nhau; Tham số thứ hai là nội dung của log mà bạn muốn in ra. Chú ý tag sẽ được dùng đi dùng lại nhiều lần nên tốt nhất nên khai báo chúng là một biến static để tiện cho việc dùng lại.

Thực Hành Ghi Log Cho TourNote

Đến đây bạn mới bắt đầu code cho ứng dụng của mình, dù cho là các dòng code thử nghiệm, bạn sẽ phải xóa đi ở bài sau. Chú ý từ bây giờ về sau, nếu bạn thấy các nội dung được bao quanh bởi một khung màu vàng như thế này, thì đó là lúc bạn phải mở ứng dụng TourNote lên để thực hành. Điều này giúp bạn dễ dàng tra cứu các bước mà mình đã làm ở từng bài giảng khác nhau.

Với Android Studio đang mở, bạn tìm đến class MainActivity.java nằm trong project TourNote bạn đã tạo ở Bài 3 và click đúp vào để mở class này ra. Nếu không biết mở class này ở đâu, bạn hãy tìm trong cửa sổ Project ở bên trái màn hình. Nếu không thấy cửa sổ Project ở đâu, bạn có thể click vào menu View > Tool Windows > Project để hiện nó lên. Class MainActivity.java sẽ xuất hiện ở cửa sổ Project như một trong hai hình sau, tùy vào cách thức hiển thị mà bạn chọn (bạn chú ý thấy 2 cái tên AndroidProject là 2 cách hiển thị cây thư mục nằm ở phía trên của cửa sổ này).

Group 2.png

Với class MainActivity.java đã mở, bạn hãy gõ thêm các dòng code sau, đầu tiên là dòng code liên quan đến khai báo tag để bên ngoài hàm onCreate(), tiếp đến là các hàm ghi log bạn để ở trong hàm onCreate() và để ở các dòng cuối trước khi đóng ngoặc kết thúc nhé. Nếu bạn nào lần đầu làm quen với lập trình và không hiểu lý do vì sao chúng ta code như vậy thì hãy cùng tìm hiểu ở các bài sau, hoặc bạn có thể xem qua các bài học về lập trình Java. Code của bạn sau khi thêm vào (các dòng mới được tô sáng) sẽ như sau.

public class MainActivity extends AppCompatActivity {
 
    private static final String TAG = "TourNote_MainActivity";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Log.e(TAG,"This is an Error log");
        Log.w(TAG,"This is a Warning log");
        Log.i(TAG,"This is an Information log");
        Log.d(TAG,"This is a Debug log");
        Log.v(TAG,"This is a Verbose log");
    }
}

Giờ bạn hãy chạy ứng dụng lên máy ảo hay máy thật. Khi màn hình TourNote vừa hiện lên trên thiết bị, bạn tìm đâu đó trong cửa sổ logcat sẽ thấy các dòng log mà bạn vừa code lúc nãy như sau.

Screen Shot 2016-09-22 at 11.25.55.png

Debug Qua Việc Phân Tích Stack Trace

Nói đến debug ứng dụng thì không thể không nhắc đến Stack Trace. Stack Trace là một tập hợp các dòng log đặc biệt, các dòng log này cũng được xuất hiện trong cửa sổ logcat như bao dòng log khác. Nhưng Stack Trace chỉ xuất hiện khi ứng dụng của bạn bị crash – Một trạng thái dừng đột ngột của ứng dụng vì bất cứ một lỗi nào đó xảy ra mà hệ điều hành không có khả năng cứu vãn, khi đó hệ điều hành tự động đóng ứng dụng của bạn lại và để lại một hộp thoại thông báo rằng ứng dụng đã bị dừng.

Stack Trace khi xuất hiện giống như sau.

android-monitor-logcat_2-2_2x.png

Bạn có thể thấy Stack Trace hiển thị danh sách các hàm có liên đới đến crash, đi kèm theo đó là tên file và dòng nào trong file đó gây ra crash. Bạn có thể nhấn vào bất cứ dòng nào có tô xanh, khi đó bạn được dẫn đến đúng file và dòng lỗi đó.

Nhấn vào Up the stack trace logcat-arrow-up.png hay Down the stack trace logcat-arrow-down.png để di chuyển nhanh lên/xuống các Stack Trace trong logcat.

Thực Hành Tạo Ra Stack Trace Và Tương Tác Với Nó

Nên nhớ là mục thực hành này mang tính giúp bạn làm quen với Stack Trace để sau này khi ứng dụng của bạn bị crash thì bạn sẽ biết cách tìm đến dòng lỗi một cách dễ dàng như thế nào.

Với MainActivity.java đang được mở, bạn thêm vào dòng code được tô sáng như sau.

public class MainActivity extends AppCompatActivity {
 
    private static final String TAG = "TourNote_MainActivity";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Log.e(TAG,"This is an Error log");
        Log.w(TAG,"This is a Warning log");
        Log.i(TAG,"This is an Information log");
        Log.d(TAG,"This is a Debug log");
        Log.v(TAG,"This is a Verbose log");
 
        throw new RuntimeException("This is a crash");
    }
}

Giờ đây khi bạn chạy lại ứng dụng… Booom! App bị crash khi vừa chạy xong. Và để ý ở logcat bạn sẽ thấy Stack Trace với nội dung crash là “This is a crash”, và MainActivity.java:23 được tô sáng, có nghĩa là lỗi crash xảy ra ở class MainActivity.java dòng 23. Bạn có thể click vào nơi được tô sáng, bạn sẽ được dẫn đến tận nơi như mình đã nói.

Screen Shot 2016-09-22 at 13.39.02.png

Debug Bằng Công Cụ

Ngoài việc xem log như trên, Android Studio còn hỗ trợ các bạn một công cụ debug hiệu quả nữa. Với công cụ này bạn có thể tạo ra các breakpoint (điểm dừng) trên source code. Khi ứng dụng của bạn chạy đến nơi có brakpoint, nó sẽ bị chặn lại, và công cụ debug của Android Studio sẽ giúp bạn xem các biến, các giá trị ngay tại thời điểm đó, thậm chí bạn có thể chụp hình, hay quay phim lại màn hình ứng dụng của bạn. Và cho đến khi bạn chưa cho phép, thì Android Studio vẫn dừng mãi ở breakpoint đó đến khi nào bạn nhấn nút đi tiếp. Trong một project bạn có thể đặt bao nhiêu breakpoint tùy thích. Và breakpoint chỉ hoạt động trong chế độ chạy debug mà thôi, các cách thực thi ứng dụng ở chế độ debug được liệt kê dưới đây.

Có 2 cách để thực thi ứng dụng ở chế độ debug.

1. Nếu ứng dụng của bạn đang chạy, nhấn vào nút toolbar-attach-debugger.png trên thanh công cụ sẽ giúp ứng dụng của bạn chuyển ngay sang chế độ debug, giữ nguyên màn hình và các chức năng đang chạy, mà không cần phải khởi động lại.
2. Nếu ứng dụng đang tắt, bạn hãy nhấn vào nút toolbar-debug.png để ứng dụng được chạy lên, tương tự như khi chạy với chế độ bình thường nhưng lại sẵn sàng để debug.

Thực Hành Debug Bằng Công Cụ

Với file MainActivity.java được mở. Trước hết chúng ta phải tạo ra một breakpoint để buộc Android Studio dừng lại tại đó khi chế độ debug được khởi động. Để tạo breakpoint, rất đơn giản, bạn chỉ cần nhấn chuột vào thanh bên trái của cửa sổ editor, ngay dòng bạn muốn dừng lại, như hình sau.

Screen Shot 2016-09-22 at 14.01.20.png

OK giờ mình chọn giải pháp khởi động lại ứng dụng bằng chế độ debug, để làm vậy bạn nhấn vào nút toolbar-debug.png trên thanh công cụ. Ứng dụng của bạn sẽ được khởi động lại trong giây lát.

Sau khi ứng dụng khởi động xong, bạn sẽ thấy chẳng có gì được vẽ lên màn hình thiết bị hết, đơn giản vì Android Studio đã phát hiện thấy breakpoint bạn vừa đặt, khi Android chuẩn bị “vẽ” ứng dụng của bạn ra màn hình thì đã bị chặn lại rồi.

Nhìn lại code editor thì thấy dòng có breakpoint được tô sáng, có vài thông tin màu xám xuất hiện trong code editor này, đó là dữ liệu được tạo ra ở thời điểm biên dịch đến breakpoint của bạn, và công cụ debug hiển thị nó lên cho bạn xem luôn.

Screen Shot 2016-09-22 at 14.09.31.png

Cũng với hình trên, ở phía dưới màn hình bạn sẽ thấy cửa sổ Debug tự động bật ra. Với cửa sổ Debug này bạn có thể nhấn Screen Shot 2016-09-22 at 14.15.53.png để ứng dụng tiếp tục chạy và sẽ dừng lại ở breakpoint kế tiếp (trong trường hợp của bài thực hành này chỉ có một breakpoint thôi nên nếu nhấn vào nút này, ứng dụng sẽ được chạy tiếp như bình thường), hoặc bạn có thể nhấn Screen Shot 2016-09-22 at 14.18.02.png để dừng chế độ debug. Bạn cũng có thể dùng dàn nút điều khiển như dưới đây, ý nghĩa của chúng theo thứ tự từ trái sang phải như sau.

Screen Shot 2016-09-22 at 14.23.03.png

– Step Over: nhảy qua dòng kế tiếp, nếu dòng đó là một hàm thì nhảy qua hàm đó. Dùng chức năng này khi bạn muốn debug tiếp các dòng tiếp theo với các biến được phát sinh sau đó, để tìm ra chính xác dòng nào bị lỗi.
– Step Into: nhảy vào trong hàm nào đó, nếu vệt sáng đang sáng ở hàm đó. Dùng chức năng này khi bạn nghi ngờ lỗi xảy ra bên trong hàm.
– Step Out: ra khỏi hàm. Dùng chức năng này khi bạn chắc rằng không còn lỗi trong hàm này nữa, bạn nhanh chóng ra khỏi hàm để kiểm tra các dòng tiếp theo sau hàm này.

Bạn có thể dùng cửa sổ Variables để xem các biến được khai báo đến thời điểm đặt breakpoint, giá trị của từng biến như thế nào.

Screen Shot 2016-09-22 at 14.09.31.png

Bạn cũng nên thử dùng cửa sổ Watches để xem các biến hay các hàm mà bạn nghi là bị lỗi. Khi nhấn vào dấu Screen Shot 2016-09-22 at 14.35.43.png ở cửa sổ này và gõ vào tên biến hay tên hàm kèm các tham số, bạn sẽ có kết quả của sự kiểm chứng đó. Chẳng hạn mình gõ TAG, là biến static đã được khai báo trong ví dụ ở trên với nội dung khai báo là “TourNote_MainActivity”, bạn thử nhìn Watches hiện ra mà xem, thật tuyệt!!!

Screen Shot 2016-09-22 at 14.33.18.png

Bạn vừa xem qua tất cả những cách debug lỗi, bạn hãy thực hành tất cả các cách này nhé, vì mình cũng đang dùng chúng và thực sự đó là những cách hiệu quả giúp chúng ta nhanh chóng tìm ra lỗi phát sinh ở đâu trong rừng code.

Cảm ơn bạn đã đọc các bài viết của Yellow Code Books. Bạn hãy đánh giá 5 sao nếu thấy thích bài viết, hãy comment bên dưới nếu có thắc mắc, hãy để lại địa chỉ email của bạn để nhận được thông báo mới nhất khi có bài viết mới, và nhớ chia sẻ các bài viết của Yellow Code Books đến nhiều người khác nữa nhé.

Bài Kế Tiếp

Bạn sẽ biết được các kiến thức cơ bản về việc thiết kế giao diện. Thực hành việc xây dựng màn hình chính cho TourNote.

Advertisements
Rating: 4.7/5. From 15 votes.
Please wait...

6 comments

  1. Chào Bạn. Mình thấy những thắc mắc nếu nói bằng lời sẽ dài và diễn đạt không hết ý muốn nói. Mình muốn chụp trang kết quả thực hiện công việc và gửi cho Bạn để trao đổi. Vậy Mình sẽ gửi đến địa chỉ nào Bạn có thể cung cấp để Mình trao đổi cho tiện hơn nhé. Cám ơn Bạn nhiều.

  2. Phần Ghi Log , em thêm các dòng đó vào thì nhấn Run thì máy ảo không thấy hiện TourNote mà chỉ ở màn hình ngoài cùng. Bỏ đi lại hiện bình thường. Lúc thêm các dòng code đấy thì ở logcat cũng không có mấy dòng anh bảo . Không biết sao bị sao nữa @@~

    1. Bài học này có nhiều dòng code lắm bạn, ngoài các dòng ghi log ra thì còn dòng gây crash ứng dụng nữa, không biết bạn Hiếu dùng thử dòng code nào thế. Các dòng ghi log là các dòng Log.x(), còn dòng crash là throw new RuntimeException() nhé.

Gửi phản hồi