QUẢN LÝ SƠ ĐỒ CHỖ NGỒI BẰNG ỨNG DỤNG WEB LEAFLET THAY THẾ EXCEL

Để có thể đảm bảo chỗ ngồi làm việc cho số lượng nhân viên ngày càng tăng tại Line Nhật Bản, tháng 4 năm 2017, văn phòng LINE Nhật Bản được chuyển sang JR SHINJUKU MIRAINA TOWER. Song song với việc di chuyển văn phòng, đội IT support đã tiến hành phát triển một vài hệ thống nội bộ mới cho công ty. Một những hệ thống mà tôi muốn giới thiệu trong bài viết này là hệ thống “Sơ đồ quản lý chỗ ngồi”.

Nhu cầu xây dựng hệ thống

Trước đây, tại các văn phòng cũ, chúng tôi sử dụng Excel để quản lý chỗ ngồi theo như hình bên dưới (Đã ẩn tên của nhân viên tại vị trí chỗ ngồi):

Giả sử khi muốn xác định chỗ ngồi của Alice ở đâu, người tìm kiếm sẽ phải sử dụng file Excel như trên, hoặc nếu file đã được lưu ở dạng .pdf, người dùng phải tải file về và xem bằng trình duyệt Viewer, Ctrl+F để tìm được người có tên “Alice”. Đây thực sự không phải là cách làm hoàn toàn chính xác và tiện lợi. Vì thế rất nhiều người dùng thể hiện sự không thoải mái và khó chịu, dù vậy họ vẫn theo cách cũ này vì nhiều lý do. Tuy nhiên, công tác quản lý chỗ ngồi của nhân viên hành chính đã vấp phải hạn chế khó khăn khi số lượng nhân sự tăng lên kéo theo sự tăng về chi phí. Đặc biệt, vấn đề chính là ở chỗ việc hợp nhất các file excel có thay đổi rất bất tiện, đồng thời nhân viên khi thay đổi chỗ ngồi cũng không thông báo với người phụ trách theo dõi chỗ ngồi của bộ phận hành chính, làm giảm độ tin cậy về tính chính xác của thông tin chỗ ngồi.

Cuối cùng, để giải quyết vấn đề này, chúng tôi đi đến kết luận rằng cần thiết phải có một hệ thống web để người dùng có thể quản lý chỗ ngồi một cách dễ dàng. Ban đầu, chúng tôi xem xét tính đến việc sử dụng một hệ thống từ bên ngoài. Tuy nhiên do phải cân nhắc về việc hệ thống bên ngoài đó có đủ tính năng hay không, tốn quá nhiều chi phí hay không, có đang sử dụng flash không… nên đúng là không dễ dàng gì để có thể tìm ra được một sản phẩm bên ngoài phù hợp. Và kết quả là chúng tôi đã quyết định tự phát triển một hệ thống quản lý chỗ ngồi phản ánh chỗ ngồi thực tế của nhân viên tại LINE.

Nên xây dựng hệ thống quản lý chỗ ngồi như thế nào?

Trong các tiêu chí xây dựng hệ thống mới này, chúng tôi đặt trọng tâm vào các yếu tố sau:

  • Nhân viên hành chính phụ trách phải trực tiếp quản lí được layout chỗ ngồi (floor map), bởi dù không chuyển văn phòng thì cấu trúc chỗ ngồi tại LINE thường xuyên thay đổi.

    • Do nhân viên hành chính không có kiến thức về code, nên khi thay đổi floor map, hệ thống này phải là hệ thống cho phép thay đổi được mà không cần phải sửa đổi code html.
  • Tất cả thông tin chỗ ngồi có thể thay đổi một cách dễ dàng.

    • Trường hợp chỗ ngồi của ai đó bị thay đổi, những người khác dù không phải chính cá nhân này, vẫn có thể nhận ra sự thay đổi đó và có thể edit. the particular seat.
  • Phải cung cấp tính năng tìm kiếm dễ dàng hơn Excel.

Trong quá trình xác định các yêu cầu kĩ thuật cho hệ thống, điều khiến chúng tôi băn khoăn nhất chính là việc quản lý như thế nào. Ban đầu, chúng tôi muốn tận dụng file excel đã có sẵn để tạo layout.
Tuy nhiên, trong file có quá nhiều hình vẽ sơ đồ, việc xác định vị trí các ô excel khó quá nên chúng tôi đành từ bỏ ý định này. Trong khi đó, nhân viên hành chính lại quen thuộc với thao tác edit vị trí chỗ ngồi bằng cách sử dụng file excel, nên rốt cuộc layout vẫn phải được tạo ra dựa trên các file excel sẵn có đó.
Theo đó, chúng tôi quyết định nhúng hình ảnh trong file excel vào webpage và set toạ độ trên web cho user dễ sử dụng.

