• Sobre o Projeto
  • Concepção da Bee in Controll
  • Construção
  • Construção do Layout
  • Loja VTEX
  • Controll Suggestions Block
• Tecnologias e Ferramentas
• Executando
• Back-End
• Abelhudo
• Desenvolvido Por
• Atribuições
• Preview

• A concepção do nome da loja Bee In Controll surgiu a partir de um trocadinho entre o nome Controll (casa designada a nosso grupo do Hiring Coders #3) e o abelha, animal que representa casa. Dito isto, buscamos construir uma identidade visual compatível com um grupo etário de jovens adultos que vem em sua vestimenta uma forma de expressar quem são e como gostariam de ser vistos pelo ambiente que os cercam.

A Bee In Controll nasceu inspirada no incrível poder de transformação, criatividade e união das abelhas. E pensando nisso, queremos te incentivar a unir-se a nós para se libertar dos padrões, usando sua criatividade como meio da transformação para assim assumir o controle do seu estilo. Nossa missão é trazer liberdade através de roupas divertidas e criativas, feitas especialmente para adoçar sua vida. E antes que você se pergunte, não usamos mel na fabricação de nossas peças, haha. Acreditamos que estilo não é seguir tendências, mas sim um poder capaz de expressar um pouco da sua personalidade e da sua essência, vestindo o que te faz sentir bem e confortável. Então, por favor, vista-se de você!!

• Para o projeto, foi utilizada a metodologia ágil Kanban.
• Página construída com base no projeto da semifinal, a qual subsequentmeente foi baseada no Store Theme - VTEX.
• Construção do front-end segundo o protótipo construído no Figma.

• Header com Menus: todos os links habilitados.
• Home:
  • Banners com CTA;
  • Carousel com coleções exclusivas;
  • Cards com CTA;
  • Carousel com marcas com link direcionável.
• Footer:
  • Páginas específicas do site: Sobre Nós, Política de Privacidade, Termo de Uso, Política de Troca e Fale Conosco;
  • Links de Redes Sociais da Loja Bee In Controll: Facebook, Instagram e Youtube.
• Página Search;
• Página de Produto:
  • Com o bloco Controll Suggestions Block incluso.
• Página Sobre Nós;
• Página Fale Conosco:
  • Imagens clicáveis que redirecionam para as respectivas páginas elucidadas em seu texto;
  • App VTEX customizado construído com React e Styled Components para o bloco de formulário.
• Página Política de Privacidade;
• Página Política de Troca;
• Página Termos de Uso;
• Customizações no bloco Minicart.

• Foram criadas duas buyer-personas a partir das informações coletadas por meio de um formulário com questionário para conhecer o público-alvo de maneira mais profunda. Esses personagens ajudaram a manter a consistência da comunicação e identidade da marca durante o desenvolvimento da loja online;
• Identidade visual construída, com criação de logo e cartela de cores;
• Criação de frases e CTAs para os banners do site, buscando manter o tom característico da marca, alinhado com a identidade visual;
• Criação e alimentação com vídeos e fotos para as redes sociais Bee In Controll. Facebook, Instagram, Youtube.

• Nome da Loja alterado no CMS - /admin/cms/store
• Login Social habilitado para utilização - admin/authentication
• Catálogo de Produtos:
  • Categoria:
  • Marcas
  • Coleções
  • Produtos:
    • Todos os mockups de produtos foram construídos pela equipe.
    • Todos os produtos foram importados de forma nativa pela plataforma VTEX utilizando as funcionalidades do Admin. Importado: Cadastro, Imagem e Preço.
    • Todas as imagens foram convertidas para .jpg para melhor performance e seguindo a recomendação de melhores práticas da VTEX.
    • As imagens foram adicionados em repositório publico, Bucket S3 da AWS, para disponibilização da importação na VTEX: https://hc-controll.s3.amazonaws.com/product/{nomedaimagem.jpg}.
    • Foi adicionado estoque para todos os produtos. }

• Aplicação para exibição das Sugestões Ativas pelo Admin da Bee In Controll Store.
• O bloco customizado foi inspirado no bloco Buy Together da VTEX, que faz o uso da Product Summary e do Add To Cart Button.

1. Adicione controll.product-suggestion-block nas dependências do seu tema no manifest.json:

  "dependencies": {
    "controll.product-suggestion-block": "0.x"
  }

Agora, você pode usar todos os blocos exportados pelo aplicativo. Confira a lista abaixo:

2. Adicione o bloco buy-together-suggestions ao seu template e declare o buy-together-custom na sua lista de blocos. Também é possível adicionar um cabeçalho ao bloco de Sugestões através do children. Por exemplo:

