Prototipagem com Dados Reais – Um Tutorial do Framer

Publicados: 2022-03-11

O Framer é uma das ferramentas de prototipagem de aplicativos mais poderosas que existem. Ele pode ser usado para projetar para qualquer dispositivo móvel, do iOS ao Android. Se você conhece um pouco de programação, seus recursos são praticamente ilimitados porque é baseado em CoffeeScript – uma linguagem de programação relativamente fácil. Um designer seria limitado apenas por sua imaginação e habilidades de codificação.

Framer - O que é?

Para seguir este artigo, você deve ter pelo menos um conhecimento básico do Framer. Usaremos o Modo Design e o Editor de Código. Se você quiser complementar seu conhecimento, leia nossos artigos anteriores do Framer: Como criar protótipos interativos impressionantes, 7 microinterações simples para melhorar seus protótipos

Por que você deve usar o Framer com dados reais

Um problema comum na concepção ou prototipagem é a falta de dados reais. Quando uma nova função é projetada para um produto existente, em vez de usar conteúdo fictício, conteúdo lógico, relevante e de aparência real pode ser exibido. Pode ser qualquer tipo de dados — fotos de usuários, por exemplo. Dessa forma, não se perde tempo tentando criar conteúdo falso, e os erros decorrentes do uso de dados inválidos serão evitados. Todos os dados disponíveis são visíveis e pode ser estabelecido qual conteúdo ainda pode ser necessário - como resultado, a comunicação com as partes interessadas e a equipe de desenvolvimento é mais eficaz. Também é possível projetar em torno de diferentes cenários de caso de uso.

Quando projetamos uma nova função, às vezes esquecemos que nem todo perfil de usuário está completo, nem todas as categorias da loja têm a mesma quantidade de produtos e nem todos os produtos exibem os mesmos dados. A prototipagem com dados reais pode ser comparada à construção de algo com blocos LEGO: em vez de trabalhar com formas imaginárias e soltas, podemos usar componentes existentes da caixa e construir algo real.

Vamos Prototipar com Dados Reais!

A verdadeira diversão no Framer começa quando são usados dados reais que são atualizados em tempo real de um banco de dados. Qualquer tipo de dados pode ser aplicado, por exemplo: perfis de usuários com fotos, endereços, cotações de ações, taxas de câmbio, previsões do tempo, informações de transações – quaisquer dados que os aplicativos normalmente usam. O design de produto realmente poderoso começa a acontecer quando você combina prototipagem em tempo real com dados reais. E não será mais necessário usar as infames peças de texto “lorem ipsum” no estilo latino.

Protótipo Framer combinado com API Mapbox da Uber — Uber com API Mapbox por Bryant Jow para Uber.

A API usando dados reais: o que é? Como o usamos?

Uma interface de programação de aplicativos (API) é a interface por meio da qual nos comunicamos com os aplicativos. Imagine um aplicativo como um restaurante. A comida são os dados e os garçons são a API. Você pede a comida aos garçons - isso é tudo que você precisa fazer. Os garçons (API) e a cozinha (banco de dados) cuidam do resto.

Trata-se de acesso a dados reais que residem em um determinado banco de dados.

O que é uma API?

Cada aplicativo tem uma API que permite que os dados sejam capturados e exibidos. Algumas APIs estão disponíveis publicamente e algumas são usadas apenas em produtos internos.

As APIs disponíveis publicamente são amplamente usadas para criar novos aplicativos. Por exemplo, para construir um aplicativo meteorológico, alguns dados meteorológicos são necessários. Com a ajuda de vários sites de previsão do tempo que compartilham suas APIs públicas, é super fácil. Além disso, muitas APIs diferentes podem ser combinadas para criar um produto completamente novo.

Onde podemos obter dados reais? As listas de APIs abertas

Existem muitas APIs disponíveis publicamente que fornecem vários dados. Aqui está uma lista de cinco que são ótimos para prototipagem com dados reais no Framer. Cada uma dessas APIs também retorna dados no formato JSON, que podem ser facilmente manipulados na estrutura.

Random User – Definitivamente a melhor API para iniciantes. Ele gera perfis de usuário completos e aleatórios, de um avatar a um endereço de e-mail.

Avatares de usuário da API de usuário aleatório

