✍️ 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 posts3- Create marketing copy4- Write emails5- Rewrite/improve text6- Save to library7- Export contentFeatures
Text
1Core Features:2✅ Multiple writing modes3✅ Tone & length options4✅ Content history5✅ Favorites system6✅ Copy & export7✅ User authenticationDatabase Design
Data Types
Text
1User (built-in):2- Additional fields as needed3 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 page22. app - Main writing dashboard33. history - Content library44. settings - User preferencesApp 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 mode3 - Blog Post4 - Email5 - Ad Copy6 - Social Media7 - Rewrite8 92. Multiline Input - Topic/content10 - Placeholder: "What do you want to write about?"11 - Min 3 lines12 133. Dropdown - Tone14 - Professional15 - Casual16 - Friendly17 - Persuasive18 - Humorous19 204. Dropdown - Length21 - Short (50 words)22 - Medium (150 words)23 - Long (300 words)24 255. Button - Generate26 - Primary style27 - Icon: ✨Step 2: Output Section
Text
1Elements:21. Group - Result container3 - Conditional: visible when has_result4 52. Text - Generated content6 - Multiline7 - Selectable8 93. Button Group10 - Copy: clipboard icon11 - Save: heart icon12 - Export: download icon13 - Regenerate: refresh iconSetting 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 introduction10- Clear sections11- Actionable tips12- 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 headline10- Key benefits11- 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 inputs4 - If topic empty → show error5 62. Set page state: is_loading = yes7 83. Build prompt based on mode9 - Get template for selected mode10 - Replace {topic}, {tone}, {length}11 124. API Call to OpenAI13 - Model: gpt-4o-mini14 - Messages: system + user prompt15 165. Set page state: is_loading = no17 186. Set page state: result = API response19 207. Create Content record21 - Save all details22 - User: Current UserConditional Prompts
Text
1Dynamic system prompt based on mode:2 3If mode is "Blog Post":4 system_prompt = blog_system_prompt5Else if mode is "Email":6 system_prompt = email_system_prompt7...Workflow: Save to Favorites
Text
1Button "Save" clicked:2 31. Check if already saved4 - Search Contents where 5 generated_text = current result6 72. If not exists:8 - Create new Content9 - Set is_favorite = yes10 - Show "Saved!" message11 123. If exists:13 - Toggle is_favorite14 - Update button stateHistory 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 User4 - is_deleted = no5 - (Filter by type if selected)6 - Sort: created_date descendingExport Feature
Copy to Clipboard
Text
1Button "Copy" clicked:21. Copy to clipboard: Result Text's value32. Set state: copied = yes43. Wait 2 seconds54. Set state: copied = noDownload as Text
Text
1Using Toolbox plugin:21. Create file download action32. Content: generated text43. Filename: title + .txtError Handling
Handle Errors
Text
1Implement error states:2 31. Empty input4 "Please enter a topic to write about"5 62. API error7 "Generation failed. Please try again."8 93. Rate limit10 "Too many requests. Please wait a moment."11 124. Show retry button13 Enable manual retryPolish & UX
Loading Animation
Text
1While generating:2- Disable all inputs3- Show spinner in button4- Typing animation in result area5- "AI is writing your content..."Character/Word Count
Text
1Display:2- Input character count3- Generated word count4- Update in real-timeKeyboard Shortcuts
Text
1Enhance UX:2- Ctrl+Enter: Generate3- Ctrl+C: Copy result4- Ctrl+S: Save to favoritesTesting Checklist
Test Your App
Text
1☐ Generate all content types2☐ Test all tone options3☐ Test all length options4☐ Copy works correctly5☐ Save to favorites works6☐ History shows all content7☐ Delete removes from list8☐ Error handling works9☐ Loading states display10☐ Mobile responsiveBài Tập
Complete Project
Build AI Writing App:
- Create database structure
- Build main dashboard UI
- Set up OpenAI API
- Create prompt templates
- Implement generate workflow
- Add history page
- Implement favorites
- Add export features
- Polish and test
Tiếp theo: Bài 10 - Building AI Chatbot App
