A Low-Code/No-Code approach to Strapi Enablement

With the advancement of no-code/low-solutions and the rapid development of AI, Strapi is in a unique situation where it is necessary to integrate and enable solutions rapidly in the future via its API-driven strategy and built-in security.

This blog post dives into how Strapi, a powerful yet user-friendly headless CMS, empowers even non-technical teams to build robust business solutions.

Why should we care about no-code/low-code? If you've been keeping up with all the latest developments in AI, one thing is becoming apparent. And in the words of "Jensen Huang" Nvidia's CEO recently said it best -

"Everybody in the world is now a programmer. This is the miracle of AI"

Here's what you'll learn:

• Strapi's Superpower: Effortless integration with popular tools like .




• No Coding Experience: Automate workflows and user registration using webhooks and APIs (without writing a single line of code!).




• Rapid Prototyping & Development: Strapi's intuitive interface lets you see your ideas come to life faster than ever before.

Get ready to:

• Simplify complex tasks and streamline your operations.


• Empower your entire team to contribute to building solutions.


• Focus on innovation while Strapi handles the technical heavy lifting.

This blog post is a guide to unlocking Strapi's potential and taking businesses to the next level, even with limited coding expertise!

Prerequisites

Refer to the prerequisites below to start our journey into a low-code and no-code paradigm.

1. Install the latest stable version of Strapi on your local machine:
   

npx create-strapi-app@latest my-project

1. Serve your local Strapi instance to test our registration API using on your machine. Ngrok will make our local instance of Strapi visible to the Make scenario.


2. Register with Make ().

Resources

Here is our Make scenario/blueprint. You will be using this once we get to Make below:

.

Run Strapi locally (dev mode is fine)

Run the command below to start Strapi in development mode.

npm run develop

User registration API

Register a user by making a POST request to the URL or endpoint below:

http://localhost:1337/api/auth/local/register

Registration payload (test data)

Below is the request body or payload. You can replace the data with your own below.

{

   "username": "[email protected]",

   "email": "[email protected]",

   "password": "password123!",   

   "blocked": "true",

   "confirmed": "true"

}

Postman Request

Copy and paste the API endpoint and JSON payload above on Postman (as per below).

And under our Strapi instance, we should now see the user listed under "User" content type.

To verify that this is working. Register a new user using Postman again with "bogus details." This time, replace your local Strapi instance URL (keep the endpoint - see below) with your "Forwarding" URL and make a new user registration. Assuming all goes as planned, you should see a new user under the Strapi User content type.

Remember, the Ngrok URL can be found under forwarding, in the terminal (see image above).

 https://994f-202-129-81-163.ngrok-free.app/api/auth/local/register

Note: This could change whenever we rerun the Ngrok start command.

I'm going to register a new user, Mr. King Kong, using our external URL. You should see a successful registration below.

Once you've created the form, you'll notice that its defaults are pre-populated with a "Multiple Choice" field; hover over the first option "A Choice 1" and "x" should appear on the right-hand side of the field, click it to delete. And that leaves us with only one option. Let's change that; on the top right-hand corner, under the "Question" tab, click the dropdown box and select "Short Text" for our "First name" field. Then, on the new field label, enter "First name".

NOTE: To add new fields, click on the "+" sign at the top left (see Typeform Step 3 below).

Typeform: Step 1

Delete the multichoice fields.

Typeform: Step 3

To add our next field (last name), click the "+" button on the top left-hand side. A list of options should expand. , choose field type "Short Text" and label it "Last name".

Typeform: Step 5

Enter the field type as "What's your email?".

Make.com

Here we are going to use a pre-made scenario cooked up just for our demo. Under the make dashboard, on the left-hand bar, click on "Scenarios" (refer to Make Step 1 below). On the top right hand corner of the scenarios page, click "Create a new scenario" (refer to Make Step 2 below).

Make: Step 1

Click on "Scenario".

Make: Step 3

Import the scenario "blueprint-strapi-demo.json", we do this from our scenario page tool bar at the bottom of our page.

Make: Step 5

Once you import the scenario, you should see our five modules below.

Make: Step 7

Let's add our Make webhook to our Typeform; select your form and click on connect > webhooks > Add a webhook (refer to the image below).

Once saved, toggle our "Webhook" to "ON".

To check what our payload from Make to Strapi looks like, scroll down the module settings. You'll notice that the password has been assigned a "uuid" value. This is a Binary Function that is built to Make. We use this to make sure our password is secured.

Let's Test Your Solution

Test: Step 1

Go to your Make scenario and click the "Play" button; it should then refresh to an active webhook. This, of course, means registering a new user from Typeform. Head down to "Test Step 2".

If you're monitoring your Strapi logs, you should see the post request come through.

Demo Time!

Let's check a quick demo:

https://github.com/strapi/community-content/assets/4221574/7c698e27-111c-4cae-a964-727f530bb189

Conclusion

Arguably, these are new tools to learn and master. However, the same could be said for all the frameworks that are released yearly.

While no-code/low-code solutions might not be the answer for every project, they offer a compelling value proposition.

Consider these advantages:

• 
  Rapid Prototyping: Streamline your development process by quickly building prototypes and testing ideas before diving into complex coding. This allows for faster iteration and validation.


• 
  Empowering Less Technical Teams: No-code/low-code tools empower teams with limited coding experience to contribute to AI solution development. This fosters broader team participation and innovation.


• 
  Building User Interfaces (UI) with AI: Solutions like Strapi shines in enabling user interfaces specifically designed for AI-powered solutions (think agents), bridging the gap between AI functionality and user interaction.

The Takeaway: No-code/low-code tools like Typeform, Make.com, and Strapi act as powerful springboards for building and deploying solutions at scale. Their intuitive interfaces and focus on user experience can democratize development and accelerate your journey toward innovation.