Lý thuyết
50 phút
Bài 9/15

Building AI Writing App

Xây dựng ứng dụng AI Writing hoàn chỉnh từ đầu đến cuối

✍️ Building AI Writing App

Xây dựng ứng dụng AI Writing hoàn chỉnh với Bubble.

Project Overview

What We'll Build

Text
1AI Writing Assistant:
2- Generate blog posts
3- Create marketing copy
4- Write emails
5- Rewrite/improve text
6- Save to library
7- Export content

Features

Text
1Core Features:
2✅ Multiple writing modes
3✅ Tone & length options
4✅ Content history
5✅ Favorites system
6✅ Copy & export
7✅ User authentication

Database Design

Data Types

Text
1User (built-in):
2- Additional fields as needed
3
4Content:
5- title (text)
6- type (text: blog, email, ad, social)
7- input_prompt (text)
8- generated_text (text)
9- tone (text)
10- word_count (number)
11- created_date (date)
12- user (User)
13- is_favorite (yes/no)
14- is_deleted (yes/no)
15
16Template:
17- name (text)
18- type (text)
19- prompt_template (text)
20- example_output (text)
21- is_premium (yes/no)

Page Structure

Pages

Text
11. index - Landing page
22. app - Main writing dashboard
33. history - Content library
44. settings - User preferences

App Dashboard Layout

Text
1┌────────────────────────────────────────────────┐
2│ [Logo] AI Writer [History] [Settings] 👤 │
3├────────────────────────────────────────────────┤
4│ │
5│ ┌─────────────┐ ┌─────────────────────────┐ │
6│ │ Write Mode: │ │ │ │
7│ │ ○ Blog Post │ │ What do you want to │ │
8│ │ ○ Email │ │ write about? │ │
9│ │ ○ Ad Copy │ │ │ │
10│ │ ○ Social │ │ [____________________] │ │
11│ │ ○ Rewrite │ │ [____________________] │ │
12│ │ │ │ [____________________] │ │
13│ │ Tone: │ │ │ │
14│ │ [Dropdown] │ │ Tone: [Professional ▼] │ │
15│ │ │ │ Length: [Medium ▼] │ │
16│ │ Length: │ │ │ │
17│ │ [Dropdown] │ │ [✨ Generate Content] │ │
18│ └─────────────┘ │ │ │
19│ └─────────────────────────┘ │
20│ │
21│ ┌──────────────────────────────────────────┐ │
22│ │ Generated Content 📋 │ │
23│ │ │ │
24│ │ Your AI-generated content will │ │
25│ │ appear here... │ │
26│ │ │ │
27│ │ [♡ Save] [📥 Export] [🔄 Regenerate] │ │
28│ └──────────────────────────────────────────┘ │
29└────────────────────────────────────────────────┘

Building the UI

Step 1: Input Section

Text
1Elements:
21. Radio buttons - Write mode
3 - Blog Post
4 - Email
5 - Ad Copy
6 - Social Media
7 - Rewrite
8
92. Multiline Input - Topic/content
10 - Placeholder: "What do you want to write about?"
11 - Min 3 lines
12
133. Dropdown - Tone
14 - Professional
15 - Casual
16 - Friendly
17 - Persuasive
18 - Humorous
19
204. Dropdown - Length
21 - Short (50 words)
22 - Medium (150 words)
23 - Long (300 words)
24
255. Button - Generate
26 - Primary style
27 - Icon: ✨

Step 2: Output Section

Text
1Elements:
21. Group - Result container
3 - Conditional: visible when has_result
4
52. Text - Generated content
6 - Multiline
7 - Selectable
8
93. Button Group
10 - Copy: clipboard icon
11 - Save: heart icon
12 - Export: download icon
13 - Regenerate: refresh icon

Setting Up Prompts

Blog Post Prompt

Text
1System:
2"You are an expert blog writer. Create engaging,
3informative blog content."
4
5User Template:
6"Write a {length} blog post about: {topic}
7Tone: {tone}
8Include:
9- Catchy introduction
10- Clear sections
11- Actionable tips
12- Strong conclusion"

Email Prompt

Text
1System:
2"You are a professional email writer."
3
4User Template:
5"Write a {tone} email about: {topic}
6Length: {length}
7Include appropriate greeting and sign-off."

Ad Copy Prompt

