Angular 6 e Firebase — Desenvolvendo um portfólio (parte 2)
Template e ajustes iniciais
Para o desenvolvimento da aplicação, vamos utilizar um layout pronto no intuito de realizarmos poucas modificações no design (não consegui pensar em outra desculpa).
Escolhi o template do site startbootsrap. No endereço a seguir há uma galeria com alguns modelos:
https://startbootstrap.com/template-categories/portfolios/
Link do Template escolhido (Freelancer)
https://github.com/BlackrockDigital/startbootstrap-freelancer/archive/gh-pages.zip
Basicamente o que eu fiz foi indicar no meu arquivo index.html quais são os arquivos de estilos, atualizando os apontamentos corretamente. Isso garante que toda a aplicação utilizará os mesmos modelos. Também coloquei o endereço dos scripts para o funcionamento de alguns recursos do bootstrap.
Acesse o repositório e clone o projeto:
https://github.com/kheronn/portfolio
Componentes e Rotas
Tudo no angular é considerado componente. Desenvolver seguindo esse princípio facilita o desenvolvimento e a manutenção do código.
Para criação de componentes utilizando cli, digitamos no terminal:
ng generate component nome-componentou na forma abreviada.
ng g c nome-componentVamos criar inicialmente dois componentes. No terminal digite:
ng g c homeng g c menu-principal
Após a execução dos comandos, observe na estrutura de pastas do projeto que um diretório com 4 arquivos foram criado para cada componente.
home.component.html
Arquivo HTML onde definimos o template.
home.component.scss
Arquivo para estilizar os componentes usando CSS.
home.component.spec.ts
Para realização de testes unitários
home.component.ts
Classe onde codificamos os métodos, atributos do componente e toda a lógica necessária.
A mesma lógica serve para o menu-principal.
A home será o ponto de entrada da aplicação. Logo devemos configurar uma rota que nos permita acessar a partir da raiz (/) nossa componente principal.
No arquivo app.component.html limpe o código gerado na criação do projeto, deixando somente a tag
<router-outlet></router-outlet>app.component.html
No arquivo app-routing.module.ts vamos definir a rota, passando no array de configurações Routes o caminho e o componente relacionado (linhas 5 a 9).
No arquivo menu-principal.html, vamos colocar as tags de navegação. O arquivo fica assim:
<nav class=”navbar navbar-expand-lg bg-secondary fixed-top text-uppercase” id=”mainNav”>
<div class=”container”>
<a class=”navbar-brand js-scroll-trigger”
routerLink=”/” href=””>Portfólio </a>
<button class=”navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded” type=”button” data-toggle=”collapse”
data-target=”#navbarResponsive” aria-controls=”navbarResponsive” aria-expanded=”false” aria-label=”Toggle navigation”>
Menu
<i class=”fa fa-bars”></i>
</button>
<div class=”collapse navbar-collapse” id=”navbarResponsive”>
<ul class=”navbar-nav ml-auto”>
<li class=”nav-item mx-0 mx-lg-1">
<a class=”nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger” href=”#portfolio”>Portfolio</a>
</li>
<li class=”nav-item mx-0 mx-lg-1">
<a class=”nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger” routerLink=”/admin” href=”#”>Painel</a>
</li>
<li class=”nav-item mx-0 mx-lg-1">
<a class=”nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger” routerLink=”/contato” href=”#”>Contato</a>
</ul>
</div>
</div>
</nav>menu-principal.html
O que fazemos foi definir os apontamentos utilizando o atributo routerLink nas tags <a> do menu. O primeiro routerLink aponta justamente para a entrada da aplicação “/”.
Enquanto que os links painel e admin apontam para /admin e /contato.
Essas rotas serão criadas posteriormente.
Ao abrir o arquivo menu-principal.component.ts, notamos o decorator @Component que marca a classe como um componente angular. Vamos utilizar o seletor dessa classe para chamar nosso menu em todas as páginas da aplicação.
Na class app.component.html, incluímos o seletor do menu assim;
<app-menu-principal></app-menu-principal>
<router-outlet></router-outlet>Finalmente, vamos deixar nossa página home.component.html com elementos básicos.
Após a tag body, ficou assim:
<!-- Header -->
<header class=”masthead bg-primary text-white text-center”>
<div class=”container”>
<img class=”img-profile img-fluid mb-5 d-block mx-auto” src=”assets/img/eu.jpg” alt=””>
<h1 class=”text-uppercase mb-0">Kheronn Khennedy Machado</h1>
<hr class=”star-light”>
<h2 class=”font-weight-light mb-0">Professor — Analista/Programador Full Stack</h2>
</div>
</header><!-- About Section -->
<section class=”bg-primary text-white mb-0" id=”about”>
<div class=”container”>
<h2 class=”text-center text-uppercase text-white”>About</h2>
<hr class=”star-light mb-5">
<div class=”row”>
<div class=”col-lg-4 ml-auto”>
<p class=”lead”>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete
source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class=”col-lg-4 mr-auto”>
<p class=”lead”>Whether you’re a student looking to showcase your work, a professional looking to attract clients,
or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
</div>
<div class=”text-center mt-4">
<a class=”btn btn-xl btn-outline-light” href=”#”>
<i class=”fa fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section><!-- Footer -->
<footer class=”footer text-center”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 mb-5 mb-lg-0">
<h4 class=”text-uppercase mb-4">Location</h4>
<p class=”lead mb-0">Kheronn K. Machado
<br>Wenceslau Braz — Paraná</p>
</div>
<div class=”col-md-4 mb-5 mb-lg-0">
<h4 class=”text-uppercase mb-4">Around the Web</h4>
<ul class=”list-inline mb-0">
<li class=”list-inline-item”>
<a class=”btn btn-outline-light btn-social text-center rounded-circle” href=”#”>
<i class=”fa fa-fw fa-facebook”></i>
</a>
</li>
</ul>
</div>
<div class=”col-md-4">
<h4 class=”text-uppercase mb-4">About Freelancer</h4>
<p class=”lead mb-0">Freelance is a free to use, open source Bootstrap theme created by
<a href=”http://startbootstrap.com”>Start Bootstrap</a>.</p>
</div>
</div>
</div>
</footer>
<div class=”copyright py-4 text-center text-white”>
<div class=”container”>
<small>Copyright © Angular 6 e Firebase 2018</small>
</div>
</div>
home.component.html
Troquei o ícone no banner principal por um foto minha. Precisei deixar alterar o estilo.
No arquivo home.component.scss criei uma classe img-profile definindo o tamanho e deixando a imagem circular
.img-profile{
width: 128px;
border-radius: 50%;
}home.component.scss
No terminal, digite novamente ng serve -o no terminal para ver como ficou.
Parte 3 —
https://medium.com/@kheronn.machado/angular6-firebase-portfolio-part3-c63ba1cd83cd
