Để phục vụ cho công việc, tôi sử dụng iOnic là một framework cho phép tôi xây dựng các ứng dụng mobile trên nền tảng Android và iOs. Bài viết này, tôi sẽ hướng dẫn các bạn bắt đầu viết 1 ứng dụng nhỏ về màn hình Login bao gồm tạo tài khoản, và đăng nhập bằng tài khoản đó.
Mục lục:
Bài học hôm nay bao gồm:
- 1. Thiết kế Cơ sở dữ liệu
- 2. Thiết kế màn hình đăng nhập
- 3. Làm việc với API
- 4. Thông báo trạng thái đăng nhập
1. Thiết kế Cơ sở dữ liệu
Bất kì một ứng dụng nào, chúng ta đều cần có nơi để có thể lưu trữ thông tin mà ở ví dụ này tài khoản của bạn cần một nơi để lưu trữ. Ta gọi đó là Database (DB) hay là Cơ sở dữ liệu (CSDL).
a. Tạo CSDL
DB ở đây tôi xin được nhắc đến 2 cái tên thông dụng và miễn phí: MongoDB và MySQL (đã nâng cấp lên MariaDB). Mời các bạn cùng kiểm tra hoặc cài đặt 1 trong 2 DB trên là được rồi, ở đây tôi sẽ ưu tiên MySQL. Sau khi đã cài đặt MySQL (tại đây), chúng ta hãy cùng nhau tạo ra 1 CSDL là: typecoffee_ionic5 nha.
Đây sẽ là DB từ giờ về sau chúng ta sẽ tương tác với nó nhiều. Và để quản lý CSDL này một cách trực quan, chúng ta hãy sử dụng MySQL WorkBench, chú cá heo thông minh này sẽ giúp chúng ta khôi việc đấy. Cách MySQL WorkBench làm việc với CSDL MySQL như thế nào thì các bạn có thể tìm hiểu tại đây hoặc hỏi trược tiếp bên dưới.
b. Tạo bảng accounts
Trong CSDL typecoffee_ionic5 chúng ta cùng nhau tạo ra 1 bảng đầu tiên, đó là bảng accounts. Nào hãy nhìn xuống hình bên dưới.
2. Thiết kế màn hình đăng nhập
Nào, bây giờ chúng ta hãy cùng thiết kế màn hình đăng nhập cho ứng dụng, dựa trên các component của iOnic. Nào cùng bắt đầu thôi.
3. Làm việc với API
Để làm việc & điều khiển dữ liệu typecoffee_ionic5 như thêm, sửa, xoá và đoc (gọi tắt là CRUD), chúng ta cần phải xây dựng 1 hệ thống Api để làm việc đó. Chi tiết về cách xây dựng Api mình đã viết tại đây, mời các bạn đọc trước khi làm các bước tiếp theo.
a. Tạo thư mục _apis và file account.service.js cho ứng dụng
b. Gọi api
4. Thông báo trạng thái đăng nhập
5. Download
https://github.com/yennq/type.coffee.ionic.login-page
Tác giả: Mr386
