lens up

镜头向上

1. 客人可以看到Gallery UI以及其他客人的照片。他还在应用程序角看到了二维码。

2. 客人扫描二维码，将他重定向到Photo Collector UI ，他可以在那里上传照片和愿望。

3. Photo Collector UI将数据发送到Photo Collector Service 。

4. Photo Collector Service将访客照片上传到 blob 存储。

5. Photo Collector Service将客人数据添加到数据库中。

6. Photo Collector Service将事件发布到队列。

7. Gallery Service接收事件并处理它。

8. Gallery Service向Gallery UI推送有关图库中新照片的通知，然后Gallery UI将新的访客照片添加到图库集合中。

LensUp大图：

描述：

• 后端服务：

  • 照片收集服务（.NET Web API）
  • 图库服务（.NET Web API）
  • 后台服务（.NET Web API）
  • Webhooks 触发器模拟器（Azure 函数）

• 用户界面应用程序：

  • 照片收集器 UI (React.js)
  • 画廊 UI (React.js)
  • 后台用户界面 (React.js)

• Azure 服务：

  • 表存储
  • 队列存储
  • 斑点存储

？如何在本地运行 LensUp

您可以使用 Docker 在计算机上本地运行该项目。请按照以下步骤在本地运行应用程序：

1. 在我们开始之前，您应该在您的计算机上生成LensUp的dev-certs 。要使用 Docker 通过 HTTPS 托管 ASP.NET Core 映像，需要执行此操作。因此，使用以下命令生成证书：

   dotnet dev-certs https -ep " %USERPROFILE%.aspnethttpslens-up.pfx " -p localCertPassword
   dotnet dev-certs https --trust

   将%USERPROFILE%替换为您的计算机名称。示例"C:UsersDell Precision 7520.aspnethttpslens-up.pfx"

   出于本地开发目的，我们将使用密码localCertPassword 。不要更改此设置，因为docker-compose.yml文件中使用了相同的密码。

   上述命令应生成lens-up.pfx证书，并将其放置在如下屏幕截图所示的目录中。

   

   这是必要的步骤，因为 docker-compose 引用了该证书！

2. 在您的计算机上安装docker desktop （如果您已经安装，请跳过） 。

3. 运行您的docker desktop应用程序。

4. 在docker-compose.yml文件所在的主项目目录 ( lens-up ) 中，运行命令docker-compose build 。这将构建 7 个必要的 LensUp 图像。第一次构建可能需要几分钟（最多 10 分钟）。完成这些步骤后，您应该在 Docker 桌面应用程序中看到新映像。

   

5. 在构建命令之后，运行docker-compose up来启动整个基础设施。您应该在 Docker Desktop 中看到 7 个与 LensUp 相关的容器已启动。

   

6. 现在整个应用程序正在您的计算机上运行。您可以使用以下地址：

   • 后端服务：

     • LensUp.BackOfficeService.API swagger - https://localhost:8085/swagger/index.html
     • LensUp.GalleryService.API swagger - https://localhost:8083/swagger/index.html
     • LensUp.GalleryService.WebhookTriggerSimulator - http://localhost:8086/
     • LensUp.PhotoCollectorService.API swagger - https://localhost:8081/swagger/index.html

   • 用户界面应用程序：

     • LensUp.GalleryService.UI - http://localhost:5001/

     • LensUp.PhotoCollectorService.UI - http://localhost:5002/

       在 LensUp.PhotoCollectorService.UI 上，您将看到错误页面，因为您需要导航到与尚未创建的特定图库关联的视图。

如何创建您的第一个画廊并享受 LensUp 的乐趣？

1. 转到LensUp.BackOfficeService.API - https://localhost:8085/swagger/index.html

2. 使用Create端点来创建您的图库。端点在创建后返回图库标识符(1) 。

   

3. 在使用图库之前，我们需要激活它。在这种情况下，请使用Activate端点并在请求正文中传递galleryId和endDate 。请记住， endDate经过验证，并且必须大于当前时间。否则，您的图库将被视为已过期。激活后端点返回图库enterCode (1) 。

   

4. 通过您的画廊enterCode您可以使用LensUp.GalleryService.UI打开您的画廊 - http://localhost:5001/

   使用enterCode登录您的画廊。

   

5. 现在您可以扫描图库二维码并将照片上传到其中。该代码重定向到用于将照片添加到图库的表单。您可以使用浏览器工具扫描二维码，或者如果它不起作用，您可以访问http://localhost:5002/upload-photo/{enterCode} 。

   

6. QR 码会将您重定向到添加照片和愿望表。现在您可以将数据上传到图库。

   

7. 成功填写表格后，我们应该看到成功通知，并且照片应该出现在图库中。

   

？ 100 天待办事项清单

一般方面：

• 为后端设置 monorepo 基础设施
• 为前端设置 monorepo 基础设施
• 创建 LensUp 运行脚本
• 创建如何在本地运行 LensUp 的文档
• 创建电影教程“如何在本地运行LensUp”
• 创建如何在 WLAN 网络中本地运行 LensUp 的文档。

后端方面：

• 创建共享的公共后端项目
• 为后端服务创建编码规则集
• 在共享公共项目中创建队列包
• 在共享公共项目中创建表存储包
• 在共享公共项目中创建 Blob 包

后台服务：

• 创建项目结构
• 创建添加用户端点
• 创建添加图库端点
• 创建激活图库端点

画廊服务：

• 创建项目结构
• 创建获取图库信息端点
• 创建图库通知中心

照片收藏服务：

• 创建项目结构
• 创建添加照片和愿望端点
• 创建图像缩放器

前端方面：

• 创建共享的公共前端项目
• 为前端应用程序创建编码规则集
• 在共享公共前端项目中创建共享组件

后台用户界面：

• 创建管理面板（可选）

画廊用户界面：

• 创建画廊页面的登录信息
• 创建带有图库的主页
• 处理来自后端的通知
• 将动画添加到图库
• 添加照片轮播

照片收集器用户界面：

• 创建包含添加照片和愿望表的单页面