DEV Community

Cover image for Continuando meu projeto de estudo
Rodrigo Régio
Rodrigo Régio

Posted on

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.

Image description

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

Top comments (1)

Collapse
 
rregio profile image
Rodrigo Régio

Ah esqueci de dizer, se quiserem detalhes de tudo que tiverem duvidas me mande mensagem aqui ou no meu email boirodster9@gmail.com