Đối với việc phân loại user, chúng tôi chỉ cấu hình 2 loại: User chỉ có thể thay đổi thông tin chỗ ngồi, và Admin có thể thay đổi layout. Ngoài ra, đối với chức năng tìm kiếm, trong khi Excel chỉ cho phép tìm kiếm các tên nhân viên đã được nhập, còn trong hệ thống mới này, chúng tôi cho phép tìm kiếm cả nickname dựa trên việc xem xét tình hình thực tế các phòng ban thường xuyên gọi nhau bằng nickname.

Chúng tôi đã làm như thế nào?

Việc phát triển thì về cơ bản là một mình tôi thực hiện, bởi đây cũng không phải hệ thống quy mô lớn tốn nhiều nhân lực. Tuy nhiên, do bản thân tôi không có nhiều kinh nghiệm về phát triển với Javascript, cộng với quỹ thời gian cũng không nhiều, nên cái tôi cần là một thư viện Javascript mà có thể cho phép dễ dàng thể hiện một map app. Và Leaflet chính là câu đáp án cho nhu cầu đó.

Leaflet là gì?

Leaflet là thư viện Javascript hàng đầu dành cho web map (bản đồ web), hỗ trợ cả PC và Mobile. Version 0.1 được phát hành năm 2011, version 1.0 phát hành năm 2011, và version mới nhất 1.3.3 mới được phát hành ngày 18/7/2018. Leaflet không chỉ có chức năng cần thiết cho việc bố trí chỗ ngồi tại LINE, mà việc sử dụng lại rất đơn giản, mang lại cho người dùng cảm giác dễ dàng tìm kiếm tổng hợp được các tài liệu liên quan. Nếu là người đã từng sử dụng API của Google Maps, bạn sẽ rất dễ dàng sử dụng Leaflet để phát triển do chúng có khá nhiều điểm giống nhau.

Ví dụ của một layout sử dụng Leaflet

Các dòng code HTML dưới đây là một ví dụ cơ bản về việc sử dụng Leaflet:

