Giải pháp JavaScript cho web – dự án thực tế

Các giải pháp hoạt động trong trình duyệt: bộ phân tích biểu thức được tích hợp vào nền tảng của bên thứ ba, giao diện chỉnh sửa dữ liệu mà không đụng đến tệp nguồn, cải tiến công cụ xử lý hình ảnh hiện có, biểu mẫu ghi nhớ dữ liệu đã nhập, bộ lọc danh mục hoạt động không cần tải lại trang và quét mã vạch bằng camera điện thoại. Điểm chung là mọi thứ có vẻ tự vận hành đối với người dùng, trong khi phía sau là mã JavaScript được viết cẩn thận để hòa hợp với hệ thống sẵn có. Tôi thực hiện những công việc này trong dịch vụ lập trình website.

Bộ phân tích JavaScript độc lập cho phép tính và biểu thức điều kiện

Thực hiện trong quý III năm 2022.

Vấn đề

Khách hàng hình dung một bộ phân tích JavaScript nhanh và rõ ràng cho các phép tính số học, được tích hợp như tiện ích vào một nền tảng không cần lập trình. Bộ phân tích phải nhận các biến được truyền dưới dạng JSON — số, mảng và đối tượng — rồi dùng chúng trong những biểu thức vẫn dễ đọc và hiển thị, chẳng hạn (a+b) (c[1]+c[2]) * (d.green + d.blue). Các biểu thức điều kiện như if(a>3, d.green, d.blue) cũng là tính năng mong muốn. Thách thức lớn nhất là toàn bộ chức năng phải nằm trong một thư viện duy nhất, không có bất kỳ phần phụ thuộc bên ngoài nào.

Giải pháp

Một bộ phân tích độc lập đã được xây dựng để thực hiện phép toán trên các biến JSON, đồng thời hiểu và xử lý biểu thức điều kiện:

  • diễn giải biến: đọc và phân tách đáng tin cậy các biến truyền qua JSON, bao gồm mảng và đối tượng lồng nhau;
  • biểu thức rõ ràng: giao diện người dùng giúp dễ dàng tạo và hiểu biểu thức;
  • logic điều kiện: biểu thức điều kiện giúp bộ phân tích linh hoạt hơn đáng kể;
  • không có phần phụ thuộc: bộ phân tích hoàn toàn độc lập nên có thể tích hợp thuận lợi vào nền tảng không cần lập trình.

Công nghệ sử dụng

Kết quả

Nền tảng có thêm một thư viện tính toán biểu thức với biến và điều kiện mà không phải tải bất kỳ phần phụ thuộc bên ngoài nào.

Giao diện chỉnh sửa lịch hoạt động XML

Thực hiện trong quý I năm 2021.

Vấn đề

Lịch hoạt động hằng tuần cùng các tham số được lưu trong một tài liệu XML. Khách hàng cần một giao diện đơn giản, rõ ràng trong trình duyệt để chỉnh sửa và lưu hoạt động của từng ngày. Yêu cầu cũng bao gồm việc thay đổi các trường nhập liệu tùy theo loại phương tiện được chọn cho hoạt động.

Giải pháp

Một giao diện web phù hợp chính xác với cấu trúc XML hiện có đã được xây dựng:

  • chọn ngày: người dùng chọn bất kỳ ngày nào từ Chủ nhật đến thứ Bảy và thay đổi hoạt động của ngày đó;
  • cài đặt hoạt động: thời gian bắt đầu và âm thanh, có thể bật hoặc tắt cho từng hoạt động;
  • chọn loại phương tiện từ danh sách thả xuống cho từng hoạt động;
  • trường thích ứng theo lựa chọn: video trực tuyến hiển thị trường liên kết, còn bản trình chiếu hiển thị các cài đặt liên quan;
  • lưu thay đổi trở lại tài liệu XML trên máy chủ.

Công nghệ sử dụng

Kết quả

Lịch hoạt động được chỉnh sửa qua biểu mẫu trong trình duyệt, với các trường tự thích ứng theo lựa chọn, thay cho việc sửa tệp XML thủ công.

Cải tiến công cụ cắt ảnh

Thực hiện trong quý IV năm 2020.

Vấn đề

Khách hàng đã có một công cụ trong trình duyệt cho phép người dùng tải ảnh lên, thay đổi kích thước, di chuyển và cắt phần mong muốn; công cụ phản ánh chính xác các thay đổi trong ảnh đầu ra. Các chức năng cơ bản và bố cục trang hoạt động tốt, không được phép thay đổi, nhưng khách hàng cần hai cải tiến đáng kể để công cụ hữu ích hơn. Vì vậy, công việc đòi hỏi chỉnh sửa mã nguồn hiện có của bên khác, dựa trên tài liệu và mã nguồn được cung cấp.

Giải pháp

Mục tiêu là mở rộng khả năng của công cụ trong khi giữ nguyên các chức năng cốt lõi:

  • giữ nguyên chức năng cơ bản: thay đổi kích thước, di chuyển và cắt ảnh vẫn hoạt động như trước;
  • hai cải tiến mới được thực hiện theo yêu cầu của khách hàng;
  • tích hợp vào mã hiện có và giữ nguyên bố cục HTML đã định;
  • dễ sử dụng: các cải tiến mới trực quan như phần còn lại của công cụ.

