Prévia do material em texto
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 1/20 SEGUNDA PROVA ON LINE Entrega 6 jun em 19:30 Pontos 25 Perguntas 20 Disponível 6 jun em 14:00 - 6 jun em 19:30 aproximadamente 6 horas Limite de tempo 90 Minutos Instruções Este teste não está mais disponível, pois o curso foi concluído. Histórico de tentativas Tentativa Tempo Pontuação MAIS RECENTE Tentativa 1 90 minutos 17,5 de 25 INSTRUÇÕES DA SEGUNDA PROVA ON LINE A prova tem a duração de 90 minutose se realizará das 14h às 19:30 horas, horário de Brasília. Ao clicar em Segunda Prova ON LINE, no menu “tarefas” você iniciará a prova. A partir daí, você deverá realizar a avaliação valendo-se de 1 (uma) única tentativa. Ao final da prova não se esqueça de enviá-la clicando no botão “ENVIAR TESTE”. Só utilize esse botão quando tiver finalizado a avaliação. Não deixe para começar no final do turno, pois assim você terá menos tempo para a realização da avaliação. Exemplo: a prova se encerra às 19h30min, se o aluno começar às 19 horas terá somente 30 minutos para a realização. Atenção, mesmo abrindo e fechando o navegador o tempo de realização continuará contando após iniciada a avaliação. Utilize preferencialmente o navegador Google Chrome. Caso sua avaliação possua questões discursivas que requeiram um envio de arquivo, anexe o arquivo em formato PDF. ATENÇÃO: Todas as provas iniciadas e que não houverem sido submetidas, serão automaticamente encerradas pelo sistema transcorridos os 90 minutos de duração. Boa Prova! https://pucminas.instructure.com/courses/8628/quizzes/55357/history?version=1 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 2/20 Pontuação deste teste: 17,5 de 25 Enviado 6 jun em 15:33 Esta tentativa levou 90 minutos. 1,25 / 1,25 ptsPergunta 1 Por que a atualização do estado de um componente React não pode ser feita diretamente no objeto state, mas deve ser feita por meio do método setState? Porque o objeto state é declarado como uma constante e, assim, não pode ser atualizado diretamente. Porque o objeto state é recebido do componente pai e a atualização deve ser encaminhada a ele. Porque o objeto state é baseado nos atributos do elemento HTML do componente, que também precisa ser atualizado. Porque além de atualizar o valor do objeto state, o método setState força a atualização da interface do componente. Correto!Correto! Para que a interface do componente seja automaticamente atualizada, devemos fazer as mudanças do seu estado por meio do método do método setState. Esse método efetivará as alterações necessárias ao objeto state e provocará a atualização da página. 1,25 / 1,25 ptsPergunta 2 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 3/20 Por que um componente React pode precisar passar seus métodos para um determinado subcomponente? Porque toda alteração do estado de um componente deve ser feita no nível mais baixo da árvore de componentes. Porque o subcomponente pode ter alguma operação de interface que altera o estado do componente pai. Correto!Correto! Porque os subcomponentes são recursos usados quando um componente precisa delegar o seu estado. Porque os subcomponentes garantem uma melhor organização da interface ao dividi-la em partes mais específicas. Quando um subcomponente precisa alterar alguma propriedade do estado do componente pai, ele precisa receber os métodos do pai para fazer essa alteração, pois, caso contrário, ele não terá acesso nem ao estado nem a qualquer outro recurso do componente pai. Essa passagem de métodos é feita por meio dos atributos do elemento HTML que representa o subcomponente e é recebida, por este, por meio do seu objeto props. 1,25 / 1,25 ptsPergunta 3 O que significa elevar o estado de um componente em React? Significa tornar público o estado do componente. 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 4/20 Significa transferir o seu estado para o componente pai. Correto!Correto! Significa aumentar os valores das propriedades do estado. Significa passar o estado para a superclasse do componente. Quando o estado de um componente precisa ser compartilhado com outros componentes de mesmo nível ou de níveis superiores, precisamos elevar o estado, isto é, transferir os dados do objeto de estado para componentes em níveis mais altos da árvore de componentes. 1,25 / 1,25 ptsPergunta 4 Em React, qual das seguintes características dos componentes de classe não existe em um componente de função? O objeto de estado (state). Correto!Correto! Um conteúdo em HTML a ser retornado. O objeto de propriedades (props). A renderização condicional de conteúdo. 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 5/20 Um componente de função é mais simples de ser criado do que um componente de classe. No entanto, um componente de função, de uma forma básica, não possui métodos ou atributos. Assim, não pode ter um estado. É possível se contornar esse problema usando os React Hooks, mas, sem alguma ação adicional, o componente de função realmente não tem estado. 0 / 1,25 ptsPergunta 5 As aplicações em React são aplicações chamadas de Single Page Web Apps (SPA), ou aplicações web de página única). A razão para isso é que a interface da aplicação React é construída por meio de um conjunto de componentes que são apresentados de acordo com a necessidade. esposta corretaesposta correta uma aplicação React não permite o uso de links para navegação para outras páginas, de tal forma que todo o código deve ficar em um único arquivo HTML. todos os recursos, como os conteúdos, os scripts e as folhas de estilo da aplicação React são combinados em uma única página quando a aplicação é exportada. há apenas uma versão da aplicação que pode ser executada em diversas plataformas, como computadores, tablets e smartphones. ocê respondeuocê respondeu 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 6/20 Uma aplicação web de página única é uma aplicação em que o conteúdo é alterado de acordo com a necessidade. Os possíveis conteúdos são organizados em componentes de interface, que podem ser combinados na construção da página e que podem ser substituídos por outros componentes conforme o estado da aplicação. 1,25 / 1,25 ptsPergunta 6 Qual é o nome do hook que é executado quando um componente de função React é renderizado? Obs: Não inclua nenhum espaço em branco na sua resposta e use letras maiúsculas e minúsculas corretamente. Qualquer diferença desses critérios será considerado resposta incorreta. useEffect Correto!Correto! espostas corretasespostas corretas useEffect Toda vez que um componente de função é renderizado, o hook useEffect é automaticamente executado. Pode-se dizer, assim, que esse hook acrescenta parte de um ciclo de vida ao componente, substituindo os métodos componentDidMount e componentDidUpdate dos componentes de classe. 1,25 / 1,25 ptsPergunta 7 Qual é o trecho que associa corretamente o método trataEvento ao evento click de um botão em React? 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=5508767/20 <button onClick={this.trataEvento}>Clique aqui</button> Correto!Correto! <button onClick={this.trataEvento()}>Clique aqui</button> <button onclick={this.trataEvento}>Clique aqui</button> <button onclick={this.trataEvento()}>Clique aqui</button> A associação é feita por meio da atribuição do nome da função (ou de uma expressão de função) para o evento. Mas não usamos os parênteses, porque isso executaria a função ao invés de passá-la para o botão. Além disso, o atributo do evento não é o mesmo atributo da especificação HTML (onclick), mas de uma propriedade do componente React (onClick). Assim, o código correto é: <button onClick={this.trataEvento}>Clique aqui</button> 1,25 / 1,25 ptsPergunta 8 Considere um componente React que seja encaixado na interface dessa forma: <Descricao><p>Esta é uma descrição.</p></Descricao> Qual propriedade do objeto props deve ser usada quando quisermos recuperar o conteúdo deste elemento? Obs.: não use espaços em branco na sua resposta, pois ela seria considerada errada. Você também não precisa escrever o nome do objeto props, apenas o da sua propriedade que representa o conteúdo. Lembre-se de respeitar as letras maiúsculas e minúsculas, conforme a 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 8/20 necessidade. Qualquer diferença desses critérios será considerado resposta incorreta. children Correto!Correto! espostas corretasespostas corretas children A forma correta para recuperarmos o conteúdo de um elemento que tenha sido criado por meio de um componente é usando a propriedade children do objeto props. Essa propriedade retornará um conteúdo em HTML que pode ser manipulado de acordo com a necessidade. 0 / 1,25 ptsPergunta 9 Qual é o nome do método dos componentes de classe em React que é chamado toda vez que um componente é renderizado pela segunda vez ou vez posterior? Obs: Não inclua nenhum espaço em branco, parênteses ou outros símbolos na sua resposta e use letras maiúsculas e minúsculas corretamente. Qualquer diferença desses critérios será considerado resposta incorreta. componentDidUpdate ocê respondeuocê respondeu espostas corretasespostas corretas componenteDidUpdate 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 9/20 Quando um componente é renderizado pela primeira vez, o método componentDidMount é automaticamente executado. Nas vezes seguintes que esse componente for apresentado, geralmente por causa da atualização do seu estado, o método componentDidUpdate será automaticamente executado. 1,25 / 1,25 ptsPergunta 10 Apesar de não ser uma prática muito recomendada, é possível fazermos formatação CSS inline em um componente React (formatação inline significa no próprio elemento HTML). O código que contém o uso correto de uma declaração de estilos inline em React é: <p style={font-family: "Arial"; color: "#F00"}>...</p> <p style="{font-family: Arial; color: #F00}">...</p> <p style={{fontFamily: "Arial", color: "#F00"}}>...</p> Correto!Correto! <p style={fontFamily: "Arial", color: "#F00"}>...</p> 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 10/20 A interpolação de dados em um código HTML é feita por meio de chaves. Assim, qualquer recurso JavaScript que precisemos embutir na HTML deve estar entre chaves. A formatação de um elemento é feita por meio de um objeto JavaScript cujas propriedades também estão escritas em JavaScript (usando a notação camelCase). Dessa forma, acabamos com dois pares de chaves - o externo é usado para a interpolação e o interno é o delimitador do objeto de propriedades: <p style={{fontFamily: "Arial", color: "#F00"}}>...</p> 0 / 1,25 ptsPergunta 11 Um tipo de componente comum nas aplicações React é aquele que apresenta uma lista de dados, geralmente armazenados em um vetor. Por exemplo, veja que o estado de um possível componente que contém uma lista de nomes: state = { nomes: ['José', 'Ana', 'Paula', 'Pedro'] } Essa lista deve ser apresentada pelo método render do componente por meio de um elemento <ul>, sendo que cada nome deve ser encaixado dentro de um elemento <li>. Qual dos seguintes trechos de código apresentará essa lista corretamente? <ul>{this.state.nomes.map((n) => (<li>{n}</li>))}</ul>ocê respondeuocê respondeu <ul>{this.state.nomes.map((i, n) => (<li key={i}>{n}</li>))}</ul > 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 11/20 <ul>{this.state.nomes.map((n, i) => (<li key={i}>{n}</li>))}</ul > esposta corretaesposta correta <ul><li>{this.state.nomes}</li></ul> O método map dos vetores executa uma função callback com um ou dois parâmetros, de acordo com a necessidade. O primeiro parâmetro receberá o valor do item do vetor sendo processado e o segundo parâmetro, quando usado, receberá um valor correspondente à posição desse item no vetor. Cada elemento do vetor será, por meio do método map convertido em um elemento <li> diferente. No entanto, o React exige que cada item de uma lista apresentada tenha um atributo key com valor específico, independentemente desse valor (basta que sejam diferentes). Assim, poderíamos implementar essa lista de duas formas: <ul>{this.state.nomes.map((n, i) => (<li key={i}>{n}</li>))}</ul> e <ul>{this.state.nomes.map((n) => (<li key={n}>{n}</li>))}</ul> No entanto, apenas a primeira forma constava na lista de alternativas de resposta. 1,25 / 1,25 ptsPergunta 12 O elemento React.Fragment é usado em um componente React quando 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 12/20 precisamos o componente seja construído por mais de um código HTML, de tal forma que cada fragmento representará um pedaço da interface desse componente. precisamos dividir a interface em subcomponentes, de tal forma que cada fragmento será representado por um subcomponente diferente. precisamos encapsular alguns elementos HTML no nível mais alto da interface do componente, mas sem gerar um elemento correspondente no DOM da aplicação. Correto!Correto! precisamos retornar algum conteúdo HTML para o componente, pois todo código HTML deve estar inserido como descendente desse elemento. O método render de um componente React não pode retornar elementos irmãos no seu nível mais alto. Por exemplo, o código abaixo é inválido: render() { return ( <h3></h3> <div></div> ); } Quando precisamos ter dois elementos assim, podemos encapsulá-los em um elemento React.Fragment, mas sem gerar nenhum código extra no DOM: render() { return ( <React.Fragment> <h3></h3> <div></div> </React.Fragment> ); } 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 13/20 1,25 / 1,25 ptsPergunta 13 Qual é o nome do componente React Native que torna um componente Text (ou de outro tipo) interativo e que, ao ser tocado, altera a transparência desse componente? Obs: Não inclua nenhum espaço em branco na sua resposta e use letras maiúsculas e minúsculas corretamente. Qualquer diferença desses critérios será considerado resposta incorreta. TouchableOpacity Correto!Correto! espostas corretasespostas corretas TouchableOpacity O componente TouchableOpacity encapsula um outro componente qualquer, permitindo que ele se torne interativo. O feedbackvisual oferecido por esse componente é a redução da opacidade (ou aumento da transparência) do componente tocado. Seu uso é feito da seguinte forma: <TouchableOpacity onPress={algumaFuncao}> <Text>Algum texto</Text> </TouchableOpacity> 1,25 / 1,25 ptsPergunta 14 Quando temos algum campo sendo editado na tela do smartphone, o teclado virtual é apresentado automaticamente. No entanto, a área da tela ocupada pelo teclado pode acabar sobrepondo outros elementos da inteface. Para evitar isso, usamos um componente de visão que automaticamente se ajusta à área disponível (excluindo a área ocupada pelo teclado). 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 14/20 Esse componente é o: KeyboardSafeView SafeAreaView ScrollView KeyboardAvoidingView Correto!Correto! Quando o teclado sobrepõe algum elemento de interface, podemos trocar o componente View de mais alto nível por um componente do tipo KeyboardAvoidingView . Como esse componente tem comportamento diferente entre as plataformas, ele precisa de um atributo behavior , como mostrado abaixo: <KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} style={estilos.app} > ... </KeyboardAvoidingView> 0 / 1,25 ptsPergunta 15 Que vantagem a Expo oferece para o desenvolvimento de aplicações React Native? A publicação automática da aplicação nas lojas das plataformas mobile, poupando o desenvolvedor de fazê-la manualmente. Um ambiente de desenvolvimento (IDE) específico para aplicações híbridas, que contém bibliotecas adicionais às da React Native. 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 15/20 A possibilidade de se compartilhar a aplicação com outros usuários sem a complexidade da exportação para as lojas de apps. esposta corretaesposta correta Simuladores das plataformas iOS e Android que permitem o teste rápido das aplicações híbridas sendo desenvolvidas. ocê respondeuocê respondeu A Expo funciona como um framework que encapsula a aplicação, nos poupando da complexidade da exportação e publicação da aplicação nas lojas das plataformas mobile. As aplicações criadas com a Expo devem ser executadas por meio do Expo Client (e não baixadas das lojas virtuais). Em particular, a Expo é interessante para a prototipação rápida de aplicações React Native. 0 / 1,25 ptsPergunta 16 Os recursos nativos dos dispositivos, como a câmera, o GPS ou a autenticação biométrica, podem ser usados nas aplicações nativas desenvolvidas com React Native. Considere as seguintes afirmativas sobre esse uso: I. Para cada recurso nativo usado, é necessário a importação de um componente específico, que mapeia as operações do recurso nativo em métodos e propriedades do componente. II. Sempre que possível, a React Native usará as implementações já disponíveis no navegador, como os objetos localStorage e geolocation. III. Os componentes podem ter funcionalidades que são específicas de uma ou outra plataforma, pois os recursos nativos a que estão associados podem ter diferenças nas operações que executam. É correto o que se afirma em: 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 16/20 I, apenas. II, apenas. III, apenas. I e II, apenas. I e III, apenas. esposta corretaesposta correta II e III, apenas. I, II, e III. ocê respondeuocê respondeu Para cada recurso nativo, precisaremos instalar e importar um componente específico para usá-lo. Não é possível, porém, usar as implementações dos navegadores, pois as interfaces em React Native não são apresentadas por meio deles, mas sim por meio de componentes nativos de cada plataforma. Realmente há diferenças nas funcionalidades dos recursos nativos entre as plataformas e os componentes React Native podem ter métodos, parâmetros ou atributos específicos para cada uma delas. 0 / 1,25 ptsPergunta 17 Considere o componente abaixo que contém um método assíncrono: import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class App extends Component { state = { valor: 'nenhum', }; fn = async () => { let resultado = 'primeiro'; 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 17/20 let promise = new Promise((resolve, reject) => { setTimeout(() => resolve('segundo'), 1000); }); resultado = await promise; this.setState({ valor: resultado }); }; render() { this.fn(); return ( <View> <Text>{this.state.valor}</Text> </View> ); } } Qual será o valor apresentado no componente de texto alguns segundos depois de ter sido carregado? nenhum ocê respondeuocê respondeu primeiro segundo esposta corretaesposta correta Uma string vazia A execução da função é pausada quando encontra a instrução await promise e só é retomada 1 segundo depois, quando a função resolve é executada o o valor 'segundo' é retornado. Para que a instrução await possa ser usada, a função deve ser declarada como assíncrona por meio da instrução async. 1,25 / 1,25 ptsPergunta 18 Complete o código abaixo de um componente que deve apresentar dois botões lado a lado (horizontalmente), com o espaço entre eles distribuído em três partes iguais. Os botões devem ser apresentados 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 18/20 Responder 1: Responder 2: Responder 3: no centro da tela, como sugere a figura à direita. import React from 'react'; import { StyleSheet, View, Button } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Button title="1" /> <Button title="2" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: ' row ', alignItems: ' center ', justifyContent: ' space-evenly ', }, }); Obs: Não inclua nenhum espaço em branco na sua resposta e use letras maiúsculas e minúsculas corretamente. Escreva os valores completos de cada propriedade. Qualquer diferença desses critérios será considerado resposta incorreta. rowCorreto!Correto! centerCorreto!Correto! space-evenlyCorreto!Correto! 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 19/20 Como os elementos estão dispostos horizontalmente, a propriedade flexDirection deve ter o valor 'row'. Para que fiquem verticalmente no centro da tela, a propriedade alignItems deve ter o valor 'center'. Para que o espaço seja distribuído em três partes iguais, a propriedade justifyContent deve ter o valor 'space-evenly'. 1,25 / 1,25 ptsPergunta 19 Qual é o nome do método do objeto AsyncStorage usado para armazenar dados localmente no dispositivo do usuário? saveItem putItem setItem Correto!Correto! getItem O armazenamento em React Native, quando feito por meio do componente AsyncStorage usa os mesmos métodos do objeto localStorage da JavaScript, isto é, setItem para armazenar valores e getItem para recuperá-los. 1,25 / 1,25 ptsPergunta 20 Podemos criar uma lista rolável em uma aplicação React Native usando o componente FlatList. Esse componente deve receber um 11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: AplicaçõesHíbridas - 2020/1 https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 20/20 vetor de objetos que serão apresentados na forma de lista. Qual é o nome do atributo do componente FlatList que é responsável por identificar o valor a ser usado como chave (key) para os itens da lista? Obs: Não inclua nenhum espaço em branco na sua resposta e use letras maiúsculas e minúsculas corretamente. Qualquer diferença desses critérios será considerado resposta incorreta. keyExtractor Correto!Correto! espostas corretasespostas corretas keyExtractor O atributo keyExtractor deve conter uma função que processa cada elemento da lista e retorna o valor a ser usado como chave (key). Pontuação do teste: 17,5 de 25