> ## Content Index > Fetch the complete content index at: https://buildcraft.tomfejer.com/llms.txt > Use this file to discover other available public pages before exploring further. # Prototyping with real news - URL: https://buildcraft.tomfejer.com/prototyping-with-real-news/ - Published: 2018-06-13T14:25:45.000Z - Updated: 2026-10-10T09:03:09.000Z - Description: Access worldwide news with code’ powered by NewsAPI.org - Author: Tom Fejér - Tags: #Migrated-1791621511277, #Import 2026-10-10 08:38, prototyping **tl;dr:** I made a prototype using news articles from over 30,000 news sources and blogs and this is a sneak peek how I did it. ### Getting started There are myriad of tools for designers out there. IMHO the most powerful design and prototyping tool currently is [Framer Studio](https://framer.com/?ref=buildcraft.tomfejer.com). 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](https://blog.prototypr.io/have-you-heard-about-the-spotify-web-api-8e8d1dac9eaf?ref=buildcraft.tomfejer.com). Recently I found [NewsAPI.org](https://newsapi.org/?ref=buildcraft.tomfejer.com), 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](https://newsapi.org/sources?ref=buildcraft.tomfejer.com) 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.* ![](https://cdn-images-1.medium.com/max/800/1*mkxEVAbXdBwVmX0B_W5izw.png) ☝️Example of a JSON you can get from newsapi.org After you registered you will find your API key at you [Account page](https://newsapi.org/account?ref=buildcraft.tomfejer.com). 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. ``` XMLHttpRequest ``` 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` `technology` 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](https://newsapi.org/docs?ref=buildcraft.tomfejer.com) 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. ![](https://cdn-images-1.medium.com/max/800/1*IwPjNPA6DToXiTX3u9_0kQ.png) ### 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*](https://material.io/tools/theme-editor/?ref=buildcraft.tomfejer.com) *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*](https://material.io/tools/theme-editor/?ref=buildcraft.tomfejer.com)*.* The Theme Editor helped to generate components like cards, list items, App bars super quickly. 🙏thanks @GoogleDesign ![](https://cdn-images-1.medium.com/max/1200/1*gja9Vnf4OCXTBxwWo7EVRg.png) Framer Studio’s Design tab From Sketch I brought the design to [Framer’s Design space](https://framer.com/features/design/?ref=buildcraft.tomfejer.com). Recently it became super fast to create layouts in Framer compared to past workflow when every layer and border radius was done with code. --- ### 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](https://blog.framer.com/prototype-with-real-data-in-framer-from-json-to-multi-device-and-internet-of-things-6eb1ae8b8325?ref=buildcraft.tomfejer.com) 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 ![](https://cdn-images-1.medium.com/max/1200/1*pCtqEOHyQmhvbPXc0hyqcQ.png) ⚛️Atom with [Beautify](https://atom.io/packages/atom-beautify?ref=buildcraft.tomfejer.com)\-ed JSON file ***2\. Importing JSON to*** [***Firebase***](https://firebase.google.com/?ref=buildcraft.tomfejer.com) to expose the hierarchy ![](https://cdn-images-1.medium.com/max/2560/1*bNi0nifCLtKfh8sxIh-gyA.png) 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](https://twitter.com/grotandthemob?ref=buildcraft.tomfejer.com) ![](https://cdn-images-1.medium.com/max/800/1*quSIJzVsoWpUa2hAdO13aw.gif) --- #### **🔍 Design Details** - separator on top only shown when you scroll - material bottom navigation ![](https://cdn-images-1.medium.com/max/800/1*IFLli4ENj7Qv914DJzae1A.gif) learn more about this component at [material.io](https://material.io/design/components/bottom-navigation.html?ref=buildcraft.tomfejer.com#behavior) #### Learn More… [Have you heard about the Spotify web API?🔊 Using Spotify Web API in Framer![](https://cdn-images-1.medium.com/fit/c/160/160/1*xPGPdDXukdWJA_2-uwQ54g.png)](https://blog.prototypr.io/have-you-heard-about-the-spotify-web-api-8e8d1dac9eaf?ref=buildcraft.tomfejer.com) ---