22 posts tagged with "presencial"

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.