Buildship + FlutterFlow - THE ONLY 2 NO-CODE TOOLS YOU NEED TO BUILD AN APP
Summary
TLDRThe speaker shares their excitement for discovering 'Build Ship,' a no-code backend builder that allows for the creation of APIs using a drag-and-drop, block style approach. They emphasize the importance of decoupling front-end applications from backend services for scalability and security, especially in AI-powered apps. The video highlights the ease of use and intuitive features of Build Ship, which the speaker plans to use extensively in 2024 and beyond, along with other no-code tools like Figma, Flutter Flow, Firebase, and Superbase, to revolutionize app development.
Takeaways
- π The speaker has found a dream no-code backend builder, which is a significant development in their no-code journey.
- π They have been searching for a no-code tool that allows API creation through a drag-and-drop, block-style approach, similar to Zapier but for developers.
- π The newly launched 'Build Ship' is being explored as a potential solution for building fully decoupled backend applications and deploying them to the cloud.
- π The concept of 'decoupling' is introduced as a key strategy in modern application development, emphasizing the separation of frontend and backend services.
- π The speaker criticizes the practice of directly connecting the frontend to databases or external APIs, which is considered non-scalable and poses security risks.
- π‘οΈ Security is highlighted as a major concern when APIs are exposed in the frontend, as anyone can access the code and API keys.
- π The importance of asynchronous operations in backend services is discussed, allowing for tasks to be performed independently of the frontend.
- π‘ The speaker suggests using tools like Build Ship to create decoupled applications, which can handle complex workflows without updating the frontend.
- π The transcript mentions the potential of using AI to generate entire workflows within Build Ship, making it accessible even for those without coding knowledge.
- π§ The speaker plans to create tutorials on building full-stack applications using a combination of Figma, Flutter Flow, Firebase, Superbase, and Build Ship.
- π The speaker is excited about the potential of this tech stack to revolutionize no-code app development and is eager to share this knowledge with their community.
Q & A
What is the main challenge the speaker faced in their no-code journey?
-The main challenge was finding a codeless backend builder that allows creating APIs using a drag and drop block style approach, specifically for developers rather than marketers or operators.
Why did the speaker quit their job to focus on no-code app building?
-The speaker quit their job to go all in on building the number one no-code app building Academy, indicating a strong belief in the potential of no-code tools and a desire to be at the forefront of this movement.
What is the significance of 'decoupling' in application development as mentioned in the script?
-Decoupling refers to the practice of separating the front end of an application from its back end. This is significant as it promotes scalability, security, and the ability to update business logic without affecting the user interface.
Why is it not advisable to connect the front end directly to a database or external APIs like OpenAI?
-Connecting the front end directly to a database or external APIs can expose sensitive information such as API keys and URLs. It also tightly couples the business logic with the front end, making it difficult to update or scale the application without affecting the user interface.
What is the traditional full stack application architecture described in the script?
-The traditional architecture consists of a front end, a back end, and a database. The front end communicates with the back end via APIs, which in turn interact with the database, processing data before sending it back to the front end.
What is the problem with the approach of directly integrating the front end with Firebase, as seen with Flutter Flow?
-While this approach simplifies development by allowing direct read and write access to the database, it is not scalable and does not encourage the development of fully decoupled applications, which is a best practice in software development.
What is BuildShip and how does it differ from other no-code tools mentioned in the script?
-BuildShip is a no-code backend builder that allows for the creation of APIs and workflows without coding. Unlike tools like Zapier or Bubble, which cater to marketers or are not encouraging full decoupling, BuildShip is designed to be more developer-friendly and supports the creation of fully decoupled backend applications.
How does the speaker plan to use BuildShip in conjunction with other tools in their tech stack?
-The speaker plans to use BuildShip alongside Figma, Flutter Flow, Firebase, and Superbase to create a full-stack, end-to-end application development process. This tech stack aims to take over the no-code app development landscape.
What is the importance of having a 'dumb' front end in application development?
-A 'dumb' front end is one that has minimal business logic and primarily takes orders from the back end or database. This design ensures that the application is easier to maintain and update, as changes to the business logic do not require updates to the front end.
What is the speaker's vision for the future of no-code app development with the tech stack they have chosen?
-The speaker is excited about the potential of their chosen tech stack to accelerate app development ideas through a low-code, no-code approach. They aim to be at the forefront of this movement, providing tutorials and education to help others leverage these tools effectively.
Outlines
π οΈ Discovering the Ideal No-Code Backend Builder
The speaker expresses excitement about finding a dream no-code backend builder, which is essential for their no-code journey and the establishment of a no-code app building academy. They were searching for a tool that could create APIs using a drag-and-drop, block-style approach, similar to Zapier but tailored for developers. The newly discovered tool, BuildShip, launched recently and is built by the same team behind Roy, a Google Firebase interface. The speaker emphasizes the importance of decoupling in application development and criticizes the direct database connection approach used by some no-code tools, which they argue is not scalable. They advocate for a backend that handles business logic separately from the frontend to ensure security and scalability.
π The Importance of Decoupling in Application Development
This paragraph delves into the concept of decoupling, explaining the traditional full-stack application architecture and how it has evolved with no-code tools like Flutter Flow and Bubble. The speaker critiques the practice of connecting the frontend directly to the database, which they view as non-scalable. They argue for a model where the frontend is 'dumb' and relies on a backend for business logic, which is crucial for security and the ability to update applications without affecting the user experience. The paragraph outlines the benefits of having a backend that can handle complex tasks like email sending, text messaging, and AI processing, and how these tasks can be automated without frontend intervention.
π« Avoiding Direct Frontend-to-API Integrations
The speaker warns against integrating the frontend directly with external APIs, such as chat GBT, due to security risks and the lack of scalability. They argue that APIs are the proprietary steps of an app's value generation and should not be exposed within the frontend code. Instead, they propose using a no-code tool like BuildShip to create a decoupled backend that can handle API calls and business logic separately from the frontend. This approach allows for the addition of new functionalities without the need to update the frontend, maintaining a secure and scalable application architecture.
π€ Building AI-Powered Applications with a Decoupled Approach
The speaker discusses the common mistake of directly integrating the frontend with AI APIs and provides an alternative approach using a no-code backend builder like BuildShip. They describe a process where the frontend calls an API, which in turn makes inputs to external services and processes data before returning it to the frontend. This method keeps the frontend 'dumb' and moves all business logic to the backend, allowing for standardized inputs and outputs. The paragraph includes an example of creating an API for analyzing basketball shots, integrating with Slack, and using the chat GBT API for feedback, demonstrating how to build a decoupled application.
π Embracing BuildShip for No-Code Backend Development
The speaker shares their enthusiasm for BuildShip as a no-code backend builder that allows for the creation of scalable applications without the need for traditional coding. They highlight BuildShip's features, such as AI-generated workflows, code access, and integration blocks for major services. The speaker plans to use BuildShip in conjunction with other no-code tools like Figma, Flutter Flow, Firebase, and Superbase to dominate the no-code app development landscape. They express excitement about the potential of this tech stack and invite viewers to join their Discord community and consider their app development program.
Mindmap
Keywords
π‘No-Code
π‘APIs
π‘Drag and Drop
π‘Zapier
π‘Decoupling
π‘Flutter Flow
π‘Build Ship
π‘Request-Response Model
π‘AI Powered Applications
π‘Cloud Functions
π‘Business Logic
Highlights
The discovery of a dream no-code backend builder that enables API creation through a drag-and-drop block style approach.
The importance of decoupling in application development for scalability and security.
Comparison between no-code platforms like Zapier and the need for a tool tailored for developers.
Introduction of BuildShip, a no-code backend builder by the creators of Roy, as a solution for decoupled applications.
Explanation of the traditional full-stack application architecture and its limitations.
The evolution of no-code platforms like Flutter Flow and Bubble and their impact on application development.
Critique of developers directly connecting their front end to databases and APIs, highlighting security risks.
The necessity of separating business logic from the front end for security and maintainability.
Advantages of using a backend builder like BuildShip for creating scalable and secure applications.
The concept of keeping the front end 'dumb' and relying on standardized inputs and outputs.
How to decouple applications properly using APIs and database triggers for automation.
The gap in the no-code market for tools that allow non-technical builders to create scalable applications.
The potential of BuildShip to fill the no-code backend gap and enable fully decoupled application building.
Demonstration of building a simple AI API call using BuildShip with intuitive AI integration.
The vision of using a stack including Figma, Flutter Flow, Firebase, Superbase, and BuildShip for app development.
The excitement and potential impact of the new no-code stack on the app development landscape.
Invitation to join a Discord community and enroll in a program for app development education.
Transcripts
yes I finally found it I finally found
my dream backend builder ever since I've
embarked on this whole no code journey
and quit my job to go all in on building
the number one no code app building
Academy I've been looking for the
missing piece the missing piece has
always been a codeless backend Builder
that allows me to create apis so apis
are uh the building blocks of your
business business logic if you didn't
know um I've been looking for a tool
that allows me to build apis using a
drag and drop block style um approach
think zapier um but for developers
zapier wasn't the ideal Choice zapier
was built for people who are marketers
or operators and people who just need to
Stitch things together but there was a
certain type of backend Builder that I
was looking for uh to teach people and
for myself to build fully decoupled
backend applications and and deploy them
to the cloud um and this all has to do
with a concept called decoupling which
I'll get into more in a second but
honestly I'm so so so happy so build
ship build ship recently launched about
three weeks ago and I started exploring
it last week build ship is is uh built
by the same people who powered roey so
many of yall may have been familiar with
Roy Roy was a interface um for Google
Firebase or fir store databases but Ry
just built and launched something called
build chip which think of it as flutter
flow but for the back end um and for you
to understand why this is so important
let me just introduce you to a concept
of
decoupling okay so what I'm showing you
here on the screen is traditionally how
full stack applications uh were built so
before no code and when you had to write
code by hand think of react app this is
typically the high level architecture
you would have a front end and this
would typically be react or flutter or
view then your front end would talk to a
back back end and that back end could be
in Ruby on Rails node.js D Jango and you
would connect to your back end using an
API so your front end would talk to your
backend via an API okay and apis can be
of many types uh get post um patch put
you name it and your apis would actually
be connected to your database so your
front end would talk to an API the API
would talk to the database the database
would then return the data back to your
front
end by processing it on the back end
okay and then your backend would then
take that data and send it back to the
front end okay so this is called a
request response model okay this is
traditionally how apps were built but
recently in 20123 we saw this evolution
of flutter flow and bubble right so
flutter flow is taking the no code
Market by storm right now but the thing
about Bubble is that it's not creating
it's not encouraging the developers out
there non-technical developers
especially to build fully decoupled
applications what I'm seeing a lot of
right now from the fut flow developers
that are out there so I'm going to say
today's FF flow devs what's happening is
that y'all are getting very spoiled you
are taking a front end and connecting it
straight to the database and I don't
blame you because that's how futter
flow's product was built futter flow's
product was built so that you could take
advantage of the builtin integration
with firestore and just read and write
data directly to the database and this
is fine like many applications that were
directly integrated with Firebase did it
this way too but this isn't the scalable
way of Building Products the real way
you're supposed to build software
products is by decoupling your services
your front end needs to be separated
from your back end and another pattern
I'm noticing especially for those of
y'all who are building AI powered
applications some of y'all are taking
your front end and integrating it
directly with the chat gbt API directly
from the front end okay this is terrible
many many reasons why your apis are your
business logic right the your apis are
the
proprietary um like steps that your app
is taking to perform the value that
you're trying to generate for your end
user you don't want to keep those
integrated with your front end that
needs to be separated I'll tell you why
I'm just a second but mainly What's
Happening Here is that you're making
your chat gbt API call directly from the
front end and your front end code
anybody can crack that open and look at
all the code your front end code is not
secure so you're putting your API Keys
you're putting all the URLs of the apis
that you're hitting inside of your front
end if someone cracks open your front
end all the code all the apis is readily
available so this is absolutely a no no
you do not want to be doing this okay um
to represent that I'm literally just
going to
put don't do this right
here okay we do not want to be doing
this we do not want to take our front
end and connect it to any API directly
from the front end here's what you need
to be doing instead and this is where
the no code Market has seen a big gap
there are players like zapier and Zeno
Zeno is a great player for this and many
of you are using Zeno but I've heard
that the learning curve is kind of steep
and zenos is I think made for the more
sophisticated developer who's coming
backward into no code I don't think it's
meant for the brand new novice person
who's going from uh literally no coding
knowledge to backend build building I
think that build ship might be the one
okay but before I jump there let me tell
you how you decouple your application
and what a good practice application
should look like okay so how you should
be doing
it is like this okay so you have your
front end which can be built on flutter
flow or view or we web or whatever you
want to do of course you have a database
that's fine we want you to have a
database and you're going to need it but
you also will need an API as well
because an API or a backend right is
going to be responsible for handling a
sequence of events so this is going to
be a little bit more complicated stuff
because over time your application is
going to get more complex you're going
to want to send emails you're going to
want to send text messages maybe or
create documents or process data through
AI or update other parts of your
database because your database might be
getting larger
you may want to integrate with third
party Services right like many of you
are building applications that integrate
with other applications um so you don't
integrate with applications directly
from the front end because now you're
tightly coupling your business logic
with your front end instead you need to
have two separate uh Services your front
end and your back end and in the
traditional world of software
engineering there's a motto you want to
keep your front end as dumb as possible
your front end should have as little
business logic uh on it because your
front end should just be something that
takes orders from a back end or a
database and this is why having a
separated backend is super important
imagine this say you integrate all your
business logic directly into your front
end and you have 20 different versions
of your app that are in Market many of
youall don't think about this but you
will be shipping a new version of your
app every week every two weeks every
month over time there could be 30 or 40
versions of your app in the market at
any given time okay so if your business
logic is connected to your front end
that means you have 40 versions of
business logic out in the market that's
absolutely terrible because if you make
one change or your business doesn't work
the way that it did 3 weeks ago you are
now outdating your users this is why you
want to decouple the services your front
end should always be looking for the
same type of data your back end can
change any time and as long as it's
serving the front end the right type
type of data or the right format of data
you can make any changes you want to
your business logic cool so when you
want to build a decoupled app you have
your front end that accepts a certain
type of data right a certain data
format okay and then you have your
database and it's okay for your front
end to talk to your database we want you
to read and write data to the database
but there might be situations where your
database May
trigger um API automations say like
anytime a new order gets created it'll
trigger your API so we could say you
know when an order is
created trigger order
API okay and then your backend could
then listen for orders being added to
the database and then it could do a
couple things right your backend can now
say um
create or generate an invoice you know
generate invoice in stripe it can um
send an alert to the ordering
Department alert via SMS to the
Fulfillment
okay um what else can I do um say I
needed to generate a shipping label you
know generate shipping label you would
then do all of these things in one step
on the back end
right and if you wanted to add anything
else later on you always could without
having to update the front end then your
API would or your back end would handle
all this okay so notice how you just
created like a chain of
automations without having to update the
front end and now this entire piece
right here this entire system is
completely separated all your front end
needs to do is update the database and
then you can have a backend that's
listening to your database and doing
things completely asynchronously from
everything else and asynchronously means
while something else is going on it's it
will do these tasks on the back end
right so this is one way to do it right
you can do it based on database triggers
and yeah you might be thinking Cloud
functions well okay to use cloud
functions you need to know how to code
and many of y'all don't know how to
write node.js and it's the first time
you've been introduced to the concept of
aing synchronous actions right so for
that reason is why you can be using
something like build ship to create a
completely decoupled back end okay cool
that's one way but I've also seen many
of y'all try to build AI applications
and let me show you what I'm seeing
right now uh well I kind of already told
you a bit I'm seeing y'all directly
integrate your front end with the chat
gbt API that's absolutely not acceptable
for the reasons I've already mentioned
what you should be doing instead for the
AI type of applications is you need to
have an API that's maybe built on build
ship or you know xano or custom coded in
node.js or python okay and that API
should be responsible for making the
inputs uh to the uh chat gbt API so any
of your external API services or API um
servers should be called upon by your
API
API okay and then that data is returned
to your API for further processing and
then your API returns it all back to the
front end so here's an example of like
how I see that working
so so here's an example of how I see
that working what you could do is your
front end would call your API and your
API could be something like um say
You're Building A app
uh that takes in a video of you shooting
a basketball and it runs that through
some uh video API to analyze the video
of you taking a basketball shot use
other API to come up with feedback and
then send that back to your um
application what we can do is call
create an API called review basketball
shot okay and this is me kind of going
over some high level API design
um okay so we have we have a front end
review basketball
shot okay and as
input we can take in a video path right
okay now the next thing you want to do
is call upon an API another
API to
analyze the video okay the external API
will analyze the video maybe we want to
send an alert to our slack Channel
saying hey somebody just uploaded a
video uh we can call an external API
so we'll say slack
API alert developer that
someone submitted a
video okay so we're doing all these
things kind of one after another so the
external AI API we'll analyze the video
then we'll use the slack API to um alert
the developer that someone submitted a
video um we will
then potentially use the chat gbt API
we's say chat
GPT API which will take the output from
this uh video analyzing API and try to
break it down so let's say that the
video analyzing API returns um a summary
of what's going on returns a text based
summary of the video provided okay then
we take that text based summary and we
pass it to chat gbt we say input text
based summary
output
suggestions for
improving the basketball shot okay so
cool we've sent a slack API hook we've
um analyzed the shot through the chat
GPT API and now what we can do is take
that data give it back to the API that
was originally called upon the review
basketball shot API and now we can send
it back to the front end got me so
essentially what you've done here is
you've moved all of your business logic
to the back end and your front end just
has to look for one thing and that's
just a text summary of how you should
improve your basketball shot right and
so we can say return an
object return an object I'll zoom in
that looks like this um and we can have
a thing called
feedback and it can say tuck your
elbow and more got it so as long as my
front end gets an object that looks like
this no matter what happens on the back
end my front end doesn't care because my
front end is dumb right okay so this is
how you create a decoupled application
and I hope I drove home the idea of how
you create a dumb front end uh that is
solely relied upon uh its inputs and
outputs to be standardized so this is
the traditional software development
architecture stack and up till today I
had not seen a no code tool for the
backend that allows a non-technical
builder to build a truly scalable
application so for my application VY
that I built a while ago um I had to
write the back end myself and I knew
that the landscape would continue to
evolve and somebody would come out with
the right uh software for this and it's
finally here I know this video has been
a bit long but this is going to be worth
it because this will absolutely change
the game build chip is new it's only 3
weeks old but they are absolutely
crushing it and they've done a lot of
things right so head over to build chip
check out what they're doing but
essentially it's a no code backend
Builder that as a developer as someone
who built apps for 10 years by hand I
think they're doing it perfectly it's
the same objections that you can handle
with front end with flutter flow you get
access to the code you can use AI to
generate entire workflows so if you
don't know anything about coding you can
literally just type into to their AI
I need a node that you know sends a
message to slack um creates an invoice
on stripe sends an email and an SMS you
can do all of that in a workflow Builder
style format as you can see here on the
screen right uh what you see here is the
ability to use the AI you can hit
generate um we can create our own rest
API endpoints and we get access to the
code um and it already has building
blocks for major Integrations just like
I was talking to you about so I create
an account and I'm going to jump into
build chip real quick and show you um
how I would go about building a very
simple AI um API call and in future
lessons uh and videos on YouTube I'm
going to be making more uh tutorials on
how you can build a full stack
application literally from end to end uh
using flutter flow and build chip
because I think I've made up my mind and
this is going to be the stack that I
choose to use all the way through 2024
um and Beyond cool so imagine this I'm
in flutter flow I'm building my
application right um say I have
something that's going on on the front
end and on click of a button I need to
you know dispatch an API call say after
I create an account I want to dispatch
an API or any button click rather I'm
just trying to show you what how I see
this working with phlow essentially you
would create an API call and Bill Chip
is going to provide you a URL that you
can post in here we have to first create
an endpoint and an endpoint if you don't
know on an API is a location to a
specific API uh process somewhere so
essentially what you see here that I'm
building is a rest API call that has
path hello so let's say something like
generate AI responses okay so
essentially what I'm doing is I'm
creating an API endpoint that is of type
post and post typically means an API
that accepts input get means apis that
accept uh actually don't normally accept
input that just send you output so I'm
going to create a post API call that
says generate AI responses we'd make a
call to this API directly from here
inside a photf flow and then we perform
all our business logic from within build
ship so I'll hit plus say we want to do
a couple things let's say um we want to
do something with slack and send a slack
message boom we would add a building
block for slack and then I'd head over
to my slack developer portal to fetch my
uh slack token I'd pass in my channel
name maybe such as like the general
channel on slack and say someone
requested AI responses boom so then that
would send a message to slack then what
I do is I would find open Ai and create
the integration with chaty BT so instead
of integrating with chat BT directly
from the front end like I've seen a lot
of y'all do instead you can do it from
the back in you punch in your prompt
right here go to open AI get the secret
get the key um
not exactly sure what user request is
you can adjust your temperature and then
select the model right boom so I've
created this API in point these two
actions will trigger and then I will
return a status quod 200 and then the
value I can most likely get this value
from an output of open AI or slack so
say open AI return something I could
then say output variables open AI chat
and I could surround it in a string okay
so this is actually of type object so
potentially what I could do is
say like
that boom and that just made it happy so
now what's going to happen is my front
end is going to receive an object of
type open AI chat and we could probably
you know dive into here to see what
the um expected data structure type of
open AI chat would would be um in
further lessons I'm going to learn all
about how this works um how to parse
data how to you know pass data from one
building block to another but honestly
in just literally 10 minutes of
exploring I was able to pull this off
without having to even learn anything
that's how intuitive it is again that
comes from someone who's 10 years of app
development experience but my mission is
now to go all in on this stack figma
flutter flow Firebase super base build
ship and just take over the no code app
development landscape with this uh Tech
stack I'm extremely stoked it took all
year 2023 of us going all in on learning
this landscape and I think we're finally
at the point where we've covered the
entire stack so extremely stoked um I
think that there's so much more that's
going to come out of this and we're
excited to be literally the first people
in the United States who are focus on
accelerating app ideas through a low
code no code Tex teack if you can't tell
I'm stoked this was a long video but um
so much more to come I hope you're just
as excited if you have any questions
feel free to join our free Discord
Community there's a link in the
description um we're also enrolling 20
new students every month for dreams into
Apps um all of our students so far are
crushing it everyone's getting their UI
built out starting to work on their
flutter flow apps um many of us are now
at that point where we're integrating
our database and designing the database
um soon we're going to be at the point
where we need to implement custom
uh business logic and that's where this
whole uh scheme of Bill ship is going to
come into play so if if you are
interested in accelerating your app idea
with our team use a link in the
description we are on to something huge
so cool thanks everybody for sticking
around I'll see you another lesson take
care
5.0 / 5 (0 votes)