Build a REAL Backend Database for Your AI Website (Supabase + Google AI Studio)

Setting Up Superbase Integration [00:14]

• The video explains how to connect an e-commerce website, previously built with Google AI Studio and linked to Google Sheets, to Superbase for robust order saving.
• Superbase is introduced as an open-source "backend as a service" offering SQL databases, autogenerated APIs, authentication, storage, and real-time features, simplified for non-developers.
• The setup process involves signing up for Superbase with a Gmail account, creating a new project, and noting down essential details: organization name, project name, password, region, Project ID, Project URL, and public API keys.
• Google AI Studio is used to automate the connection by providing these Superbase credentials in a chat prompt, instructing the AI to connect the checkout form and send all order fields to Superbase.
• Key insights: The AI studio automatically updates the code to establish the connection between the checkout form and the Superbase database.

This method is totally free, super easy, and perfect for non-coders, beginners, and non-technical people who just want things to work.

Creating the Orders Database Table [04:04]

• After connecting the website to Superbase, the next step is to create a data table within Superbase to store order information.
• Google AI Studio is leveraged to automatically generate the necessary SQL for table creation, avoiding manual database design.
• A prompt is given to AI Studio requesting SQL to create a table for storing order form data, specifying fields such as first name, last name, email, street address, city, zip code, product name, total amount, and date/time.
• The generated SQL code is then copied and pasted into Superbase's SQL editor and executed, successfully creating the 'order' table.
• Key insights: This process allows the website to store all incoming order data in a structured, real database.

The table should include first name, last name, email, street address, city, zip code, product name, total amount, and the time and date.

Testing and Deployment [05:47]

• A comprehensive test is performed by adding a product to the cart, proceeding to checkout, filling in all required details, and placing an order.
• A success message is displayed, confirming the order submission.
• The order details are then verified within the Superbase project's database section, where a new row containing all the entered information is found.
• To update the live website, changes are committed and staged through the GitHub icon in Google AI Studio, pushing the updated code, including the Superbase integration, to the GitHub repository.
• Netlify detects the update from GitHub and automatically rebuilds the website, ensuring the live version reflects the new backend connection.
• Key insights: This ensures the website has a proper backend that can handle scaling e-commerce operations.

So, in a few seconds, your live hosted website will be updated with the new backend connection as well.

FormsFree Integration [07:29]

• The video introduces the second method: integrating with FormsFree, described as a free form service that connects website forms directly to a user's Gmail.
• This is presented as the simplest method for beginners and non-coders to collect data directly into their email.
• Users sign up for FormsFree, create a new form, and are provided with a unique form endpoint link.
• This FormsFree link is then pasted into Google AI Studio with a prompt to connect it to the order form, ensuring all checkout details are submitted to FormsFree.
• Key insights: FormsFree offers a straightforward way to collect data without the need to set up any backend or database infrastructure.

FormsFree is basically a free form service that connects your website form directly to your own Gmail.

Final Testing and Conclusion [08:46]

• The FormsFree integration is tested by submitting checkout details, which results in a success message on the website.
• An email is then received in Gmail from FormsFree, containing all the submitted order details, confirming the successful integration.
• The video concludes by reiterating that these methods (Superbase and FormsFree) are free and suitable for collecting orders, saving leads, or adding a proper backend to an AI Studio website.
• Viewers are encouraged to subscribe, share the video, and suggest topics for future content.
• Key insights: Both Superbase and FormsFree provide accessible solutions for managing website data without extensive technical expertise.

I hope these two methods will be really useful for you, whether you want to collect orders, save leads, or simply add a proper backend to your AI Studio website.