Cara Membuat Aplikasi Web Tanpa Coding! Pakai AI Gratis + Apps Script

Main idea

The video explains how to create a simple web application without manual coding by using Gemini AI to generate:

• Google Apps Script (back-end logic)
• HTML/CSS (front-end UI)

Then, you deploy it as a web app using Google Sheets / Google Apps Script. The presenter claims this process is free with a Google account.

---

Tutorial / guide steps (tech-focused)

1. Open Gemini AI (recommended)

   • Use Gemini (GPT Chat is mentioned as an alternative, but not recommended).
   • The presenter indicates they’re using the free Gemini version (they show an “upgrade” indicator).
   • They note Cloud AI can improve results (paid), but they proceed with free Gemini.

2. Describe the app concept to Gemini

   • Example app: personal finance recording web app (salary/income, expenses, and transaction history).
   • Create a prompt and optionally ask Gemini for feature recommendations if you’re unsure what to include.
   • Emphasize: prompts can be adapted for other app types (payments, correspondence, work planning notes, etc.).

3. Choose an AI model and generate code

   • Switch the model from “flash” to “3.1 Pro”.
   • Use Gemini’s Canvas feature to preview generated output.
   • Code results may vary; you may need to adjust according to what AI generates.

4. Key generated code files

   • Typically two main files:
     • Code.gs (Google Apps Script / back-end)
     • index.html (front-end UI)
   • Additional files may appear depending on complexity, but these are highlighted as central.

5. Preview and iterate UI

   • Use the front-end UI preview.
   • If the design looks bad, ask Gemini to revise the appearance (example: make it more modern and attractive).
   • Limitation mentioned for the free plan: revisions may be capped (e.g., “revise about once; next revision wait until tomorrow”).

6. Set up Google Sheets + enable Apps Script

   • Go to script.google.com or start from Google Sheets.
   • Steps include:
     • Create a new Spreadsheet
     • Set sharing access (example: “anyone with link”)
     • In the spreadsheet: Extensions → Apps Script

7. Replace Apps Script code

   • In Code.gs:
     • Copy/prepare the generated back-end code from Gemini
     • Delete the default code
     • Paste the generated Code.gs content

8. Add the front-end HTML file

   • Add a new file in Apps Script:
     • Select HTML
     • Name it index.html
   • Copy the generated front-end UI code from Gemini and paste it into index.html.

9. Deploy as a Web Application

   • Run / deploy:
     • Deploy → New deployment
     • Choose type: Web application
     • Add a description (e.g., “version one”)
     • Set access to “anyone” (example: any user with link)
   • Authorization notes:
     • Allow access
     • If a warning appears, use project / advanced confirmation

10. Test the working app

    • Demonstrates entering sample data:
      • Salary income
      • Expenses
    • Confirms the app writes to the Google Sheet:
      • Income recorded
      • Expenses and transaction history recorded
      • Data appears in the transaction sheet
    • Claims it works immediately.

---

Additional product/usage examples

• Mentions creating a more professional planner concept:
  • Shorter, cleaner URL
  • Embedding website integration idea
• Notes an example site/app made using Cloud AI, including login details—suggesting the workflow may extend to packaged tools or hosted pages.

---

Claims / key takeaways

The app creation is presented as:

• Fast (under ~10 minutes, per the intro)
• No coding skills required
• Absolutely free, requiring mainly:
  • A Google account
  • Apps Script
  • Gemini AI for code generation

---

Main speakers / sources

• Speaker/channel: Masiaw ID (host of the tutorial)
• Primary tech sources referenced:
  • Gemini AI (code generation and UI revision)
  • Google Apps Script (back-end logic)
  • Google Sheets / script.google.com (deployment and data storage)
  • Optional mention: Cloud AI (paid)