<!DOCTYPE html>
<html>
<head>
    <title>Floor Map Example - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
    var map = L.map('map', {crs: L.CRS.Simple});

    var bounds = [[0,0], [480,640]]; // Set the image resolution as the boundary
    L.imageOverlay('seat.png', bounds).addTo(map); // Set the background image

    L.circle([170, 170], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("iwatsuki", {permanent: true, direction: 'center'}).openTooltip()
    .bindPopup("iwatsuki <br />IT Support Department");

    L.circle([170, 290], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name A", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([170, 410], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name B", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 170], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name C", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 290], {color: 'green',radius: 35}).addTo(map)
    .bindTooltip("Name D", {permanent: true, direction: 'center'}).openTooltip();

    L.circle([60, 410], {color: 'gray',radius: 35}).addTo(map)
    .bindTooltip("Name E", {permanent: true, direction: 'center'}).openTooltip();

    map.fitBounds(bounds); // Set an area
</script>
</body>
</html>

Nếu mở file html trên bằng trình duyệt, bạn sẽ thấy được màn hình bên dưới? Bạn thấy thế nào? Cũng tương đối thể hiện được sơ đồ chỗ ngồi đấy chứ nhỉ?!

Tên của mỗi chỗ ngồi được hiển thị dưới dạng tooltip trên Leaflet, nếu thuộc tính permanent của Tooltip đượt set là true thì cho dù không có bất kì action nào của user, tooltip cũng được render để ta có thể nhìn thấy được ai đang ngồi chỗ nào, y hệt như khi nhìn thấy trên file excel hoặc pdf. Thêm nữa, người dùng có thể scroll layout chỗ ngồi bằng động tác kéo chuột, click nút “+” hoặc “-” ở góc trên bên trái màn hình, hay sử dụng con lăn chuột để phóng to thu nhỏ màn hình mà không cần thực hiện thêm bất kỳ công việc nào khác.

Hình dưới đây là layout được phóng to sau khi người dùng click vào tên iwatsuki. Do là floor map, sẽ rất tiện lợi nếu chúng ta thể hiện được cả tên phòng ban, hình đại diện, thông tin liên lạc. Tính năng pop-up của Leaflet hoàn toàn cho phép dễ dàng thể hiện chi tiết các thông tin này.

Vậy còn chức năng tìm kiếm, tôi đã phát triển như thế nào?

Phương pháp map.fitBounds(bounds) của Leaflet cho phép bạn set được khu vực cần thể hiện. Bạn có thể implement API phía backend để trả về thông tin toạ độ dựa trên từ khoá để cung cấp được tính năng tìm kiếm.

Mặt khác, do văn phòng LINE Nhật Bản sử dụng mặt bằng từ tầng 15 đến tầng 23 của Mira Tower nên phát sinh cả nhu cầu hiển thị theo tầng, tính năng hiển thị này cũng có thể phát triển được thông qua tính năng layer của Leaflet. Dòng code dưới đây add thêm nút “thay đổi Layer” vào góc trên bên phải của màn hình và cho phép người dùng lựa chọn các tầng 21F, 22F, 23F khi hover chuột vào nút đó.

var map = L.map('map', {crs: L.CRS.Simple});

var bounds = [[0,0], [428,608]];

var baseMaps = {
  "21F": L.imageOverlay('21F Image Link', bounds),
  "22F": L.imageOverlay('22F Image Link', bounds),
  "23F": L.imageOverlay('22F Image Link', bounds)
}
L.control.layers(baseMaps).addTo(map);

map.on("baselayerchange", (event) => {
  console.log(event.name); // Print out the new current floor
  // Handle floor change
});

map.addLayer(baseMaps["15F"]);
map.fitBounds(bounds);

Ngoài ra còn có rất nhiều các API tiện lợi khác như API cho phép có được thông tin toạ độ khi click hoặc mouse over, hay xử lý chỗ ngồi theo nhóm v.v. Bạn có thể tham khảo Leaflet’s documentation để có thêm thông tin

Kết quả hoàn thiện của hệ thống sơ đồ quản lý chỗ ngồi

Trong quá trình phát triển lần này, tôi sử dụng Angular 4 cho Frontend và Rails 5 cho API backend. Do nội dung này không có gì đặc biệt, tôi sẽ bỏ qua không đề cập đến các chi tiết cụ thể. Bản chụp dưới đây là một phần của màn hình sơ đồ chỗ ngồi hoàn thiện của LINE Floor Map:

Phần hình ảnh che mờ ở hình trên thể hiện thông tin chỗ ngồi cùng tên, bộ phận, ảnh đại diện và địa chỉ email của nhân viên. Người dùng có thể click vào nút Eraser ở phía trên bên trái hình để xoá thông tin chỗ ngồi này, và click vào nút ngay bên cạnh phía bên phải để copy được permalink của chỗ ngồi. Một khi chỗ ngồi trống, không có thông tin, bất kỳ nhân viên nào cũng có thể điền thông tin của mình vào chỗ ngồi đó. Tuy nhiên, nếu để nhân viên thay đổi thông tin chỗ ngồi tự do quá cũng có thể gây ra nhiều vấn đề, nên hệ thống tự động gửi thư về địa chỉ email của nhân viên có thông tin chỗ ngồi bị thay đổi, trong đó nêu rõ thông tin của người đã thực hiện thao tác thay đổi.

Thêm vào đó, ngoài thông tin nhân viên, hệ thống cho phép tìm kiếm phòng họp và thông tin thiết bị, hỗ trợ toàn bộ các tính năng khi còn sử dụng Excel.
Xét về tính năng, tôi khá hài lòng. Tuy nhiên có một điểm tôi thấy chưa thực sự thoả mãn. Điểm này thật ra tôi cũng nhìn thấy ngay từ đầu khi mới bắt đầu tiến hành, đó là vấn đề thiếu sót, cần phải trau chuốt hơn sơ đồ bố trí chỗ ngồi mà tôi đã tận dụng layout có sẵn để làm background. Có lẽ nhờ điểm không được hài lòng này của tôi, mà sơ đồ của văn phòng LINE FUKUOKA sau này khi phát triển đã được thiết kế tinh tế bài bản hơn.

Bạn có thấy đẹp hẳn hơn không? (Để tránh việc các tooltip có khả năng bị chồng lên nhau khi phóng to sơ đồ, nên lần này khi sơ đồ được phóng to lên một tỷ lệ nhất định, các tooltip sẽ tự động biến mất).

À còn nữa, trên sơ đồ này, người dùng không những có thể tìm kiếm được thông tin nhân viên, mà còn có thể điền các thông ghi chú như “Phòng làm việc” hay “Phòng cho nhân viên”, theo đó cho phép tìm kiếm được các thông tin bổ sung như thông tin phòng họp. Và hiển nhiên tính năng tìm kiếm được hỗ trợ trên cả điện thoại thông minh.

Tổng kết

Dự án này được tiến hành nhằm giảm bớt khối lượng công việc cho bộ phận hành chính của công ty. Chúng tôi nhận thấy rằng kết quả việc giới thiệu hệ thống này đã rất thành công. Việc nhận được rất nhiều phản hồi tích cực của người dùng như “Chúng tôi đã chờ mãi hệ thống như thế này!” góp phần giúp việc giao tiếp trong nội bộ công ty diễn ra suôn sẻ. Tại thời điển hiện tại, mọi việc đều được vận hành được thuận lợi do ai cũng có thể thoải mái thay đổi chỗ ngồi bất cứ khi nào.

Tuy vậy, việc kiểm tra đánh giá việc thay đổi chỗ ngồi có phần bất tiện hơn so với khi sử dụng Excel. Với excel, bạn chỉ cần edit đơn giản file excel chứa layout hiện tại là có thể kiểm tra được việc thay đổi chỗ ngồi, nhưng việc này không đơn giản khi sử dụng web. Hiện tại, để kiểm tra, người dùng vẫn phải copy và paste từng layout có sẵn một vào một file excel layout trống.

Mặc dù hệ thống vẫn tồn tại điểm chưa hoàn hảo, tôi vẫn hi vọng rằng bài viết này có ích đối với những bạn đọc cảm thấy hỗn độn và bất tiện khi thực hiện quản lý và tra cứu thông tin chỗ ngồi bằng Excel.