4 posts tagged with "angular"

26/06/2021 - Aula 4 de Angular (Remoto)

A ultima aula de Angular começa as 08:00, com o professor Jean perguntando sobre o trabalho com o pessoal, vendo se estão com dúvidas, se já começaram a fazer ou não.

Por volta das 08:25 é iniciado a apresentação do conteúdo, vai ser visto o Angular Material nesta aula. para isso vamos utilizar o projeto que está disponível já em Github.

O material que o professor utilizou foi esse aqui em .PDF.

Começamos então a atuar com a alteração de um formulário, mudando ele para utilizar os componentes que são do Angular Material, aplicando para o cliente.

Depois do professor explicar cada componente, e como utilizar ele, é solicitado para os alunos fazerem para a componente de usuário, tanto para a tela quanto para o modal.

Após validar a atividade, começamos a ver a parte de animações, como criar ela, configurar, utilizar, etc.

Professor também mostra como podemos fazer o deploy do projeto utilizando Docker, e explica como fazer esse processo utilizando o projeto atual.

Com isso terminamos o que foi visto antes do almoço.

Durante a tarde, o professor comentou sobre o trabalho, passou item a item do que tem ser feito, e aproveitou para tirar dúvidas do pessoal.

12/06/2021 - Aula 3 de Angular (Remoto)

Começamos a terceira aula as 08:10, com o professor Jean revisando uma atividade que ele tinha pedido, que era a implementação de clientes, ele atualizou o projeto e está disponível já em Github.

O material que o professor utilizou foi esse aqui em .PDF.

Começamos a aula vendo o construtor "pipe" (|), que serve para formatar valores de acordo com o que você passar. Vimos também como criar um validador personalizado para validar campos de CPF e CNPJ.

# Instalar uma biblioteca para ajudar na formatação e validação dos campos
npm install angular2-text-mask --save
npm install ng2-currency-mask --save

Depois de importar as bibliotecas, foi alterado o arquivo do cliente e o modal do cliente, para inserir as validações.

Fizemos um intervalo as 10h, e depois demos continuidade na aula vendo gráficos, utilizando outra biblioteca

# Instalar uma biblioteca para ajudar nos gráficos
npm install ng2-charts@2.4.2 --save
npm install chart.js@2.9.3 --save

Depois do almoço, continuamos trabalhando com a parte de gráfico, criamos um componente pra ele, o que ajudou a reduzir o código da tela Home.

Por volta das 15h fizemos um intervalo e na volta começamos a ver um pouco sobre testes unitários, mas o professor comentou que na próxima aula vai ser aprofundado no assunto.

Começamos a ver então a função "Drag and Drop", utilizando um plugin

# Instalar uma biblioteca para ajudar nos gráficos
npm install ng2-dnd@5.0.2 --save

Implementamos em um exemplo de lista de produtos, com ações disparadas ao soltar. Trabalhamos também com componente de selecionar item com um dropdown, vendo vários recursos e como utilizar eles.

Ouve algumas dúvidas de alunos, e foi discutido os assuntos, como linguagem melhor para se trabalhar, se precisa fazer o backend em Javascrip, se consigo fazer toda a aplicação só com Angular, etc etc.

Foi conversado um pouco sobre o trabalho que vai ser passado, mas professor tem qeu verificar uns detalhes ainda antes de passar para nós.

Com isso terminamos a aula de hoje.

29/05/2021 - Aula 2 de Angular (Presencial)

Começamos a segunda aula as 08:20, com o professor Jean mostrando as alterações que ele fez no projeto da aula passada, da qual ele disponibilizou por meio do Github. Foi adicionado um component ngx-toastr para ter notificações mais elegantes no projeto.

Em seguida professor passou alguns códigos, e pediu para colocarmos nas seguintes pastas:

• .ZIP - Arquivo pra baixar
• src/app/shared - Destino para colocar os arquivos.
• OBS: A pasta helper deve ser movida para fora da pasta shared, em src/app

Esses novos arquivos são um controller para poder validar os dados, só adicionar ele, que ele faz a validação.

