Learn to Build an AI app with Bubble

  Рет қаралды 13,774

Bubble

Bubble

Күн бұрын

In this course, featuring instructor Gregory John, you'll learn how to create Social Rabbit, an AI application that transforms extensive blog posts into social media content tailored to specific platforms and tones. For example, you could adapt a detailed article about the Tesla Cybertruck into a concise, inspirational post for x.com.
You'll use Bubble’s API connector to integrate with OpenAI, with a particular focus on constructing effective prompts. This includes generating high-quality images that align with the blog content you are adapting. Additionally, the course covers the essentials of crafting a seamless user experience within Bubble, particularly when handling the inherent delays in AI processing with services like OpenAI.
Whether you are beginning your journey in AI development or looking to enhance your skills, this course is designed to equip you with the practical knowledge to build AI-driven applications efficiently.
* * * * *
🔗 Link to Bubble editor:
bubble.io/page?type=page&name...
🔗 Loader svg:
67daebf452952fe2738ec05dfe91a...
* * * * *
Prompts
Create text:
System_prompt: You are a social media manager whose job it is to summarise blog posts into engaging social media posts.
User prompt: Write a post that teases the below context in no more than [post's Platform's Length] Length characters in a [post's Tone's Display] tone
Context: [post's Source]
The post is:
Create idea:
User_prompt: Create a short idea for a stock photo that would pair well with the below social post.
The idea template (should be a simple composition): A [subject] [in relation to] [a background]
The post: [post's Output]
The stock image idea is:
Create prompt:
User_prompt: Create a prompt to be used for image generation for the below idea. Use precise, visual descriptions (rather than metaphorical concepts).
Try to keep the prompt short, yet precise.
Prompt Structure:
“A photo of [subject], [subject’s characteristics], [relation to background] [background]. [Details of background] [Interactions with color and lighting]. Taken on [Details of camera, lens, style and settings.”
The photo composition should be simple.
The Idea: [Result of step 1 (OpenAI - Create idea)'s choices:first item's message content]
The prompt is:
* * * * *
Chapters
00:00:00 - Introduction to Social Rabbit
00:02:45 - Adjust UI layout, styles
00:05:46 - Database setup discussion
00:07:13 - Adding option sets
00:10:53 - UX during AI interaction
00:13:57 - Design workflow setup
00:19:18 - Finalize design setup
00:23:36 - Dropdown dynamic setup
00:28:49 - Idle and pending states
00:35:19 - Display generated results
00:38:45 - Image generation setup
00:40:10 - Initial post workflow
00:41:39 - Tone and source setup
00:45:50 - Post data interaction
00:49:12 - OpenAI API overview
00:50:22 - API key setup
00:51:41 - Setup API calls
00:52:59 - Configure API in Bubble
00:54:27 - API security settings
01:00:18 - Confirm API setup
01:01:39 - Image API configuration
01:03:10 - Adjust image prompt
01:04:56 - Finalize image API
01:07:32 - Secure app settings
01:10:07 - Create API workflow
01:11:33 - Setup API parameters
01:13:19 - Format API data
01:14:49 - Construct effective prompts
01:17:56 - Save generated results
01:19:32 - Schedule API workflow
01:24:18 - Create image workflow
01:25:47 - Image prompt construction
* * * * *
Subscribe to this channel to be the first to hear about new videos!
Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality - faster and cheaper than you could with just code.
Have a question? Please visit bubble.io/support.
Learn more about Bubble:
Homepage ➡ bble.io/p9z7rr
Twitter ➡ / bubble
Blog ➡ bubble.io/blog

Пікірлер: 49
@CodyHatch24
@CodyHatch24 19 күн бұрын
This guy is like the Bob Ross of creating Bubble apps. Instead of, “happy little accidents,” it’s, “we’re just playing around here”
@brandonmccrae5472
@brandonmccrae5472 Ай бұрын
These videos from Gregory are amazing! Please continue this Bubble, the learning curve for Bubble is a bit steep but these videos help. Once you do understand Bubble though, it's power is immense, especially if you understand API's and Artificial Intelligence!
@dinorossi6611
@dinorossi6611 Ай бұрын
They say that Flutter is even steeper.
@Oatkimhun
@Oatkimhun Ай бұрын
Thanks for the great tutorial. Gregory is the best Bubble trainer I have ever seen.
@gregory-john
@gregory-john 29 күн бұрын
Thank you so much!
@JuniorKEDOTE
@JuniorKEDOTE 12 күн бұрын
I agree with you. Gregory has the best way to make you understand the most complex bubble feature. He is the best.
@buthelezinkosinathi5375
@buthelezinkosinathi5375 Ай бұрын
Thank you Bubble team for these lessons. I'm bubbling with excitement of how I can now build the web app ideas I've had.
@srdjanvelickovic2790
@srdjanvelickovic2790 Ай бұрын
It's amazing how in this heap of information Greg effortlessly fills out all those fields as if he were ChatGPT :)
@hayttlesds
@hayttlesds Ай бұрын
Very good. The only concern is that we need a paid plan to test and learning how to build apps with API Connector Plugin.
@richardstuart3258
@richardstuart3258 Ай бұрын
Thanks Gregory for another informative tutorial.
@GiuseppeCastiglione-z7y
@GiuseppeCastiglione-z7y 22 күн бұрын
Thank you very much Gregory, your work is amazing!
@kimathibundi
@kimathibundi Ай бұрын
Always amaizing content following up from keny, bubble has changed my life and still learning 😊
@AdrianoMassi
@AdrianoMassi 25 күн бұрын
Greg, this is simply awesome! I wanted to go through this one before diving deep into the Buildcamp AICamp I've purchased and will be released in a few hours. Thanks!!!
@dantidmas6877
@dantidmas6877 5 күн бұрын
Great work as always Gregory!
@gregory-john
@gregory-john Күн бұрын
Thank you Dan!
@dabrodev
@dabrodev 7 күн бұрын
Amazing tutorial. Thank you :)
@smartbrandstrategies
@smartbrandstrategies 18 күн бұрын
This is great. Thank you! I'm running into an issue where the multiline output doesn't stay in the initial content field after page refresh, despite the post parameter remaining in the URL. I'm sure I'll figure it out but this tutorial has already leveled me up again. Thanks!
@gregory-john
@gregory-john Күн бұрын
This sounds like a data referencing problem. Make sure 'Group results' has the data of 'Get post from page URL' and then the Multilineinput Ouput is referencing 'Parent groups post output'. Also make sure you can see the data in the DB.
@naeemahmed1540
@naeemahmed1540 Күн бұрын
The Schedule API Event action requires access to the API and the scheduler. Please upgrade your plan to run this action. got this error though i bought Api first place and follow exactly same steps
@videos6505
@videos6505 Ай бұрын
Would love to see how to use bubble + openAI with own knowledge base.
@gregory-john
@gregory-john Ай бұрын
This is possible using OpenAI's Assistant API with document retrieval. You can build a chatbot to interact with any kind of data source.
@titansevekari9908
@titansevekari9908 8 күн бұрын
why do i need to upgrade my plans to schedule workflows
@kingpinoftherails926
@kingpinoftherails926 Ай бұрын
thx great video, is more coming?
@gregory-john
@gregory-john Ай бұрын
Absolutely, the next one is in production already.
@dinorossi6611
@dinorossi6611 Ай бұрын
Bubble is introducing mobile option soon? To compete with Flutter? I am debating what to do.
@gregory-john
@gregory-john Ай бұрын
I'm testing mobile now, but it will still be a good few months until a public beta. What I can say is that it's very smooth and will easily compete with competitor platforms.
@drixxonk
@drixxonk Ай бұрын
@@gregory-johnif I may, how are page loading times so far for [complex] single page apps ?
@dinorossi6611
@dinorossi6611 Ай бұрын
@@gregory-john Thank you so much for the reply. I did not expect it. You are a good guy. I am new to Bubble and no code and am debating between Flutter and Bubble. That is promising. My app idea is still on paper. So, yeah. I like your extensive explanations on APIs .
@Iloveilab
@Iloveilab 15 күн бұрын
Thanks Gregory! Is there any tutorial on how to generate a post from a url link? Rather than from copy and paste text.
@gregory-john
@gregory-john Күн бұрын
This is possible, but you'd first need to scrape the webpage. You can use many tools for this but Buildship is my favourite. Once you have the scraped body content, you can continue with the workflow from this course by sending the content to OpenAI.
@Iloveilab
@Iloveilab Күн бұрын
@@gregory-john Thank you! you're the best =)
@user-ig6ct9rn6m
@user-ig6ct9rn6m Ай бұрын
Hey guys can anyone say that if we integrate openapi plung in should we know how to code??
@gregory-john
@gregory-john Ай бұрын
You don't need to know how to code. Integrating with OpenAi happens via Bubble's API connector.
@ozDigitalCreator
@ozDigitalCreator 21 күн бұрын
Thanks Gregory! May I ask if there is a way to work this app with a bubble free plan? After downgraded my plan to a free version, this message 'The Schedule API Event action requires access to the API and the scheduler. Please upgrade your plan to run this action.' shows on my screen.
@gregory-john
@gregory-john Күн бұрын
You can still build backend workflow on a free plan. You just can't run them. You could build a version using client side workflows but it's not ideal from a performance and security point of view. Bubble can't give away all of their app functionality on a free plan unfortunately.
@iceandarcane8487
@iceandarcane8487 Ай бұрын
Is it possible to build a web app using Bubble that can charge users based on their usage of OpenAI's API or offer a subscription model that provides limited API usage within each time period?
@gregory-john
@gregory-john Ай бұрын
Absolutely. OpenAI returns the prompt and completion token values via their API. From that, we can accurately calculate per-user-usage and track what users are spending.
@iceandarcane8487
@iceandarcane8487 Ай бұрын
@@gregory-john Thanks!
@OscarGutierrez2024-j2f
@OscarGutierrez2024-j2f Ай бұрын
Thanks Greg!!! What's the password to preview the editor.
@gregory-john
@gregory-john Ай бұрын
There is no password on the editor, it's an open app. The run mode is password protected as I've disabled the api keys, so it wouldn't work anyway.
@OscarGutierrez2024-j2f
@OscarGutierrez2024-j2f Ай бұрын
@@gregory-john Ok Thanks
@jalengonel
@jalengonel 28 күн бұрын
I wonder what’s taking so long.
@SwingTrading-pf9kl
@SwingTrading-pf9kl Ай бұрын
Do I need paid chatgpt version to use api?
@abnarain8359
@abnarain8359 Ай бұрын
I don't think you need to pay to access their API information, but it's usage pricing. So you'll need to buy credits so that the API call can actually fire. You can make do for a decent amount of time with only $5 US
@gregory-john
@gregory-john Ай бұрын
Yes you need credits to use an AI API service including this one. $2 will get you through this course.
@hayttlesds
@hayttlesds Ай бұрын
@@gregory-john 5 dollars is the lowest amount and a paid plan Bubble.
@satoshiedits21
@satoshiedits21 Ай бұрын
@@gregory-john I view it as $2 I'm investing in myself!!
How to Design Smooth Animated Inputs in Bubble.io for Better UX
11:51
Хотите поиграть в такую?😄
00:16
МЯТНАЯ ФАНТА
Рет қаралды 2,3 МЛН
Became invisible for one day!  #funny #wednesday #memes
00:25
Watch Me
Рет қаралды 58 МЛН
how I made $150k/yr no code saas so you can just copy me
19:06
Sebastian Moore
Рет қаралды 11 М.
Learn Bubble.io in 30 Minutes
28:45
Jesse Showalter
Рет қаралды 43 М.
What's next for AI agentic workflows ft. Andrew Ng of AI Fund
13:40
Sequoia Capital
Рет қаралды 270 М.
I wish every AI Engineer could watch this.
33:49
1littlecoder
Рет қаралды 67 М.
Zero to One With AI + No-Code
59:53
Bubble
Рет қаралды 8 М.
No Code App Development is a Trap
9:31
Coding with Dee
Рет қаралды 144 М.
Телефон-електрошокер
0:43
RICARDO 2.0
Рет қаралды 79 М.
Зачем ЭТО электрику? #секрет #прибор #энерголикбез
0:56
Александр Мальков
Рет қаралды 391 М.
АЙФОН 20 С ФУНКЦИЕЙ ВИДЕНИЯ ОГНЯ
0:59
КиноХост
Рет қаралды 533 М.
Как распознать поддельный iPhone
0:44
PEREKUPILO
Рет қаралды 1,8 МЛН
Игровой Комп с Авито за 4500р
1:00
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 2,2 МЛН