[Partner Blog Post Submission] - A low-code/no-code approach to strapi enablement

[rrubio]

[Partner Blog Post Submission] - A low-code/no-code approach to strapi enablement

[PaulBratslavsky]

@rrubio quickly looking through the post looks great so far. Tomorrow I will go through and follow along. Will let you know if I have any additional feedback.

[PaulBratslavsky]

@rrubio hank you, we have published your article. https://strapi.io/blog/a-low-code-no-code-approach-to-strapi-enablement

[PaulBratslavsky]

That sounds great. You can start working on it @rrubio

[rrubio]

@PaulBratslavsky just so that i'm clear on the next steps. Am I posting all my content in here on git?

[rrubio]

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 to rapidly integrate and enable solutions of the future via it's 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 Typeform and Make.com.

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

Rapid Proto-typing & Development: See your ideas come to life faster than ever before with Strapi's intuitive interface.

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 the potential of Strapi and taking businesses to the next level, even with limited coding expertise!

prerequisites

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

1. Install the latest stable version of Strapi on your local machine (npx create-strapi-app@latest my-project)
2. Serve your local Strapi instance to test our registration API using Postman (https://www.postman.com/)
3. Once you've verified the registration API via poastman, install "ngrok" on your machine (https://www.npmjs.com/package/ngrok). This will be used to make our local instance of Strapi visible to make.com scenario
4. Register with make.com (https://www.make.com/en/register)
5. Register with typeform (https://www.typeform.com/signup/)

Resources

This is our "make.com" scenario/blueprint. You will be using this once we get to "Make" below.

blueprint-strapi-demo.json.zip

Strapi

Before we dive too deep into the solution, let's make sure that the core essentials are working as expected. The following user registration assumes a fresh install of strapi without any security settings (yet). Start by testing the user registration API using postman.

If you don't have posman, I suggest downloading it from here - https://www.postman.com

Run strapi locally (dev mode is fine)

npm run develop

User registration API

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

Registration payload (test data)

You can replace the data with your own below.

{
   "username": "[email protected]",
   "email": "[email protected]",
   "password": "password123!",   
   "blocked": "true",
   "confirmed": "true"
}

Postman request

Copy paste the API endpoint / JSON payload above on postman (as per below).

On "Send" a successful response should look something like this.

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

Right. With our core requirements confirmed, let's move to the next stage of making our local Strapi instance visible over the web.

NGROK

For our external services which we cover in our next few steps, we'll need to make our local Strapi instance available over the web.

Like most things in our tech world, there are several ways to tackle this cattle of fish, however, for the purpose of our low-code/no-code demo we're going to make this as swiftly as possible to get you up and running in no time and get you in the mindset of "Rapid-Prototyping" even if you're not a developer.

Install "NGROK" with the following from your command line.

npm i ngrok

Once installed, run "NGROK" from your command line.

ngrok HTTP 1337

You should see something like this. Take note and copy your "Forwarding" URL. This is your public facing URL.

NGROK URL + ENDPOINT (User Registration) Example

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

Remember, the NGROK URL, can be found under forwarding (see image above).

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

I'm going to register a new user "Mr King Kong" using our external facing URL. And you should see a success registration as per below.

VOILA! how easy was that!? Now that we have our basics confirmed, we can now move onto the next part of our No-Code solution by creating a Typeform "Form" and import a pre-made Make.com "Scenario".

NOTE: Keep your your local strapi and nrok running.

Typeform

To get started with typeform, we'll need to register first, once registered select personal, and start from scratch to create our registration form -

https://www.typeform.com/signup/

Next give your form a "Name" and select "Registration form" -

Once you've created the form, you'll notice that it defaults are pre-populated with a "Multiple Choice" field, Hover over the first option "A Choice 1" an "x" should appear to 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 on the "+" sign on the top left (see Typeform Step 3 below).

Typeform Step 1

Typeform Step 2

Typeform Step 3

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

Typeform Step 4

Select field type of "email" and label it accordingly -

Typeform Step 5

Typeform Step 6

And you've reached your first step to a no-code form. Let's publish the form by clicking on the top right hand side of the window. Once published you'll get a confirmation screen with the form URL. Don't submit your form just yet, we have a couple of more steps to enable it with a webhook.

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

Make Step 2

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 4

Select our "blueprint-strapi-demo.json" file attached to this blog.

Make Step 5

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

Make Step 6

Here we need to create a webhook under your make environment, which gets triggered from "Typeform" on "Submit" of the user registration. Let's name it "Strapi No-Code".

On save of our new webhook, a URL will be generated, this is our webhook. Let's copy it and head back to Typeform (refer to Make Step 7).

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 image below).

Paste your webhook and click "Save webhook"

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

Make Step 8

We're on the home straight now!

On our final step to getting this automation up and running, we need to tell "make.com" where to submit our form to i.e. Our local Strapi instance which we've served using NGROK. On your make scenario, click on the last module "Strapi POST User Registration" and update the URL with your NGROK "Fowarding" URL.

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".

Test Step 2

On Typeform, select your "form" and click "View". This will take you to our published form. Enter your details and submit.

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

In my case, the new user is "[email protected]" and it's now visible under our User content-type.

Let's checkout a quick demo

strapi-low-code-demo.mp4

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 shine 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 democratise development and accelerate your journey towards innovation.

[rrubio]

@PaulBratslavsky hope you're well! when you get a minute to view my first draft and provide any feedback or recommendations, I'd really appreciate it.

[PaulBratslavsky]

@rrubio I am getting the post ready to be published.

Can you send some info for your author's bio? [email protected]

• name

• company and position

• image

• social
  --LinkedIn
  --Twitter
  etc

  Thank you

[rrubio]

Great to hear! @PaulBratslavsky see details below.

name - Rodrigo Rubio

company and position - Tedix | Head of Digital

image

social
-- https://www.linkedin.com/in/rodrigoarubio18/

--Twitter

-- https://www.youtube.com/@TedixAIDigitalConsulting

[PaulBratslavsky]

@rrubio thank you.

[PaulBratslavsky]

@rrubio I tried downloading the demo video but was unsuccessful, can you send me the file to my email [email protected] so I can embed it in the post.

[rrubio]

@PaulBratslavsky all good, you can download from here - https://tedix-my.sharepoint.com/:v:/g/personal/rodrigo_rubio_tedix_ai/EZnEVV3ZODRFmRtQV4apB5QBV44qDErV1cS125cKVgFsuw?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=BJXVoY