As 10:15 o professor mostra o que esses arquivos que passou faz, adicionamos no método salvar, e ele valida todos os campos de uma só vez.

As 10:40 começamos a ver sobre os serviços, para poder salvar um usuário, utilizando o padrão observer e subscriber.

As 11:50 o professor fala que vamos trabalhar a tarde com outro projeto, ele já disponibilizou no Github.

Após o almoço, a aula começou as 13:40 com a chamada, e em seguida professor mostra o projeto novo, falando a parte dos mocks de dados.

Em seguida, continua falando de todo o projeto, mostrando todo o processo de login, de como é feito a comunicação da senha, o que acontece quando é submetido o request de login e senha.

AS 15:00 o professor passa uma atividade para criar um formulário para o usuário dentro do modal, para poder inserir um novo, e para poder editar um já existente.

Professor passou de mesa em mesa tirando dúvidas e ajudando quem precisava.

Com isso terminamos a aula de hoje.

15/05/2021 - Aula 1 de Angular (Presencial)

Professor Geferson fez a apresentação do professor Jean, visto que é a primeira aula que temos com ele. Em seguida foi passado alguns avisos sobre os computadores e acessos.

Logo em seguida o professor perguntou sobre os acadêmicos, para saber o nível de cada um, para saber se todos já tem experiencia com programação. Após o momento de introdução, ele apresenta um pouco sobre si, e damos inicio a aula.

O material que o professor utilizou foi esse aqui em .PDF.

Professor começa a aula falando da parte histórica do Angular, que atualmente esta na versão 12.

O Angular utiliza componentes para sua estrutura, como controle de rotas, servições, etc. Já para a parte de interface, todos os componentes que comecem com ng pertencem ao Angular, dentre eles temos componentes lógicos, como ngIf, ou laços de repetição, como o ngFor.

Começamos com a instalação de alguns programas como o Node.js. O professor recomenda a utilização de um gerenciador de versão do Node, o NVM.

# Verificar vesao do Node
node -v

As 09:30 a aula continuou com a instalação do Angular.

# Verificar do Angular
npm install -g @angular/cli
ng version

As 10:00 a aula continuou com a criação de um novo projeto.

# Verificar do Angular
ng new app-unipar
# ? Would you like to add Angular routing? (y/N) 
n
# ? Which stylesheet format would you like to use? (Use arrow keys)
SCSS

As 10:25 o professor continuou a apresentar a aula, explicando a estrutura do projeto angular recém criado. É aberto o arquivo angular.json e explicado o que significa cada item do arquivo, como onde se coloca novos assets, estilos ou bibliotecas. Depois vimos o arquivo package.json, que contem mais configurações para o projeto. Continuamos vendo outros detalhes, como arquivo de ambientes, o /src/environments, que você coloca configurações para seu ambiente, como ambiente de teste ou ambiente em produção.

Depois de mostrar os arquivos, foi mostrado o componente inicial app-root, como ele está estruturado, onde está o .HTML, o .SCSS e os componentes desse modulo.

Depois de vermos um pouco o projeto, e alteramos o arquivo inicial, vamos começãr a mexer com código. Para isso vamos instalar alguns componentes.

npm i bootstrap --save
npm i @ng-bootstrap/ng-bootstrap --save

Depois de instalar, começamos a utilizar o Bootstrap para formatar um página, mas não terminamos antes do almoço está atividade.

A aula começou a tarde as 13:45, dando continuidade a atividade anterior, que é um TODO, implementamos os metodos de adicionar e remover um TODO.

Professor pediu para gerarmos um novo componente, utilizamos o código abaixo.

ng generate component table-todo

Após criar o componente, migramos de local ele, para aprender a como trabalhar com componentes nossos. Além disso, começamos a utilizar @Input e Output para modificar atributos de dentro de nosso componente, isso tudo até as 16h.

Agora vamos criar um novo componentes para treinarmos a criação de um formulário de cadastro de usuária.

ng generate component form-usuario

As 17:30 terminamos um componente de validação, que ao digitar um campo que não atende aos requisitos, ele apresenta o erro.