Bạn đang có kế hoạch chuyển từ Google Sheets sang một ứng dụng web? Đừng lo, chúng tôi có một hướng dẫn nhanh và dễ dàng để giúp bạn biết cách chuyển đổi một Google Sheet thành một ứng dụng web. Chúng tôi sẽ sử dụng Five, một ứng dụng miễn phí, để xây dựng ứng dụng gốc của chúng tôi. Trước khi bắt đầu, hãy đảm bảo bạn đã đăng ký và cài đặt Five miễn phí.
Hướng dẫn này dành cho người mới bắt đầu và không yêu cầu kiến thức về lập trình. Vậy, chúng ta bắt đầu nào!
Bước 1: Làm sạch bảng tính của bạn
Trước khi bắt đầu xây dựng ứng dụng web của chúng ta, điều quan trọng là Google Sheet của chúng ta lưu trữ dữ liệu theo định dạng đúng. Để làm điều này, hãy đảm bảo rằng hàng đầu tiên của bảng tính của bạn chứa các tên mô tả cho dữ liệu được lưu trữ trong mỗi cột.
Ví dụ, nếu bảng tính của bạn chứa thông tin về sản phẩm, giá cả và số lượng, đây là những gì Google Sheet của bạn nên trông như:
Sản phẩm Giá Số lượngRất tiếc, thế giới thực thì hiếm khi được cấu trúc tốt như bảng tính này. Đây là một số điểm cần lưu ý:
-
Đảm bảo rằng hàng tiêu đề (hàng 1) chỉ chứa các tên mô tả cho những gì được lưu trữ trong mỗi cột. Trong trường hợp của chúng tôi, hàng tiêu đề của chúng tôi chứa “Sản phẩm”, “Giá” và “Số lượng”. Hãy chọn các tên mô tả cho các cột của bạn và tránh thêm nội dung không cần thiết khác.
-
Không lặp lại cùng một thông tin trong nhiều cột. Ví dụ, không khuyến nghị có một cột cho “Sản phẩm không thể hỏng” và một cột khác cho “Sản phẩm có thể hỏng”. Thay vào đó, hãy sử dụng một cột cho “Sản phẩm” và một cột khác để phân loại sản phẩm là “Có thể hỏng” hoặc “Không thể hỏng”.
-
Đảm bảo rằng mỗi ô chỉ chứa một dữ liệu duy nhất. Ví dụ, trong trường hợp của chúng tôi, có thể hấp dẫn để thêm thông tin về giảm giá vào giá của chúng tôi, chẳng hạn như “5,99 (giảm còn 4,99)”. Đừng làm như vậy. Nếu làm như vậy, điểm dữ liệu này sẽ không thể sử dụng trong một phép tính. Hãy luôn đảm bảo rằng mỗi cột chỉ chứa một loại dữ liệu như văn bản, số, tùy chọn hoặc tiền tệ.
-
Ngay cả khi bạn có nhiều giá trị cho cùng một yếu tố, đừng đặt chúng tất cả trong một ô. Ví dụ, đôi khi chúng ta có thể có nhiều địa chỉ email cho một khách hàng. Làm thế nào chúng ta nên xử lý kịch bản này trong bảng tính của chúng ta? Cách đúng để làm điều này là có nhiều cột “Email”, chẳng hạn như “Email chính”, “Email phụ”, “Email công việc” và “Email cá nhân”. Đừng lưu trữ nhiều địa chỉ email trong một ô duy nhất.
Mẹo chuyên gia: Các lệnh hữu ích của Google Sheets để làm sạch bảng tính của bạn
Để chuyển từ Google Sheets sang ứng dụng web mà không gặp quá nhiều khó khăn, khuyến nghị là bạn nên dành thời gian để xem xét dữ liệu hiện có của mình và đảm bảo rằng chúng sạch sẽ. Như câu thành ngữ nói: Điểm sắp một giờ, còn hơn chín giờ.
Dưới đây là ba chức năng yêu thích của chúng tôi trong Google Sheets để làm sạch dữ liệu:
-
TRIM: Chức năng TRIM của Google Sheets loại bỏ các khoảng trắng dư thừa khỏi văn bản, trừ khoảng trắng đơn giữa các từ. Điều này hữu ích để sửa các vấn đề định dạng như từ ghép hoặc cách cách từ không đúng. Ví dụ, nếu một số khách hàng của bạn viết sai tên của họ khi đăng ký trên trang web của bạn, ví dụ như “JohnDoe” hoặc “Jane Doe □□□”, chức năng TRIM sẽ chuyển hai mục này thành “John Doe” và “Jane Doe”.
-
CLEAN: Chức năng CLEAN loại bỏ tất cả các ký tự không in được khỏi văn bản. Điều này hữu ích nếu cơ sở dữ liệu của bạn chứa tên với các ký tự đặc biệt không được dán đúng trong Google Sheet hoặc nếu bạn có các dòng xuống hàng trong ô của bạn.
-
PROPER: Chức năng PROPER chuyển đổi ký tự đầu tiên thành chữ hoa và toàn bộ các ký tự khác thành chữ thường. Ví dụ, chức năng sẽ chuyển đổi “JOHn DoE” thành “John Doe”.
Sau đây trong bài viết này, chúng tôi sẽ giới thiệu cho bạn một số tính năng hữu ích để thu thập dữ liệu sạch trong ứng dụng web của bạn.
Có đáp ứng cả các tiêu chí sau không?
- Hàng tiêu đề (hàng 1) chỉ chứa các tên cột mô tả?
- Mỗi cột chứa thông tin duy nhất liên quan đến tiêu đề cột?
- Mỗi ô trong cùng một cột chỉ chứa một dữ liệu duy nhất của cùng loại dữ liệu, chẳng hạn như văn bản, số, vv?
- Các điểm dữ liệu khác nhau trong cùng một danh mục được phân bổ trong nhiều cột?
- Dữ liệu của bạn đã được làm sạch bằng cách sử dụng các chức năng tích hợp của Google Sheets?
Nếu có, đến bước 2 để chuyển đổi Google Sheet của bạn thành một ứng dụng web: Thiết lập cơ sở dữ liệu của bạn.
Bước 2: Cấu hình cơ sở dữ liệu và nhập dữ liệu
Nhờ công việc chúng ta vừa làm ở bước 1, việc chuyển từ Google Sheets sang ứng dụng web sẽ dễ dàng hơn rất nhiều khi chúng ta bắt đầu ở bước 2: Cấu hình cơ sở dữ liệu của bạn.
Sở hữu một cơ sở dữ liệu làm nền tảng cho ứng dụng của bạn là một bước cần thiết để chuyển từ Google Sheets sang ứng dụng web. Chúng tôi khuyến nghị bạn nên sử dụng MySQL, cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới.
Để tạo cơ sở dữ liệu của chúng ta, chúng tôi sẽ sử dụng Five, với trình thiết kế cơ sở dữ liệu trực quan và dễ sử dụng. Nhờ trình thiết kế này, chúng ta có thể tạo một bảng cơ sở dữ liệu chỉ bằng cách nhấp chuột và kéo. Hãy đảm bảo rằng bạn đã cài đặt và chạy Five trên máy tính của bạn để có thể làm theo hướng dẫn.
- Tạo một ứng dụng mới trong Five
Sau khi cài đặt Five, hãy khởi chạy nó trên máy tính của bạn. Bạn sẽ được đón tiếp bằng màn hình giống như sau:
- Nhấp vào “Ứng dụng” gần góc trên bên trái của màn hình, ngay dưới biểu tượng menu ba gạch ngang.
- Tiếp theo, nhấp vào biểu tượng màu vàng “+”. Một cửa sổ mới “Ghi nhận ứng dụng mới” sẽ hiện ra.
- Đặt “Tiêu đề” cho ứng dụng của bạn, chẳng hạn như “Ứng dụng đầu tiên của tôi”.
- Lưu lại bằng cách nhấp vào biểu tượng xác nhận ở góc trên bên phải.
Bây giờ màn hình của bạn sẽ trông như thế này. Nếu “Ứng dụng đầu tiên của tôi” là ứng dụng đầu tiên của bạn, bạn sẽ không thấy bất kỳ ứng dụng khác nào trong danh sách bên trái:
- Tạo cơ sở dữ liệu của bạn và nhập dữ liệu
Giờ là lúc tạo cơ sở dữ liệu của bạn và nhập dữ liệu. Để bắt đầu, hãy nhấp vào nút xanh “Quản lý” ở góc trên bên phải của màn hình, ngay cạnh biểu tượng Five.
Sau đó, nhấp vào “Dữ liệu”, sau đó nhấp vào “Trình hướng dẫn bảng”.
Hãy tiến hành và tạo bảng cơ sở dữ liệu đầu tiên của chúng ta.
- Đặt “Tên” cho bảng của bạn. Hãy gọi nó là “Tồn kho”.
- Tiếp theo, nhấp vào biểu tượng “+” bên phải màn hình. Nhấp vào biểu tượng cộng ba lần để tạo ba trường cơ sở dữ liệu:
- “Trường 1” sẽ chứa thông tin về sản phẩm của chúng tôi, vì vậy chúng tôi đặt tên là “Sản phẩm” và chọn kiểu dữ liệu là văn bản. Chúng tôi cũng đặt kích thước là 100.
- “Trường 2” sẽ chứa thông tin về “Giá”. Kiểu dữ liệu của nó là float và kiểu hiển thị cũng là float.2.
- “Trường 3” sẽ chứa thông tin về “Số lượng”. Đây là số nguyên cho kiểu dữ liệu và kiểu hiển thị.
Dưới đây là hình ảnh của bảng của bạn. Lưu lại bằng cách nhấp vào biểu tượng xác nhận.
Giờ hãy nhập dữ liệu từ bảng tính Google Sheets của chúng ta. Đi vào “Dữ liệu -> Bảng” và nhấp vào biểu tượng “Nhập CSV vào bảng” để bắt đầu. Nó nằm bên trái của biểu tượng “+” màu vàng có mũi tên nhỏ nhỏ trỏ xuống trong một hộp.
Để nhập dữ liệu của bạn, hãy chắc chắn rằng chúng được lưu trong một tệp CSV. Nếu bạn muốn sử dụng dữ liệu được cung cấp ở trên, hãy tải xuống tệp CSV của chúng tôi ở đây.
- Chức năng “Nhập dữ liệu” của Five cho phép bạn chọn bảng cơ sở dữ liệu mà bạn muốn nhập dữ liệu. Trong trường hợp của chúng tôi, chỉ có một bảng duy nhất: bảng “Tồn kho”. Vì vậy, tiến hành và chọn nó từ danh sách thả xuống.
- Tiếp theo, nhấp vào “Chọn tệp” và tìm tệp Inventory.csv của bạn. Tải lên nó.
- Five sẽ tự động ánh xạ các trường từ tệp CSV của bạn vào các trường của cơ sở dữ liệu của bạn, miễn là bạn đã tuân thủ hướng dẫn này và các trường cơ sở dữ liệu của bạn có cùng tên với hàng đầu tiên của tệp CSV của bạn.
- Đối với “InventoryKey”, hãy chọn “Tự tạo”. Five sẽ tự động tạo một khóa chính duy nhất cho mỗi bản ghi trong tệp CSV của bạn.
- Nhấp vào biểu tượng xác nhận để nhập dữ liệu của bạn.
Xin chúc mừng! Bạn đã tạo một bảng cơ sở dữ liệu trong cơ sở dữ liệu MySQL và điền dữ liệu vào!
Trong bước 3 và cuối cùng, chúng ta sẽ thêm một biểu mẫu vào ứng dụng của chúng ta và xem trước nó.
Bước 3: Thêm biểu mẫu và xem trước ứng dụng của bạn
Chúng ta đã tạo backend ứng dụng của chúng ta: một cơ sở dữ liệu quan hệ với một bảng duy nhất lưu trữ thông tin về sản phẩm, giá và số lượng của chúng ta. Nhưng một cơ sở dữ liệu không phải là một ứng dụng web. Cơ sở dữ liệu của chúng ta cần một giao diện người dùng đồ họa hoặc một giao diện người dùng để người dùng tương tác với dữ liệu.
Vậy nên, chúng ta tiến đến bước 3 của việc chuyển Google Sheet thành ứng dụng web.
- Thêm biểu mẫu
Five làm cho việc tạo biểu mẫu cho người dùng cuối trở nên dễ dàng. Để bắt đầu, hãy nhấp vào “Giao diện”, sau đó nhấp vào “Trình hướng dẫn biểu mẫu”.
Có chỉ một điều bạn cần làm trong trình hướng dẫn biểu mẫu. Chọn “Tồn kho” là “Bảng chính”. Lưu lại bằng cách nhấp vào biểu tượng xác nhận.
Giờ hãy xem trước ứng dụng của chúng ta!
- Xem trước ứng dụng của bạn
Nhấp vào biểu tượng “Chạy” ở góc trên bên phải. Điều này sẽ khởi chạy ứng dụng của bạn trong một cửa sổ mới.
Đây là giao diện ứng dụng của bạn:
Lưu ý rằng Five cung cấp cho bạn một giao diện người dùng được tạo tự động hoàn toàn, bao gồm các biểu mẫu mà bạn vừa phát triển bằng trình hướng dẫn biểu mẫu của Five, cũng như:
- Một trình đơn bên trái,
- Một thanh tìm kiếm ở trên cùng,
- Một bộ lọc bên cạnh tìm kiếm của bạn để lọc dữ liệu của bạn và
- Khả năng thêm, sửa hoặc xóa các bản ghi từ cơ sở dữ liệu của bạn thông qua giao diện người dùng đồ họa.
Google Sheets to Web App: Những bước tiếp theo
Xin chúc mừng! Bạn đã xây dựng và triển khai ứng dụng web đầu tiên của mình trong Five. Thay vì quản lý dữ liệu của bạn trong Google Sheets, bạn có thể sử dụng một ứng dụng web hiện đại để lưu trữ, truy xuất và xử lý dữ liệu của bạn. Và tất cả chỉ mất ba bước để chuyển từ Google Sheet sang ứng dụng web!
Giao diện người dùng được tạo sẵn của Five đã tự động tạo ra một mục “Tồn kho” cho bạn. Bạn cũng có thể thấy “Sản phẩm” của mình trong danh sách bên trái của màn hình. Cuối cùng, bằng cách chọn một trong các sản phẩm này, bạn có thể xem chi tiết sản phẩm và thực hiện các thay đổi nếu cần. Five cũng đi kèm với tính năng tìm kiếm và lọc sẵn.
Google Sheets to Web App: Những bước tiếp theo
Bạn có thể phù hợp với giao diện người dùng của ứng dụng của mình để làm cho nó chuyên nghiệp hơn. Đây là hướng dẫn của chúng tôi về cách tạo và thêm một chủ đề vào ứng dụng của bạn.
Bạn có thể thêm biểu đồ hoặc bảng điều khiển vào ứng dụng của mình.
Bạn có thể hiển thị dữ liệu của mình trong một lưới có thể chỉnh sửa bằng cách làm theo hướng dẫn Northwinds của chúng tôi.
Bạn có thể thêm một số quy tắc kiểm tra dữ liệu vào ứng dụng của bạn.
Bạn có thể thêm một trang đăng nhập và chấp nhận các điều khoản và điều kiện vào ứng dụng của bạn và cung cấp các vai trò và quyền khác nhau cho người dùng.
Tóm lại, chúng tôi chỉ mới khám phá bề mặt những gì có thể làm trong Five! Để biết thêm thông tin về những gì bạn có thể xây dựng trong Five, hãy xem các trường hợp sử dụng của chúng tôi.
Chúc bạn mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mãi mã
