APIs, the building blocks of software, run our world. They’re how software systems communicate with each other, and how we as people communicate with software. Knowing how to build an API is not only a crucial skill for a software developer, but a foundational part of general coding literacy — a skill that can help anyone in their career. In this tutorial, you’ll learn how to build an API directly from your web browser — no other tools required — using , the online API editor. Whether you’re new to software development or a veteran looking for faster ways to ship code, I’ll demonstrate how quickly you can build a working API with . We’ll use to build a fully functional SMS service that connects and . Code on Standard Library Code on Standard Library Code on Standard Library AscenDB’s Peaks API for identifying mountain information MessageBird’s API for sending SMS messages Our API will receive the name of any mountain and retrieve that mountain’s elevation and prominence from AscendDB. provides data on over 7 million peaks worldwide — you can . You can also replicate these steps with any API of your choice to create your own SMS service! AscenDB’s Peaks API check out their docs on Standard Library here What You’ll Need Beforehand 1x US Cell Phone Number 1x Creative and Daring Soul Step 1: Get Started with Code on Standard Library The first step is to head over to . is an online API editor built by the team at — an embeddable development environment for easily building APIs, webhooks, and workflow automation tasks. Code on Standard Library Code on Standard Library Standard Library On the upper right corner of click . If you have a Standard Library account click and sign in using your credentials. A module will pop up prompting you to claim a namespace (this is your username). Input your e-mail and choose a password. Code on Standard Library (sign in) Already Registered After you create your account, a different module will appear listing the subscription plans. A free account is all you need to get started. Once you click you should see a confirmation message pop up. Subscribe + Earn Credits Click to return to ’s landing page. Continue Code on Standard Library Step 2: Interact With Your First API Click Create New API (Blank) Enter a name for your API. For the purposes of this tutorial, I suggest you name it and hit (or press enter). MyFirstAPI Okay Once you hit enter, you’ll see a service project scaffold on the left sidebar (a folder tree view) that has been automatically generated. At this point, you may have noticed that there’s a “hello world” Javascript function inside ( ). To test your function simply click on the bottom right corner: __main__.js Run Clicking “Run,” turns your function into an infinitely scalable API endpoint in just a few seconds! Under the “Results” area you will notice a documentation portal - click it to see your API’s information on Standard Library. You will also see an API endpoint URL, click it and a new tab will open showing your“hello world” message live. STDLIB_LIBRARY_TOKEN Step 3: Replace the Default “Hello World” Function & Set Your Now let’s create our SMS service that will text back the elevation and prominence of any mountain peak. First, we will replace the default “hello world” function in the . the following code that I have provided you with into the file: __main__.js Copy and paste __main__.js Once you paste the code into your file, you will notice that your dependency on (the line) is automatically added, there is no need to run an npm install through your terminal — Code on Standard Library will automatically modify your file and install any npm packages into your service directory. __main__.js lib require('lib') package.json If you look through the code I provided, you will notice that the definition of contains a environment variable. We have to add the required token to the file to get our service working. lib process.env.STDLIB_LIBRARY_TOKEN env.json Navigate to the file (click in the tree view on the left), there you will see and environment’s waiting for you to input your . env.json env.json "dev" "release" "STDLIB_LIBRARY_TOKEN" Right-click between the quotation marks next to “STDLIB_LIBRARY TOKEN” to open up the context menu Place your cursor in between the quotation marks (see above screen) and either right-click and select or use the shortcut ⌘ + K. Insert Library Token… Select to fill in both dev and release environments. Library Token Make sure to save the changes with ‘⌘ + s’ (or hit in the bottom right). Save Step 4: Claim Your Free SMS MessageBird Number We are almost there! Next, you will claim your free MessageBird phone number. We will use the to send and receive text messages. makes it really easy for you to initialize a number, send and receive messages. MessageBird SMS API Standard Library Keep open. In a different tab, navigate to the and accept the terms of service (the orange bar at the top). Code on Standard Library MessageBird Numbers API on Standard Library Accept the MessageBird terms of service — it’s the orange notification at the top of the API reference After you’ve done that, you can claim your first number directly from the browser! Scroll down the page to the method on the API: available numbers The “available” method in the MessageBird Numbers API Currently, only Canadian and US numbers are available — choose the appropriate country code based on your location (if you’d like to see a specific region or country added, !) Select one of your Standard Library tokens from the dropdown to the right (it should say ) and press the button to see a list of available numbers. e-mail us Unauthenticated Run Function Copy one phone number from the list, then scroll down a bit farther to the method. initialize The “initialize” method in the messagebird.numbers API The method of the API will claim an initial phone number for personal use, and is free. Enter the number you copied above into the number parameter input, pick a token from the dropdown next to run function, and press “Run Function” to claim your number. initialize Congratulations! You’ve successfully initialized MessageBird on Standard Library! You can test this by sending a text message using the service. Navigate to the and try the function with your personal phone number as a recipient — you should receive a text message from the number you’ve just claimed! messagebird.sms MessageBird SMS API reference create The “create” method in the messagebird.sms API Step 5: Testing Your Service from Code on Standard Library Now that you have claimed your free number, we can test your SMS service. Return to the file located inside your “MyFirstAPI” service. We will be filling in the section requesting parameters located on the right sidebar. MessageBird passes in four parameters to an SMS handler. These are the MessageBird number receiving the message, which will be the number you claimed earlier, the outside number that sent the incoming message, the contents of the message, and the time the message was sent. __main__.js Your cell phone number that will receive the text sender: The Standard Library phone number that received the SMS receiver: The name of the mountain peak you are requesting elevation and prominence info. (e.g. ) message: Denali Date when the SMS was sent createdDatetime: Click . Run Within seconds you will receive an SMS text from your previously claimed MessageBird number. Pretty neat huh? But we aren’t done yet! Now that your service has been created, we will set it as a for the MessageBird telephone number you previously claimed. handler Step 6: Set SMS Message Response Handlers with MessageBird and Standard Library When you set your service as a handler for the number you just claimed with , it will trigger whenever that number receives a text message. We will use the API method. You can do this directly from the browser! Head on over to . MessageBird handlers API [messagebird.handlers.sms.set](https://stdlib.com/@messagebird/lib/handlers/#sms-set) https://stdlib.com/@messagebird/lib/handlers/ Scroll down until you see the two parameters and number identifier The MessageBird Number you claimed in step 4 Number: <YOUR_USERNAME>.MyFirstAPI[@dev] Identifier: ( <YOUR_USERNAME> is, of course, your username, and “.MyFirstAPI[@dev]” assumes you named your API “MyFirstAPI” in the initial step) Note: After you input the required parameters click . Run Function To test your service send an SMS message with the name of any mountain to your MessageBird number. You should receive a reply within seconds! And that is it! You can customize the handler to run any kind of code you’d like — and text back responses from other APIs. Just install whatever npm packages you need and modify the handler with whatever logic you want. Your SMS service is ready to test! functions/__main__.js Suggested Step — Clean Up Your Code The default sample API package (blank) may have some extra endpoints and files that you don’t need (like anything in the folder aside from your endpoint)— you’ll want to clean these up eventually. To remove (and otherwise manage) files, right click on the file or folder you’d like to remove and click . functions/ __main__.js Delete That’s It, and Thank You! Thanks for reading! I am excited to see what neat services you come up with to add to . You can replicate these steps with any API of your choice to create a cool service like this ! Standard Library crypto price checker I would love for you to , , or follow Standard Library on Twitter, . Let me know if you’ve built anything exciting that you would like Standard Library team to feature or share — I’d love to help! comment here e-mail me at Janeth [at] stdlib [dot] com @StdLibHQ Janeth Ledezma is the Community Manager for Standard Library and recent graduate from UC Berkeley — go bears! When she isn’t learning the Arabic language, or working out, you can find her exploring towns and cafe’s on her cbr500r. Follow her journey with Standard Library through Twitter @mss_ledezma .
