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 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 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.

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



Source link https://blog..io/-with--news-e1fece3a55c1?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here