Kiến trúc serverless là một mô hình chạy và xây dựng các ứng dụng và dịch vụ mà không phải quản lý cơ sở hạ tầng. Nó liên quan đến các ứng dụng và dịch vụ chạy trên máy chủ, nhưng tất cả việc quản lý máy chủ được thực hiện bởi nhà cung cấp đám mây
Bài đăng này sẽ thảo luận về việc xây dựng ứng dụng quản lý người dùng fullstack bằng MongoDB, MongoDB Realm và Vue. js. Ở phần cuối của hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo cơ sở dữ liệu trên MongoDB, các chức năng không có máy chủ làm điểm cuối của chúng tôi bằng cách sử dụng MongoDB Realm và sử dụng các điểm cuối trong Vue. ứng dụng js
MongoDB Realm là một nền tảng phát triển được thiết kế để xây dựng các ứng dụng di động, web, máy tính để bàn và IoT. Nó cung cấp các dịch vụ như đồng bộ hóa dữ liệu, chức năng không có máy chủ, trình kích hoạt, xác thực người dùng, v.v. t. c. Chúng tôi có thể xây dựng và duy trì ứng dụng trên MongoDB Realm bằng bất kỳ cách nào sau đây
- giao diện người dùng lĩnh vực. một tùy chọn dựa trên trình duyệt để tạo và duy trì ứng dụng
- lĩnh vực CLI. một tùy chọn dựa trên CLI để xác định và triển khai các ứng dụng
- Triển khai GitHub. sử dụng các tệp cấu hình trên Github để triển khai các ứng dụng từ kho lưu trữ Github
- API quản trị. một yêu cầu dựa trên HTTP để quản lý các ứng dụng của bạn
Trong bài đăng này, chúng tôi sẽ sử dụng Realm UI để xây dựng các ứng dụng của mình
Bạn có thể viết mã bằng cách sao chép kho lưu trữ này [nhánh chính] tại đây. Nếu bạn muốn xem mã hoàn chỉnh, hãy kiểm tra nhánh dev của cùng kho lưu trữ này
Trong hướng dẫn này, chúng tôi sẽ chỉ tập trung vào triển khai. Giao diện người dùng của dự án đã được thiết lập với TailwindCSS
Bạn có thể kiểm tra React. phiên bản js tại đây
điều kiện tiên quyếtCác bước sau trong bài đăng này yêu cầu JavaScript và Vue. kinh nghiệm js. Kinh nghiệm với TypeScript không phải là một yêu cầu, nhưng thật tuyệt khi có
Chúng tôi cũng cần một tài khoản MongoDB để lưu trữ cơ sở dữ liệu và tạo các chức năng không có máy chủ. Đăng ký hoàn toàn miễn phí
Hãy viết mãChạy dự án
Để bắt đầu, chúng ta cần điều hướng đến vị trí dự án, mở thiết bị đầu cuối của chúng ta và cài đặt phụ thuộc dự án như hình bên dưới
npm install
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Khi đã xong, chúng ta có thể khởi động một máy chủ phát triển bằng lệnh bên dưới
npm run serve
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thiết lập MongoDB
Để bắt đầu, chúng tôi cần đăng nhập hoặc đăng ký vào tài khoản MongoDB của mình và làm theo tùy chọn áp dụng cho chúng tôi
Đối với Tài khoản mới [Đăng ký]
Trước tiên, chúng tôi cần trả lời một số câu hỏi để giúp MongoDB trợ giúp thiết lập tài khoản của chúng tôi. Sau đó bấm vào Kết thúc.
Chọn Chia sẻ làm loại cơ sở dữ liệu
Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập
Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi
Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới
Đối với Tài khoản Hiện tại [Đăng nhập]
Nhấp vào menu thả xuống dự án và nhấp vào nút Dự án mới.
Nhập
npm run serve
8 làm tên dự án, nhấp vào Tiếp theo rồi nhấp vào Tạo dự ánNhấp vào Xây dựng cơ sở dữ liệu
Chọn Chia sẻ làm loại cơ sở dữ liệu
Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập
Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi
Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới
Đang tải dữ liệu mẫu
Tiếp theo, chúng ta cần điền dữ liệu mẫu của người dùng vào cơ sở dữ liệu của mình. Để thực hiện việc này, hãy nhấp vào nút Duyệt bộ sưu tập
Bấm vào Thêm dữ liệu của riêng tôi, nhập
npm run serve
9 và npm run serve
0 làm cơ sở dữ liệu và tên bộ sưu tập, rồi bấm vào TạoTiếp theo, chúng ta cần chèn những dữ liệu mẫu này
Để thực hiện việc này, nhấp vào nút Chèn Tài liệu, điền các thông tin chi tiết ở trên và nhấp vào Chèn để lưu
Tạo và cấu hình ứng dụng MongoDB Realm
Với cơ sở dữ liệu của chúng tôi được điền, chúng tôi cần tạo các chức năng không có máy chủ để thực hiện Tạo, Đọc, Cập nhật và Xóa [CRUD] trên cơ sở dữ liệu của chúng tôi. Để thực hiện việc này, hãy chọn tab Vương quốc, nhấp vào Xây dựng ứng dụng của riêng bạn. Sau đó bấm vào Tạo ứng dụng Realm để thiết lập ứng dụng của chúng tôi
MongoDB Realm cũng cung cấp các mẫu mà chúng ta có thể sử dụng để xây dựng ứng dụng của mình một cách nhanh chóng. Đối với hướng dẫn này, chúng tôi sẽ xây dựng từ đầu
Tiếp theo, chúng ta cần thiết lập quyền và quy tắc cho các chức năng của mình. Để thực hiện việc này, hãy đóng hướng dẫn bật lên, nhấp vào Quy tắc, chọn vueRealmCol và nhấp vào Cấu hình bộ sưu tập
Lưu và triển khai MongoDB Realm
Sau khi hoàn thành, MongoDB Realm sẽ hiển thị cho chúng ta một tiện ích minh họa khái niệm Lưu và triển khai.
Khi viết một chức năng không có máy chủ, nhấp vào Lưu sẽ tạo một bản nháp phát triển mà chúng tôi có thể kiểm tra và sử dụng xung quanh. Đồng thời, Deploy đặt các thay đổi của chúng ta ở chế độ công khai để ứng dụng khác sử dụng [Vue. js trong trường hợp của chúng tôi]
Nhấn Next rồi Got it để tiếp tục
Tiếp theo, chúng ta cần cấp quyền Đọc và Viết cho chức năng của mình rồi Lưu
Tiếp theo, điều hướng đến tab Xác thực, nhấp vào Cho phép người dùng đăng nhập ẩn danh, bật tính năng này và Lưu bản nháp
MongoDB Realm cũng cung cấp một số tùy chọn xác thực mà chúng ta có thể khám phá. Đối với hướng dẫn này, chúng tôi sẽ sử dụng tùy chọn ẩn danh
Tạo các hàm serverless trên MongoDB Realm
Nhận tất cả người dùng Chức năng không có máy chủ
Với cấu hình đã hoàn tất, giờ đây chúng ta có thể tạo một chức năng không có máy chủ trả về danh sách người dùng. Để thực hiện việc này, hãy điều hướng đến tab Hàm, nhấp vào Tạo hàm mới và nhập tên hàm là
npm run serve
1Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
Đoạn mã trên thực hiện như sau
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
9 và bộ sưu tậpnpm run serve
0npm run serve
- Trả về danh sách các tài liệu trong bộ sưu tập
Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách nhấp vào nút Run để xem danh sách người dùng
Cuối cùng, chúng tôi cần sao chép
npm run serve
0 của bất kỳ người dùng nào đã trả lại và lưu nó ở đâu đó; . Sau đó nhấp vào Lưu bản nháp để tạo bản nháp triển khai cho chức năng của chúng tôiNhận chức năng Serverless của người dùng
Để thực hiện việc này, hãy nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập
npm run serve
1 làm tên chức năngTiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
Đoạn mã trên thực hiện như sau
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
9 và bộ sưu tậpnpm run serve
0npm run serve
- Trả về một người dùng duy nhất bằng cách tìm nó bằng
0 của nó. Vì MongoDB lưu tài liệu trong BSON, nên chúng tôi cần phân tích cú phápnpm run serve
5 dưới dạng BSON bằng cách sử dụngnpm run serve
6npm run serve
Để kiểm tra chức năng của chúng tôi, hãy điều hướng đến tab Bảng điều khiển, thay thế
npm run serve
7 trong chức năng xuất bằng npm run serve
0 của người dùng mà chúng tôi đã sao chép trước đó và sau đó nhấp vào ChạyCuối cùng, chúng ta cần lưu chức năng của mình bằng cách nhấp vào nút Lưu bản nháp
Chỉnh sửa chức năng Serverless của người dùng
Để thực hiện việc này, chúng ta cần thực hiện theo các bước tương tự như trên.
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____19 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
Đoạn mã trên thực hiện như sau
- Sửa đổi hàm để chấp nhận các đối số
00,npm run serve
01,npm run serve
02 vànpm run serve
03npm run serve
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
9 và bộ sưu tậpnpm run serve
0npm run serve
- Tạo biến
06 để tìm tài liệu trướcnpm run serve
0, cập nhật trường bộ sưu tập và đặt cờnpm run serve
08 để trả về tài liệu đã cập nhậtnpm run serve
Tiếp theo, chúng ta có thể kiểm tra hàm của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
npm run serve
7 trong hàm xuất bằng các đối số được yêu cầu [_id, tên, vị trí và tiêu đề], nhấp vào Chạy rồi Lưu bản nhápTạo chức năng Serverless cho người dùng
Để thực hiện việc này, chúng ta cần thực hiện theo các bước tương tự như trước đây.
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập _ _ _ _ 180 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
Đoạn mã trên thực hiện như sau
- Sửa đổi hàm để chấp nhận các đối số
01,npm run serve
02 vànpm run serve
03npm run serve
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
9 và bộ sưu tậpnpm run serve
0npm run serve
- Tạo người dùng mới bằng cách chèn đối số và trả về người dùng
Tiếp theo, chúng ta có thể kiểm tra hàm của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
npm run serve
7 trong hàm xuất bằng các đối số được yêu cầu [tên, vị trí và tiêu đề], nhấp vào Chạy, rồi Lưu bản nhápXóa chức năng Serverless của người dùng
Để thực hiện việc này, chúng ta cần thực hiện theo các bước tương tự như trước đây.
Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____187 làm tên hàm
Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau
Đoạn mã trên thực hiện như sau
- Sửa đổi chức năng để chấp nhận một đối số
- Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu
9 và bộ sưu tậpnpm run serve
0npm run serve
- Tạo một biến
87 để xóa bởinpm run serve
0npm run serve
Tiếp theo, chúng ta có thể kiểm tra hàm của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế
npm run serve
7 trong hàm xuất bằng đối số được yêu cầu, nhấp vào Chạy, rồi Lưu bản nhápTriển khai các chức năng serverless
Để bắt đầu sử dụng các chức năng serverless trong ứng dụng của mình, chúng ta cần triển khai chúng. Để thực hiện việc này, nhấp vào nút Xem lại bản nháp & triển khai, cuộn xuống và sau đó nhấp vào Triển khai
Chúng tôi sẽ nhận được lời nhắc hiển thị trạng thái triển khai của chúng tôi
Cuối cùng. Tích hợp với Vue. js
Để tích hợp MongoDB Realm trong ứng dụng của chúng tôi, chúng tôi cần cài đặt các phụ thuộc với
npm run serve
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
npm run serve
83 là thư viện để truy cập MongoDB Realm từ trình duyệt webThiết lập biến môi trường
Trước tiên, chúng ta cần tạo một tệp
npm run serve
84 trong thư mục gốc của dự án và trong tệp này, hãy thêm đoạn mã bên dưới. npm run serve
8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Để lấy ID ứng dụng Realm của chúng tôi, chúng tôi cần nhấp vào biểu tượng sao chép như hình bên dưới
Thiết lập Vương quốc MongoDB
Tiếp theo, chúng ta cần tạo một thư mục
npm run serve
85 trong thư mục npm run serve
86 và trong thư mục này, hãy tạo một tệp npm run serve
87 và thêm đoạn mã bên dưới. Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Tạo một biến để lưu trữ Realm App ID
- Tạo và xuất một phiên bản của MongoDB Realm và chuyển ID ứng dụng. Bang
88 ở phía trước củanpm run serve
89 yêu cầu trình biên dịch loại bỏ lỗi ràng buộc không null [Có nghĩa là tham số không được rỗng hoặc không xác định]npm run serve
- Tạo và xuất loại thông tin xác thực mà chúng tôi sẽ sử dụng cho ứng dụng này. Chúng tôi định cấu hình tùy chọn xác thực này trước đó
Nhận tất cả người dùng
Để nhận tất cả người dùng, chúng ta cần tạo một giao diện để mô tả các thuộc tính phản hồi. Để làm được điều này chúng ta cần tạo một thư mục
npm run serve
90 trong thư mục npm run serve
86, trong thư mục này tạo một file npm run serve
92 và thêm đoạn mã bên dưới. Tái bút. Dấu hỏi phía trước _id cho TypeScript biết rằng thuộc tính này là tùy chọn vì MongoDB tự động tạo nó
Tiếp theo, chúng tôi cần sửa đổi
npm run serve
93 bằng cách cập nhật nó bằng đoạn mã bên dướiĐoạn mã trên thực hiện như sau
- Nhập giao diện
94,npm run serve
95 vànpm run serve
96npm run serve
- Tạo thuộc tính
97 để quản lý danh sách người dùngnpm run serve
- Tạo một hàm
98 để xác thực ứng dụng của chúng ta bằng cách sử dụngnpm run serve
96 đã nhập và lấy danh sách người dùng bằng cách truy cập hàm không có máy chủ củanpm run serve
1 mà chúng ta đã tạo trước đó. Sau đó cập nhật thuộc tínhnpm run serve
97 và sử dụng hooknpm run serve
02 để gọi hàm. Tái bút. Chức năng không có máy chủ [getAllUsers trong trường hợp của chúng tôi] được gọi phải giống với chức năng được xác định trên MongoDB Realmnpm run serve
- Cập nhật đánh dấu để hiển thị danh sách người dùng
Ứng dụng hoàn chỉnh. vue
Tạo người dùng
Để tạo người dùng, trước tiên chúng tôi phải sửa đổi
npm run serve
93 bằng cách cập nhật nó bằng đoạn mã bên dướiĐoạn mã trên thực hiện như sau
- Thêm thuộc tính
04 vào thuộc tínhnpm run serve
05npm run serve
- Tạo hàm
06 để cập nhật thuộc tínhnpm run serve
04npm run serve
- Bao gồm thuộc tính thành phần
08 để giám sát thuộc tínhnpm run serve
04 và nhận danh sách người dùng được cập nhật nếu có thay đổi đối với thuộc tính đónpm run serve
- Cập nhật thành phần
10 để chấp nhậnnpm run serve
06 là mộtnpm run serve
12npm run serve
Tiếp theo, điều hướng đến tệp
npm run serve
13 bên trong thư mục npm run serve
14, cập nhật npm run serve
15 và tạo người dùngĐoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Thêm thuộc tính
06 vàonpm run serve
15npm run serve
- Sửa đổi chức năng
18 để xác thực ứng dụng của chúng tôi bằng cách sử dụngnpm run serve
96 đã nhập. Tạo người dùng bằng cách truy cập chức năng không có máy chủ củanpm run serve
80 mà chúng tôi đã tạo trước đó, chuyển các đối số bắt buộc [tên, vị trí và tiêu đề], sau đó cập nhật trạng thái biểu mẫu vànpm run serve
04npm run serve
Chỉnh sửa người dùng
Để chỉnh sửa người dùng, trước tiên chúng tôi phải sửa đổi
npm run serve
93 bằng cách tạo một thuộc tính để quản lý npm run serve
0 của người dùng mà chúng tôi muốn chỉnh sửa và thực hiện chức năng cập nhật nó. Chúng tôi cũng đã cập nhật chức năng npm run serve
94 để cập nhật thuộc tính và chuyển nó dưới dạng đạo cụ cho thành phần npm run serve
10. Tiếp theo, chúng ta cần điền vào biểu mẫu của mình khi nhấp vào nút Chỉnh sửa. Để làm điều này, hãy mở
npm run serve
13 và cập nhật như hình bên dướiĐoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Thêm thuộc tính
97 vàonpm run serve
15npm run serve
- Tạo hàm ________ 399 để xác thực ứng dụng của bạn bằng cách sử dụng ________ 396 đã nhập. Nhận thông tin chi tiết về người dùng đã chọn bằng hàm
1 serverless, sau đó cập nhật các giá trị của biểu mẫu. Hàmnpm run serve
1 cũng yêu cầu chúng tôi chuyển đổinpm run serve
97 thành chuỗi bằng hàmnpm run serve
04npm run serve
- Bao gồm thuộc tính thành phần
08 để giám sát trạng tháinpm run serve
06, gọi hàmnpm run serve
99 theo điều kiện và cập nhật trạng thái biểu mẫunpm run serve
Tiếp theo, chúng ta cần cập nhật chức năng
npm run serve
18 để bao gồm cập nhật thông tin chi tiết của người dùng bằng cách kiểm tra có điều kiện xem đó có phải là hành động cập nhật hay không. Tiếp theo, chúng ta cần gọi hàm serverless npm run serve
9 và truyền vào các tham số cần thiết. Cuối cùng, cập nhật npm run serve
06, khôi phục biểu mẫu về mặc định và đóng thành phần npm run serve
10Phương thức hoàn chỉnh. Vue
Xóa người dùng
Để xóa người dùng, chúng ta cần sửa đổi
npm run serve
93 bằng cách tạo hàm npm run serve
03 như hình bên dưới. Đoạn mã trên thực hiện như sau
- Nhập các phụ thuộc cần thiết
- Tạo một hàm
04 lấy một đối số lànpm run serve
00, xác thực ứng dụng của chúng ta bằng cách sử dụngnpm run serve
96. Xóa người dùng đã chọn bằng hàmnpm run serve
87 serverless và cập nhật trạng tháinpm run serve
04npm run serve
Ứng dụng hoàn chỉnh. vue
Cuối cùng, chúng ta có thể kiểm tra ứng dụng của mình bằng cách khởi động máy chủ phát triển và thực hiện các thao tác CRUD
Bài đăng này đã thảo luận về cách tạo cơ sở dữ liệu trên MongoDB, tạo và triển khai các chức năng không có máy chủ bằng MongoDB Realm và sử dụng các điểm cuối trong Vue. ứng dụng js