Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Startups
Code

Xây Dựng Trang Khởi Nghiệp: Các Cuộc Họp Với Nhiều Người Tham Gia

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Requesting Scheduling Changes
Building Your Startup: Completing Group Scheduling

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Final product image
What You'll Be Creating

Bài hướng dẫn này là một phần của loạt bài Building Your Startup with PHP trên Envato Tuts+. Trong loạt bài này, tôi sẽ hướng dẫn bạn xuất bản một trang khởi nghiệp từ ý tưởng đến hiện thực sử dụng ứng dụng Meeting Planner của tôi làm một ví dụ thực tế. Mỗi bước trong quá trình, tôi sẽ phát hành code của Meeting Planner làm ví dụ về mã nguồn mở mà bạn có thể học từ đó. Tôi cũng sẽ giải quyết các vấn đề kinh doanh liên quan đến khởi nghiệp khi phát sinh.

Giới thiệu về Group Meetings (các cuộc họp nhóm)

Lên lịch hẹn cho các cuộc họp với nhiều người tham dự luôn là một phần công việc của tôi - nhưng không thuộc về Sản Phẩm Khả Thi Tổi Thiểu (MVP). Bản phát hành alpha của Meeting Planner khởi chạy với việc lên kế hoạch 1:1. Mục tiêu của việc hỗ trợ lập kế hoạch nhóm trì hoãn danh sách công việc giống như Mount Everest (đỉnh Everest) đối với một người leo núi đang hướng về bảy đỉnh núi (và tôi thậm chí không phải là người leo núi ngoài trời).

Nhiều ngươi tham dự trong cuộc họp là những thách thức khó nhất trong lịch trình và do đó có giá trị đối với đề xuất của sản phẩm của Meeting Planner Tôi đã rất vui mừng khi danh sách nhiệm vụ beta đã đến thời điểm mà tôi có thể bắt đầu làm việc với nó

Tôi đã lên kế hoạch, kiến ​​trúc và viết code với nhiều cuộc họp nhóm nhuần nhuyễn ngay từ lúc đầu tiên. Tôi hy vọng rằng việc cập nhật trang web cho tính năng này sẽ không yêu cầu thay đổi đáng kể về UX hoặc việc cập nhật code. Đã mất khoảng 7-10 ngày làm việc cực kỳ tập trung và kiểm tra nhưng không có tái kiến trúc lớn nào.

Thực tế, testing (kiểm tra) đã chứng minh là khía cạnh khó nhất trong việc xây dựng tính năng này. Nó cũng đã giúp phát hiện những thiếu sót trong những code trước đó. Chỉ là nó không dễ dàng ... gửi đi đến nhiều địa chỉ email, kiểm tra mỗi người nhận được những thông báo phù hợp và đó không phải là những thông báo sai -- và thấy tất cả những tuỳ chọn menu đúng xuyên suốt trang web.

Trong hướng dẫn hôm nay, tôi sẽ đề cập đến việc cho phép nhiều người tham gia, nâng cấp UX cho các nhóm, chỉ định các người tổ chức, xóa người tham gia, và sắp xếp ngày, các tuỳ chọn về thời gian và địa điểm bởi độ thường xuyên của họ với những người tham gia.

Trong hướng dẫn tiếp theo, tôi sẽ rà soát phần còn lại của công việc: xem xét tất cả các khu vực của trang web bị tác động bởi những cuộc họp có nhiều người tham gia, xử lý và hiển thị một cách thông minh danh sách những người nhận với các trạng thái khác nhau, quản lý tốt các thông báo và việc lọc thông báo cho các nhóm và cuối cùng là việc nâng cấp điều đã được đưa ra gần đây: tính năng yêu cầu thay đổi cuộc họp.

Hãy thử lên lịch cho một cuộc họp nhóm

Vui lòng thực hiện lên lịch cho một cuộc họp nhóm hôm nay! Chia sẻ suy nghĩ và phản hồi của bạn trong phần bình luận bên dưới.

Tôi tham gia vào những cuộc thảo luận, nhưng bạn cũng có thể gặp tôi @reifman trên Twitter. I luôn đón nhận những ý tưởng tính năng mới cho Meeting Planner cũng như các để xuất những loạt bài viết trong tương lai.

Như một lời nhắc nhở, tất cả code cho Meeting Planner được cung cấp như mã nguồn mở và viết bằng framework Yii2 của PHP. Nếu bạn muốn học thêm về Yii2, hãy xem qua loạt bài song song Programming With Yii2 (Lập trình với Yii2). Tôi được nghe nhiễu điều hay về Laravel, nhưng dù sao Yii2 vẫn đáp ứng nhu cầu của tôi dễ dàng và nhanh chóng.