{
  "buy-together-suggestions": {
    "blocks": ["buy-together-custom"],
    "children": ["flex-layout.row#section-title-buy-together"]
  },

3. Também é possível customizar o bloco product-summary e add-to-cart-button, conforme exemplo:

{
  "buy-together-custom": {
    "blocks": ["product-summary.shelf#buy-together"],
    "props": {
      "BuyButton": "add-to-cart-button#buy-together"
    }
  },

Para aplicar customizações de CSS neste e em outros blocos, siga as instruções fornecidas aqui

As seguintes tecnologias/ferramentas foram usadas na construção do projeto:

• Layout: Figma (consulte o Layout aqui)
• Ferramenta de Controle: Trello (consulte aqui)
• Armazenamento de arquivos: Google Drive (consulte aqui)
• Comunicação: Alinhamentos no Gather; Slack e WhatsApp
• Foi utilizada uma ferramenta Gerador de documentos de pessoas (Nome, RG, CPF, CEP, Endereço, etc) - 4Devs para utilizar dados fictícios para as compras realizadas.
• VTEX IO
• Java
• Spring Boot
• Jakarta Persistence API (JPA) e Hibernate
• Spring Data JPA
• Spring Security
• Flyway
• MySQL
• Lombok
• React
• Typescript
• AWS EC2
• AWS S3

- vtex login controll
- vtex use beein 
- vtex link

• API para Controle de Sugestões de Produtos para futuras compras dos Clientes na Loja. A API obtém os novos pedidos da loja através do Order Feed v3 da VTEX, onde registra e armazena os dados relevantes para geração de combinações, que posteriormente podem ser ativadas/desativadas como sugestões válidas para os Clientes através do Admin da Loja.

As seguintes tecnologias/ferramentas foram usadas na construção da API:

• Java
• Spring Boot
• Jakarta Persistence API (JPA) e Hibernate
• Spring Data JPA
• Spring Security
• Flyway
• MySQL
• Lombok
• AWS EC2
• AWS RDS

• Migração de Bancos de Dados - Flyway
• Segurança com OAuth 2 - RFC 6749
• 2 Escopos diferentes para autorização (ADMIN e STORE)
  • ADMIN - Realiza todas as operações na API (Consultas de Produtos, Combinações, Ativação e Inativação de Combinações)
  • STORE - Realiza consultas de Combinações Ativas (Sugestões)
• Especificação de Erros segue a Problem Details for HTTP APIs - RFC 7807
• Shallow Etags para redução de tráfego
• Documentação Open API 3 aqui

1. Clone a Aplicação

https://github.com/controll-final/controll-suggestions-api.git

2. Instale o MySQL ou tenha uma instância disponível

3. Altere as Propriedades da Aplicação

• Abra o arquivo src/main/resources/application.properties

• Altere as Seguintes Propriedades:

spring.datasource.url=(String de Conexão com o Banco de Dados - ex.: jdbc:mysql://localhost/suggestionsdb?createDatabaseIfNotExist=true&serverTimezone=UTC)
spring.datasource.username=
spring.datasource.password=

security.admin-id=(ID para uso do Admin)
security.admin-secret=(Secret para uso do Admin)

security.store-id=(ID para uso da Store)
security.store-secret=(Secret para uso da Store)

security.jwt-signin-key=(Chave para assinatura dos Tokens - ex.: 89a7sd89f7as98f7dsa98fds7fd89sasd9898asdf98p)

vtex.api.vtex-account-name=(Nome da Conta VTEX)
vtex.api.vtex-environment=(Nome Environment API VTEX)
vtex.api.vtex-app-key=(App Key API VTEX)
vtex.api.vtex-app-token=(App Token API VTEX)

4. Faça o build e execute a aplicação utilizando o maven

mvn package
java -jar target/controll-suggestions-api-1.0.0.jar

Como alternativa, você pode executar o aplicativo sem empacotá-lo usando -

mvn spring-boot:run

A Aplicação iniciará em http://localhost:8080.

• Bloco que possibilita ao logista, por meio da admin, visualizar as combinações geradas pela API de combinação de produtos e ativa-las.

• 1. Acesse o admin de sua loja e clique em Abelhudo:

• Selecione o produto desejado e decida, através do toggle, se deseja ou não apresentar as combinações sugeridas associadas a ele.

• Alessandra Buzios
• Allysson Fernando
• Andressa Santana
• Cristiane dos Santos Costa
• Douglas Rodrigues
• Fernando Beça
• Igor Santos
• Leona Evangelista
• Rômulo Rosa
• Suélen Dias

• Squad Leader: Suélen Dias
• UI/UX: Alessandra Buzios; Igor Santos
• Mockups: Igor Santos
• Back-end: Douglas Rodrigues
• Front-end: Allysson Fernando; Cristiane dos Santos Costa; Leona Evangelista; Rômulo Rosa; Douglas Rodrigues; Suélen Dias
• Admin Loja Vtex: Suélen Dias, Fernando Beça, Andressa Santana
• Marketing: Cristiane dos Santos Costa; Leona Evangelista e Alessandra
• Documentação: Suélen Dias; Leona Evangelista; Douglas Rodrigues