Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • What is an API?
  • API Design
  • Stripes API documentation & endpoints
  • What is a Web Service?
  • Onwards

Was this helpful?

  1. Learn Backend
  2. Getting Started

Intro to APIs

In this section we will introduce you to Application Programming Interfaces (or APIs)

PreviousIntro to DataNextBuild your first custom API

Last updated 2 years ago

Was this helpful?

In this tutorial we investigate:

  • What is an API?

  • API design

  • API endpoints

  • Web services

What is an API?

API stands for Application Programming Interface. An API is like a go-between, that carries messages between two people who are unable (or are unwilling) to meet each other. Examples of famous go-betweens are, waiters & waitresses, mediators & translators.

If you have two people that speak different languages like an English client & a French seller, the only way for them to communicate is by having an intermediary that knows both English & French. The intermediary will translate English to French & French into English. This will allow the English client & the French seller to communicate.

This translation layer from English to French & French to English is similar to the way an API behaves.

In the case of an API, the client will send the API a message in a certain format. In our example, the message sent contains a request: "GET me shoes". The API will take this message, translate it & communicate this message to the seller. This will allow the seller to (A) understand the message & (B) pass back, the shoes.

In this example, the request to "GET me shoes" is sent using a protocol known as HTTPS, this stands for Secure Hyper Text Transfer protocol. This is not especially important at this stage, but just to comment that 99% of all APIs will use HTTPS as a method of sending & receiving data.

Now we know what an API is, at a super high level, let's dig into the backend portion of the API. In our example this is the "seller side", the French person returning the shoes when requested.

API Design

When a third party software provider builds an API for you to use, they first must decide what their API is going to allow you to do.

In our example of the shoe seller, the API is allowing us to request shoes. The seller therefore must have (as a minimum) a list of the shoes that are on offer & that are saved somewhere. The seller also needs to tell the world that they can ask for these shoes using certain key words.

Step 1. Creating the list of shoes

To create the list of shoes, the seller must first setup a database of shoes.

Step 2. Create API Endpoints & Documentation

After the list of shoes has been created, the Seller builds what are called API endpoints. API endpoints are a list of ways that an outside party can interact with the sellers list of shoes. The seller will publish a complete list of their endpoints along with API documentation that provide a description of what the API endpoints do. The documentation is key so that people know what features are offered by the API.

In the example above, there are two API endpoints that are offered:

  • GET me shoes, this endpoint lets you request a list of shoes

  • POST new shoe type, this endpoint lets you send a new shoe type that will be added to the list of shoes.

Notice, if you want to DELETE or UPDATE the list of shoes using the API, this is not possible, because these two features are not offered by the API.

Stripes API documentation & endpoints

Each API exposes different functionality via a list of endpoints. As you've seen APIs do certain things, such as get lists of shoes. In this section, we will take a look at a real world example, using Stripes API as an example.

Stripes API allows you to receive & manage payments from your customers. Stripes API is very extensive & offers API endpoints that cover authentication, balances, charges, invoices etc.

Reading Stripes API Documentation

For example, if we wanted read what functionality Stripe offers in terms of invoices, we first need to check if Stripes API offers that functionality.

To do this, you can press Ctrl+F & search for "Invoices".

Clicking the link takes you to the Invoices section of the Stripe API.

The endpoints for invoices are listed on the right hand side of the screen. If you look down you can see there is an option to GET invoices.

Scrolling down the page, you can both a description of what this endpoint does & what data you can expect to get back from the API.

Now you know that if you were to ask Stripe to GET /v1/invoices Stripe would return you some data in the format displayed above. This data format is called JSON. We will dig more into what exactly is JSON in the next section.

What is a Web Service?

A Webservice is someone else's API that they made available for the public. Inside Dittofi you're able to connect to other third party APIs using the web services tab that is visible under the "tools" icon in the side panel.

In this section, you're able to connect to APIs like stripe & add the different API endpoints that these APIs make available. For example:

Onwards

Stripes complete . It is very long, however Stripe have built a search function that allows you to filter for just the bit of the API that you're interested in.

Read our section on to see how to connect to a free API available on the internet.

🖥️
API documentation is here
webservices
The contents of our database of shoes, showing different shoe types