lens up

Lente para cima

1. O convidado vê Gallery UI com outras fotos de convidados. Ele também vê o código QR no canto do aplicativo.

2. O convidado escaneia o código QR, que o redireciona para a Photo Collector UI e lá ele pode fazer upload de fotos e desejos.

3. Photo Collector UI envia dados para Photo Collector Service .

4. Photo Collector Service carrega a foto do convidado para o armazenamento de blob.

5. Photo Collector Service adiciona dados de convidados ao banco de dados.

6. Photo Collector Service publica o evento na fila.

7. Gallery Service recebe o evento e o processa.

8. Notificação push Gallery Service sobre novas fotos na galeria para Gallery UI e, em seguida, Gallery UI adiciona nova foto de convidado à coleção da galeria.

Visão geral do LensUp:

Descrição:

• Serviços de back-end:

  • Serviço de coleta de fotos (API da Web .NET)
  • Serviço de galeria (API Web .NET)
  • Serviço BackOffice (API Web .NET)
  • Simulador de gatilho de webhooks (função Azure)

• Aplicativos de IU:

  • IU do coletor de fotos (React.js)
  • IU da galeria (React.js)
  • UI de back office (React.js)

• Serviços Azure:

  • Armazenamento de mesa
  • Armazenamento de fila
  • Armazenamento de blobs

? Como executar o LensUp localmente

Você pode executar o projeto localmente em sua máquina usando Docker. Siga as etapas abaixo para executar o aplicativo localmente:

1. Antes de começarmos, você deve gerar dev-certs para LensUp em sua máquina. Esta operação é necessária para hospedar imagens ASP.NET Core com Docker por HTTPS. Portanto, gere um certificado usando estes comandos:

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

   Substitua %USERPROFILE% pelo nome do seu computador. Exemplo "C:UsersDell Precision 7520.aspnethttpslens-up.pfx"

   Para fins de desenvolvimento local, usaremos a senha localCertPassword . Não altere isso, pois a mesma senha é usada no arquivo docker-compose.yml .

   Os comandos acima devem gerar um certificado lens-up.pfx e colocá-lo no diretório conforme mostrado na imagem abaixo.

   

   Esta é uma etapa necessária, porque docker-compose se refere a esse certificado!

2. Instale docker desktop em sua máquina (pule se já tiver feito isso) .

3. Execute seu aplicativo docker desktop .

4. No diretório principal do projeto ( lens-up ), onde o arquivo docker-compose.yml está localizado, execute o comando docker-compose build . Isso criará 7 imagens LensUp necessárias. A primeira compilação pode levar alguns minutos (até 10 minutos). Depois de concluir essas etapas, você deverá ver novas imagens no aplicativo Docker Desktop.

   

5. Após o comando build, execute docker-compose up para iniciar toda a infraestrutura. Você deverá ver no Docker Desktop que 7 contêineres relacionados ao LensUp foram iniciados.

   

6. Agora todo o aplicativo está sendo executado em sua máquina. Você pode usar os seguintes endereços:

   • Serviços de back-end:

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

   • Aplicativos de IU:

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

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

       Em LensUp.PhotoCollectorService.UI você verá uma página de erro, pois precisa navegar até a visualização associada a uma galeria específica, que você ainda não criou.

Como criar sua primeira galeria e se divertir com o LensUp?

1. Vá para LensUp.BackOfficeService.API - https://localhost:8085/swagger/index.html

2. Use Create endpoint para criar sua galeria. O endpoint retorna o identificador da galeria após sua criação (1) .

   

3. Antes de usar a galeria, precisamos ativá-la. Nesse caso, use Activate endpoint e passe galleryId e endDate no corpo da solicitação. Lembre-se de que endDate é validado e deve ser maior que o horário atual. Caso contrário, sua galeria será tratada como expirada. O endpoint retorna o enterCode da galeria após ser ativado (1) .

   

4. Com o enterCode da sua galeria você pode abrir sua galeria usando LensUp.GalleryService.UI - http://localhost:5001/

   Faça login na sua galeria usando enterCode .

   

5. Agora você pode escanear o código QR da galeria e fazer upload de fotos para ele. O código redireciona para um formulário para adicionar fotos à galeria. Você pode usar a ferramenta do navegador para escanear o código QR ou, se não funcionar, basta acessar http://localhost:5002/upload-photo/{enterCode} .

   

6. QR Code redireciona você para adicionar foto e formulário de desejos. Agora você pode enviar seus dados para a galeria.

   

7. Após preencher o formulário com sucesso, veremos uma notificação de sucesso e a foto deverá aparecer na galeria.

   

? Lista TODO de 100 dias

Aspectos gerais:

• Configure a infraestrutura monorepo para back-end
• Configure a infraestrutura monorepo para front-end
• Crie scripts de execução do LensUp
• Crie documentação sobre como executar o LensUp localmente
• Criar tutorial de filme "Como executar o LensUp localmente"
• Crie documentação sobre como executar o LensUp localmente na rede WLAN.

Aspectos de back-end:

• Crie um projeto de back-end comum compartilhado
• Crie um conjunto de regras de codificação para serviços de back-end
• Criar pacote de fila em projeto comum compartilhado
• Criar pacote de armazenamento de tabelas em projeto comum compartilhado
• Pacote Crate Blob em projeto comum compartilhado

Serviço de Back Office:

• Criar estrutura do projeto
• Criar endpoint de adição de usuário
• Criar ponto de extremidade para adicionar galeria
• Criar ponto final de ativação da galeria

Serviço de galeria:

• Criar estrutura do projeto
• Criar ponto de extremidade para obter informações da galeria
• Criar hub de notificação de galeria

Serviço de coleta de fotos:

• Criar estrutura do projeto
• Criar ponto final para adicionar foto e desejos
• Criar redimensionador de imagem

Aspectos de front-end:

• Criar projeto de front-end comum compartilhado
• Crie um conjunto de regras de codificação para aplicativos frontend
• Crie componentes compartilhados em um projeto de front-end comum compartilhado

Interface do usuário de back office:

• Criar painel de administração (opcional)

IU da galeria:

• Criar login na página da galeria
• Criar página principal com galeria
• Lidar com notificações do back-end
• Adicione animações à galeria
• Adicionar carrossel para fotos

IU do coletor de fotos:

• Crie uma única página com formulário para adicionar foto e desejos