Công nghệ sử dụng

Kết quả

Công cụ có thêm các khả năng được yêu cầu, còn người dùng vẫn làm việc theo cùng cách và trong bố cục quen thuộc.

Biểu mẫu ghi nhớ dữ liệu đã nhập

Thực hiện trong quý III năm 2021.

Vấn đề

Khách hàng có một biểu mẫu HTML5 trên website và muốn giúp người dùng khỏi phải nhập lại dữ liệu. Nội dung của hai trường cụ thể cần được ghi nhớ trong cookie hoặc LocalStorage và tự động điền vào các trường đó trong lần truy cập tiếp theo. Khách hàng cho rằng biểu mẫu có thể đã sử dụng một phần LocalStorage nhưng không chắc chức năng đó có thực sự hoạt động hay không.

Giải pháp

Mục tiêu là lưu các nội dung nhập cụ thể và tái sử dụng chúng ổn định trong những lần truy cập sau:

  • lưu trong LocalStorage: dữ liệu từ hai trường được lưu đáng tin cậy ngay khi nhập vào biểu mẫu;
  • tự động điền: khi trang mở, hệ thống kiểm tra dữ liệu đã lưu và điền vào các trường tương ứng;
  • đọc dữ liệu nhanh và chính xác, không gây chậm trễ hay lỗi trong hoạt động của biểu mẫu.

Công nghệ sử dụng

Kết quả

Khi quay lại trang, khách truy cập thấy các trường đã được điền sẵn; vấn đề được giải quyết nhanh chóng.

Nhận xét của khách hàng

★★★★★5/5

“Anh ấy đã giải quyết vấn đề rất tốt, phản hồi nhanh chóng và hoàn thành công việc trong thời gian ngắn.”

Bộ lọc danh mục nhiều bước trên WordPress

Thực hiện trong quý III năm 2021.

Vấn đề

Một website WordPress cần bộ lọc danh mục gồm hai bước: khi chọn danh mục chính trong danh sách đầu tiên, danh sách thứ hai phải lập tức hiển thị các danh mục con mà không tải lại trang. Danh mục con được ẩn cho đến khi chọn danh mục chính; sau khi chọn danh mục con, nút “tiếp tục” dẫn đến trang nội dung của danh mục đó. Công việc phải được thực hiện không dùng plugin, tập trung vào chức năng thay vì giao diện.

Giải pháp

Một bộ lọc nhiều bước tương tác đã được xây dựng hoàn toàn không cần plugin:

  • tải động: danh mục con được tải trong nền dựa trên danh mục chính đã chọn;
  • không tải lại trang trong toàn bộ quá trình lọc, giúp thao tác mượt mà;
  • ẩn danh mục con cho đến khi danh mục chính được chọn;
  • chuyển đến trang danh mục: nút “tiếp tục” mở trang có nội dung thuộc danh mục con đã chọn.

Công nghệ sử dụng

Kết quả

Khách truy cập đến được nội dung mong muốn qua hai lựa chọn nhanh chóng, còn website không phải gánh thêm một plugin.

Quét mã vạch bằng camera trong ứng dụng web di động

Thực hiện trong quý III năm 2019.

Vấn đề

Khách hàng có một ứng dụng web hiện có, được phát triển trong Visual Studio 2017 với jQuery và Bootstrap, dùng trên điện thoại Android và iOS. Ứng dụng còn thiếu chức năng quét mã vạch; khách hàng cũng muốn hiển thị thêm các thông tin nhỏ gọn trên màn hình khi camera bật, chẳng hạn ngày tháng và văn bản thay đổi theo ngữ cảnh. Mọi thứ phải hoạt động tốt như nhau trên cả hai nền tảng di động.

Giải pháp

Chức năng quét mã vạch được tích hợp vào dự án hiện có, đồng thời duy trì khả năng hiển thị đáp ứng trên điện thoại:

  • quét mã vạch bằng camera điện thoại, dễ sử dụng;
  • hoạt động đáp ứng: các chức năng mới hoạt động trên thiết bị Android và iOS;
  • thông tin phủ trên màn hình camera: ngày tháng và văn bản theo ngữ cảnh xuất hiện trên hình ảnh camera khi camera hoạt động.

Công nghệ sử dụng

Kết quả

Ứng dụng có thêm chức năng quét mã vạch trên điện thoại của cả hai nền tảng, cùng thông tin rõ ràng trên màn hình khi camera bật.

Nhận xét của khách hàng

★★★★★5/5

“Đóng góp của Dejan cho dự án của chúng tôi thật xuất sắc. Chuyên môn và sự tận tâm của anh ấy thể hiện rõ trong chất lượng công việc được bàn giao. Được làm việc với một chuyên gia tự do tài năng như vậy là một đặc ân. Rất đáng giới thiệu! Làm tốt lắm, Dejan!”

Bạn cần một giải pháp tương tự?

Phạm vi công việc, cách xác định giá và quy trình thực hiện được trình bày tại trang lập trình website. Xem các website hoàn chỉnh được xây dựng trên nền tảng của tôi trong mục website dùng NoEmStilOK CMS và website dùng giao diện Dozet WordPress; các dự án khác nằm trong nhóm ứng dụng web và JavaScript.