Obtendo o código fonte
Para customizar um front-end o primeiro passo é obter os fontes originais.
Eles são disponibilizados através de repositórios privados do Github, para obter acesso a eles é necessário que você ou sua organização tenham uma conta privada no Github e entrem em contato com a Senior solicitando acesso ao repositório.
Para o tutorial disponibilizamos um front-end do aplicativo de referência no repositório https://github.com/dev-senior-com-br/tutorial-extensao-frontend
Ele é público, e pode ser acessado à vontade.
Recomendamos que realize um
do repositório, assim você poderá manter um registro de suas alterações e beneficiar-se do versionamento no git.
Uma vez realizado o fork clone o repositório para sua estação de trabalho
Realizando as customizações
Abra o diretório
em sua IDE de preferência. Utilizaremos o Visual Studio Code neste tutorial.
Neste momento faça as alterações que deseja no código fonte
Por momento alteraremos algo bem simples, o texto que aparece na pagina inicial do aplicativo de referência
Para isso abra o fonte src > features > main > main.html
Alterando o texto “Aplicativo de Referencia, Front-end customizado” para algum valor de sua escolha
Gerando o pacote para Implantação
O front-end que estamos customizando foi criado com Angular, e utiliza npm como gerenciador de pacotes.
Posicionado no diretório root do projeto insira os comandos no prompt:
, e em seguida
.
Os arquivos do front-end serão gerados para implantação na pasta
do projeto.