Nhìn lại

Đầu tiên khi tôi thiết kế giao diên lên lịch cho Meeting Planner, nó cho xem trạng thái hiện thời của những thành viên khác trong một cột riêng. Và đó là một chút bối rối khi có những phần điều khiển bị vô hiệu hoá.

Meeting Planner Startup Series - The old You Them Availability Panel

Vào thời điểm này, tôi đã lo lắng làm sao tôi sẽ tạo khoảng không cho việc hiển thị trạng thái của nhóm.

Thật may mắn, khi tôi xây dựng lại UX cho trải nghiệm tự đáp ứng tốt hơn, tôi đã thay thế cột trạng thái người tham dự với phần tóm gọn gắn gọn:

Meeting Planner Startup Series - The newer built for mobile responsive planning view

Phần chữ tóm tắt của trạng thái đã tình cờ hiệu quả cho những cuộc họp nhóm.

Bằng việc tái thiết kế để ưu tiên cho thiết bị di động, tôi đã giải quyết đa số những rào cản UX cho những cuộc họp đông người tham dự.

Viết code cho cuộc họp nhóm

Hãy bắt đầu đi chi tiết vào tất cả code và kiểm tra cuộc họp nhiều người tham dự đã yêu cầu điều gì.

Cho phép nhiều người tham dự

Meeting Planner Startup Series - Who Panel - Enabled Button for More Participants

Điều vui nhất ở họp nhóm là kích hoạt chúng rất đơn giản. Tôi chỉ cần tắt phần vô hiệu hoá của nút plus icon (biểu tượng dấu cộng) trên bảng Who của những cuộc họp trong giai đoạn lên kế hoạch:

Sau đó, tôi bắt đầu bằng việc tạo ra MEET_LIMIT trong model Participant:

Nó đã được dùng trong ParticipantController::actionCreate() khi submit:

Nâng cấp UX và các tính năng liên quan

Trong thời gian dài, tôi đã muốn cho phép những người tổ chức cuộc họp được xoá người tham dự, địa điểm và ngày giờ mà không làm lộn xộn giao diện người dùng. Tương tự, tôi nhận ra nên có một vài lệnh để thực hiện với người tham dự.

Sau đó tìm thấy rất nhiều tiện ích trong nút menu thả xuống gọn nhẹ của Bootstrap trong bài hướng dẫn Advanced Commands (những câu lệnh nâng cao), tôi quyết định sử dụng nó để hiển thị những người tham gia cuộc họp.

Meeting Planner Startup Series - New Buttons and Dropdown Menu for Organizers

Người tổ chức được đánh dấu bằng một ngôi sao. Người tham dự từ chối họp được hiển thị màu cam. Người tham dự bị người tổ chức xoá đi sẽ hiển thị màu đỏ.

Đây là code của tôi trong phần mới này /frontend/views/participant/_buttons.php:

Bất kỳ ai cũng có thể gửi một thông điệp đến người tham dự (những tính năng ghi chú cuộc họp hiện được phân phối đến tất cả những người tham dự cuộc họp).

Người tổ chức thấy một dropdown sâu hơn cho phép họ chỉ định người tổ chức bổ sung, ví dụ Make organizer (phân công làm người tổ chức). Hiện giờ đây là một tính năng rất tuyệt. Người tổ chức sẽ nhận nhiều hơn các thông báo hoàn thành và có thêm quyền xuyên suốt quá trình lên kế hoạch. Họ cũng có thể Remove participants (xoá người tham dự).

Xây dựng những tính năng AJAX cho những nút bấm của người tham dự

Tôi đã quyết định rất nhanh để thực hiện AJAX hoá tất cả những tuỳ chọn menu này. Điều đó cần vài giờ phức tạp để code đấy.

Đây là code để định nghĩa menu của nút ban đầu và chuản bị JavaScript:

Có rất nhiều trạng thái của nút, màu sắc và ngôi sao để cập nhập khi có thay đổi tương tác trên một trang mà code trở nên khá lộn xộn. Tôi đã thêm vào những hàm để file JavaScript meeting.js cho toggleOrangizer(), ví dụ make/unset người tổ chức, và toggleParticipant(), ví dụ remove/restore người tham gia như người tham dự.

