Update 13/04/2023

This commit is contained in:
2023-04-13 10:52:21 +07:00
parent f2b4f84bc6
commit 839903bff7
151 changed files with 17458 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
{
"label": "Adman",
"position": 3
}

View File

@@ -0,0 +1,33 @@
---
sidebar_position: 4
---
# Cài đặt
Cài đặt các thiết lập dành riêng cho **Tài khoản gốc Adman** `(Tài khoản đầu tiên)` tạm gọi lad **ADMIN**.
## Nhân sự
Từ **Thanh công cụ bên trái**, ấn **Cài đặt**, tiếp theo ấn vào **Nhân sự**.
![Setting Staffs](./img/minigame-setting-staffs.png)
### Danh sách nhân sự
Danh sách nhân sự bao gồm:
- **Họ tên:** hiển thị Tên và Email của nhân sự.
- **Quyền hạn:** quyền hạn được phân cấp bởi `ADMIN`, quyền hạn càng cao thì càng được sử dụng nhiều chức năng của `Adman`.
- **Đăng nhập cuối:** hiển thị thời gian và địa chỉ ip của lần đăng nhập cuối cùng.
- **Lựa chọn:**
- **Xóa:** xóa nhân sự.
- **Xem chi tiết:** chỉnh sửa lại thông tin cơ bản, quyền hạn và mật khẩu của nhân sự.
### Thêm mới
Ấn <button className="btn btn-add">[+] Thêm mới</button> để hiển thị Popup **Tạo nhân sự**
- Nhập đầy đủ các trường `Họ, Tên, Email, Mobile`.
- Ấn <button className="btn btn-submit">Thực hiện</button> để thêm nhân sự mới.
![Setting Staffs](./img/minigame-setting-staffs-2.png)

View File