OpenWeatherMap – esta é uma API muito fácil de usar. Ele permite que você verifique o clima atual e as previsões em qualquer local. Usando esta API, podemos exibir dados como temperatura, umidade ou velocidade do vento.

Aplicativo de previsão do tempo usando API de dados reais no Framer — Aplicativo de previsão do tempo de Wojciech Dobry.

Pokeapi – uma das melhores APIs criadas para fins educacionais. Procurando algo sobre Pokémon? Pode ser encontrado aqui. Esta é uma API RESTful completa vinculada a um extenso banco de dados detalhando tudo sobre a série principal de jogos Pokemon.

Conceito de UI móvel Pokemon usando API de dados reais no Framer — Conceito de interface do usuário de Pokémon por Sai Aung.

Instagram – a primeira API da lista que requer autorização para uso. Seu serviço, no entanto, é muito simples. Você pode obter acesso a todas as fotos e usuários do Instagram e exibi-los em seu novo aplicativo.

Instagram no smartwatch usando API de dados reais no Framer — Instagram no smartwatch de Hironobu Kimura.

Mapbox – fornece uma série de serviços incríveis que são fáceis de integrar com um aplicativo, desde mapas e direções até geocodificação e até imagens de satélite. Foursquare, Evernote, Instacart, Pinterest, GitHub e Etsy têm algo em comum - seus mapas são alimentados pelo Mapbox.

Essa API é diferente das anteriores porque não retorna arquivos JSON, mas dá acesso a todas as funcionalidades do Mapbox. O Mapbox também produziu um ótimo tutorial sobre como usar sua API no Framer.

Mapbox mapas via API em telefones celulares — Mapbox em dispositivos móveis.

Tutorial de API de usuário aleatório no Framer usando dados reais

Protótipo do Framer com dados da API de usuário aleatório

Para entender como trabalhar com APIs no Framer, vamos começar com a Random User API. Precisaremos de uma única tela de aplicativo - uma lista de usuários.

Etapa 1: modo de design

Aqui está uma lista de usuários contendo nomes, sobrenomes e avatares. Isso é tudo o que é necessário. A parte mais importante deste processo é nomear e agrupar todos os elementos corretamente. Avatares e nomes são agrupados na camada de caixa e todas as caixas são agrupadas dentro da lista:

A última coisa que precisa ser feita no Modo Design é marcar a camada da lista como uma camada interativa. Para fazer isso, basta clicar no ícone de destino.

Etapa 2: Noções básicas sobre JSON

Antes de tudo, é necessário entender o que é JSON e como obtê-lo fora do Framer. Nos documentos da API de usuário aleatório, encontre uma solicitação de dados da API. Fica assim: https://randomuser.me/api/?results=20. Como você pode ver, é um link normal que abre um arquivo JSON no seu navegador:

Do jeito que está, não parece nada claro. Para visualizar arquivos JSON formatados corretamente, use o plug-in do Chrome chamado JSONview. Com o plugin, o arquivo ficará assim:

Muito melhor. Agora deve ser fácil de ler. O arquivo contém a matriz de resultados com dados do usuário, que foi recebido após solicitar à API. Então, o que é o arquivo JSON? Sem entrar em detalhes técnicos, é um arquivo de texto baseado na sintaxe JavaScript que contém dados específicos de um banco de dados. JSON pode ser usado no Framer para exibir dados dele.

Etapa 3: importar o arquivo JSON para o Framer

Agora, o arquivo JSON pode ser importado para o Framer com uma única linha de código:

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Crie o objeto chamado data que conterá o arquivo JSON. Use a função de impressão para ver se o arquivo JSON foi importado corretamente:

 print data

Etapa 4: acessar dados específicos do arquivo JSON

Agora volte para a estrutura do arquivo JSON:

Neste arquivo JSON, os results são uma matriz que contém mais objetos. Cada objeto é um usuário diferente. Primeiro, um desses objetos deve ser direcionado. Use a função de impressão para entender melhor o que está acontecendo:

 print data.results[1]

Console do Framer:

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

A figura entre parênteses representa um número do objeto na matriz. Usando data.results[1] , o acesso a todos os dados do primeiro usuário no arquivo JSON é recebido.

