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

Xây Dựng Trang Khởi Nghiệp: Những Lệnh Lên Lịch Hẹn Nâng Cao

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Automatic Time-Zone Detection
Building Your Startup: Requesting Scheduling Changes

Vietnamese (Tiếng Việt) translation by Andrea Ho (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.

Mở rộng chọn lựa lên lịch

Khi Meeting Planner alpha bắt đầu giai đoạn kiểm tra, tính năng thiếu sót rõ nhất là không có khả năng thay đổi cuộc hẹn sau khi nó đã được lên lịch. Nhưng cũng có những tính năng còn thiếu khác như gửi lại những lời mời bị mất trong email, tái lập lịch một cuộc hẹn một cách toàn diện, hoặc khả năng xem và chỉnh sửa những thiết lập điều khiển đã chọn bởi người tổ chức.

Thật thú vị, tôi cũng đã bắt đầu nhận ra rằng khả năng điều chỉnh các cuộc họp một cách dễ dàng sau khi chúng đã được lên kế hoạch có thể làm nên hoặc phá vỡ thương hiệu Meeting Planner. Ví dụ, có rất nhiều kỹ thuật xã hội trong điều chỉnh cuộc họp sau khi lập kế hoạch. Thông thường, bạn cần yêu cầu người tham gia liệu có ổn không khi điều chỉnh thời gian hoặc địa điểm. Có lẽ bạn chỉ muốn gặp sớm hơn 15 phút hoặc vào ngày hôm với cùng một thời gian và địa điểm. Nhưng bạn không thể luôn thực hiện những thay đổi này nếu không có sự đồng ý.

Giữ trang web dễ hiểu và đơn giản để sử dụng với tất cả các khả năng này là định hướng chính của tôi. Làm thế nào tôi có thể thêm một số tính năng ngày càng tăng mà không cluttering giao diện người dùng hoặc quá che giấu chúng? Làm thế nào nó sẽ làm việc trên cả hai giao diện di động và máy tính để bàn?

Trong bài hướng dẫn hôm nay, tôi sẽ mở rộng thanh điều hướng bằng cách sử dụng Bootstrap và các khái niệm cơ bản về xây dựng một số tính năng lên lịch nâng cao trong Meeting Planner. Tuần tới tôi sẽ xem xét xây dựng một tính năng phức tạp hơn cho người tham gia để yêu cầu thay đổi và để người khác chấp nhận hoặc từ chối những thay đổi đó.

Tôi hy vọng bạn sẽ thử tất cả tính năng lên lịch mới trên trang web trực tuyến và chia sẻ suy nghĩ và phản hồi của bạn trong phần nhận xét bên dưới. Tôi tham gia vào các cuộc thảo luận, nhưng bạn cũng có thể tìm tôi trên Twitter qua @reifman . Tôi luôn đón nhận các ý tưởng về tính năng mới cho Meeting Planner, cũng như các đề xuất cho các loạt bài trong tương lai.

Như một lời nhắc nhở, tất cả các code cho Meeting Planner được cung cấp là mã nguồn mở và được viết bằng framework Yii2 của PHP. Nếu bạn muốn tìm hiểu thêm về Yii2, xem qua loạt bài song song của tôi Lập trình Với Yii2.

Mở rộng thanh điều hướng

Đầu tiên, hãy xem làm sao để mở rộng thanh điều hướng hiện tại. Đây là danh sách của các tính năng tôi sẽ lên kế hoạch để bổ sung:

  • Cho phép thay đổi địa điểm, ngày và giờ của một cuộc họp sau khi được hoàn tất.
  • Việc yêu cầu những điều chỉnh nhỏ trong một cuộc họp, chẳng hạn có thể gặp sớm hơn một giờ? Hoặc đề xuất địa điểm khác?
  • Việc tái sắp xếp toàn diện một cuộc họp với cùng người tham dự và địa điểm.
  • Lập lại một cuộc họp bằng việc dùng địa điểm, những ngày trong tuần và thời gian trong ngày cùng những người tham dự của cuộc họp trước để thực hiện việc lên lịch một cuộc họp mới dễ dàng hơn.
  • Cho người tham dự thấy một lịch sử theo thứ tự của tất cả những hoạt động lên kế hoạch cho một cuộc họp.
  • Xem và cập nhật các thiết lập cho một cuộc họp

Như bạn có thể thấy, không chỉ có nhiều chức năng để xây dựng, mà tôi còn không biết đặt nó ở đâu trong giao diện mà không gây ra sự lộn xộn.

Command bar cũng cần thay đổi phụ thuộc vào trạng thái của cuộc họp. Những cuộc họp trong giai đoạn lên kế hoạch, có những chọn lựa khác biệt ngoài pending, confirmed hoặc những cuộc họp đã hoàn tất.

Những ý tưởng UX ban đầu đưa trở về Bootstrap

Ý tưởng ban đầu của tôi để cung cấp một liên kết Advanced Settings (những thiết lập nâng cao) sẽ hiển thị một thanh lệnh ẩn. Tôi đã trải nghiệm điều này trước tiên, nhưng nó không thoã đáng về mặt thẩm mỹ.

Sau đó, tôi xét lại tài liệu của Bootstrap và tìm thấy dropdown combo box:

Build Your Startup Advanced Scheduling - Bootstrap Documentation of Dropdown

Tôi thích cách nó hoạt động. Vì thế tôi quyết định đặt phần lần những lệnh nâng cao trong một nút dropdown hướng bên trái.

Đây là một ví dụ về diện mạo của nó trong giai đoạn lên kế hoạch của một cuộc họp:

Build Your Startup Advanced Scheduling - Meeting Planner Button Dropdown

Chú ý rằng bootstrap đã đề xuất một class cho những menu dạng dropdown. Một command bar đặt ở cuối trang sử dụng dropup như bên dưới:

Tôi cũng đã tạo các file view thành phần được hiển thị tùy thuộc vào trạng thái của một cuộc họp. Ví dụ, trong /frontend/views/meeting/view_confirmed.php, bạn có thể thấy _command_bar_past.php hoặc _command_bar_confirmed.php được đính kèm:

Xác định quyền truy cập vào các lệnh cho những người xem khác nhau

Tôi không muốn cho phép mọi người nhìn thấy tất cả các lệnh. Những người tổ chức sẽ thấy nhiều lệnh hơn so với người tham gia, nhưng các thiết lập cuộc họp cũng thường cho phép họ truy xuất.

Dưới đây là ví dụ để xác định xem có nên hiển thị tùy chọn để mở lại cuộc họp và thay đổi nó như thể nó vẫn đang trong giai đoạn lập kế hoạch:

Chọn lựa này bao gồm trong menu thả xuống của Bootstrap nếu cuộc họp chưa bắt đầu và người xem là người tổ chức hoặc người tổ chức đã cho phép người tham gia thay đổi.

Bây giờ, chúng ta hãy dấn thân vào việc xây dựng một số chức năng cho các lệnh khác nhau này.

Xây dựng những câu lệnh sắp xếp nâng cao

Không khả thi nếu đề cập tất cả công việc mới đi vào chi tiết của những tính năng sắp xếp lịch này. Ngắn gọn, tôi sẽ chỉ bao gồm những điều cơ bản và bất kỳ khía cạnh độc đáo của các lệnh khác nhau.

Mỗi tính năng cần phải lâu hơn bây giờ

Sau khi triển khai một số tính năng bảo mật cao hơn trong Meeting Planner, tôi cố gắng bám vào những tiêu chuẩn code nghiêm ngặt hơn khi tôi bổ sung thêm tính năng. Tôi dành nhiều thời gian vào việc truy xuất controller, kiểm tra truy xuất model, và giới hạn đánh giá.

Bản phát hành beta cũng sẽ hỗ trợ nhiều người tham dự trong cuộc họp, và trong đầu tôi phải kiến trúc code khi tiến hành.

Tổng quan, với mỗi thứ tôi mất nhiều thời gian thực hiện so với chế độ tạo hình mẫu nhanh.

Khi tôi xây dựng những tính năng đa dạng cho cuộc họp, tôi thường xuyên cảm thấy lượng công việc tăng lên khi tôi bổ sung vào phần code nền tảng. Bạn sẽ chú ý những phần kiểm tra này trong code bên dưới.

Cũng có sự chú ý đến nhật ký lịch sử Meeting, chúng ta sẽ làm cho nó hiển thị. Vì thế mỗi hành động thường yêu cầu một kỷ lục ghi chép hữu ích

Thực hiện thay đổi cho một cuộc họp

Một cách dễ dàng cho phép thay đổi một cuộc họp đã được chốt là chỉ cho phép người tổ chức mở lại nó, đưa nó về lại bước planning. Sau đó, họ có thể bổ sung, ngày giờ và địa điểm, chọn những cái mới, và quyết định cuộc họp lại.

Tôi cũng muốn người tổ chức cấp quyền cho người tham dự làm điều này. Việc này đỏi hỏi phải xây dựng khả năng xem và cập nhật thiết lập cho mỗi cuộc họp.

Tôi đã bổ sung cho phép người tham dự để yêu cầu thay đổi của hoặc thực hiện trực tiếp.

Khi một cuộc họp được tạo ra, thiết lập của nó được khởi tạo với thiết lập mặc định của người dùng:

Bạn có thể xem kết quả của trình điều khiển mới và cập nhật chế độ xem cho các thiết lập Gặp gỡ dưới đây:

Build Your Startup Advanced Scheduling - Meeting Settings

Đây là hàm actionReopen() trong /frontend/controllers/MeetingController.php:

Và đây là code cho model Meeting.php để dời cuộc họp lại sang chế độ planning (lên kế hoạch):

withinActionLimit đang kiểm tra số lần ai đó cố thử mở lại một cuộc họp. IncreaseSequence để dành cho file .ics - khi ngày, giờ và địa điểm thay đổi, file ics cần được biết.

Hình ảnh bên dưới hiển thị một cuộc họp đã được xác nhận với nhiều chọn lựa cao cấp cấp có sẵn:

Build Your Startup Advanced Scheduling - Command bar with fully loaded Dropdown menu

Khi người dùng click vào Make Changes trong menu phía trên, trạng thái cuộc họp trợ về đang lên kế hoạch và họ có thể trở lại để cập nhật ngày, giờ và nơi chốn:

Build Your Startup Advanced Scheduling - Reopened Meeting Planning

Sắp xếp lại cho một cuộc họp

Nếu các sự kiện đã dẫn dắt các người tham dự nhận ra rằng họ chỉ cần bắt đầu lại, chọn lựa Reschedule huỷ cuộc họp hiện tại và tạo một lời mời lập kế hoạch mới.

Hiện thời, tôi giới hạn tình năng này chỉ dành cho người tổ chức (không cho người tham dự). Phương thức Meeting.php::Reschedule() hỗ trợ mỗi người thực hiện hành động này:

Những người tham dự và địa điểm đã chọn lựa được sao chép thành một cuộc họp mới.

Lập lại một cuộc họp

Một cách tiếp cận khác cho việc lên kế hoạch là cho phép những người tham dự có thể sao chép những cuộc họp trước đây. Trong tương lai, có lẽ tôi cho phép người xem quyết định những người dự, địa điểm và thời gian nào được sao chép, nhưng hiện giờ, Meeting Planner tạo một cuộc họp mới với cùng những người tham dự ở cùng một địa điểm - và một cùng một ngày trong tuần và thời gian của ngày thứ nhất và hai tuần trong tương lai.

MeetingTime::createTimePlus() dưới dây bổ sung một Meeting Time trong cùng ngày của tuần và giờ của ngày, nhưng một tuần trong tương lai, thậm chí nếu cuộc họp ban đầu đã diễn ra từ nhiều tháng trước. Vòng lặp while cần thiết cho những cuộc họp trước đây.

Gửi lại những lời mời

Tôi cũng xây dựng một tính năng gửi lại để phòng trường hợp người tham dự đã không nhận được lời mời ban đầu hoặc xác nhận sau cùng.

Tôi dự để xây dựng chức năng outbound cho email cho hoạt động không đồng bộ và làm cho việc tái truyền tải dễ dàng hơn, nhưng may mắn những phương thức hiện tại hoạt động tốt trong những tình huống gửi lại với vài thay đổi.

Lịch sử cuộc họp

Xuyên suốt loạt bài, chúng ta đã xây dựng một nhật ký những thay đổi cho những cuộc họp. Giờ có một cách cho những người tham gia xem lịch sử các cuộc họp. Nó trông như thế này.

Build Your Startup Advanced Scheduling - Viewing the meeting history of events

MeetingLogController.php kiểm tra rằng người xem là một người tham dự của buổi họp và chuẩn bị dữ liệu cho việc xem ghi chép.

Sau đó /frontend/views/meeting-log/index.php trình bày dữ liệu được hiển thị phía trên.

Tiếp theo là gì?

Hiện giờ tôi đang ráo riết viết code để hoàn thành bản phát hành beta. Những người biên tập ở Envato Tuts+ đã cố gắng hết sức làm tôi mất tập trung với những con robot điều khiển tâm trí và những âm thanh OKCupid từ ứng dụng quy trình làm việc iOS của họ, nhưng họ đã không thành công. Phần phát triển của Meeting Planner tiếp tục với tốc độc nhanh.

Việc giải quyết kỹ thuật xã hội và UX cho những người tham dự họp để yêu cầu và đáp ứng các điều chỉnh nhỏ hơn của việc lập lịch hẹn có thể làm nên thương hiệu của Maeeting Planner hoặc phá vỡ nó, và đó là điều tôi đang chú tâm thực hiện nhất.

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.  Tôi đang lên kế hoạch để viết một bài hướng dẫn về crowdfunding, hãy tham khảo WeFunder Meeting Planner page. 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.

Những 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.