@@ -0,0 +1,65 @@
---
sidebar_position: 2
---
# Thư viện files
Là nơi bạn tải và lưu trữ toàn bộ files vào tài khoản Adman. Chủ yếu là các hình ảnh như: **ảnh sản phẩm, ảnh vòng quay, ảnh banner, logo, ...**. Giúp các bạn quản lý các files một cách hợp lý, khoa học hơn.
Cung cấp một số thông tin chính như :
- **Type**: loại file như Photo(ảnh), css(CSS3), js(javascript),... `Đang cập nhật`.
- **Thông tin:** tên file và ảnh preview - `nếu là file ảnh`.
- **Dung lượng:** kích thước file.
- **Thời gian:** thời gian và tên tài khoản đã upload file.
- **Lựa chọn:**
- **Xem chi tiết**: xem nội dung của file.
- **Xóa**: xóa file hiện tại.
Phía bên trái là **Thanh điều hướng - Navbar**. Chọn **Thư viện files**.
Đây là **Thư viện chung** cho toàn bộ Minigame của tài khoản Adman.
:::tip
Bạn nên tải các file ảnh **Logo, Banner, Icon,...** có thể tái sử dụng nhiều lần vào **Thư viện chung** này.
:::
![Files Library](./img/minigame-library-files-1.png)
## Chức năng chính
### Upload file mới
- Ấn <button className="btn btn-add">[+] Upload file mới</button> một Popup sẽ hiển thị.
- Ấn vào ô **Upload** rồi chọn file cần tải lên. Ảnh sẽ lập tức được upload lên website. Ấn <button className="btn btn-submit">OK</button> để đóng Popup.
:::tip
- File ảnh tải lên nên được tối ưu, có kích thước phù hợp, dung lượng nhỏ hơn 1MB.
- File ảnh **sản phẩm** nên là ảnh vuông, có nền trong suốt, dạng PNG.
- File ảnh banner, nền nên là ảnh JPG để có dung lượng tối ưu nhất.
:::
### Danh mục
`Đang cập nhật`
## Thư viện riêng
Ngoài **Thư viện chung**, còn có các **Thư viện riêng** cho từng Minigame.
Vào một Minigame bất kì, thanh điều hướng ngay bên trái,
- Chọn **Thư viện files**, hệ thống tự động mở tab **File riêng của game**.
- Chọn tab **Thư viện chung** ngay kế bên để xem danh sách các file chung.
:::tip
Các file ảnh như **ảnh sản phẩm, ảnh vòng quay,... file riêng biệt** cho từng Minigame nên upload ở **Thư viện riêng** để dễ quản lý hơn.
:::
![Files Library](./img/minigame-library-files-2.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

View File

@@ -0,0 +1,11 @@
---
sidebar_position: 2
---
# Hướng dẫn Adman
Hướng dẫn sử dụng các chức năng cơ bản của **Adman** các tính năng bổ trợ khác.
import DocCardList from '@theme/DocCardList';
<DocCardList />

View File

@@ -0,0 +1,101 @@
---
sidebar_position: 3
---
# Hướng dẫn cắt vòng quay
Dưới đây là một số cách cắt vòng quay cơ bản, dễ làm và miễn phí.
:::tip
Nếu bạn muốn Vòng quay nhiều `màu sắc, hoạt ảnh, hiệu ứng...` xin vui lòng liên hệ bộ phần **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được tư vấn thêm về thiết kế.
:::
## Thiết kế bằng Figma
**[Figma](https://www.figma.com/)** là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác.
### Đăng kí tài khoản (Miễn phí)
Để sử dụng một cách đầy đủ nhất vui lòng **đăng ký tài khoản (miễn phí)** tại **[Figma](https://www.figma.com/)**, sau đó ấn <button className="btn btn-submit">Get Started</button>.
![Figma Homepage](./img/minigame-tutorial-design-wheel-1.png)
:::danger
Sau khi `Đăng ký` xong tài khoản, vui lòng `Đăng nhập` để thực hiện bước tiếp theo.
:::
### Sử dụng thiết kế có sẵn
Nhằm đảm bảo cho việc rút ngắn thời gian, đơn giản hóa công việc tạo **Ô sản phẩm trên vòng quay**, chúng tôi xin cung cấp các mẫu có sẵn theo từng số lượng cố định ở Link:
- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 1](https://www.figma.com/file/EOx1EPnA2OkzQD5FEZzNJo/Thi%E1%BA%BFt-k%E1%BA%BF-v%C3%B2ng-quay-may-m%E1%BA%AFn-c%C6%A1-b%E1%BA%A3n-1?t=0U0p17qqc1kVnfjl-1)**
- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 2](https://www.figma.com/file/T2aqeEFOUoB2o9fIA67wak/VONGQUAY_6-8-10-12?t=vLvTMihgA3xTmQKr-1)**
Để chỉnh sửa vui lòng làm theo các bước:
- Ấn vào dấu mũi tên đi xuống `(vị trí 1)`.
- Ấn **Duplicate to your drafts** `(vị trí 2)`.
- Ấn **Open** khi có thông báo đã thành công `(vị trí 3)` hoặc quay lại **[Figma](https://www.figma.com/)** để tìm, lưu ý cuối tên file có chữ `(Copy)`.
![Figma Duplicate Draft](./img/minigame-tutorial-design-wheel-2.png)
:::caution
- Thiết kế mẫu chỉ bao gồm `Hình ảnh các ô trên vòng quay`. Bạn cần chọn `ảnh sản phẩm` phù hợp cùng với `tên giải thưởng` để chèn vào bên trong.
- Khi **[Cài đặt vòng quay](../tutorial-minigame/wheel)** vui lòng `theo thứ tự như mẫu, màu sắc SOLE với nhau` để hình Vòng quay được hiển thị đẹp nhất.
:::
### Thiết kế theo số lượng tự chọn - Figpie
:::caution
- Cần thời gian và sự tỉ mỉ.
- Số lượng ô trên vòng quay khuyến nghị là từ 4 - 12.
- Nếu gặp khó khăn vui lòng liên hệ bộ phận **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được giúp đỡ.
:::
- Vào Link **[Figpie](https://www.figma.com/community/plugin/924390003304842148/Figpie)**, sau đó ấn <button className="btn btn-submit">Try it out</button> để cài đặt.
- Bạn sẽ được chuyển về trang Thiết kế của Figma, một Popup thông báo sẽ hiển thị, Ấn <button className="btn btn-submit">Run</button>.
- Plugin **Figpie** hiển thị báo gồm các cài đặt sau:
- **DATA:** số lượng ô trên vòng quay.
- ấn `+` để thêm và ấn `-` để xóa.
- nhập `value` giống nhau, mặc định là `5`.
- **DIAMETER:** `chiều cao và chiều rộng` của Vòng quay.
- **THEME:** màu sắc mặc định của các ô.
- **PREVIEW:** xem trước Vòng quay hiển thị.
![Figpie](./img/minigame-tutorial-design-wheel-3.png)
- Ấn <button className="btn btn-figpie">Create a pie chart</button> để tạo.
- **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là &#127829;) trong số đó và làm theo hướng dẫn:
- Kéo ra ngoài `(2)`
- Xóa viền trắng mặc định `(3)`, ấn dấu `-`
- Chỉnh màu `(5)`
- Chỉnh lại góc nghiêng `(4)` sao cho &#127829; dựng thẳng đứng `(6)`image.png
![Figpie Tutorial 1](./img/minigame-tutorial-design-wheel-4.png)
- **Tạo Frame** để bọc khung `Ô vòng quay` vừa lấy được:
- Ấn trên bàn phím nút `F`, sau đó kéo thả chuột tạo 1 **Frame** với `chiều cao` bằng với &#127829;, `chiều rộng` sẽ tự căn chỉnh sau `(1)`.
- Kéo &#127829; `(2)` vào bên trong **Frame** `(1)` sẽ được **Frame** `(3)`
- Xòa màu nền bằng cách ấn vào `-` `(4)`
- **Frame** hoàn thiện `(5)`, copy `Ctrl + C` và dán `Ctrl + V` lại ở vị trí khác rồi đổi màu sẽ có &#127829; khác `(6)`.
![Figpie Tutorial 2](./img/minigame-tutorial-design-wheel-5.png)
- Việc cuối cùng là tạo thêm các &#127829; để thêm nội dung vào đó rồi xuất ảnh.
## Thiết kế bằng Photoshop
`Đang cập nhật`