APIs on Educative

Get introduced to how we can make APIs work.

We'll cover the following

Working with APIs

Let’s say you want to work with APIs in your course. These APIs have various endpoints requiring various keys/tokens to function. As an author, it is easy to define stubs for these APIs in code playgrounds. Learners can get their API keys/tokens from the API’s documentation or control panel and replace them manually in the code.

Take the following playground as an example. Follow the instructions in the comments before executing the code widget below.

Press + to interact
// Replace API key stubs in the two lines below
// If not replaced, the functions below will throw
// an error
const api_key_1 = "{{api_key_1}}";
const api_key_2 = "{{api_key_2}}";
// The following functions are provided by "some" API
// and require the two keys above
some_api_func_1(api_key_1);
const api_key_3 = some_api_func_2(api_key_2);
// The following line prints the token 
// generated by some_api_func_2
console.log("api_key_3 value is: ", api_key_3);

In order for the above playground to function, the user can replace the stubs for api_key_1 and api_key_2 manually in the code, and the API will function correctly. Similarly, the some_api_func_2 generates a token that is stored in api_key_3 and printed to the console.

The code below requires the value of api_key_3. Hence, it must be copied from the console above and used as input here:

Press + to interact
// Replace API key stubs in the two lines below
// Take the api_key_3 from the console output
// from the above playground
const api_key_2 = "{{api_key_2}}";
const api_key_3 = "{{api_key_3}}";
const status = some_api_func_3(api_key_2, api_key_3);
console.log(status);

Everything seems to work great so far. But imagine having to copy and replace the same keys for all the playgrounds across all lessons. It becomes very cumbersome for the learner to do so.

In order to make APIs more accessible, we have enabled the “API Keys” feature. Each playground can have its required API keys/tokens that are to be specified. The user can provide their values once, and this will store them globally in all the playgrounds that use those particular keys/tokens.

Educative’s API Keys

Consider, for example, the following playground with API onboarding enabled. Instead of replacing API key/token stubs in the code, we can save these in the box above the playground.

Press + to interact
// These stubs will be automatically replaced
// when you enter their values in the box above
const api_key_1 = "{{api_key_1}}";
const api_key_2 = "{{api_key_2}}";
some_api_func_1(api_key_1);
const api_key_3 = some_api_func_2(api_key_2);
// The following value will be automatically extracted
console.log("api_key_3 value is: ", api_key_3);

api_key_3 is automatically extracted from the code. Click “Save” to store the value in this particular key.

After you have executed the above playground successfully, you’ll see that both key values will have been replaced automatically in the playground below. You can now execute this one successfully too, and subsequently in all the lessons that have playgrounds using these keys.

Press + to interact
// These stubs will be automatically replaced
// when you enter their values in the box above
const api_key_2 = "{{api_key_2}}";
const api_key_3 = "{{api_key_3}}";
const status = some_api_func_3(api_key_2, api_key_3);
console.log(status);

So where did all the magic happen? We will explain in the following lessons.