Framer é uma das ferramentas de prototipagem de aplicativos mais poderosas do mercado. Ele pode ser usado para projetar qualquer dispositivo móvel, de iOS a Android. Se você conhece um pouco de programação, seus recursos são virtualmente ilimitados porque se baseia em CoffeeScript - uma linguagem de programação relativamente fácil. UMA designer Você só seria limitado 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 de design e o editor de código. Se você quiser complementar seus conhecimentos, pode ler nossos artigos anteriores de Framer: Como criar protótipos interativos impressionantes , 7 micro interações simples para melhorar seus protótipos

Por que você deve usar o Framer com dados reais

Um problema comum na prototipagem ou design é a falta de dados reais. Ao criar um novo recurso para um produto existente, em vez de usar conteúdo fictício, você pode exibir conteúdo lógico, relevante e real. Pode ser qualquer tipo de dado - fotos do usuário, por exemplo. Dessa forma, nenhum tempo é perdido tentando criar conteúdo falso e erros decorrentes do uso de dados inválidos serão evitados. Todos os dados disponíveis ficam visíveis, podendo-se estabelecer quais conteúdos podem ser necessários, com isso, a comunicação com os stakeholders e a equipe de desenvolvimento é mais efetiva. Também é possível projetar em diferentes cenários de caso de uso.

Quando projetamos um novo recurso, às vezes esquecemos que nem todos os perfis de usuário estão completos, nem todas as categorias na loja têm o mesmo número de produtos e nem todos os produtos mostram os mesmos dados. A prototipagem com dados reais pode ser comparada à construção de 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 você usa dados reais que são atualizados em tempo real a partir de um banco de dados. Qualquer tipo de informação pode ser aplicada, 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 informações que os aplicativos utilizem regularmente. O design de produto realmente poderoso começa a acontecer quando protótipos em tempo real são combinados com dados reais. E você não precisa mais usar os infames marcadores de texto “lorem ipsum” de estilo latino.

Uber com API Mapbox de Bryant Jow para Uber

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

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

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

O que é uma API?

Cada aplicativo possui 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.

APIs publicamente disponíveis são amplamente utilizadas 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, é muito 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 API abertas

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

Usuário Aleatório - Definitivamente a melhor API para iniciantes. Gere perfis de usuário completos e aleatórios, de um avatar a um endereço de e-mail.

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

App de previsão do tempo por Wojciech Dobry

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

Conceito de interface do usuário Pokémon de Sai Aung

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

Instagram em um smartwatch de Hironobu Kimura

Mapbox - Oferece um número incrível de serviços fáceis de integrar com um aplicativo, de mapas e direções a geocodificação e até imagens de satélite. Foursquare, Evernote, Instacart, Pinterest, GitHub e Etsy têm uma coisa em comum: seus mapas funcionam com Mapbox.

Esta API é diferente das anteriores porque não retorna arquivos JSON, mas dá acesso a todas as funções do Mapbox. Mapbox também produziu um excelente tutorial sobre como usar sua API no Framer .

Mapbox em dispositivos móveis

Tutorial da API RandomUser em Framer com dados reais

Para entender como trabalhar com APIs no Framer, vamos começar com o API de usuário aleatório . Precisaremos de uma única tela do aplicativo - uma lista de usuários.

Etapa 1: modo de design

Aqui está uma lista de usuários que contêm nomes, sobrenomes e avatares. Isso é tudo o que é necessário. A parte mais importante deste processo é nomear e agrupar todos os itens corretamente. Avatares e nomes são agrupados na camada do quadro e todos os quadros são agrupados na lista:

A última coisa a fazer no modo de design é marcar a camada Lista como uma camada interativa. Para fazer isso, basta clicar no ícone de destino.

Etapa 2: Compreendendo JSON

Em primeiro lugar, você precisa entender o que é JSON e como obtê-lo fora do Framer. Dentro Documentos da API do usuário aleatório pesquisar por uma solicitação de dados API. Se parece com isso: 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á, nada está claro. Para visualizar arquivos JSON formatados corretamente, use o plug-in do Chrome chamado JSONview . Com o plugin, o arquivo terá a seguinte aparência:

