Dreamin in Color '24 - (Workshop) Design an API Specification with MuleSoft's no-code API Designer

Design an API Specification
With MuleSoft’s no-code API Designer

MuleSoft Developer Advocate
@ Salesforce
alexandra.martinez@salesforce.com
alexmartinez.ca
Alex Martinez

You need to create a To-Do app to manage tasks.
The first step is to design the API Specification. An API specification is usually
created using either RAML or OAS. However, because you are on a time crunch
and are not very familiar with these languages, you decide to use MuleSoft for
this.
MuleSoft provides a graphical user interface (GUI) in Anypoint Platform to
complete this specification using clicks, not code.
The use case

A single To-Do must have the
following details:
● ID
○ Ex: 1
● Title
○ Ex: Give a workshop
● Checked
○ Ex: false
● Due Date
○ Ex: 2024-06-21
This API Specification will describe the ability to:
● Read existing To-Dos
○ Including functionality to filter the full list
● Create a new To-Do
● Read the details of a specific To-Do
● Update the details of a specific To-Do
● Delete a specific To-Do
The requirements

following details:
● ID
○ Ex: 1
○ Required / Numeric
● Title
○ Required / String
● Checked
○ Ex: false
○ Required / Boolean
● Due Date
○ Ex: 2024-06-21
○ Not Required / Date-Only
○ Including functionality to filter the full list-Query Params
○ Read = GET
○ Array of To-Dos
○ Create = POST
○ Single To-Do / No existing ID at this point
○ Read = GET
○ Single To-Do / Existing ID
○ Update = PUT
○ Delete = DELETE
The requirements

following details:
● ID
○ Ex: 1
○ Required / Numeric
● Title
○ Required / String
● Checked
○ Ex: false
○ Required / Boolean
● Due Date
○ Ex: 2024-06-21
○ Not Required / Date-Only
○ Including functionality to filter the full list-Query Params
○ Read = GET
○ Array of To-Dos
○ Create = POST
○ Single To-Do / No existing ID at this point
○ Read = GET
○ Update = PUT
○ Delete = DELETE
The requirements
/todos
/todos/{id}

1. Head to anypoint.mulesoft.com
and sign in to your existing
account or click on Sign up to
create a new account.
(You don’t need to confirm your
email address for this case)
1. Head to Design Center using
the hamburger menu on the top
left.
Step 1: Create a new API Specification in Design Center

3. Click the Create button and
select New API Specification.
3. Name your project and select
the Guide me through it option
to make sure we use the UI.
3. Click on Create API

6. Once you open the
specification, add the following
values:

1. Click on the + button next to the
DATA TYPES tab on the left of
the screen.
2. Change the name to To-Do and
the type to Object.
3. Click on Add Property and add
the following properties →
(Note: Click on the Details v
button to see the additional
configurations for each
property.)
Step 2: Create a data type

RESOURCES tab on the left of
the screen.
2. Change the resource path to
/todos
Step 3: Create a /todos resource

1. Under GET > Responses click
Add New Response and leave
the 200 - OK option selected.
2. Click on Add Body and change
the type to Array.
3. Open the details of the array
and select the items type as To-
Do.
Step 3.1: Read all To-Dos

1. Under GET > Query
Parameters click Add Query
Parameter.
2. Add the following optional
parameters →
Step 3.2: Add Query Parameters

1. Under POST > Responses
click Add New Response and
select the 201 - Created option.
the type to To-Do.
Step 3.3: Create a new To-Do

3. Under POST > Body click Add
Body and change the type to
To-Do.
Step 3.3: Create a new To-Do

RESOURCES tab on the left of
the screen.
2. Change the resource path to
/todos/{id}
Step 4: Create a /todos/{id} resource

1. Click on the URI Parameters
button next to the resource
path.
2. Click Add URI Parameter.
3. Add the following values →
Step 4.1: Add a URI Parameter

1. Under GET > Responses click
the type to To-Do.
Step 4.2: Read a To-Do

1. Under PUT > Responses click
the type to To-Do.
Step 4.3: Update a To-Do

3. Under PUT > Body click Add
Body and change the type to
To-Do.
Step 4.3: Update a To-Do

1. Under DELETE > Responses
click Add New Response and
select the 204 - No content
option.
Step 4.4: Delete a To-Do

1. Click the Publish button on the
top right side of the screen.
2. Leave the selected options and
click Publish to Exchange.
3. Once finished, click on the
Exchange link before closing
the pop-up window.
Step 5: Publish to Exchange

(optional) Step 7: Download RAML/OAS code
1. If you only need the generated
RAML/OAS code, go back to
Design Center and click on the
Download button for the
specific language.

You did it!
Congratulations! You were able to create the needed RAML/OAS specification on
time and you didn’t have to code at all!
More resources
● github.com/alexandramartinez/to-do-api-spec

Dreamin in Color '24 - (Workshop) Design an API Specification with MuleSoft's no-code API Designer

Recommended

Recommended

More Related Content

Similar to Dreamin in Color '24 - (Workshop) Design an API Specification with MuleSoft's no-code API Designer

Similar to Dreamin in Color '24 - (Workshop) Design an API Specification with MuleSoft's no-code API Designer (20)

More from Alexandra N. Martinez

More from Alexandra N. Martinez (20)

Recently uploaded

Recently uploaded (20)

Dreamin in Color '24 - (Workshop) Design an API Specification with MuleSoft's no-code API Designer