Continuando meu projeto de estudo

Bom dia, boa tarde ou até quem sabe boa noite a todos. Boirods aqui e queria trazer mais atualizações sobre o meu projeto feito com o framework Play (que é para Java e Scala).

Relembrando...

Só falando novamente sobre ele, ele é uma aplicação de um blog e a parte da API já foi feita com sucesso. E agora estou fazendo o frontend com Angular.

Para fazer o Play conversar com o Angular segui este post no medium onde ele fala que podemos criar um projeto play já com angular através de algumas seed dele. Mas isto é para quem está iniciando o projeto então continuei a ler o post.

E em seguida ele dá exemplos de como integrar o play com o angular e ele aborda os seguintes:

1. Construir o back e o front end isoladamente onde a comunicação é feita pela api rest.
2. Construir ambos back e front no mesmo projeto: usando scala views para expor frontend entrypoint e comunicar com o backend pela api rest.
3. Construir ambos back e front no mesmo projeto: usando rotas estáticas do play para servir o frontend e comunicar com o backend usando a api rest.

E em cada item destes ele dá pontos negativos e positivos em usar essas abordagens. E ele diz que usará a ultima (com rotas estáticas). E aí ele inicia o desenvolvimento.

Pra começar ele cria uma pasta chamada "ui" (não, ele não sentiu dores rsrsrs, traduzindo é UserInterface ou em ptbr interface do usuário). E diz pra utilizar o Angular CLI para criar o projeto.

Depois ele pede para alterar o arquivo package.json para usar algumas coisas como as configurações proxy (indicando o caminho do arquivo proxy.conf.js). E tem lá como criar o arquivo proxy.conf.js veja no link informado no começo do post.

Criando alguns arquivos.

Após isso ele cria alguns arquivos .scala na pasta do Play (não entendi bem o porque, sendo que a minha aplicação é em Java).

Arquivos como o FrontEndCommands.scala (este é na pasta project do play) e ele terá alguns comandos em String que serão executados após o play iniciar, comandos como o npm install (para dependencias) e npm run entre outros.

O FrontEndBuilds.scala (também na pasta project) e ele será responsável por executar os comandos no arquivo anterior.

O arquivo ui-build.sbt (este arquivo deve ser criado na pasta raiz do play. Este arquivo irá construir o projeto e executar.

E aí ele cria na pasta controllers (que o play cria automaticamente) um arquivo chamado FrontendController.scala. E cria uma rota para este novo controller (o arquivo de rotas fica em conf/routes, onde o nome do arquivo é routes mesmo rsrs). E é isso, sua aplicação Play e Angular já deve funcionar.

O que deu certo e errado nisso?

E aqui comigo funcionou normalmente. E iniciei o desenvolvimento do blog, já coloquei algumas coisas como uma toolbar (angular material), tentei colocar algumas coisas mais como ícones (na toolbar) este é um que não deu certo e removi todos, sidenav é outro que não deu certo (ao menos como queria, tive problemas apenas no css), e outras coisas que não lembro agora.

E como teste fiz para que a pagina inicial mostre alguns posts já criados. Para isso pesquisei sobre requisições http aqui e tive alguns problemas com o play e algo chamado CORS, que basicamente e o que entendi é que é um problema em requisitar dados de outra fonte e no mesmo computador e resolvi com este link.

E é isso pessoal acima está uma imagem de como está ficando o design, calma, ainda vou melhorar e só pintei o fundo pra ver como fica.

E está começando minhas aulas e procurarei postar com a mesma frequencia, mas se eu sumir já sabem klkkk.

Agradeço a todos que estão lendo meus posts... Ia me esquecendo o link do repositório do projeto aqui