Xin chào mọi người! Nhắc đến Charles chắc chắn sẽ không thể nào bỏ qua Breakpoint rồi nhỉ? Đó chính là lí do mình tiếp tục chia sẻ ngay ở phần 2 này đây nè. Điều đầu tiên mà bạn không thể bỏ qua đó chính là 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 nha.
Với Breakpoint bạn sẽ làm gì? Bạn có thể chặn API để sửa Request và Response đấy. Và ở bài viết lần này, mình sẽ hướng dẫn Breakpoint cho API (/api/profile/) của app Metiz. Ở bài chia sẻ Phần 2 này, mình sẽ hướng dẫn bạn sửa Response cho API GET (/api/profile/) nè.
Đầu tiên bạn cần có đường dẫn của API bạn muốn chặn để sửa. Nếu bạn không chắc về đường dẫn bạn đã ghi nhớ, vậy hãy cứ cho chạy app/web đến khi nhận thấy API đó được gọi và hiển thị trên Charles. Ví dụ khi mình kích vào “Thông tin tài khoản” trên app Metiz thì sẽ gọi API GET (/api/profile/).
Ảnh 1: Màn hình TÀI KHOẢN CỦA TÔI
Khi kích vào value của trường URL như Ảnh 2, sẽ có cửa sổ khác mở ra. Tại đây sẽ cho phép bạn copy URL cho chính xác.
Ảnh 2: Copy URL của API
Tiếp đến chọn Proxy > Breakpoint Settings … như Ảnh 3.
Ảnh 3: Mở thanh công cụ tìm đến mục Breakpoint Settings …
Cửa sổ Breakpoints Settings sẽ xuất hiện như Ảnh 4. Chọn Enable Breakpoints. Và bấm chọn nút Add để thêm API muốn chặn.
Ảnh 4: Chọn Enable để bật Breakpoints
(Có thể tuỳ chọn enable/ disable Breakpoints ở màn hình chính bằng biểu tượng ở nơi mũi tên trong Ảnh 5 bên dưới.)
Ảnh 5: Tuỳ chỉnh Enable/ Disable Breakpoints tại màn hình chính
Lúc này cửa sổ Edit Breakpoint sẽ hiện ra. Điền tên đường dẫn bạn muốn chặn vào trường Host. Chọn phương thức GET/ POST của API đó. Khi đó, URL của API sẽ tự phân vào những trường tương ứng.
Ảnh 6: Cửa sổ Edit Breakpoint
Chọn Request nếu muốn chặn Request, chọn Response nếu muốn chặn response. Có thể chọn cả Request và Response nếu muốn chặn cả 2.
Ảnh 7: Chọn method GET/POST và Request/Response cho API
Khi đó API sẽ được đưa vào list API của Breakpoint. Có thể select hoặc unselect chỗ mũi tên mình chỉ bên Ảnh 8 để tuỳ chọn chặn/ bỏ chặn các API trong danh sách. Sau khi cài đặt xong chọn OK để hoàn thành.
Ảnh 8: Danh sách những API Breakpoint
Giờ đây, hãy quay trở lại màn hình chính và cho chạy trên app/ web về đoạn API bạn muốn Breakpoint. Khi gọi đến API đó, màn hình bên dưới sẽ hiện ra, bấm vào Edit Response (vì API này mình chọn chặn Response, nếu chặn Request thì sẽ có tab Edit Request).
Ảnh 9: Màn hình khi gọi đến API đang Breakpoint
Sau khi chọn tab sẽ hiển thị màn hình tiếp theo, sẽ có nhiều định dạng để xem phần response trả về, ở đây mình sẽ chọn định dạng JSON Text. Lúc này vì đã chặn API nên dữ liệu trên màn hình APP sẽ không có vì chưa có thông tin từ API đổ ra.
Ảnh 10: Màn hình trên APP khi đang Breakpoint API
Ảnh 11: Tab Edit Response và định dạng muốn xem (JSON Text)
Giờ thì đã đến lúc bạn thấy được công dụng chính của breakpoint nè. Hãy chỉnh sửa những thông tin bạn muốn thay đổi trong phần dữ liệu trả về. Ở ví dụ lần này, mình đã thay đổi dữ liệu cho trường “birth_date”, “full_name”, “phone”, “personal_id”, “city”, “district” như Ảnh 12.
Ảnh 12: Edit dữ liệu trả về Response
Sau đó hãy bấm chọn “Execute” để thực thi. Lúc này trên màn hình app sẽ hiển thị những thông tin theo phần Response mà đã thay đổi như ảnh bên dưới.
Ảnh 13: Màn hình App sau khi Edit Response
Vậy là ở Phần 2 này mình đã hướng dẫn bạn cách Breakpoint cho Response. Ở Phần 3 mình sẽ chia sẻ thêm bài về Breakpoint cho Request cũng đơn giản như Response thôi. Cảm ơn bạn và cùng chờ đón xem tiếp nhé!