Prototyping with real news

Access worldwide news with code’ powered by NewsAPI.org
 

news_hero

Getting started

There are myriad of tools for designers out there. IMHO the most powerful design and prototyping tool currently is Framer Studio. If you’re interested in prototyping with code and using API-s, understanding JSON files, I would recommend my previous post about Using Spotify Web API in Framer.

Recently I found NewsAPI.org, a small team with a super powerful API to big news sources like Google News, The New York Times, The Wall Street Journal, The Verge, National Geographic. Next to the big names there are over 30,000 sources available from different countries and languages (even in 🇭🇺Hungarian).

note: if u use it for free NewsAPI.org attribution required# It means that you need to add a credit to NewsAPI.org near to your implementation so that users of your product know where your data came from. This can be a simple 'powered by NewsAPI.org' link, a mention in your Github repo, or a line somewhere in your app description. This way you can give a little back in exchange for free access to the API.
news_json_sample

☝️Example of a JSON you can get from newsapi.org

After you registered you will find your API key at you Account page. We will need that to authenticate ourselves when we are requesting data from the API.

When you are logged in all the examples on the site are using your current API key 🙌

IMPORTANT: Do not share your API key in your prototypes or elsewhere. You have limited number of requests and this is your personal key 🗝

Get what you ‘GET’

After you acquired your apiKey you can start your XMLHttpRequest in Framer in order to get your data in a JSON format.

# Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

change ****************************** to your apiKey

If you run this ☝️you can get back something like this 👇

» "How to watch Microsoft's Xbox E3 2018 press conference"

Everything

Let’s see what else we can get. In the example above we requested the top headlines from the US which looked like this:

r.open 'GET', 'https://newsapi.org/v2/top-headlines?' + 'country=us&' + 'apiKey=******************************', true

If you want to get everything and not only the headlines, you can change the top-headlines to everything :

r.open 'GET', 'https://newsapi.org/v2/everything?' + 'country=us&' + 'apiKey=******************************', true
 
Country

In case you want something else than the American news you can pick from these countries:

ae ar at aube bg br ca ch cn co cu cz de eg fr gb gr hk hu id ieil in it jp kr lt lv ma mx my ng nl no nz ph pl pt rors ru sa se sg si sk th tr tw ua us ve za .

r.open 'GET', 'https://newsapi.org/v2/everything?' + 'country=hu&' + 'apiKey=******************************', true

When you do not specify you will get all countries.

 
Categories

IMO the most powerful part of this API is to get curated headlines for specific categories from different sources. The currently available categories: businessentertainment general health science sports techology

<r.open 'GET', 'https://newsapi.org/v2/top-headlines?'+ 'country=us&' + 'category=entertainment&'+'apiKey=******************************', true
 
Even more things

If you dive in to the API documentation you can learn how to get news from exact dates, about certain topics, from specific sources.

Now we know what we can get, let’s begin designing the interface.

news_ui

Designing the news

For this prototype I used Google Material Theme Editor’s Fortnightly UI kit and tweaked it a bit in order to generate a few different card types with titles, descriptions and captions.

The Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography. Currently available for Sketch, you can access the Material Theme Editor by downloading the Material Plugin.

The Theme Editor helped to generate components like cards, list items, App bars super quickly.

🙏thanks @GoogleDesign

Populate the content

Locate things[0] in your JSON
JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

recommended reading: Prototype with real data in Framer, from JSON to multi-device and internet of things →

What I did in the past to gain a better understanding on the data I am dealing with and understand the structure is two things:


1. Beautifying the JSON to make it easier to read
news_json_beautify

⚛️ Atom with Beautify-ed JSON file

2. Importing JSON to Firebase to expose the hierarchy
news_firebase

With these tricks you can easily see that r.response.articles[0].title will give back "NBC Revives ‘Brooklyn Nine-Nine,’ and Fans Rejoice" and to get the name of a source for the 2nd article r.response.articles[1].source.name

Calculating Time

#current time
currentTime = new Date()

#function calculate and fill date
dateFill = (layer, i) ->
thisDate = new Date (r.response.articles[i].publishedAt)
newsDate = currentTime.getHours() - thisDate.getHours() + " hours" + " ago"
layer.text = newsDate

Good News, Everyone!

It is done. It works as intended. In case you would like to get your hands on the code drop me a line on twitter @grotandthemob

news
Design Details
  • separator on top only shown when you scroll
  • material bottom navigation
news_details

learn more about this component at material.io

Originally posted on Medium 

Jun 13, 2018