Phần 3: Đồng bộ lịch của ứng dụng với Google Calendar

Part 3: Đồng bộ lịch của ứng dụng với Google Calendar

Tác giả: Phạm Huy Hoàng

Mục đích: Tích hợp bộ API của Google Calendar trong phần 1 và phần 2 đã viết vào ứng dụng

Yêu cầu: Hoàn thành phần 1 và phần 2 của bài hướng dẫn

Chúng ta tiếp tục quay lại với ứng dụng đã viết trong phần 1

Chúng ta bổ sung thêm chức năng cho phép xóa 1 lịch đã tạo.

Sửa lại mapping trong file hbm

Thêm action trong Servlet

Bổ sung thêm link delete trong file jsp

Ngoài ra, chúng ta bổ sung link navigation trong calendarDetail và eventDetail

Clean & Build chương trình.

Nhấn Delete Test Calendar

Trang Calendar Detail và Event Detail

Chúng ta bắt đầu tích hợp API đã viết trong phần 2

Bước 1: Add các file thư viện.

Chúng ta đã add thư viện gson, do đó chỉ cần add thêm các file thư viện Http của Apache:

· commons-logging-1.1.3.jar

· fluent-hc-4.3.1.jar

· httpclient-4.3.1.jar

· httpcore-4.3.jar

Bước 2: Chuyển 2 file NetUtils và APIWrapper vào package sample.org

Bước 3: Copy page sample.jsonObj vào source package. Cấu trúc project hiện tại như sau:

Tiếp theo, chúng ta sẽ làm chức năng lấy authorize code từ user.  Nguyên lý hoạt động:

· Kiểm tra field API Token của user, nếu trường này bằng null thì hiện button để request authorize code về.

· Authorize code sẽ được trả về 1 servlet. Trong servlet này, từ authorize code, chúng ta gửi reuqest lên server để lấy Refresh Token.

· Refresh token được lưu xuống vào trường API Token của user. Mỗi khi user cần đồng bộ, ta đổi refresh token này ra access token, tiến hành gọi API.

Quá trình này khá phức tạp, quý vị đọc kĩ vào làm theo tutorial

Bước 1: Thêm hàm update trong AccountDAO và hàm Get trong EventDAO

Bước 2: Chỉnh sửa AccountServlet, đưa AuthUrl vào request để show trong file jsp.

Bước 3: Tạo 1 AuthorizeServet, servlet này sẽ nhận authorization code, đổi thành refresh token, ghi xuống db.

Để sau khi user bấm chấp nhận, code sẽ được chuyển vào servlet này, ta sửa lại redirect url trong file wrapper

Tiếp theo, ta bổ sung url trong file index.jsp

Clean & build, ta có

Khi user bấm vào “Sync with google calendar”.

Để sửa lỗi này, chúng ta phải vào lại Google API Console, add thêm redirect Url. (Cách vào API Console, xem lại bài 2).

Bấm dấu +, điền thêm redirect url, bấm generate

Lưu ý là Client Secret đã bị thay đổi, ta cóp client secret này thay trong APIWrapper. Nhớ xem kĩ ClientID và ClientSecret của 2 bên có trùng khớp nhau hay ko?

Clean & Build lại, ta có:

Bấm vào Sync with Google Calendar

Bấm Chấp nhận

(Để ý đoạn Url).

Xem dưới database, ta đã lưu được Refresh Token cho user. Mỗi khi muốn gọi Google API, ta sẽ dùng Refresh Token này để request Access Token cho việc gọi

Nửa đầu của bài tutorial đã xong. Quý vị có thể nghỉ ngơi 5p trước khi tiếp tục nửa sau.

Quý vị nên bật 2 tab song song, 1 tab là ứng dụng, 1 tab là Google Calendar để tiện so sánh

Ta tạo sẵn 2 calendar, với 1 số event để test

Chúng ta tạo SyncServlet, việc đồng bộ diễn ra trong servlet này

Sửa lại link trong file index.jsp

LƯU Ý: NẾU ENDTIME < BEGINTIME, GOOGLE CALENDAR SẼ BÁO LỖI 400 BAD REQUEST, DẪN TỚI VIỆC SYNC BỊ LỖI. QUÝ VỊ VUI LÒNG VALIDATE NGÀY THÁNG NHẬP VÀO ĐỂ TRÁNH LỖI TRÊN. NẾU BỊ LỖI KHÔNG SYNC ĐƯỢC, HÃY XEM LẠI BEGIN DATE VÀ ENDDATE CỦA CÁC EVENT.

Google Calendar và DB trước khi sync

Clean and build, bấm sync manual

Vì chưa hiện thực cơ chế bất đồng bộ, quý vị vui lòng chờ khoảng 30s để hệ thống sync

Database và Google Calendar sau khi sync. (Nhớ refresh google)

Chúng ta tiếp tục test, sửa thời và tên của 1 event, sau đó sync lại

Bấm Update, sau đó bấm request manual sync.

So sánh google calendar trước và sau khi sync

Việc gọi hàm đồng bộ phải được thực hiện ngay khi user tạo calendar, xóa calendar, chứ không phải đợi tới lúc manual sync. Chúng tôi sẽ làm mẫu việc đồng bộ lúc tạo, xóa calendar.

Viết thêm hàm deleteCalendar bên APIWrapper

Thêm đoạn gọi google API khi insert và delete 1 calendar

Clean & Build

Bấm Add

Xóa Test Calendar

Chúc mừng quý vị đã hoàn thành bài tutorial thứ 3, cũng là bài cuối cùng của series Sync Google Calendar. Qua bài viết này, hi vọng quý vị có thể áp dụng vào để giải quyết vấn đề đồng bộ Google Calendar cho ứng dụng J2EE.

Còn một số vấn đề để cải tiến ứng dụng của chúng ta, chúng tôi mạn phép gợi ý để quý vị tham khảo + tự làm:

· Việc đồng bộ phải sử dụng cơ chế Asynchonous, tức là tạo 1 thread riêng để chạy, user không phải đợi lâu.

· Các hàm đồng bộ event như InsertEvent, updateEvent ... cũng tương tự như calendar, quý vị cũng làm tương tự như Insert Calendar, Delete Calendar.

Việc đồng bộ ngược từ Google Calendar xuống ứng dụng, đòi hỏi phải có domain. Quý vị có thể tham khảo theo link dưới đây.

https://developers.google.com/google-apps/calendar/v3/push

Hẹn gặp lại quí vị trong các chủ đề khác