Text
1System:
2"You are a marketing copywriter specializing in
3persuasive advertising."
4
5User Template:
6"Write {length} ad copy for: {topic}
7Tone: {tone}
8Include:
9- Attention-grabbing headline
10- Key benefits
11- Clear call-to-action"

Rewrite Prompt

Text
1System:
2"You are an expert editor."
3
4User Template:
5"Rewrite and improve this text:
6{original_text}
7
8Tone: {tone}
9Keep the same meaning but make it {length} and more engaging."

Workflow: Generate Content

Text
1Button "Generate" clicked:
2
31. Validate inputs
4 - If topic empty → show error
5
62. Set page state: is_loading = yes
7
83. Build prompt based on mode
9 - Get template for selected mode
10 - Replace {topic}, {tone}, {length}
11
124. API Call to OpenAI
13 - Model: gpt-4o-mini
14 - Messages: system + user prompt
15
165. Set page state: is_loading = no
17
186. Set page state: result = API response
19
207. Create Content record
21 - Save all details
22 - User: Current User

Conditional Prompts

Text
1Dynamic system prompt based on mode:
2
3If mode is "Blog Post":
4 system_prompt = blog_system_prompt
5Else if mode is "Email":
6 system_prompt = email_system_prompt
7...

Workflow: Save to Favorites

Text
1Button "Save" clicked:
2
31. Check if already saved
4 - Search Contents where
5 generated_text = current result
6
72. If not exists:
8 - Create new Content
9 - Set is_favorite = yes
10 - Show "Saved!" message
11
123. If exists:
13 - Toggle is_favorite
14 - Update button state

History Page

Layout

Text
1┌────────────────────────────────────────┐
2│ My Content Library │
3├────────────────────────────────────────┤
4│ Filter: [All ▼] [Favorites ♡] │
5├────────────────────────────────────────┤
6│ ┌────────────────────────────────────┐ │
7│ │ 📝 Blog: AI in Healthcare │ │
8│ │ Dec 15, 2024 | 250 words [♡] │ │
9│ │ Preview: Artificial intelligence │ │
10│ │ is transforming healthcare... │ │
11│ │ [View] [Copy] [Delete] │ │
12│ └────────────────────────────────────┘ │
13│ ┌────────────────────────────────────┐ │
14│ │ 📧 Email: Meeting Follow-up │ │
15│ │ Dec 14, 2024 | 80 words [♡] │ │
16│ └────────────────────────────────────┘ │
17└────────────────────────────────────────┘

Repeating Group

Text
1Data source:
2Search for Contents:
3 - User = Current User
4 - is_deleted = no
5 - (Filter by type if selected)
6 - Sort: created_date descending

Export Feature

Copy to Clipboard

Text
1Button "Copy" clicked:
21. Copy to clipboard: Result Text's value
32. Set state: copied = yes
43. Wait 2 seconds
54. Set state: copied = no

Download as Text

Text
1Using Toolbox plugin:
21. Create file download action
32. Content: generated text
43. Filename: title + .txt

Error Handling

Handle Errors
Text
1Implement error states:
2
31. Empty input
4 "Please enter a topic to write about"
5
62. API error
7 "Generation failed. Please try again."
8
93. Rate limit
10 "Too many requests. Please wait a moment."
11
124. Show retry button
13 Enable manual retry

Polish & UX

Loading Animation

Text
1While generating:
2- Disable all inputs
3- Show spinner in button
4- Typing animation in result area
5- "AI is writing your content..."

Character/Word Count

Text
1Display:
2- Input character count
3- Generated word count
4- Update in real-time

Keyboard Shortcuts

Text
1Enhance UX:
2- Ctrl+Enter: Generate
3- Ctrl+C: Copy result
4- Ctrl+S: Save to favorites

Testing Checklist

Test Your App
Text
1☐ Generate all content types
2☐ Test all tone options
3☐ Test all length options
4☐ Copy works correctly
5☐ Save to favorites works
6☐ History shows all content
7☐ Delete removes from list
8☐ Error handling works
9☐ Loading states display
10☐ Mobile responsive

Bài Tập

Complete Project

Build AI Writing App:

  1. Create database structure
  2. Build main dashboard UI
  3. Set up OpenAI API
  4. Create prompt templates
  5. Implement generate workflow
  6. Add history page
  7. Implement favorites
  8. Add export features
  9. Polish and test

Tiếp theo: Bài 10 - Building AI Chatbot App