Exercicios-gabarito_Angular - Tema 5

Prévia do material em texto

Questões
Você acertou 8 de 10 questões
Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes quiser.
Verificar Desempenho
A
B
C
D
1 Marcar para revisão
Com a estrutura modular do Angular, conseguimos acrescentar funcionalidades ao sistema de forma muito simples, através
da importação dos módulos necessários. Entre os módulos mais comuns, em um sistema baseado no Angular, qual deles
permite gerenciar a troca de conteúdo com base em rotas, dentro de uma interface no estilo SPA �Single Page Application)?
BrowserModule
ReactiveFormsModule
RouterModule
FormsModule
E
A
HttpClientModule
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
O módulo que permite gerenciar a troca de conteúdo com base em rotas, dentro de uma interface no estilo SPA �Single
Page Application), é o RouterModule. Este módulo deve ser configurado a partir de um objeto Routes, que contém o
mapeamento das rotas disponíveis para os componentes de resposta. No nível dos modelos HTML, os links são
associados às rotas por meio do atributo routerLink, e o conteúdo é exibido no seletor router-outlet. Portanto, a
alternativa correta é a letra C.
2 Marcar para revisão
Considerando um serviço no estilo REST, implementado com base no NodeJS e na biblioteca Express, e uma entidade
Aluno, persistida no MongoDB via MongoClient, qual a assinatura do método, no servidor, para responder à chamada
http://localhost:3000/alunos/29891, obtendo como retorno os dados do aluno de matrícula 29891 no formato JSON?  
router.get('/alunos', async (req, res) � { });
B
C
D
E
router.put('/alunos/:id', async (req, res) � { });
router.get('/alunos/:id', async (req, res) � { });
router.delete('\alunos/:id', async (req, res) � { });
router.post('/alunos', async (req, res) � { });
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
De acordo com a definição do REST, o método GET do HTTP é utilizado para realizar consultas, o POST para incluir
uma entidade, o PUT para alterar uma entidade existente e o DELETE para remover uma entidade. Quando queremos
consultar os dados de uma entidade específica, o identificador, ou chave primária, deve ser fornecido no último
segmento da chamada, o que leva à necessidade da definição de uma variável (id) na rota. Os métodos de resposta do
Express, que são disponibilizados a partir de um Router, adotam os mesmos nomes dos métodos HTTP, e usam como
parâmetros a rota e a função para tratamento. Portanto, a assinatura correta para a situação descrita no enunciado é:
router.get('/alunos/:id', async (req, res) � { });
Essa assinatura indica que estamos utilizando o método GET para buscar um aluno específico, identificado pelo id na
rota. A função assíncrona (req, res) � { } é o tratamento que será dado à requisição e resposta do servidor.
A
B
C
D
E
3 Marcar para revisão
Durante o desenvolvimento de um sistema, principalmente nas fases iniciais, alguns recursos necessários para a
funcionalidade desejada podem não estar disponíveis, impedindo a execução de testes. No entanto, podemos emular os
recursos, permitindo a continuidade do projeto. No caso do Angular, qual interface permite emular um servidor REST com
persistência em banco de dados?
CanActivate
OnInit
HttpClient
InMemoryDbService
Router
Resposta incorreta
Opa! A alternativa correta é a letra D. Confira o gabarito comentado!
Gabarito Comentado
A
B
C
Na linguagem de programação Angular, a interface que permite emular um servidor REST com persistência em banco
de dados é a InMemoryDbService. Esta interface é utilizada para fornecer dados de teste (createDb) e o processo de
geração da chave primária (genId). Assim, toda chamada efetuada por um HttpClient será direcionada para o servidor
emulado. As demais opções apresentadas na questão têm funções diferentes: o CanActivate é utilizado no processo
de autenticação para as rotas do front-end, o OnInit especifica o método de inicialização de um componente, o
HttpClient permite acessar endereços HTTP e o Router controla as rotas internas do front-end.
4 Marcar para revisão
Partindo de uma iniciativa do Google, com foco no sistema Android, o Material Design trouxe diretivas relacionadas ao
design que se tornaram uma referência de mercado, visando sempre a garantia de usabilidade, responsividade e
acessibilidade nas mais diversas plataformas. Além das diretivas estabelecidas, temos a especificação de componentes
padronizados e modelo para implementação em cada plataforma, como Android, Web, iOS e Flutter. Os componentes
podem ser categorizados de acordo com seus objetivos, e segundo essa classificação, qual das opções a seguir contém
apenas elementos para comunicação, feita através da exibição de mensagens?
Card, Tabs e Dialog
SnackBar, Banner e Dialog
TextField, Switch e Card
B B Li
D
E
Button, Banner e List
SnackBar, Dialog e Tabs
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
Os componentes do Material Design podem ser categorizados de acordo com seus objetivos. Nesse sentido, temos
que os elementos Card e List são voltados para a organização do conteúdo, pertencendo, portanto, ao grupo de
exibição. Já os componentes TextField e Switch são destinados à entrada de dados pelo usuário, fazendo parte do
grupo de entrada. O componente Button, por sua vez, pertence ao grupo de ações, pois é voltado para a execução de
um processo qualquer. O componente Tabs integra o grupo de navegação, pois reflete a alternância de rotas ou telas.
Por fim, temos os componentes SnackBar, Banner e Dialog, que pertencem ao grupo de comunicação, pois são
responsáveis por prover diferentes formas de exibição de mensagens para o usuário. Portanto, a alternativa correta é a
B� "SnackBar, Banner e Dialog".
5 Marcar para revisão
Para diversas funcionalidades de um sistema ocorre a necessidade de um usuário válido, ou seja, deve haver algum meio
de autenticação disponível. Em termos do Angular, o acesso a uma rota pode ser controlado de forma simples, com base
em um serviço para verificação de usuário que é associado às rotas privadas. Qual interface deve ser implementada pelo
serviço?
A
B
C
D
E
SignIn
CanActivate
Authenticate
SignOut
VerifyUser
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
Para estabelecer uma rota autenticada no Angular, é necessário associar a ela um atributo chamado canActivate. Este
atributo deve estar vinculado a um serviço que implemente a interface CanActivate. Ao implementar essa interface, o
método canActivate é utilizado para verificar se há um usuário logado. Se houver um usuário logado, o método retorna
verdadeiro, liberando o acesso à rota. Caso contrário, retorna falso, bloqueando o acesso. Alternativamente, pode-se
retornar uma página de login para redirecionar o usuário, em vez de simplesmente bloquear o acesso.
A
B
C
D
E
6 Marcar para revisão
Para trabalhar com as coleções do MongoDB a partir de um serviço Web, construído com base no NodeJS, devemos
inicialmente obter uma conexão com a base de dados, através de um objeto do tipo MongoClient, oferecido na biblioteca
mongodb. A partir da conexão, acessamos as coleções, e podemos utilizar os métodos que são disponibilizados por elas
para manipulação e consulta de documentos. Qual desses métodos permite a inclusão de um documento?
insertOne
persist
findOne
create
find
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
A
B
C
D
Gabarito Comentado
O método adequado para adicionar um documento à coleção é o insertOne, que recebe como parâmetro um
documento no formato JSON. Os métodos find e findOne são utilizados para a pesquisa de documentos, sendo que o
primeiro permiteretornar um conjunto de documentos e o segundo retorna apenas um. Quanto aos métodos persist e
create, eles não são suportados pelo cliente para MongoDB, estando disponível apenas o método createCollection,
que cria uma coleção a partir do objeto de conexão.
7 Marcar para revisão
Os padrões de desenvolvimento visam resolver problemas recorrentes na implementação de sistemas, com a definição de
soluções padronizadas, amplamente testadas e com modelos bem-organizados, utilizando a notação UML. Supondo que os
gastos com a manutenção de um determinado sistema estejam muito altos, devido à proliferação de instruções SQL ao
longo de todo o código, e você tenha sido contratado para refatorá-lo, qual padrão deverá utilizar para a melhoria da
estratégia de persistência e consequente redução do custo de manutenção?
Observer
Proxy
Data Access Object
Flyweight
E
A
Service Locator
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
O padrão de projeto mais adequado para a situação descrita no enunciado é o DAO �Data Access Object). Este padrão
é utilizado para centralizar as chamadas ao banco de dados em classes específicas, permitindo que o restante do
sistema opere estritamente com objetos e tipos primitivos. Isso contribui para a redução da proliferação de instruções
SQL no código, o que pode levar a uma diminuição dos custos de manutenção. Quanto aos outros padrões
mencionados, eles têm aplicações diferentes. O Flyweight, por exemplo, é útil em ambientes de objetos distribuídos,
sendo usado para a criação de um pool de objetos. O Proxy é usado para encapsular a comunicação remota, enquanto
o Service Locator centraliza as chamadas a serviços remotos. Por fim, o padrão Observer seria indicado se a
necessidade fosse atualizar as interfaces de forma assíncrona.
8 Marcar para revisão
Com a grande variedade de formatos utilizados na Web atualmente, é necessário informar ao cliente o tipo de informação
que está sendo enviada, como JSON, XML ou HTML, entre outros. Qual classe, no ferramental para conexão HTTP do
Angular, deve ser utilizada para especificar o formato que será adotado no envio ou recepção de dados pelo front-end?  
HttpHeaders
B
C
D
E
HttpRequest
HttpClient 
HttpResponse
HttpParams
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
A classe HttpHeaders é utilizada para especificar o formato que será adotado no envio ou recepção de dados pelo
front-end. Isso ocorre porque as informações sobre o formato utilizado precisam ser anexadas ao cabeçalho da
requisição, o que é configurado em um objeto do tipo HttpHeaders. Em relação às outras opções, a conexão é
efetuada por um HttpClient, os parâmetros da chamada podem ser incluídos via HttpParams, a solicitação pode ser
filtrada via HttpRequest e a resposta via HttpResponse. A seguir, é apresentado um exemplo de configuração para o
formato JSON.
opts={headers:new HttpHeaders({'Content-Type':'application/json'})}; 
A
B
C
D
E
9 Marcar para revisão
Uma novidade interessante do HTML 5 foi a definição de folhas de estilo por escopo, trazendo a possibilidade de adotar
formatações específicas para o elemento e seus filhos, sem interferir no restante da página. Essa característica é utilizada
pelos componentes do Angular, onde temos formatações CSS específicas, adotadas no escopo de utilização do seletor.
Observe o fragmento de código que é apresentado a seguir.
.container{
display: flex; flex-direction: row; flex-wrap: wrap;
width: 100%; overflow-y: scroll; height:230px;
}
Qual informação é verdadeira, acerca da formatação que foi definida?
Exibe uma barra de rolagem horizontal quando a quantidade de elementos ocupar uma área superior às
dimensões especificadas.
Especifica que o elemento formatado pela classe terá uma largura de 100 pixels.
Define uma exibição sequencial de elementos na vertical, com a quebra de linha para cada elemento filho
adicionado ao corpo da tag.
Permite definir uma área de exibição na forma de grid, com o posicionamento sequencial de elementos e a quebra
de linha quando não há mais espaço na horizontal.
Especifica que o elemento formatado pela classe utilizará 100% do espaço vertical disponível.
Exercicio
Angular
Resposta incorreta
Opa! A alternativa correta é a letra D. Confira o gabarito comentado!
Gabarito Comentado
O código CSS apresentado define uma classe chamada "container" que possui várias propriedades. A propriedade
"display: flex" permite que os elementos filhos do container sejam dispostos em uma linha ou coluna flexível. A
propriedade "flex-direction: row" define que os elementos serão dispostos em linhas. A propriedade "flex-wrap: wrap"
permite que os elementos sejam quebrados para a próxima linha se não houver espaço suficiente na linha atual. A
propriedade "width: 100%" define que o container ocupará 100% da largura disponível. A propriedade "overflow-y:
scroll" garante que uma barra de rolagem vertical seja exibida, mesmo que não haja conteúdo suficiente para
preencher a altura do container. Por fim, a propriedade "height: 230px" define a altura do container em 230 pixels.
Portanto, a alternativa D é a correta, pois afirma que o código permite definir uma área de exibição na forma de grid,
com o posicionamento sequencial de elementos e a quebra de linha quando não há mais espaço na horizontal.
10 Marcar para revisão
A biblioteca RxJS é uma excelente opção para a implementação de elementos assíncronos, com a substituição das funções
assíncronas (async) e diretivas de espera (await) por um padrão Observer, onde temos fontes de dados assinadas, que
enviam suas alterações para o conjunto de assinantes, com a informação sendo tratada em funções de resposta.
Considerando a criação de um aplicativo para acompanhamento estatístico, onde diversos gráficos são atualizados de
forma simultânea, a cada vez que uma nova pesquisa é cadastrada, qual seria o componente da biblioteca RxJS adequado
para emissão da informação atualizada?
A
B
C
D
E
Observable
Subject
Operator
Subscription
Observer
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
Os componentes que devem receber a informação devem assinar �Subscription) a fonte de dados, ficando
responsáveis por tratar a informação recebida �Observer). No entanto, existem dois modelos para a fonte de dados: o
Observable, que é utilizado para uma ação pontual com apenas um assinante, e o Subject, que é voltado para a
criação de canais com múltiplos assinantes. Nesse contexto, o Subject seria a solução mais adequada, pois permite a
atualização simultânea de diversos gráficos a cada vez que uma nova pesquisa é cadastrada. Quanto aos operadores
�Operator), são os elementos que permitem operações comuns através do paradigma funcional.