Trong hướng dẫn này, chúng tôi sẽ xem xét kỹ hơn cách bạn có thể tích hợp Bubble và AppMaster . Giả sử rằng giao diện người dùng của ứng dụng đang được phát triển được tạo trong Bubble , nhưng khả năng làm việc với giao diện người dùng cuối của nó không đủ và bạn muốn sử dụng chức năng AppMaster .
Hãy tìm cách:
- Sử dụng AppMaster làm cơ sở dữ liệu cho Bubble
- Gửi yêu cầu API đến Appmaster
- Thực hiện xác thực người dùng
- Sử dụng mã thông báo ủy quyền trong tiêu đề yêu cầu
Định cấu hình API Connector
Trước hết, bạn cần tạo khả năng gửi các yêu cầu API bên ngoài từ Bubble . Để thực hiện việc này, bạn cần thêm plugin API Connector .
Hãy ngay lập tức cấu hình nó để gửi một yêu cầu xác thực đến AppMaster . Nhiệm vụ của chúng tôi là gửi thông tin đăng nhập và mật khẩu để nhận mã thông báo ủy quyền phản hồi. Chúng tôi sẽ sử dụng điểm cuối tiêu chuẩn được tạo trong mọi dự án theo mặc định - POST /auth/ (Auth: Authentication) . Thông tin đầy đủ về nó, với địa chỉ chính xác để yêu cầu trong dự án của bạn, có thể được lấy từ Swagger .
Để định cấu hình API Connector , hãy nhấp vào nút Add Another API và đặt các thông số yêu cầu sẽ được sử dụng. Các thông số chính là:
- Phương thức yêu cầu. POST
- URL. Giống như Request URL từ Swagger
- Use as. Data . Đáp lại, bạn cần nhận dữ liệu mã thông báo ủy quyền.
- Data type. JSON
- Body . Cài đặt quan trọng nhất trong đó là bạn cần chỉ định dữ liệu sẽ được gửi đến máy chủ AppMaster . Đồng thời, <> chứa các giá trị động sẽ cần lấy từ các trường đầu vào tương ứng.
{
"login": "<login>",
"password": "<password>"
}
Sau khi điền, bạn phải chỉ định dữ liệu cho yêu cầu kiểm tra (điền giá trị đăng nhập và mật khẩu trong Body parameters ), khởi tạo yêu cầu và đảm bảo rằng nó hoạt động chính xác và câu trả lời thực sự đến.
Thiết lập các trường nhập liệu
Bước tiếp theo là tạo giao diện cho ứng dụng. Chúng tôi hạn chế bản thân ở mức tối thiểu cần thiết. Chúng ta sẽ cần tạo 3 trường đầu vào:
- Đăng nhập
- Mật khẩu
- Mã thông báo ủy quyền
Hai điều đầu tiên là khá rõ ràng. Họ sẽ chỉ ra tên người dùng và mật khẩu của người dùng để xác thực. Mối quan tâm lớn nhất là trường thứ ba - trường của mã thông báo. Giá trị của mã thông báo cũng có thể được nhập theo cách thủ công, nhưng nhiệm vụ của chúng tôi là làm cho nó có thể nhận dữ liệu từ chương trình phụ trợ AppMaster và hiển thị nó ở đó.
Để thực hiện việc này, cần phải định cấu hình Giá trị nội dung ban đầu :
- Get data from an External API với việc lựa chọn yêu cầu đã tạo trước đó trong API Connector (trong ví dụ này, tên của nó là AppMaster Auth Call )
- Trong các trường (body) login và (body) password , bạn cần chỉ định các giá trị từ các trường nhập tương ứng
- Chọn giá trị token (rất nhiều dữ liệu khác nhau có trong phản hồi cho yêu cầu, nhưng trong ví dụ này, chỉ token được quan tâm)
Kết quả có thể được kiểm tra. Khi nhập dữ liệu vào trường đăng nhập và mật khẩu, một yêu cầu sẽ được tự động thực hiện tới phần phụ trợ AppMaster . Khi dữ liệu được nhập chính xác và yêu cầu trả về kết quả thành công, mã thông báo ủy quyền nhận được sẽ xuất hiện trong trường thứ ba.
GET yêu cầu đến cơ sở dữ liệu
Bước tiếp theo là tạo một yêu cầu API mới. Lần này nhiệm vụ sẽ là lấy dữ liệu từ cơ sở dữ liệu. Đồng thời, tình hình cũng phức tạp bởi những dữ liệu này không được cung cấp miễn phí mà chỉ có sẵn cho những người dùng có thẩm quyền.
Để làm điều này, bạn sẽ cần thêm một tiêu đề đặc biệt vào yêu cầu. Nó phải được gọi là Authorization và giá trị của nó phải là " Bearer " và khóa ủy quyền đã nhận được trước đó.
Hãy làm điều đó trong thực tế. Bạn cần quay lại plugin API Connector và tạo một yêu cầu API mới. Trong ví dụ trên ảnh chụp màn hình, đây là lệnh gọi đến cơ sở dữ liệu nhà hàng để lấy danh sách các món ăn và tạo thực đơn.
Một sự khác biệt quan trọng so với yêu cầu trước đó là thay vì các tham số (mặc dù chúng cũng có thể được thêm vào), một tiêu đề được sử dụng:
- Key = Authorization
- Value = Bearer {authorization token} (để khởi tạo yêu cầu, bạn phải chỉ định ngay mã thông báo thực mà bạn đã nhận được trước đó)
Xin lưu ý rằng trong cài đặt tiêu đề, bạn phải bỏ chọn hộp kiểm Private ; nếu không, sẽ không thể tạo động. Cuối cùng, đừng quên khởi tạo yêu cầu và đảm bảo rằng nó hoạt động.
Repeating Group
Bây giờ chúng ta nên quay lại trình thiết kế, thêm một phần tử Nhóm lặp lại mới và thiết lập nó:
- Type of content - dữ liệu của yêu cầu AppMaster Get Data .
- Data source - điều quan trọng là phải chỉ định chính xác tiêu đề Authorization . Nó bao gồm hai phần. Hằng số đầu tiên là " Bearer ". Biến thứ hai phải chứa mã thông báo ủy quyền và được lấy từ trường đầu vào tương ứng.
Nếu mọi thứ được thực hiện chính xác, thì dữ liệu sẽ được nhận và chỉ còn lại bước cuối cùng - bạn cần hiển thị chúng. Để thực hiện việc này, bạn có thể thêm hai trường văn bản vào Repeating Group và tùy chỉnh chúng. Một sẽ hiển thị tên của món ăn và thứ hai sẽ hiển thị giá của nó.
Bạn có thể mở ứng dụng kết quả và xác minh rằng quá trình tích hợp Bubble và AppMaster đã thành công. Giao diện người dùng được tạo trong Bubble.io và mọi thứ liên quan đến phần phụ trợ đều được cung cấp bởi AppMaster.io :
- Xác thực người dùng đang được thực hiện
- Mã thông báo ủy quyền đã nhận được hiển thị
- Công việc với cơ sở dữ liệu được thực hiện
- Dữ liệu chỉ có sẵn cho người dùng được ủy quyền mới được hiển thị
