EVNHANOI — Website điện mặt trời mái nhà “Mái nhà đón nắng”
“Mái nhà đón nắng – Biến nắng thành điện” là chương trình của Tổng công ty Điện lực TP Hà Nội (EVNHANOI) hướng dẫn người dân lắp điện mặt trời mái nhà tự sản xuất, tự tiêu thụ. Chúng tôi thiết kế và lập trình trang chủ của chương trình cùng trang quản trị. Trang chủ xếp các phần theo thứ tự cuộn xuống: lợi ích, cách hệ thống hoạt động, quy định, các bước lắp đặt, công cụ tạm tính, hỏi đáp và đăng ký tư vấn.
Khách hàng
Tổng công ty Điện lực Thành phố Hà Nội (EVNHANOI) là đơn vị của Tập đoàn Điện lực Việt Nam, bán điện cho người dân và doanh nghiệp ở Hà Nội. Năm 2026 EVNHANOI phát động chương trình “Mái nhà đón nắng – Biến nắng thành điện” để hướng dẫn người dân lắp điện mặt trời mái nhà tự sản xuất, tự tiêu thụ. Khẩu hiệu của chương trình là “Hiểu đúng · Lắp đúng · Dùng an toàn”.
Bài toán
Điện mặt trời mái nhà vừa có quy định mới: Nghị định 243/2026 sửa đổi Nghị định 58/2025, và Nghị định 133/2026 quy định mức phạt. Người muốn lắp thường hỏi ba điều: lắp rồi tiền điện giảm bao nhiêu, phải làm thủ tục gì, lắp thế nào cho an toàn. EVNHANOI đã có cẩm nang 27 câu hỏi đáp, bộ ảnh chiến dịch và công cụ tính trong App EVNHANOI CSKH, nhưng chưa có một trang gom tất cả lại để người dân đọc trên điện thoại. Con số trên trang phải khớp với ứng dụng, và khi biểu giá điện hay quy định thay đổi thì nhân viên EVNHANOI phải tự sửa được.
Cách giải
Chúng tôi thiết kế giao diện, lập trình trang chủ và trang quản trị của chương trình. Trang chủ gồm mười một phần xếp liền nhau để người xem cuộn xuống đọc lần lượt. Ở màn đầu, chúng tôi tách ảnh chiến dịch thành nhiều lớp chuyển động: mây trôi, nắng quét qua mặt tấm pin. Dòng “Biến nắng thành điện” được gõ thành chữ trên trang thay vì in trong ảnh, nên Google đọc được. Phần lợi ích có ô ước tính nhanh theo tiền điện và ba câu tự kiểm tra xem nhà mình có hợp lắp không. Sau đó là TVC của chương trình, sơ đồ hệ thống có nút chuyển Ban ngày / Ban đêm, các thẻ quy định, các bước lắp đặt chia theo trường hợp đấu nối, phần kỹ thuật có la bàn chọn hướng mái, rồi tới công cụ tạm tính, hỏi đáp, tài liệu tải về và ô đăng ký tư vấn.
Ở phần quy định có trợ lý “Bạn thuộc trường hợp nào?”. Trợ lý hỏi lần lượt: hệ thống có đấu nối lưới không, đấu ở cấp điện áp nào, công suất bao nhiêu, có bán điện dư không. Trả lời xong, người dân biết mình phải gửi Thông báo Mẫu 01 tới UBND xã, phường ít nhất 10 ngày làm việc trước ngày lắp, gửi Mẫu 02 tới UBND Thành phố, hay không phải thông báo. Phần hỏi đáp có đủ 27 câu của cẩm nang, lọc được theo nhóm, gõ không dấu vẫn tìm ra, và mỗi câu có một trang riêng.
Trang quản trị chạy trên hệ thống Pubweb của chúng tôi. Nhân viên sửa chữ và ảnh của từng phần trang chủ, bật tắt từng phần, sửa hỏi đáp, tải tài liệu lên và nhập thông số của công cụ tính. Mỗi tài khoản có một trong ba vai trò: quản trị, biên tập nội dung hoặc chăm sóc khách hàng (vai trò này chỉ xem được đăng ký tư vấn). Đăng nhập phải qua xác thực hai lớp, và mọi thao tác đều được ghi vào nhật ký.
Điểm đặc biệt
-
Công cụ tạm tính đổi số ngay khi kéo hay gõ: người dân nhập tiền điện hoặc số điện mỗi tháng và diện tích mái lắp được pin. Công cụ gợi ý công suất, số tấm pin, diện tích tấm pin, rồi tính hóa đơn trước và sau khi lắp, số tiền điện giảm mỗi tháng và cả năm. Không có nút gửi, không phải để lại số điện thoại mới thấy kết quả; lượt dùng chỉ được đếm ẩn danh
-
Cùng con số với App EVNHANOI CSKH: công thức đã được đối chiếu với công cụ trong ứng dụng. Tiền điện tính theo biểu giá sinh hoạt 5 bậc áp dụng từ 01/11/2026, đã cộng VAT 8%; sản lượng tính theo hệ số từng tháng của Hà Nội năm 2026, nên nhìn biểu đồ thấy rõ tháng 2 ít nắng, tháng 7 nhiều nắng. Chọn tháng của hóa đơn thì ra đúng số tiền giảm của tháng đó
-
Bán điện dư theo Nghị định 243/2026: bật “Đăng ký bán điện dư” thì công cụ tính phần điện dư, không quá 50% sản lượng phát, nhân với giá 844,8 đ/kWh của năm 2026. Nhà vắng người ban ngày thì chọn tỷ lệ dùng điện ban ngày 70% hoặc 50%. Người dân cũng chọn được hướng mái
-
Biểu giá đổi thì nhân viên tự sửa: biểu giá bậc thang, giá điện dư theo từng năm và các hệ số dùng để tính đều được nhập trong trang quản trị. Mỗi biểu giá có ngày hiệu lực, và có ô chạy thử để xem kết quả trước khi lưu
-
Đăng ký tư vấn không bị sót: người dân để lại họ tên, số điện thoại và phường, xã nơi lắp. Bấm gửi xong là nhân viên nhận email báo ngay; email nào chưa đi được thì hệ thống tự gửi lại. Nhân viên giao từng đăng ký cho Công ty Điện lực phụ trách và xuất danh sách ra Excel
Công nghệ
Chúng tôi viết site bằng Laravel 13 và PHP 8.3, gồm các phần chính:
- trang chủ mười một phần, chuyển động bằng CSS và GSAP, nạp sau khi trang đã hiện
- công cụ tạm tính chạy ngay trên trình duyệt, không chờ máy chủ
- hỏi đáp 27 câu, mỗi câu một trang, tìm không dấu
- trang quản trị Pubweb: ba vai trò, xác thực hai lớp, nhật ký thao tác
- dữ liệu có cấu trúc (JSON-LD) cho từng trang và sitemap
Vì sao đáng kể
Đây là trang một tổng công ty điện lực dùng để hướng dẫn người dân theo một quy định vừa ban hành. Người dân Hà Nội tự tính được tiền điện giảm theo đúng biểu giá đang áp dụng, biết nhà mình phải gửi thông báo nào và nộp ở đâu, rồi để lại số điện thoại cho Công ty Điện lực gọi lại. Hệ số sản lượng và giá điện dư mà công cụ dùng đều có văn bản gốc trong phần Tài liệu để người dân tự đối chiếu.
