Xin chào mọi người! Đã lâu mình không ra bài viết mới nhỉ, hôm nay có thời gian nên mình lại chia sẻ thêm kiến thức mới nữa nè. Đó chính là Charles. Một trong những công cụ hữu ích trong việc kiểm thử API.
Đôi khi trong lúc test web/ app bạn muốn check gọi API gì, thứ tự gọi API như thế nào, Request và Response gồm những gì. Thì bạn tin mình đi, Charles sẽ giúp bạn làm việc đó. Để không phải dài dòng, mình đi thằng vào nội dung chính luôn nhé.
Bước 1: Đầu tiên, bạn cần phải cài ứng dụng về máy tính theo link này https://www.charlesproxy.com/download/
Charles có tốn phí nhưng bạn vẫn có thể dùng thử miễn phí trong 30 ngày, trong thời gian đó đủ để bạn có thể vọc nó cho quen rồi đấy.
Bước 2: Sau khi cài xong bạn hãy mở ứng dụng với giao diện sau: https://www.charlesproxy.com/download/
Ở bài viết này mình sẽ hướng dẫn sử dụng Charles để bắt API trên điện thoại nhé!
Bước 3: Để kết nối bạn cần phải truy cập cùng 1 wifi cho cả máy tính và điện thoại bạn nhé. Tiếp theo hãy lấy IP trên máy để thiết lập proxy trên điện thoại. Cách lấy khá đơn giản, hãy vào Help > Local IP Address
Khi đó, cửa sổ mới xuất hiện, IP tại cửa sổ này sẽ sử dụng để nhập vào phần thiết lập Proxy trên điện thoại. IP trong trường hợp của mình là 192.168.1.59
Bước 4: Tiếp đến sẽ kiểm tra và thiết lập Port trên máy tính nữa nè. Click vào Proxy > Proxy Settings
Ở đây mình sẽ điền port là 8888
Bước 5: Sau khi đã thực hiện bước 1 đến 4. Giờ bạn hãy lấy điện thoại ra và kết nối với Charles nào. Ở đây mình sẽ hướng dẫn với iOS.
Mở màn hình Setting cho Wifi và chọn vào biểu tượng như mình chỉ trong ảnh dưới để xem chi tiết.
Chọn Định cấu hình proxy > Thủ công. Sau đó nhập vào IP và Port trên máy tính tại Bước 3 và 4 ở trên. Chọn Lưu.
Bước 6: Sau khi lưu sẽ xuất hiện pop-up trên Charles như ảnh dưới:
Kích chọn “Allow” để cho phép Charles kết nối với điện thoại.
Nếu chưa thấy hiển thị thì hãy ở trình duyệt web trên điện thoại lên (Chrome, safari, …), còn nếu vẫn tiếp tục chưa hiển thị thì bạn có thể vào trong để thiết lập IP như sau:
Vào Proxy > Access Control Settings
Khi đó sẽ xuất hiện cửa sổ mới Access Control Settings. Bấm chọn “Add” để thêm IP của điện thoại muốn kết nối vào và bấm OK để lưu.
IP của điện thoại bạn có thể xem ở đây:
Bước 7: Xong giờ hãy mở app bất kì có sử dụng API để xem. Bạn sẽ thấy có gọi API nhưng sẽ “unknown” đúng không nào. Đó là vì bạn vẫn chưa cài đặt chứng chỉ đấy. Nên hãy vào trình duyệt trên điện thoại và truy cập với link “chls.pro/ssl” để download. Tiếp tục chọn “Cho phép” để tải về.
Sau khi tải về xong, hãy mở Setting trong điện thoại lên. Lúc đó sẽ hiển thị “Đã tải về hồ sơ“, bấm vào đó sẽ chuyển bạn đến màn hình “Cài đặt cấu hình“. Hãy bấm “Cài đặt” để cài đặt chứng chỉ.
Sau khi cài đặt xong sẽ đổi trạng thái từ “Chưa xác minh” sang “Đã xác minh” và bấm “Xong“.
Tiếp tục trở lại màn hình Setting của điện thoại và vào Cài đặt chung > Giới thiệu > Cài đặt tin cậy chứng nhận. Nếu thấy Chứng chỉ Charles đang tắt thì hãy Bật lên. Vậy là xong phần kết nối.
Bước 8: Giờ hãy quay trở lại Charles và bấm vào biểu tượng cây chổi để xoá Session. Sau đó vào app bất kì trên điện thoại có dùng đến API, chẳng hạn như ở đây mình sẽ truy cập vào app của rạp chiếu phim Metiz.
Bước 9: Khi mở app Metiz lên, Charles đã bắt được những API như ảnh dưới:
Ở tab Overview bạn có thể xem được API mình đang xem là API GET (/api/movie/showing/?device_width=375) với Status Code trả về là 200. Và cùng những thông tin khác nữa.
Bạn cũng có thể chuyển sang tab Contents để xem Request và Response với các định dạng khác nhau, như bên dưới mình đang xem với định dạng JSON Text.
Và sau khi mình login bằng account đã đăng kí vào App thì Charles cũng có thể bắt được API GET (/api/profile/) với những thông tin của mình đã đăng kí như tên, ngày sinh, email, số điện thoại, giới tính, địa chỉ, …
Tương tự như khi mình update profile trên app. thì Charles cũng bắt được việc gọi API PUT (/api/profile/).
Vậy là qua bài viết phần 1 lần này mình đã hướng dẫn các bạn cách kết nối điện thoại (iOS) với Charles và cũng như xem được một số thông tin của API. Bạn cũng có thể sử dụng Charles để check xem API trên chính trình duyệt web của máy tính và cả Android nữa đấy. Ở phần sau mình sẽ chia sẻ thêm tính năng khá hay của Charles đó là Breakpoint. Cùng chờ và đón xem nhé. Cảm ơn mọi người đã dành thời gian theo dõi!
4 comments
Great content! Super high-quality! Keep it up! 🙂
[…] kết nối device với Charles, để làm được điều đó hãy qua trở lại theo dõi Phần 1 bạn […]
Hữu ích! Thanks tác giả.
Cảm ơn độc giả. Cùng theo dõi tiếp những bài viết hay hơn nha.🥰