Em seguida, itens como nome ou sobrenome podem ser exibidos:

 print data.results[1].name.first

Framer responde com: "benjamin" . E voilá! O acesso aos dados da API foi alcançado!

Etapa 5: exibir os dados do JSON

Finalmente! A única coisa que resta é exibir os dados. Agora, um loop simples que terá como alvo todas as camadas do modo de design deve ser criado. Leia mais sobre camadas de segmentação com um loop neste artigo anterior.

Estamos usando x = 0 para direcionar o primeiro objeto na matriz dos dados JSON. Então, para cada elemento filho da lista , atribuímos os dados dos dados JSON. No final do loop, adicionamos +1 para usar os dados do próximo objeto no array:

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

É isso! Agora você pode voltar ao modo de design e brincar com o design, e os dados reais serão exibidos em seu protótipo!

Você pode baixar o arquivo Framer acima aqui: https://framer.cloud/djmvG

API do Instagram – Dados em tempo real no Framer

O Instagram é um ponto de partida interessante para começar uma jornada com dados em tempo real. As instruções são relativamente fáceis de seguir e a API fornece dados interessantes – você recebe acesso completo. Nesta parte do artigo, a API do Instagram é usada para construir um protótipo simples que exibe os dados do meu perfil do Instagram: nome, foto mais recente e número de curtidas.

Modo de design do Framer versus protótipo de dados reais — Apenas cinco linhas de código e um token de acesso são necessários para obter dados do Instagram.

Etapa 1: obter um token de acesso

Para usar a API do Instagram, é necessário um token de acesso. Pode ser obtido de duas maneiras diferentes:

A maneira mais comum é acessar o site do Instagram for Developers e seguir as instruções. Este processo pode ser complicado para pessoas não técnicas.
Felizmente, existe uma maneira fácil e segura de obtê-lo. A Pixel Union desenvolveu um processo de um clique muito mais fácil: acesse o site e clique no botão Obter Token de Acesso.

Etapa 2: ativar solicitações entre domínios

Depois de receber um token de acesso, é necessário um pequeno truque. O Instagram não permite solicitações de API do seu localhost (Framer) e, portanto, as consultas do lado do servidor devem ser usadas. Um deles é JSONProxy. Acesse o site deles, cole uma solicitação da API do Instagram e clique em GO.

Feito isso, em vez de usar o link da API do Instagram, o link JSONProxy pode ser usado.

Etapa 3: crie um aplicativo simples no Framer

Existem apenas três elementos cruciais nesse design: o espaço reservado para o nome, um retângulo que exibirá a foto mais recente e o número de curtidas sob a imagem. Todas elas são marcadas como camadas interativas para serem reutilizadas no editor de código.

Etapa 4: escreva quatro linhas de código para usar dados do Instagram

Protótipo final no Framer: editor de código — Cinco linhas de código no Framer para obter os dados.

O fluxo aqui é o mesmo da API de usuário aleatório. Qualquer dado do usuário pode ser acessado a partir do Instagram:

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

É isso! Cinco linhas de código e você pode prototipar usando dados ao vivo e reais fornecidos pelo Instagram. Baixe um protótipo funcional aqui: https://framer.cloud/iYAXl. (Por favor, tenha em mente que você precisa adicionar sua própria CHAVE DE ACESSO para executar este protótipo.)

Resumo – Prós e Contras

Ao criar protótipos que usam dados reais obtidos por meio de uma API de um banco de dados, novas possibilidades criativas e a capacidade de verificar o design do produto são reveladas – protótipos 100% consistentes com o produto podem ser construídos e novas funções testadas em usuários reais . Com uma prévia de todos os dados do sistema, é mais difícil perder um elemento que deve ser incluído no design e, com acesso a dados reais, evitam-se erros de design decorrentes do uso de dados falsos.

Dito isto, a prototipagem de alta fidelidade no Framer é bastante cara. São necessários muitos ajustes para obter o efeito desejado – o que consome tempo e dinheiro. Conforme mostrado no exemplo da API de usuário aleatório, a comunicação com a API não é difícil, mas ainda é necessário muito tempo para criar um ótimo protótipo a partir dela.

No entanto, quando dada a medida completa, certamente vale a pena considerar. Boa prototipagem com dados reais!

• • •