Muito melhor. Agora deve ser fácil de ler. O arquivo contém a matriz de resultado com dados do usuário, que foi recebido após a solicitação da API. Então, o que é 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 dados que conterá o arquivo JSON. Use a função impressão para ver se o arquivo JSON foi importado com sucesso:

print data

Etapa 4: Acessando dados específicos do arquivo JSON

Agora volte para a estrutura do arquivo JSON:

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

print data.results[1]

Console 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 uma quantidade do objeto na matriz. Usando data.results [1], você obtém acesso a todos os dados do primeiro usuário no arquivo JSON.

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

print data.results[1].name.first

Framer responde com: 'benjamin'. Et voila! O acesso aos dados da API foi alcançado!

Etapa 5: Visualização dos dados JSON

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

Estamos usando x = 0 para apontar para o primeiro objeto na matriz dos dados JSON. Então, para cada elemento crianças da Lista , mapeamos os dados dos dados JSON. No final do loop, adicionamos +1 para usar os dados do seguinte objeto na matriz:

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 iniciar uma jornada com dados em tempo real. As instruções são relativamente fáceis de seguir e a API fornece dados interessantes - você obtém acesso total. Nesta parte do artigo, a API do Instagram é usada para criar um protótipo simples que exibe os dados do meu perfil do Instagram: nome, foto mais recente e número de 'curtidas'.

Leva apenas cinco linhas de código e um token de acesso para buscar dados do Instagram

Etapa 1: Obtenha um token de acesso

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

1. A maneira mais comum é ir ao site da Instagram para desenvolvedores e siga as instruções. Este processo pode ser complicado para pessoas não técnicas.

2. Felizmente, existe uma maneira fácil e segura de obtê-lo. Pixel Union desenvolveu um processo muito mais simples de um clique: vá para seu 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, um pequeno truque é necessário. O Instagram não permite solicitações de API de seu servidor local (Framer) e, portanto, consultas do lado do servidor devem ser usadas. Um deles é JSONProxy . Vá para o site deles, cole um pedido de API do instagram e pressione GO.

Uma vez feito isso, em vez de usar a ligação da API do Instagram, você pode usar a ligação JSONProxy.

Etapa 3: Crie um aplicativo simples no Framer

Uma tela de aplicativo simples projetada em Framer.

Existem apenas três elementos cruciais neste layout: o marcador de posição de nome, um retângulo que exibirá a última foto e o número de 'curtidas' abaixo da imagem. Todos eles são marcados como camadas interativas para serem reutilizadas no editor de código.

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

Cinco linhas de código no Framer para obter os dados.

O fluxo aqui é o mesmo da API de usuário aleatório. Qualquer informação do usuário pode ser acessada no Instagram:

yourAccessToken = 'YOUR-ACCESS-TOKEN' instagramJSON = JSON.parse Utils.domLoadDataSync 'http://jsonproxy.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 criar um protótipo usando dados reais e ao vivo fornecidos pelo Instagram. Baixe um protótipo funcional aqui: https://framer.cloud/iYAXl . (Observe que você deve adicionar sua própria CHAVE DE ACESSO para executar este protótipo).

Em resumo - prós e contras

Prototipando usando dados reais obtidos por meio de uma API de 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 por usuários reais com uma visualização de todos os dados no sistema; é mais difícil ignorar um elemento que deve ser incluído no projeto e, com o acesso a dados reais, erros de projeto decorrentes do uso de dados falsos são evitados.

Dito isso, a prototipagem de alta fidelidade no Framer é bastante cara. Muitos ajustes são necessários para obter o efeito desejado, o que consome tempo e dinheiro. Conforme mostrado no exemplo de API de usuário aleatório, a comunicação com a API não é difícil, mas ainda leva muito tempo para construir um grande protótipo a partir dela.

No entanto, quando totalmente adaptado, certamente vale a pena considerar. Feliz prototipagem com dados reais!