Những điều này cần có những phương thức controller JSON đi cùng trong file ParticipantController.php để xử lý yêu cầu bật tắt và cập nhật cơ sở dữ liệu:

Kích hoạt tính năng Accordion trên bảng điều khiển

Meeting Planner Startup Series - Open and Closed Panels with Bootstrap Accordion Feature

Ngay lúc này, tôi cũng nhận ra khi những kế hoạch cuộc họp đã có thêm sự phức tạp với thêm nhiều người nhận và các chọn lựa, sẽ phải có thêm scrolling, tôi quyết định triển khai tính năng accordion của Bootstrap cho tất cả bảng điều khiển trong view meeting của chúng ta.

Nói cách khác, giờ bạn có thể click vào một tựa đề để thu gọn hoặc mở từng bảng và / hoặc tất cả các bảng điều khiển.

Đây là những thay đổi cho các thành phần của cuộc họp đặt ở _panel.php:

Lưu ý các cài đặt trên ở phần panel-heading và sau đó là div bao quanh cho panel-body sau đó. Chúng điều khiển việc mở và thu gọn của mỗi bảng điều khiển.

Điều này đã dẫn đến một số vấn đề nhỏ về thẫm mỹ chẳng hạn như vùng đệm không cần thiết xung quanh danh sách của các mục, mà tôi sẽ cần phải làm gọn lại trong tương lai.

Model Infrastructure cho Group Meetings

Trong khi tôi đã lên kế hoạch cho nhiều người tham gia từ ban đầu, nhưng có một số cải tiến về Infrastructure từ nhở đến vừa đủ để hỗ trợ họ.

Trong khi các model MeetingTimeChoice MeetingPlaceChoice theo dõi liệu những người tham gia thích thời gian và địa điểm cụ thể hơn, tôi muốn theo dõi sự sẵng sàng tổng thể cho tất cả người tham gia vào mỗi ngày giờ và địa điểm. Điều này sẽ cho phép tôi sắp xếp các địa điểm và thời gian theo độ phổ biến - và hiển thị các cài đặt thông dụng nhất ở phía trên đầu của các bảng điều khiển.

Trước tiên, tôi tạo ra một migration để thêm vào cả hai model. Một migration của tôi ảnh hưởng đến nhiều model, nó khiến cho điều này thành một loại hình đặc biệt.

Với khả năng này, tôi đã có thể bắt đầu hiển thị ngày giờ họp và ngày sắp xếp theo sự phổ biến của chúng với những người tham gia, từ MeetingController :: actionView():

Bạn có thể thấy điều này trong hình chụp lên kế hoạch bên dưới:

Meeting Planner Startup Series - Sorted Date Times and Places By Popularity

Để theo dõi xem liệu có phải những người tham gia là người tổ chức và cho phép chọn các thông báo của cuộc họp cụ thể trong tương lai, tôi đã thêm di chuyển này cho bảng Participant:

Tôi cũng đã thêm một số hằng số trong Participant.php để làm việc với các thuộc tính này:

Và tôi biết rằng nó sẽ hữu dụng có một vài hàm helper bên trong model cực lớn Meeting này. Ví dụ, IsOrganizer() cho tôi biết có phải người xem hiện thời là một người tổ chức hợp hay không.

Chờ đã, vẫn còn nữa đấy?

Như bạn có thể thấy, có rất nhiều điều cần đề cập để xây dựng tính năng này. Trong phần kế tiếp, tôi sẽ nói đến nửa phần phát triển còn lại và phần kiểm thử cần có để phát hành những cuộc họp đông người tham dự: chuỗi người nhận, các thông báo, các yêu cầu và hồi đáp đến các yêu cầu.

Nếu bạn vẫn chưa thực hiện, hãy lên kế hoạch cho cuộc họp đầu tiên của bạn với Meeting Planner và thử tất cả những thứ trên. Vui lòng chia sẻ phản hồi của bạn trong phần bình luận bên dưới.

Hướng dẫn về tài trợ từ cộng đồng cũng đang trong quá trình xuất bản, vậy hãy theo dõi trang WeFunder Meeting Planner của chúng tôi.

Bạn cũng có thể tìm tôi qua @reifman. Tôi luôn cởi mở với những ý tưởng tính năng mới và những gợi ý cho đề tài cho những bài hướng dẫn trong tương lai.

Hãy tiếp tục theo dõi nhiều bài hướng dẫn sắp tới qua loạt bài Xây Dựng Trang Khởi Nghiệp với PHP.

Liên kết liên quan

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.