search

strapi / community-content

Contribute and collaborate on educational content for the Strapi Community
https://strapi.io/write-for-the-community
572 stars 400 forks source link

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

Closed rrubio closed 7 months ago

rrubio commented 7 months ago

My Request

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

Here's what you'll learn:

Strapi's Superpower: Effortless integration with popular tools like Typeform and Make.com. No Coding Headaches: Automate workflows and user registration using webhooks and APIs (without writing a single line of code!). Rapid 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!

@PaulBratslavsky

PaulBratslavsky commented 7 months ago

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

rrubio commented 7 months ago

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

rrubio commented 7 months ago

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:

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": "demo@demo.com",
   "email": "king@demo.com",
   "password": "password123!",   
   "blocked": "true",
   "confirmed": "true"
}

Postman request

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

image

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

image

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

image

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.

image

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.

image

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/
image image

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

image

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

image

Typeform Step 2

image

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

image

Typeform Step 4

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

image

Typeform Step 5

image

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.

image

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

image

Make Step 2

image

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.

image

Make Step 4

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

image

Make Step 5

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

image

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

image

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

image

Paste your webhook and click "Save webhook"

image

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

image

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.

image

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.

image image

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

image

Test Step 2

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

image image

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

image

In my case, the new user is "bugs@bunny.com" and it's now visible under our User content-type.

image

Let's checkout 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:

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 commented 7 months ago

@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 commented 7 months ago

@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 commented 7 months ago

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

Can you send some info for your author's bio? paul.bratslavsky@strapi.io

rrubio commented 7 months ago

Great to hear! @PaulBratslavsky see details below.

name - Rodrigo Rubio

company and position - Tedix | Head of Digital

image tedix-rodrigo-profile-pic-colour

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

--Twitter

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

PaulBratslavsky commented 7 months ago

@rrubio thank you.

PaulBratslavsky commented 7 months ago

@rrubio I tried downloading the demo video but was unsuccessful, can you send me the file to my email paul.bratslavsky@strapi.io so I can embed it in the post.

rrubio commented 7 months ago

@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

PaulBratslavsky commented 7 months ago

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