Crie uma App Explore the map Create an app with Web AppBuilder | Learn ArcGIS
Principal Crie uma App
Cria sua App
Antes de começar a construir seu aplicativo, você abrirá o mapa web e se familiarizará com os dados.
Faça login na sua conta organizacional do ArcGIS.
Se você não possui o ArcGIS, pode se inscrever para um ArcGIS free trial.
Abra o grupo Bento Rodrigues – Antes e Depois group.
Esse grupo contém um único item: um mapa web denominado "Bento Rodrigues - Antes e Depois do Evento do dia 05 de Novembro de 2015" criado pela Imagem.
Clique na miniatura para abrir o mapa no visualizador de mapas do ArcGIS.
O mapa apresenta o local onde aconteceu o desastre no distrito de Bento Rodrigues, no Município de Mariana, MG. São mostradas informações de referência como o limite municipal de Mariana, a área coberta pelos rejeitos no município, as localidades e as barragens no entorno do acidente. Além dessas informações, é apresentada uma imagem do satélite Landsat 8 em cores naturais (composição 432, RGB) correspondentes ao dia 12 de novembro de 2015, 7 dias após o desastre.
No painel do lado esquerdo do mapa, clique no botão Conteúdo para exibir as camadas que compõem o mapa.
O mapa possui 5 camadas operacionais: Limite, Barragens, Localidades, Rejeitos de Mineração e uma cena do satélite Landsat 8 do dia 12 de novembro de 2015. Inclui também um mapa base formado por imagens de satélite do mundo todo, e que para o Município de Mariana, inclui imagens de alta resolução adquiridas antes do desastre.
No Painel de Conteúdo, selecione a camada "Landsat 8 Cores naturais (RGB 432) 12 Nov. 2015". Clique no botão Mais Opções e escolha Zoom para.
O mapa mostra a extensão completa da imagem que cobre o município de Mariana e permite visualizar as diferentes localidades, entre elas, o distrito de Bento Rodrigues, nas proximidades da barragem de Fundão.
Aproxime-se do vilarejo de Bento Rodrigues clicando no botão Extensão padrão, à esquerda do mapa.
Observe o aspecto da região de Bento Rodrigues nessa imagem de satélite pós-evento. A enxurrada de lama proveniente da barragem de Fundão cobriu a barragem de Santarém à jusante e solapou completamente o vilarejo de Bento Rodrigues. A camada Rejeitos de Mineração permite visualizar a extensão da enxurrada.
No Painel de Conteúdo, desmarque a imagem adquirida após o evento (12 de novembro de 2015).
A camada é desativada e lhe permite observar a imagem de satélite obtida antes da destruição do vilarejo de Bento Rodrigues.
No painel de controle, marque novamente a imagem do dia 12 de novembro para torna-la ativa.
A comparação das imagens antes e depois do evento permite obter uma visão da devastação causada pela enxurrada, embora uma comparação lado a lado seria mais prática do que ligar e desligar as camadas.
Agora que você explorou o conteúdo do mapa, salvará sua própria cópia do mapa web para utilizá-lo no aplicativo que construirá nos próximos passos.
Na barra de ferramentas acima do mapa, clique em Salvar e escolha Salvar Como.
Na janela Salvar Mapa, mude o título para Bento Rodrigues - Antes e Depois do Evento do dia 05 de Novembro de 2015 e clique em Salvar Mapa.
Uma cópia do mapa web foi armazenada na página Meu Conteúdo, em uma pasta da sua propriedade.
Você deseja apresentar a informação do mapa da melhor forma possível para permitir que seus usuários realizem a comparação das imagens antes e depois do evento. Para fazer isso, configurará um aplicativo. Os aplicativos utilizam mapas web e adicionam (ou removem) funções e ferramentas para melhorar a experiência do usuário. É possível criar aplicativos por meio dos modelos do ArcGIS, ou então utilizar o Web AppBuilder para criar aplicativos customizados totalmente aderente às suas especificações. Você fará isso daqui a pouco.
Do lado esquerdo do visualizador de mapas, clique no menu suspenso Página Inicial e escolha Meu Conteúdo.
A página Meu Conteúdo apresenta todo seu conteúdo no ArcGIS Online, incluindo a cópia do mapa "Bento Rodrigues - Antes e Depois do Evento do dia 05 de Novembro de 2015" que você salvou e que utilizará posteriormente para criar o app.
Salvar uma cópia do mapa não lhe confere a propriedade das camadas do mapa. Se o dono apagar ou modificar alguma dessas camadas, isso afetará seu mapa e seu aplicativo. Aos efeitos deste demonstrativo, você não precisa se preocupar com isso.
Na guia superior da página Meu Conteúdo, clique em Criar, selecione Aplicativo e escolha Utilizando o Web AppBuilder..
A janela Criar um Novo Aplicativo Web será aberta.
Em Título, escreva Bento Rodrigues – Antes e Depois. Insira tags para descrever a geografia e o conteúdo do mapa, como por exemplo os utilizados na figura abaixo. Em Resumo, escreva Imagens de Bento Rodrigues – Antes e depois do desastre de 05 de Novembro de 2015.
Clique em OK para abrir o Web AppBuilder.
O Web AppBuilder abre com um mapa padrão. Do lado esquerdo do mapa se apresenta um painel que lhe permitirá configurar o aplicativo. O painel tem 4 guias e cada uma possui diferentes conjuntos de opções. A primeira guia é Tema, que lhe permite alterar o estilo e o layout do aplicativo.
Na guia Tema, abaixo de Estilo, escolha o estilo preto.
A barra do título é atualizada para apresentar a alteração. A cor preta combina com a severidade do desastre.
Clique agora na guia Mapa.
A guia Mapa lhe permite escolher o mapa web que será utilizado no seu aplicativo. Possibilita também configurar a Extensão inicial do mapa e alterar os níveis de escala para realizar zoom.
Clique em Escolher Mapa da Web.
Na janela Escolher Mapa Web, em Meu Conteúdo, clique na sua cópia do mapa "Bento Rodrigues - Antes e Depois do Evento do dia 05 de Novembro de 2015" e clique em OK.
O mapa da enxurrada substitui o mapa padrão e é ampliado para a mesma extensão que estava na tela quando você o salvou, que não necessariamente apresentará a área na qual você deseja se focar. Dessa forma, você alterará a extensão para que o app abra na região de maior interesse.
No visualizador de mapas, navegue até a região do distrito de Bento Rodrigues e as barragens do entorno.
Na guia Mapa, em Definir Extensão Inicial, clique em Utilizar Visualização de Mapa Atual.
Configure os widgets
Agora, você configurará os widgets para seu app. Os widgets são ferramentas e funcionalidades que podem ser inseridas na interface de usuário. Muitas delas estão ativas por default. Nesta seção não serão descritos todos os widgets disponíveis, mas somente aqueles que são importantes para o aplicativo que você está construindo.
Clique na guia Widget.
Os widgets que foram desativados aparecem esmaecidos e a parte inferior da lista apresenta espaço para cinco widgets adicionais. Você esconderá aqueles widgets que não deseja no seu app.
Aponte para o Widget Tabela de Atributos e clique no ícone do olho para esconder o widget.
O widget Tabela de Atributos permite que o usuário abra a tabela de atributos relacionada aos dados do mapa. Neste caso, seus dados são mais visuais e possuem poucos atributos, de forma que esse widget não é necessário.
Esconda também os widgets Meu Local e Pesquisar.
O widget Meu Local se baseia na localização atual do seu computador e provoca que o mapa seja ampliado nesse local. O widget Pesquisar permite que o usuário realize buscas de endereços específicos. Ao esconder esses widgets você previne que os usuários sejam desviados do foco do mapa.
Os demais widgets padrão são úteis. O widget Página Inicial fica localizado na parte superior esquerda do mapa e permite que o usuário realize um zoom no mapa para a extensão inicial. O widget Mapa de Visão Geral está localizado na parte inferior direita do mapa e permite visualizar a extensão do mapa em um contexto maior. Os widgets Coordenadas e Barra de Escala estão localizados no canto inferior esquerdo do mapa e fornecem a informação de referência sobre o mapa.
Você pode conhecer mais sobre os widgets individuais na documentação do Web AppBuilder for ArcGIS.
Localize os widgets Coordenadas e Barra de Escala na parte inferior esquerda do mapa.
O widget Barra de Escala pode ser editado. Clique no ícone de lápis, conforme a figura abaixo.
A janela Configurar Barra de Escala é aberta.
Para Estilo, escolha régua.
Uma barra mais larga é mais fácil de ver do que uma linha fina. Nos próximos passos você inserirá widgets com novas funcionalidades no seu app. Primeiramente, clicará em um widget vazio para poder ativar a funcionalidade Oscilar que permite aos usuários comparar duas camadas do mapa.
Clique no primeiro widget vazio, conforme a figura abaixo.
A janela Escolher Widget é aberta e apresenta vários outros widgets.
Clique no widget Oscilar.
A janela Configurar Oscilar é aberta.
11.	Na janela Configurar Oscilar, abaixo de "Selecione a camada que deseja oscilar por padrão", clique no menu suspenso e escolha Landsat 8 Cores naturais (RGB 432) 12 Nov. 2015.
O widget é inserido no extremo superior esquerdo do mapa. O widget Oscilar permite que os usuários alterem a visibilidade de uma camada por meio de um controle deslizante. Neste caso, você deseja que o usuário possa alterar a visibilidade da imagem obtida após a enxurrada de lama para que a área possa ser comparada com a imagem que se encontra debaixo, obtida antes do rompimento da barragem.
Apesar que é possível utilizar os widgets no mapa na sessão de edição, você testará a funcionalidade Oscilar um pouco mais tarde. Agora, adicionará outros widgets. Os quatro widgets do final da lista são espaços vazios que podem hospedar outras funcionalidades.
Clique no primeiro widget vazio, numerado como 1.
Na janela Escolher Widget, clique no widget Sobre e clique em OK.
A janela Configurar Sobre será aberta.
Na caixa de texto maior, remova o ícone do globo e copie e cole o seguinte texto:
Este app mostra as áreas atingidas no Município de Mariana (MG) pela enxurrada de rejeitos de mineração provenientes do rompimento da Barragem de Fundão em 5 de novembro de 2015. O aplicativo permite a comparação de imagens de satélite da área atingida antes e depois do desastre.
Ferramenta Oscilar: Utilize a ferramenta para deslizar a imagem de 12 de novembro de 2015 (Landsat 8, de média resolução) sobre a imagem adquirida antes do evento (de alta resolução) e visualizar a área atingida pelos rejeitos de mineração.
Ferramenta Medição: Utilize a ferramenta para realizar medições de áreas e distâncias. Por exemplo, crie um polígono da área atingida pelos detritos no Município de Mariana, para conhecer a extensão do impacto.
Formate o texto conforme a figura abaixo ou utilize seus próprios critérios de formatação.
O widget Sobre aparece no canto superior esquerdo do mapa, próximo do widget Oscilar. Quando você clicar no widget Sobre, o texto aparecerá na janela. Agora, você adicionará um widget que permitirá aos usuários medir distâncias e áreas.
Na guia Widget, clique no próximo widget vazio (renumerado para 1). Na janela Escolher Widget, clique em Medição e logo em OK.
A janela Configurar Medição permite que você escolha as unidades de medida padrão que serão utilizadas para realizar medições de distâncias e áreas no seu aplicativo.
Na janela Configurar Medição clique em OK.
O widget Medição aparece próximo do widget Sobre no canto superior esquerdo do mapa. Existe espaço para outros dois widgets, mas não será utilizado neste momento.
Finalmente, configurará os widgets que serão apresentados no cabeçalho.
Na guia Widget, clique em "Defina os widgets neste controlador".
O cabeçalho é outro lugar onde podem ser inseridos widgets. Observe que já existem dois widgets: a Legenda e a Lista de Camadas. Você pode encontrá-los do lado direito da barra de título.
A Lista de Camadas mostra todas as camadas que compõem o mapa e permite que o usuário ligue e desligue essas camadas.
A Legenda mostra a simbologia para cada uma das camadas. No caso deste aplicativo, a Legenda não possui nenhuma informação relevante e dessa forma, você a ocultará.
Na guia Widget, aponte o mouse para o widget Legenda e clique no X para remove-lo.
Quando for perguntado se deseja continuar com a remoção do widget, clique em OK.
O widget Legenda é removido do cabeçalho. Seus widgets agora estão configurados.
Finalize e teste o aplicativo
Antes de executar o app e testar os widgets, realizará alguns toques finais.
Clique na guia Atributo.
A guia Atributo lhe permite mudar alguns dos detalhes na barra do título. Você pode mudar o título, o subtítulo e o logo assim como adicionar links. Primeiramente, poderá escolher uma imagem para inserir como logo ou então deixar o título sem um logo associado.
Na guia atributo, em Identidade Visual, clique no logo padrão e procure no seu computador uma imagem que você deseje atribuir como logo no seu app.
Selecione a imagem clique duas vezes para inseri-la como logo. Caso não deseje inserir um logo junto ao título do aplicativo, clique no X disponível no espaço do logo.
Agora você inserirá um link com informação adicional sobre o desastre em Mariana.
Na guia Atributo, abaixo de Links, clique em Adicionar Novo Link.
Em nome do link, digite Conheça os Impactos: Laudo Técnico Preliminar – Ibama. Em URL do link, copie e cole o seguinte endereço: http://www.ibama.gov.br/phocadownload/noticias_ambientais/laudo_tecnico_preliminar_Ibama.pdf
Essa URL conduz até o relatório do laudo técnico preliminar elaborado pelo Ibama e outras instituições. O documento fornecerá uma visão mais completa sobre a extensão dos impactos.
Na barra do título, do lado direito do título, clique no link que acabou de inserir e verifique que a página é aberta corretamente.
Na parte de baixo do painel, clique em Salvar para salvar as alterações realizadas no seu aplicativo.
Agora, você executará o app e testará o funcionamento dos widgets.
Clique no botão Iniciar, localizado à esquerda de Salvar.
O aplicativo será aberto em uma nova aba e você poderá testar todas as funcionalidades adicionadas clicando nos botões do app: Oscilar, Sobre e Medir e realizando as operações correspondentes em cada caso.
Também poderá ativar e desativar camadas a partir da Lista de Camadas localizada na barra do título.
Ainda, poderá acessar mais informação sobre o evento a partir do link que foi configurado do lado do título.
Utilize o que você aprendeu neste exercício, construa seus próprios aplicativos e surpreenda-se com as possibilidades da Plataforma ArcGIS!