Ravot（实时仪表板）

我建造了什么

我是如何构建它的（堆栈是什么？我是否遇到了问题或在此过程中发现了新的东西？）

团队成员

它是如何建造的

其他资源/信息

结论

我建造了什么

公司的实时仪表板

演示链接

https://realtime.bluebecks.com/
为了测试，我删除了一个管理员用户的登录名和密码

https://realtime.bluebecks.com/login
email: franko4don@gmail.com
password: tomcat

代码链接

https://github.com/RealDash/realtime-dashboard

我是如何构建它的（堆栈是什么？我是否遇到了问题或在此过程中发现了新的东西？）

• 项目概述

我们开发了一个实时仪表板，用于显示任务、公告、未来的重要事件以及当前正在播放的音乐等信息。我们的仪表板使用 Laravel、Vue 和 Pusher 构建。
我们的目标是将它显示在办公室墙上的电视屏幕上。

仪表板（实时仪表板端）将具有以下内容：

1. 管理员安排的即将举行的活动。公告部分用于向实习生/团队成员显示公告。
2. Scrumy 板部分。
3. Github 部分显示我们在 Github 上的众多公共存储库的统计信息。
4. Bitbucket 部分。
5. 办公室里目前正在播放的音乐。
6. 显示当前日期和时间的时钟。

浏览器首次显示仪表板后，我们将不再刷新页面。WebSockets 和 Vue 被用来更新各个部分。这样做可以避免刷新页面并避免屏幕闪烁。

每个部分都是一个独立的 Vue 组件。Laravel 的默认调度程序用于检查已调度的事件，并在满足逻辑时触发一个事件，该事件会被广播到推送器。当收到数据时，会向推送器触发一个广播事件。

这项强大的服务 (Pusher) 利用 WebSocket 将服务器事件实时传输到客户端。在客户端，我们使用了 Laravel 的 Echo。这个 JavaScript 库让处理 Pusher 事件变得非常容易。在客户端，每个 Vue 组件都会监​​听新事件，并更新显示的区块。

团队成员

我们一共有三个人参与这个项目。团队成员在 Github 上协作，项目开发于 2018 年 5 月 18 日星期五启动，即在 2018 年 5 月 2 日进行首次提交之后。

以下是团队成员的姓名：

1. Nwanze Franklin (franko4don): 团队负责人
2. Timothy Onyiuke (timolinn)：团队成员
3. Nwankwo Gabriel (gfuns)：团队成员

它是如何建造的

我们首先对拟设计的系统进行了需求分析，这是一个带有实时反馈的小型任务管理系统。我们反复研究了几种设计和技术，最终确定了具体规格。

经过深思熟虑，我们得出了以下结论

• 规格

1. 该项目将使用 Laravel、vuejs、Laravel Echo 和 Pusher，其中 Laravel 用于后端，Laravel Echo 和 Vuejs 用于前端，Pusher 作为 websocket 用于实时更新
2. 任务管理模块，供管理员创建任务，同时设置描述以及开始和完成的预定时间。
3. 任务分配模块，用户可以通过点击按钮选择任务、执行任务并交付，以便进行审核
4. 音乐管理模块使管理员能够创建和删除音乐以及设置当前音乐在实时仪表板视图上播放，只需实时单击即可
5. 公告管理模块使管理员能够创建公司范围的公告。
6. 为用户提供 Gist 模块，任何人都可以用最简短的语言表达最新的要点
7. 事件管理模块使管理员能够创建即将发生的事件以显示在实时仪表板上
8. 艺术家模块，用于管理平台上有音乐的艺术家
9. 类别管理，用于添加可创建的任务类别
10. 用户模块用于管理员管理平台上的用户，管理员可以删除用户以及查看用户
11. 个人资料模块，使用户能够管理自己的个人资料

*流程

1. 数据库分析
2. 与 GitHub 的版本控制集成
3. 创建迁移和播种机
4. 仪表板模板集成（Gentelella alella）
5. 从 GitHub 到测试服务器的简单自动部署设置
6. 使用 HTML 和 CSS 设计实时信息仪表板
7. 创建路线和控制器以及添加功能
8. 后端的 Pusher 集成
9. 前端的 Laravel Echo 集成
10. 使用 Laravel Mix 设置 Vuejs
11. 将实时信息仪表板的 HTML 和 CSS 设计分解为 Vue 组件
12. 向组件添加功能并设置推送事件的监听器
13. 使用虚假数据测试每个模块
14. 修复发现的错误
15. 部署

其他资源/信息

https://blog.pusher.com/writing-realtime-apps-with-laravel-5-and-pusher/
https://vuejs.org/
https://laravel.com/docs/5.5
以上均为占位符文本。请使用此格式或您选择的任何其他格式来更好地描述您的创作。

结论

感谢 dev.to 和 pusher 提供的这次探索实时应用程序的机会，该应用程序稍后将用于我们正在设置的用于管理任务和日常活动的新技术中心（ https://binaryhills.org ）。