RSS

Blog posts tagged with 'axios'

Learning to use APIs with Wikipedia

Introduction

 

API stands for “application programming interface”.

When you send a request to an endpoint, its API will interpret your request and then perform the action you have specified.

In this scenario, “endpoint” is the URL which we use to make requests.

 

I will be using the MediaWiki API in order to demonstrate how we can request information from English Wikipedia:

https://en.wikipedia.org/

The endpoint we will send our requests to will be:

https://en.wikipedia.org/w/api.php

 

 

How do I specify what information I want?

 

Let’s say we want to get the first few lines from the Wikipedia page about Amazon Alexa.

In order to tell the API what we want, we need to add some parameters to the endpoint.

 

We start the string of parameters with a question mark.

https://en.wikipedia.org/w/api.php?

Then, if you have multiple parameters, connect them using the “&” symbol.

 

Here is a snippet of JavaScript code which makes our request slightly easier to read and construct.

const myPageTitle = “Amazon_Alexa”;

const endpoint = "https://en.wikipedia.org/w/api.php"

const params = “?action=query” // query is one possible action.

+ “&prop=extracts” // “extracts” is the name of an extension used by many wikis.

+ “&exsentences=3” // this lets you get the first 3 sentences from a page.

+ “&exlimit=1”⠀

+ “&titles=” + myPageTitle// this lets you specify which page you want information from.

+ “&explaintext=1” // means “extracts plain text”, which is human-friendly for reading.

+ “&format=json” // the data will be returned in JSON format

+ “&formatversion=2” // the JSON will be easier to navigate using index notation

+ “&origin=*”; // prevents a CORS error

Now we have a complete URL which we can use to make our request:

const alexaWikiUrl = endpoint + params;⠀

console.log(alexaWikiUrl); // output: https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exsentences=3&exlimit=1&titles=Amazon_Alexa&explaintext=1&format=json&formatversion=2&origin=*

Try visiting the link in your browser!

You will be presented with the information which would be returned if you were to make the request using code.

Implementation

In order to make API calls using your Alexa skill, you need to install a package which lets you do so.

There are many choices, but I recommend either node fetch or Axios. Node fetch appears to be more commonly used, but Axios is easier for me personally.

Here is an example of what a fetch request might look like using node fetch:

const wikiEndpoint = 'https://simple.wikipedia.org/w/api.php';

const wikiParams = "?action=query"

+ "&prop=extracts"

+ "&exsentences=3"

+ "&exlimit=1"

+ "&titles=" + "Amazon_Alexa"

+ "&explaintext=1"

+ "&format=json"

+ "&formatversion=2"

+ "&origin=*";

const myUrl = wikiEndpoint + wikiParams;

console.log(myUrl);

 

async function getData(url){

let res = await fetch(url);

let data = res.json();

return data;

}

 

getData(myUrl).then(data => {

console.log(data.query.pages[0].extract)

})

If you were to use Axios, it might look something like this:

async function getWikiData(){

const wikiEndpoint = 'https://simple.wikipedia.org/w/api.php';

const wikiParams = "?action=query"

+ "&prop=extracts"

+ "&exlimit=1"

+ "&exsentences=3"

+ "&titles=" + "Amazon_Alexa"

+ "&explaintext=1"

+ "&format=json"

+ "&formatversion=2"

+ "&origin=*";

const wikiLink = wikiEndpoint + wikiParams;

 

var wikiConfig = {

timeout: 6500

};

async function getJsonResponse(url, config){

const res = await axios.get(url, config);

return res.data;

}

return getJsonResponse(wikiLink, wikiConfig).then((result) => {

return result;

}).catch((error) => {

return null;

});

}

const wikiData = await getWikiData();

const wikiOutput = wikiData.query.pages[0].extract;

console.log(wikiOutput);

In both cases, the first 3 sentences from https://en.wikipedia.org/wiki/Amazon_Alexa will be logged.

The code in the node fetch example should work in your browser console.

If you want to test it out, try using this code and experimenting by changing some parameters.

Axios isn’t so easy to test, but the provided example works when implemented correctly, and should be able to serve as a good foundation.

Useful resources

https://www.youtube.com/watch?v=KlTrP6XYvEM

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

https://www.mediawiki.org/wiki/API:Main_page

https://www.npmjs.com/package/node-fetch

https://www.npmjs.com/package/axios