Google Apps Script - Chapter 3 - Thêm Bootstrap vào GAS
Trong chapter 2, chúng ta đã setup xong môi trường deploy cũng như deploy test cho dự án Google Apps Script. Bài viết hôm nay sẽ lan man tới một vài khái niệm trong html và css.
Tóm tắt bài trước
Trong quy trình triển khai rút gọn:
- step 1: phát sinh nhu cầu từ phía client, end-user, team marketing... (BI/BA/PO)
- step 2: lấy requirement
- step 3: design
- step 4: implement
- step 5: test, review code
- step 6: release
Chúng ta đang dừng lại ở step 4, với hiện trạng là một web-app "hello world" cơ bản nhất.
Một vài khái niệm liên quan tới HTML, CSS
Nói đơn giản thì khi viết một quyển sách mà chỉ có toàn chữ với chữ, ắt hẳn sẽ kích thích sự buồn ngủ của đọc giả rất là lẹ, nên biên tập viên cũng phải định dạng lại, chia thành đoạn văn, xuống hàng, thụt đầu dòng, in đậm. Có chỗ thì thêm hoa lá cành vào phần dấu trang... Về cơ bản không làm nội dung sách hay hơn, nhưng cũng tăng trải nghiệm người dùng. Trong lập trình web thì HMML + CSS đóng vai trò format trang, giúp định hướng người dùng, giúp người dùng tiếp cận tới nội dung mà nhà phát triển muốn truyền tải hiệu quả nhất.
Về HTML
Bạn có thể tham khảo định nghĩa html tại đây. HTML có mấy điểm cần lưu ý:
- Về mặt cấu tạo: một thẻ có cấu trúc <tên_thẻ></tên_thẻ>, trừ những thẻ như <img> không có phần đóng thẻ. Sau khi trình duyệt render HTML xong thì mỗi thẻ ở trên sẽ tương ứng là 1 node trong cây DOM. Việc sắp xếp và style những node này sẽ là những đơn vị nhỏ nhất để xây dựng lên web-app của bạn (giống ráp lego ấy).
- Về mặt thuộc tính: cần đặc biệt lưu ý thuộc tính class và id. CSS thường dùng 2 thuộc tính này để trỏ style về node tương ứng.
Về CSS
CSS đảm nhiệm về mặt styling cho từng hoặc nhiều node tương ứng. Câu hỏi đặt ra là làm thế nào? Có 2 điểm mấu chốt.
- Style như thế nào: từ những thuộc tính đơn giản như font-size, color, background-color... đến những thuộc tính phức tạp như animation. Như ví dụ bên dưới, khi bạn ấn F12 (hoặc Click chuột phải vào browser >> chọn Inspect) > Chọn tab Element > Click vào một node bất kì (mình vẫn quen gọi là node, tuy nhiên node với element cũng có chút khác biệt, các bạn có thể google để tham khảo thêm) > Trong tab Styles, ở mục mặc định element.style các bạn có thể thử thêm vài thuộc tính vào.
- Style như thế nào cho nhanh: ở 10 năm trước thì việc đi style kiểu từng node cũng hơi thường gặp, nhưng giờ con người giỏi quá nên tổng hợp sẵn lại thành từng bộ pre-style. Nếu không có nhu cầu gì chuyên sâu, mình dừng lại ở mức độ này thôi. Trong khuôn khổ chuỗi bài này, mình sẽ dùng thư viện Bootstrap 5 trứ danh đang dần bị đối thủ Tailwind dằn mặt.
Tiếp tục Implement
Quay lại dự án nhỏ của chúng ta ở https://script.google.com/home/
Step 4.4. Thêm Bootstrap 5 vào project
Truy cập vào trang web chính thức của Bootstrap 5 trứ danh, lấy 2 link chứa css và js của thư viện này.
CSS thêm vào trong thẻ <head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
JS thêm vào cuối cùng trong thẻ <body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
Để xác nhận hoạt động của Bootstrap trứ danh, chúng ta sửa lại nội dung trong thẻ <body> thành
<div class="container"> <p class="fs-1 text-primary">Hello GAS - chapter 2 - test deploy</p> </div>
Như hình ví dụ bên dưới.
Giải thích thêm:
- Thêm bootstrap.min.css vào đầu trang sẽ giúp web-app của chúng ta kế thừa bộ pre-style của bootstrap. Đơn giản mà nói, bootstrap sẽ tổng hợp style css thành những cụm từ dễ nhớ hơn (tỷ như fs-1 là font-size 1st - font bự nhất), chúng ta chỉ cần thêm cụm tương ứng vào thuộc tính class của thẻ tương ứng là xong. Tra cứu quy tắc đặt tên class trực tiếp tại web của bootstrap bạn nhé, mặc dù khuyến khích học thuộc lòng bằng hết.
- Thêm bootstrap.bundle.min.js sẽ giúp bootstrap xử lý những node phức tạp hơn (ví dụ như carousel).
Step 4.5.
Quay lại với đề bài
Team HR cần 1 trang web hiển thị thông tin của từng staff trong cty, có ảnh, staff-id, tên, chức vụ.
Chúng ta thêm chút style để mỗi thông tin hiển thị ở từng dòng tương ứng.
<div class="container">
<div class="row">
<p class="fs-3 text-primary">DT0083 - Stormie</p>
<p class="fs-5 text-secondary">Lazy developer</p>
</div>
<div class="row">
<p class="fs-3 text-primary">DT0369 - XaTha</p>
<p class="fs-5 text-secondary">Angry developer</p>
</div>
</div>
Check lại output trong link deploy test.
Được 50% chặng đường rồi.
Tổng kết
Trong bài hôm nay, chúng ta đã tìm hiểu qua vài khái niệm trong HTML và CSS, ứng dụng bootstrap vào dự án. Ở bài tiếp theo, sẽ tiếp tục với phần thêm ảnh đại diện, đương nhiên là sẽ nói lan man tới layout trong HTML.
Cám ơn các bạn đã đọc bài và hẹn gặp lại.
