การสร้างเว็บแอปที่ขยายขนาดได้ด้วย AI ที่น่ารักและ Back4App

ผู้ประกอบการสามารถสร้างแอปเว็บใด ๆ ได้อย่างรวดเร็วโดยการรวมเครื่องมือพัฒนาที่ขับเคลื่อนด้วย ai และบริการแบ็คเอนด์ที่สามารถขยายได้ บทช่วยสอนนี้ให้แผนที่ชัดเจนเกี่ยวกับวิธีการสร้าง ผู้ช่วยการเงินส่วนบุคคล – ตั้งแต่การ วางแผน ไปจนถึง ส่วนหน้าที่สร้างโดย ai (lovable ai), แบ็คเอนด์ที่แข็งแกร่งของ back4app , การสร้างรายได้จาก stripe , และสุดท้าย แนวทางปฏิบัติที่ดีที่สุดในการขยายและความปลอดภัย สำหรับแพลตฟอร์ม b2c เมื่อสิ้นสุด คุณจะมีแผนที่ชัดเจนและสามารถดำเนินการได้เพื่อเปิดตัวผู้ช่วยการเงินที่ขับเคลื่อนด้วย ai ของคุณเอง 1\ การวางแผนซอฟต์แวร์ด้วย llms ก่อนที่จะเขียนโค้ดใด ๆ ให้เริ่มต้นด้วยการใช้โมเดลภาษาขนาดใหญ่ (llms) เพื่อวางแผนซอฟต์แวร์ของคุณ โมเดลที่มีความสามารถในการให้เหตุผลในปัจจุบัน เช่น anthropic claude 3 7 , openai gpt 4 , และ deepseek r1 สามารถเปลี่ยนแนวคิดง่าย ๆ ให้เป็นแผนผังโครงการที่ละเอียดได้ ในความเป็นจริง, “llms สามารถสร้างคำอธิบายโครงการที่ละเอียดจากโครงร่างโครงการที่ง่ายและแบ่งโครงการออกเป็นงานต่าง ๆ ได้อย่างมีประสิทธิภาพ ” ( การใช้ llms เพื่อจัดการโครงการของฉัน (ส่วนที่ 1) medium https //medium com/@docherty/can llms help me manage my projects part 1 ee4342b1ca0a# text=llms%20can%20effectively%20generate%20detailed,the%20project%20down%20into%20tasks ) ใช้เครื่องมือ ai เหล่านี้เป็นคู่คิดและสถาปนิกของคุณ กำหนดวิสัยทัศน์ เขียนคำแนะนำที่อธิบายเป้าหมาย ผู้ใช้เป้าหมาย และฟีเจอร์หลักของผู้ช่วยด้านการเงินส่วนบุคคลอย่างชัดเจน ตัวอย่างเช่น prompt i want to build an ai driven personal finance assistant for consumers it should track expenses, set budgets, and provide advice via a chatbot interface the platform needs a mobile friendly web frontend and a scalable backend as a seasoned software architect, outline the system architecture and key features for this application เกิดอะไรขึ้น? โมเดลภาษา llm ที่มีความก้าวหน้า (claude 3 7, gpt o3, deepseek r1, ฯลฯ) จะวิเคราะห์ผ่านคำสั่งนี้และมักจะตอบกลับด้วยการจัดระเบียบข้อมูล – เช่น การตรวจสอบผู้ใช้, โมดูลติดตามธุรกรรม, โมดูลการจัดทำงบประมาณ, โมดูลคำแนะนำ ai, และคำแนะนำสำหรับเทคโนโลยีสแต็ก (frontend, backend, database) มันอาจแนะนำให้ใช้เว็บเฟรมเวิร์กสำหรับ ui และ baas (backend as a service) สำหรับการพัฒนาอย่างรวดเร็ว ดูผลลัพธ์ด้านล่างที่ใช้ claude 3 7 และ openai gpt o3 mini hight claude 3 7 personal finance assistant architecture i'll outline a comprehensive system architecture for your ai driven personal finance assistant, focusing on key components, technologies, and features system architecture overview frontend components mobile responsive web app built with react js or vue js user authentication portal secure login with mfa dashboard visualization of financial data and budget progress expense tracking interface manual entry and receipt scanning chatbot interface natural language interaction for queries and advice backend services api gateway entry point managing authentication and routing user service manages profiles, preferences, and authentication finance engine core logic for categorization, analysis, and insights ml/ai service powers the chatbot and provides personalized insights notification service delivers alerts and reminders data store securely manages financial data and user information data architecture relational database for structured financial data and user information (postgresql) nosql database for flexible storage of unstructured data (mongodb) data warehouse for analytics and reporting (snowflake) vector database for semantic search and ai features (pinecone) key technical features bank integration open banking apis for account aggregation plaid/tink for connection to financial institutions real time transaction syncing expense categorization ml based automatic categorization custom category creation rule based recategorization budget management multiple budget creation (monthly, annual, project based) envelope budgeting system progress tracking and visualizations ai chatbot assistant natural language processing for financial queries contextual awareness of user's financial situation personalized financial advice and recommendations proactive insights based on spending patterns security & compliance end to end encryption for financial data gdpr and ccpa compliance soc 2 compliance for financial information handling regular security audits and penetration testing scalability considerations containerization docker for consistent deployment orchestration kubernetes for scaling services microservices decomposed architecture for independent scaling serverless functions for variable workload components cdn for global content delivery optimization development & deployment strategy ci/cd pipeline automated testing and deployment feature flagging for controlled feature rollouts a/b testing framework for optimizing user experience monitoring & analytics real time system performance and user behavior tracking would you like me to expand on any particular aspect of this architecture? gpt o3 mini 1 system overview user centric design a mobile responsive web application that prioritizes ease of use and accessibility scalable backend a microservices based backend that can scale horizontally to accommodate increasing users and data volume ai powered interaction integration of natural language processing (nlp) for the chatbot, which offers personalized financial advice 2\ frontend responsive ui/ux use modern javascript frameworks (e g , react, vue js, or angular) to develop a responsive interface optimized for mobile devices consider a progressive web app (pwa) approach to blend native app like experiences with web accessibility user features dashboard quick overview of spending, budgets, and alerts expense tracking forms and visualizations (graphs, charts) to monitor spending habits budget management tools for setting up and adjusting budgets chat interface an embedded ai chatbot for financial advice, queries, and suggestions 3\ backend architecture api gateway acts as the entry point for all client requests handles routing, load balancing, authentication, and rate limiting microservices architecture user service manages registration, login, and user profiles expense & budget service tracks transactions, categorizes spending, and monitors budget limits chatbot service interfaces with nlp models (e g , using openai’s api or in house models) to deliver interactive advice analytics service processes transaction data to offer insights, anomaly detection, and personalized recommendations notification service sends alerts, reminders, or budget warnings via email, sms, or in app messages scalability use containerization (docker) and orchestration (kubernetes) for microservices deploy on cloud platforms (aws, gcp, azure) that support auto scaling and load balancing data layer relational databases for structured data such as user profiles, transaction records, and budgets (e g , postgresql or mysql) nosql databases for storing session data, logs, and semi structured data (e g , mongodb or cassandra) data warehouse/data lake for historical data analysis and training machine learning models 4\ ai & chatbot integration natural language processing (nlp) integrate an ai engine (via apis or an in house model) to interpret user queries and provide actionable advice use machine learning models to analyze spending habits and offer personalized recommendations conversational interface build a dialogue manager to maintain context during multi turn conversations integrate with the backend analytics to fetch real time insights and recommendations based on user data feedback loop incorporate user feedback to continuously train and refine the ai models implement monitoring tools to track performance and user satisfaction with the chatbot 5\ integration & security third party integrations connect to financial data aggregators (e g , plaid) for real time expense tracking from bank accounts integrate with secure payment gateways for any financial transactions security & compliance use oauth 2 0 / openid connect for secure authentication ensure data encryption both in transit (tls/ssl) and at rest comply with data privacy regulations (gdpr, ccpa) through anonymization and user consent management monitoring & logging implement centralized logging and monitoring (using tools like elk stack, prometheus, or grafana) setup alerting for suspicious activities or system performance issues 6\ key features expense tracking manual entry and automated tracking (via bank integrations) categorization of expenses with trend analysis budget setting & alerts customizable budgets with real time tracking alerts for overspending or upcoming bill reminders personalized financial advice chatbot interface that uses nlp to answer financial queries tailored advice based on spending habits, savings goals, and budgeting history analytics & reporting visual dashboards that display spending trends, budget status, and financial health metrics periodic reports and insights that help users optimize their finances user engagement gamification elements such as rewards or progress tracking in app notifications and personalized tips to encourage financial discipline ปรับปรุงสถาปัตยกรรม ต่อไป ให้เรียก llm เพื่อขอรายละเอียดเพิ่มเติมเกี่ยวกับแต่ละส่วนประกอบ ตัวอย่างเช่น ถามมันเกี่ยวกับ ความรับผิดชอบของส่วนหน้าและส่วนหลัง และฟีเจอร์ผู้ช่วย ai จะทำงานอย่างไร break down the architecture what should the front end handle vs the back end? how will the ai chatbot provide financial advice – via an api call to an llm (e g , openai)? suggest how to integrate an ai model for insights, and recommend a tech stack (e g , use an ai frontend builder like lovable and a backend like back4app) ผลลัพธ์ที่คาดหวัง โมเดลภาษาอาจเสนอการออกแบบแบบไคลเอนต์ เซิร์ฟเวอร์ที่ frontend (แอปเว็บหรือแอปมือถือ) จัดการส่วนติดต่อผู้ใช้ (ฟอร์มข้อมูลสำหรับค่าใช้จ่าย, แดชบอร์ด, ui แชท) และ backend จัดการการจัดเก็บข้อมูล, โลจิกทางธุรกิจ, และการเรียกใช้บริการ ai มันอาจแนะนำให้ใช้ lovable ai สำหรับการสร้างส่วนหน้าอย่างรวดเร็วและ back4app (parse platform) สำหรับแบ็กเอนด์ เนื่องจากความสามารถในการขยายตัวและความเร็ว การตอบสนองอาจสรุปโมเดลข้อมูล (เช่น, user คลาส, transaction คลาส, budget คลาส) และวิธีที่ฟีเจอร์แชทบอทเรียกใช้ api ของ llm เพื่อขอคำแนะนำ อย่าลังเลที่จะทำซ้ำ หากมีสิ่งใดไม่ชัดเจน ให้ถามคำถามเพิ่มเติม เป้าหมายคือ แผนการดำเนินการที่มีโครงสร้าง ที่ครอบคลุมฟีเจอร์หลักทั้งหมด การแยกฟีเจอร์และงาน สุดท้าย ใช้ llm เพื่อสร้าง รายการฟีเจอร์และรายการงานพัฒนา สิ่งนี้จะช่วยให้คุณมีแผนที่ชัดเจนสำหรับ mvp ของคุณ ตัวอย่างเช่น prompt "list all key features for the mvp and sub tasks to implement each include frontend pages/components needed and backend apis or cloud functions needed organize it by priority " ผลลัพธ์ที่คาดหวัง โมเดลจะระบุฟีเจอร์เช่น การลงทะเบียน/เข้าสู่ระบบผู้ใช้ , แบบฟอร์มการป้อนค่าใช้จ่าย , การสร้างงบประมาณ , แดชบอร์ดพร้อมสรุปการใช้จ่าย , แชทบอท ai สำหรับเคล็ดลับทางการเงิน , เป็นต้น พร้อมกับงานย่อยต่างๆ อาจกล่าวว่า “ การตรวจสอบสิทธิ์ – สร้างหน้า signup/login (frontend) และ api การจัดการผู้ใช้ (backend); การติดตามค่าใช้จ่าย – ui การป้อนค่าใช้จ่าย, endpoint backend เพื่อบันทึกธุรกรรม; การจัดทำงบประมาณ – ui เพื่อกำหนดงบประมาณ, logic backend เพื่อคำนวณงบประมาณที่เหลือ; แชทบอทคำแนะนำ ai – รวม api ai (openai) ใน backend เพื่อวิเคราะห์การใช้จ่ายของผู้ใช้และคืนเคล็ดลับ” – และอื่นๆ คุณสามารถขอ คำแนะนำเกี่ยวกับเทคโนโลยี ได้เช่นกัน เช่น “แนะนำไลบรารีหรือบริการสำหรับกราฟ, การแจ้งเตือน, และการรวมระบบจากบุคคลที่สาม (เช่น stripe สำหรับการชำระเงิน) ” คำตอบของ llm สามารถช่วยในการตัดสินใจของคุณ (เช่น แนะนำไลบรารีกราฟหรือเตือนเกี่ยวกับมาตรการด้านความปลอดภัย) เมื่อสิ้นสุดระยะการวางแผนนี้ คุณควรมี ข้อกำหนดที่สร้างโดย llm รายการฟีเจอร์ โครงร่างสถาปัตยกรรม และข้อเสนอเทคโนโลยี ใช้มันเป็นแผนผังเริ่มต้น – คุณสามารถปรับเปลี่ยนตามข้อมูลเชิงลึกของคุณเองได้เสมอ – แต่จะช่วยเร่งกระบวนการวางแผนด้วยการใช้เหตุผลที่ช่วยโดย ai อย่างมาก 2\ การพัฒนา mvp ด้วย lovable ai (ส่วนหน้า) เมื่อมีแผนในมือ คุณสามารถสร้าง ผลิตภัณฑ์ขั้นต่ำที่สามารถใช้งานได้ (mvp) ส่วนหน้าได้อย่างรวดเร็วโดยใช้ lovable ai , แอปพลิเคชันที่สร้างขึ้นโดย ai lovable ai เปลี่ยนคำสั่งในภาษาธรรมชาติให้เป็นโค้ดแอปพลิเคชันเว็บที่ใช้งานได้ ช่วยให้ การสร้างต้นแบบอย่างรวดเร็ว และการออกแบบเป็นไปได้ โดยการอธิบาย ui และฟังก์ชันการทำงานของแอปของคุณเป็นภาษาอังกฤษธรรมดา คุณจะ “เห็นมันเปลี่ยนเป็นแอปพลิเคชันที่ใช้งานได้อย่างเต็มรูปแบบพร้อมความสวยงามที่น่าทึ่ง” ( lovable https //lovable dev/# text=creating%20software%20has%20never%20been,functional%20application%20with%20beautiful%20aesthetics ) เครื่องมือนี้ เร็วกว่าเขียนโค้ดด้วยมือ 20 เท่า – คุณเพียงแค่บรรยายแนวคิดของคุณและ lovable จะสร้างโค้ดและ ui ให้กับคุณ ( lovable https //lovable dev/# text= ) นี่คือวิธีการใช้มันสำหรับผู้ช่วยการเงินส่วนบุคคลของเรา 2 1 ตั้งค่า lovable และเริ่มโครงการใหม่ ลงทะเบียน ไปที่ เว็บไซต์ lovable ai https //lovable dev และสร้างบัญชี (ถ้าคุณยังไม่มี) เมื่อเข้าสู่ระบบแล้ว ให้สร้างโครงการใหม่จากแดชบอร์ดของคุณ ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=1 ) คุณจะพบกับการป้อนข้อความ (อินเทอร์เฟซคำสั่ง) ซึ่งคุณจะอธิบายแอปพลิเคชันของคุณ คำสั่งเริ่มต้น – อธิบายแอปของคุณ ในโครงการใหม่ ให้ป้อนคำอธิบายโดยละเอียดเกี่ยวกับแอปผู้ช่วยการเงินของคุณ ตัวอย่างเช่น prompt "แอปผู้ช่วยการเงินส่วนบุคคลสำหรับผู้บริโภค แอปมี หน้าลงทะเบียน/เข้าสู่ระบบ; แดชบอร์ดที่แสดงงบประมาณเดือนปัจจุบันของผู้ใช้เทียบกับการใช้จ่าย; แบบฟอร์มเพื่อเพิ่มค่าใช้จ่าย (จำนวน, หมวดหมู่, วันที่); หน้าสำหรับตั้งงบประมาณรายเดือนต่อหมวดหมู่; และหน้าช่องแชท ai ที่ผู้ช่วยตอบคำถามทางการเงิน การออกแบบควรเรียบง่าย ทันสมัย และมีโทนเสียงที่เป็นมิตร (เช่น ไอคอนอวาตาร์ของแชทบอท) ทำให้รองรับการใช้งานบนมือถือได้ " lovable จะประมวลผลคำสั่งนี้และสร้างพื้นฐานส่วนหน้าสำหรับแอปของคุณ ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=once%20you%e2%80%99re%20logged%20in%2c%20click,application%2c%20including%20design%20and%20functionality ) ในไม่กี่วินาที คุณจะมีหลายหน้าและส่วนประกอบ ui ที่สร้างขึ้น – ตั้งแต่แบบฟอร์มไปจนถึงกราฟ – ตามคำอธิบายของคุณ ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=lovable%20ai%20is%20an%20innovative,pleasing%20designs%20and%20robust%20functionality ) ( lovable https //lovable dev/# text=creating%20software%20has%20never%20been,functional%20application%20with%20beautiful%20aesthetics ) รุ่นเริ่มต้นนี้อาจรวมถึงข้อมูลตัวอย่างและการนำทางพื้นฐาน ตรวจสอบ ui ที่สร้างขึ้น คลิกผ่านหน้าที่สร้างขึ้นในตัวแก้ไข lovable คุณอาจเห็นแบบฟอร์มลงทะเบียน แดชบอร์ดที่มีกราฟหรือรายการตัวอย่าง และพื้นที่อินเทอร์เฟซแชทบอท อย่ากังวลหากมันไม่สมบูรณ์แบบ – จุดแข็งของ lovable คือการปรับปรุงอย่างต่อเนื่อง ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=development%20process,the%20sharing%20and%20feedback%20process ) ตอนนี้คุณมีจุดเริ่มต้นในการปรับแต่ง 2 2 ปรับปรุง ui/ux ด้วยการใช้คำสั่งแบบวนซ้ำ lovable ai ช่วยให้คุณสามารถ สนทนากับ ai เพื่อปรับแต่งแอป คุณสามารถเลือกองค์ประกอบและให้คำแนะนำในการแก้ไข หรือเพียงแค่บรรยายการเปลี่ยนแปลงในคำสั่งใหม่ การปรับปรุงแบบสนทนาและวนซ้ำนี้เป็นฟีเจอร์หลัก (ai จะปรับเลย์เอาต์ ข้อความ และแม้แต่ฟังก์ชันการทำงานแบบเรียลไทม์) ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=development%20process,the%20sharing%20and%20feedback%20process ) นี่คือขั้นตอนการปรับปรุงบางประการ ปรับแต่งการออกแบบภาพ ตัวอย่างเช่น หากแดชบอร์ดถูกสร้างขึ้นแล้ว แต่คุณต้องการสไตล์หรือเลย์เอาต์ที่แตกต่างกัน ให้สั่ง lovable ตามนั้น prompt "ทำให้แดชบอร์ดมีกราฟวงกลมของการใช้จ่ายตามหมวดหมู่และการ์ดสรุปสำหรับ 'งบประมาณที่เหลือ' ใช้โทนสีฟ้าเขียวที่สงบสำหรับทั้งแอป " lovable จะนำการเปลี่ยนแปลงเหล่านี้ไปใช้ – เพิ่มส่วนประกอบกราฟวงกลมและปรับแต่งสีธีมตามที่ร้องขอ มันปฏิบัติตามหลักการ ux สมัยใหม่ ดังนั้นการเปลี่ยนแปลงควรดูเป็นมืออาชีพ ( lovable https //lovable dev/# text= ) ปรับเลย์เอาต์และข้อความ หากข้อความหรือป้ายบางอย่างไม่เหมาะสม คุณสามารถแก้ไขได้โดยตรงหรือสั่ง ai เช่น “เปลี่ยนชื่อหน้าหัวข้อ ‘ai chatbot’ เป็น ‘ถาม finbot (ผู้ช่วย ai)’ และเพิ่มคำอธิบายสั้น ๆ ด้านล่างหัวข้อ” คุณยังสามารถคลิกที่ส่วนประกอบในตัวแก้ไขและพิมพ์คำสั่ง (ฟีเจอร์ เลือกและแก้ไข ของ lovable) เพื่อทำการเปลี่ยนแปลงที่ละเอียด ( lovable https //lovable dev/# text= ) ตัวอย่างเช่น คลิกที่แบบฟอร์มลงทะเบียนและขอให้มีฟิลด์เพิ่มเติม (เช่น “ชื่อ” นอกเหนือจากอีเมล/รหัสผ่าน) และ ai จะปรับเปลี่ยนแบบฟอร์ม เพิ่มองค์ประกอบที่ขาดหายไป หากบางอย่างไม่ได้ถูกสร้างขึ้นในตอนแรก (อาจเป็นไอคอนการแจ้งเตือนหรือหน้าการตั้งค่า) คุณสามารถสั่ง “เพิ่มหน้าการตั้งค่าที่ผู้ใช้สามารถอัปเดตโปรไฟล์และเปิด/ปิดการแจ้งเตือนทางอีเมลสำหรับการแจ้งเตือนงบประมาณ ” ai จะสร้างหน้าใหม่หรือส่วนประกอบตามที่อธิบายและรวมเข้ากับการนำทางหากเหมาะสม ปรับปรุงการไหลของ ux ให้แน่ใจว่าการเดินทางของผู้ใช้ราบรื่น ตัวอย่างเช่น หลังจากเพิ่มค่าใช้จ่ายในแบบฟอร์ม แอปควรแสดงรายการที่อัปเดตหรือการยืนยัน คุณอาจสั่ง “หลังจากที่ผู้ใช้ส่งแบบฟอร์มเพิ่มค่าใช้จ่าย แสดงข้อความยืนยัน ‘เพิ่มค่าใช้จ่ายแล้ว’ และอัปเดตยอดรวมในแดชบอร์ด ” lovable สามารถแทรกตรรกะด้านหน้า (โดยใช้ js/react ภายใต้) เพื่อสะท้อนสิ่งนี้ ในขั้นตอนนี้ ข้อมูลอาจเป็นแบบสถิตหรือเก็บในสถานะชั่วคราว – เราจะเชื่อมต่อกับแบ็กเอนด์จริงในไม่ช้า ตลอดการปรับปรุงเหล่านี้, ทดสอบแอปในโหมดพรีวิว เพื่อยืนยันการเปลี่ยนแปลง ui lovable ให้การเรนเดอร์พรีวิวแบบสด ( lovable https //lovable dev/# text= ) ตัวอย่างเช่น, คุณควรจะสามารถนำทางจากหน้าเข้าสู่ระบบไปยังแดชบอร์ด (lovable อาจจะจำลองตรรกะการนำทางพื้นฐาน) เป้าหมายคือการทำให้รูปลักษณ์และความรู้สึกของส่วนหน้าตรงกับสิ่งที่คุณต้องการสำหรับ mvp 2 3 เตรียมส่วนหน้าสำหรับการรวมกับส่วนหลัง ตอนนี้ที่ ui อยู่ในรูปแบบที่ดี, ให้แน่ใจว่าส่วนหน้าที่สร้างโดย lovable พร้อมที่จะเชื่อมต่อกับ back4app (ส่วนหลังของเรา) lovable รองรับการเรียก api ภายนอกและการรวมกับฐานข้อมูล ( lovable https //lovable dev/# text= ) เราจะใช้สิ่งนั้นสำหรับส่วนหลัง parse ของเรา เพิ่ม api placeholders ระบุว่าฟรอนต์เอนด์ต้องสื่อสารกับแบ็กเอนด์ที่ไหน จุดที่น่าจะมี ได้แก่ เมื่อผู้ใช้ลงทะเบียนหรือเข้าสู่ระบบ (เพื่อเรียก api ลงทะเบียน/เข้าสู่ระบบ), เมื่อเพิ่มธุรกรรม (เพื่อ post ค่าใช้จ่ายไปยังแบ็กเอนด์), เมื่อดึงข้อมูลแดชบอร์ด (เพื่อ get ยอดรวมล่าสุด), และเมื่อ ai แชทบอทขอคำแนะนำ (เพื่อเรียก endpoint ของแบ็กเอนด์ที่เรียกใช้ ai) ใน lovable, คุณอาจยังไม่มีการเรียก api จริง แต่คุณสามารถวางฟังก์ชันหรือความคิดเห็นในโค้ดเป็นการเตือนความจำได้ ตัวอย่างเช่น ในตัวจัดการ onsubmit ของฟอร์มค่าใช้จ่าย ให้รวมความคิดเห็นหรือโค้ดจำลองเช่น // todo เรียก api แบ็กเอนด์เพื่อบันทึกค่าใช้จ่าย เชื่อมต่อกับ back4app (parse) sdk หรือ api lovable อนุญาตให้รวมแพ็กเกจ npm และทำการเรียก fetch คุณมีสองตัวเลือกหลักสำหรับการรวม ใช้ parse rest/graphql api คุณสามารถให้ lovable เรียก endpoint rest ของ back4app โดยตรงผ่าน fetch ตัวอย่างเช่น หลังจากที่เราตั้งค่าชั้นแบ็กเอนด์แล้ว การเรียก api เพื่อสร้างธุรกรรมใหม่อาจดูเหมือนการ post ไปที่ https //parseapi back4app com/classes/transaction พร้อมกับ headers ที่เหมาะสม ใน lovable, คุณจะรวมสิ่งนี้ในตรรกะการส่งฟอร์ม (เราจะครอบคลุม api และคีย์ที่แน่นอนในส่วนแบ็กเอนด์ ) ใช้ parse javascript sdk เนื่องจาก lovable อนุญาตให้คุณซิงค์โค้ดไปยัง github และแก้ไข คุณสามารถติดตั้ง parse js sdk เพื่อการรวมฟรอนต์เอนด์ที่สะดวกยิ่งขึ้น อย่างไรก็ตาม เพื่อความเรียบง่าย นักพัฒนาหลายคนใช้การเรียก rest โดยตรงหรือการเรียกฟังก์ชันคลาวด์สำหรับ mvp ทดสอบด้วยข้อมูลจำลอง ก่อนที่แบ็กเอนด์จริงจะพร้อม คุณสามารถจำลองการเรียก api ใน lovable ได้ ตัวอย่างเช่น คุณสามารถให้ฟอร์มค่าใช้จ่ายเพิ่มรายการไปยังรายการท้องถิ่นที่เติมเต็มแดชบอร์ด (สถานะชั่วคราว) สิ่งนี้ช่วยให้แน่ใจว่าการไหลของฟรอนต์เอนด์ทำงาน เมื่อแบ็กเอนด์ออนไลน์ คุณจะเปลี่ยนส่วนเหล่านี้ด้วยการเรียก api จริง เมื่อสิ้นสุดขั้นตอนนี้ คุณควรมี ฟรอนต์เอนด์ที่ออกแบบเสร็จสมบูรณ์ สำหรับผู้ช่วยการเงินส่วนบุคคลของคุณ – ทั้งหมดสร้างและปรับปรุงผ่านการกระตุ้นด้วยภาษาธรรมชาติ คุณเป็นเจ้าของโค้ดนี้ (lovable อนุญาตให้คุณส่งออกหรือซิงค์ไปยัง github ของคุณ) ( lovable https //lovable dev/# text=image%3a%20you%20own%20the%20code ) ตอนนี้ถึงเวลาสร้างแบ็กเอนด์ที่จะขับเคลื่อนข้อมูลและความสามารถ ai ของแอปนี้ 3\ การดำเนินการ backend ด้วย back4app (parse) สำหรับ backend เราใช้ back4app , บริการโฮสต์สำหรับแพลตฟอร์ม parse แบบโอเพนซอร์ส back4app ให้บริการ backend ที่สามารถปรับขนาดได้พร้อมฐานข้อมูล การตรวจสอบสิทธิ์ผู้ใช้ ฟังก์ชันคลาวด์ และอื่น ๆ ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=compared%20to%20individual%20setups %20,and%20integration%20with%20other%20services ) ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=key%20takeaways ) ซึ่งหมายความว่าคุณสามารถมุ่งเน้นไปที่ตรรกะของแอปของคุณโดยไม่ต้องกังวลเกี่ยวกับการตั้งค่าเซิร์ฟเวอร์หรือการปรับขนาด เราจะตั้งค่ารูปแบบฐานข้อมูลสำหรับการเงิน ดำเนินการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัย และเขียนฟังก์ชันคลาวด์สำหรับตรรกะหลัก (งบประมาณ การแจ้งเตือน ข้อมูลเชิงลึกจาก ai) 3 1 ตั้งค่าแอป back4app และฐานข้อมูลของคุณ สร้างแอป back4app ลงชื่อเข้าใช้ back4app และสร้างแอปพลิเคชันใหม่ (หากคุณทำตามคำแนะนำของ llm คุณอาจทำสิ่งนี้ในระหว่างการวางแผน) ( วิธีสร้างแบ็กเอนด์ผู้ช่วย ai คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=at%20this%20stage%20of%20the,the%20required%20cloud%20code%20functions ) back4app จะจัดเตรียมฐานข้อมูล parse ให้กับคุณ ในแดชบอร์ดของแอปของคุณ ให้เปิด database browser เพื่อกำหนดคลาส (ตาราง) สำหรับข้อมูลของคุณ กำหนดโมเดลข้อมูล ตามฟีเจอร์ของเรา วางแผนสามคลาสหลัก ผู้ใช้ – back4app มีคลาส ผู้ใช้ ที่สร้างขึ้นมาเพื่อการตรวจสอบสิทธิ์อยู่แล้ว เราสามารถขยายมันด้วยฟิลด์เพิ่มเติมหากจำเป็น (เช่น แฟลก “พรีเมียม” หรือ id ลูกค้า stripe ดูการสร้างรายได้ในภายหลัง) ธุรกรรม – เพื่อเก็บข้อมูลค่าใช้จ่าย/รายได้แต่ละรายการ ฟิลด์ทั่วไป จำนวน (หมายเลข) – บวกสำหรับรายได้, ลบสำหรับค่าใช้จ่าย หรือเพียงแค่บวกเสมอพร้อมกับฟิลด์ประเภทแยกต่างหาก หมวดหมู่ (string) – เช่น “อาหาร”, “ค่าเช่า”, “ความบันเทิง” วันที่ (วันที่) – เมื่อการทำธุรกรรมเกิดขึ้น ผู้ใช้ (pointer< user>) – ตัวชี้ไปยังผู้ใช้ที่เป็นเจ้าของธุรกรรมนี้ (ไม่บังคับ) คำอธิบาย (สตริง) – หมายเหตุเกี่ยวกับการทำธุรกรรม งบประมาณ – เพื่อเก็บข้อมูลงบประมาณ คุณอาจมีงบประมาณต่อหมวดหมู่หรืองบประมาณรายเดือนทั่วไป เดือน (string หรือ date) – เช่น “2025 03” เพื่อระบุเดือน หมวดหมู่ (สตริง, ไม่บังคับ) – หากมีการจัดทำงบประมาณตามหมวดหมู่ (หรือมีค่าพิเศษเช่น “ทั้งหมด” สำหรับงบประมาณรวม) จำนวน (หมายเลข) – ขีดจำกัดงบประมาณสำหรับเดือนนั้น (และหมวดหมู่) ผู้ใช้ (pointer< user>) – เจ้าของ ตั้งค่าความปลอดภัยระดับคลาส ก่อนเขียนโค้ด ให้กำหนดกฎความปลอดภัยเพื่อให้ข้อมูลแยกตามผู้ใช้ parse ใช้ acl (access control lists) และ class level permissions (clp) เพื่อปกป้องข้อมูล โดยค่าเริ่มต้น ทำให้คลาส transaction และ budget เข้าถึงได้เฉพาะเจ้าของเท่านั้น ใน back4app ให้ไปที่การตั้งค่าของแต่ละคลาส ความปลอดภัย ปิดการเข้าถึงการอ่าน/เขียนสาธารณะ เปิดใช้งานการอ่าน/เขียนสำหรับ “ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์” (หากคุณต้องการให้ผู้ใช้ที่ล็อกอินเข้าถึงได้, หรือ ดีกว่า ใช้ acl ต่อวัตถุ) เราจะบังคับใช้ acl ระดับวัตถุเมื่อบันทึกวัตถุแต่ละรายการ transaction หรือ budget จะได้รับ acl ที่อนุญาตให้เฉพาะผู้ใช้ที่เป็นเจ้าของ (และอาจมีบทบาทผู้ดูแลระบบ) เท่านั้นที่สามารถอ่านได้ สิ่งนี้ทำให้ข้อมูลทางการเงินของผู้ใช้คนหนึ่งยังคงเป็นส่วนตัวจากผู้อื่น ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=authorization%20determines%20if%20an%20authenticated,two%20levels%20of%20access%20controls ) ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=parse%20uses%20access%20control%20lists,will%20always%20override%20acl%20permissions ) 3 2 นำไปใช้การตรวจสอบสิทธิ์ผู้ใช้ back4app’s parse server ทำให้การตรวจสอบสิทธิ์ผู้ใช้ง่ายขึ้น ลงทะเบียน & เข้าสู่ระบบ คลาส user จัดการสิ่งนี้ได้ทันที คุณสามารถใช้การเรียก rest api หรือ parse sdk เพื่อให้ผู้ใช้ลงทะเบียนและเข้าสู่ระบบ ตัวอย่างเช่น ผ่าน rest, การ post ไปที่ /users พร้อมกับ username และ password จะสร้างผู้ใช้; การ post ไปที่ /login ด้วยข้อมูลรับรองจะเข้าสู่ระบบ (คืนค่าโทเค็นเซสชัน) หากใช้ parse js sdk บนฝั่งผู้ใช้ มันจะมี parse user signup() และ parse user login() วิธีการ oauth (ตัวเลือก) หากคุณต้องการเข้าสู่ระบบด้วยโซเชียล (google, facebook, ฯลฯ) parse รองรับสิ่งเหล่านี้ผ่าน sdk โดยการเชื่อมโยงข้อมูลการตรวจสอบสิทธิ์ สำหรับ mvp การใช้ชื่อผู้ใช้/อีเมลและรหัสผ่านเป็นวิธีที่ง่ายที่สุด การตรวจสอบอีเมล พิจารณาเปิดใช้งานการตรวจสอบอีเมลใน back4app (เพื่อให้ผู้ใช้ยืนยันอีเมลของตน) ซึ่ง parse สามารถจัดการได้โดยการส่งอีเมล นี่เป็นตัวเลือกแต่ดีสำหรับแอป b2c ในการผลิต แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย ห้ามส่งหรือเก็บรหัสผ่านในรูปแบบข้อความธรรมดา parse จะจัดการการแฮชภายใน คุณควรบังคับใช้รหัสผ่านที่แข็งแกร่งหรือใช้การตรวจสอบสิทธิ์จากบุคคลที่สามเพื่อความปลอดภัย นอกจากนี้ให้ใช้ https (จุดสิ้นสุดของ back4app เป็น https โดยค่าเริ่มต้น) เพื่อไม่ให้ข้อมูลประจำตัวถูกส่งในรูปแบบข้อความธรรมดาผ่านเครือข่าย 3 3 เชื่อมต่อ frontend กับ backend ตอนนี้ที่โมเดลข้อมูลและการตรวจสอบสิทธิ์พร้อมแล้ว เชื่อมต่อ front end ที่น่ารักของคุณกับ backend นี้ ข้อมูลรับรอง api ใน back4app, ดึง app id และ javascript key (หากใช้ client sdk) หรือ rest api key (สำหรับการเรียก rest โดยตรง) ข้อมูลเหล่านี้สามารถพบได้ในการตั้งค่าแอป > ความปลอดภัย & คีย์ อย่าเปิดเผย master key บนไคลเอนต์ – มันใช้ได้เฉพาะสำหรับการใช้งานฝั่งเซิร์ฟเวอร์ที่มีสิทธิ์เต็มที่ ตัวอย่าง rest api เพื่อสร้างธุรกรรมใหม่ผ่าน rest คุณจะส่ง http post post https //parseapi back4app com/classes/transaction headers x parse application id \<your app id> x parse rest api key \<your rest key> x parse session token \<user’s session token (after login)> body (json) { "amount" 50, "category" "food", "date" "2025 03 13t18 30 00z", "user" { " type" "pointer", "classname" " user", "objectid" "\<currentuserid>" } } การตอบสนองจะรวมถึง objectid ของธุรกรรมใหม่ ในทางปฏิบัติ หากใช้ js sdk คุณสามารถเรียกใช้ parse user login() จากนั้นสร้าง parse object สำหรับ “transaction” และบันทึก ซึ่งจะทำให้การเรียก http เป็นเรื่องง่าย ในส่วนหน้าของ lovable คุณสามารถรวมสคริปต์เล็ก ๆ เพื่อทำเช่นนี้เมื่อแบบฟอร์มค่าใช้จ่ายถูกส่ง เคล็ดลับ ใช้โทเค็นเซสชันจากการเข้าสู่ระบบเพื่อยืนยันคำขอถัดไป (เก็บไว้อย่างปลอดภัย เช่น ในหน่วยความจำหรือที่เก็บข้อมูลท้องถิ่นตามที่จำเป็น) ฟังก์ชันคลาวด์สำหรับตรรกะธุรกิจ ในขณะที่การเรียก rest โดยตรงจัดการ crud พื้นฐาน สำหรับการดำเนินการที่ซับซ้อนมากขึ้นคุณควรใช้ ฟังก์ชันคลาวด์ ฟังก์ชันคลาวด์ parse ทำงานบนเซิร์ฟเวอร์ของ back4app (node js) และอนุญาตให้มีตรรกะที่กำหนดเองในลักษณะที่ปลอดภัยและปรับขนาดได้ ( วิธีสร้างแบ็กเอนด์ผู้ช่วย ai คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=to%20implement%20the%20backend%20logic%2c,side%20javascript%20code ) ตัวอย่างเช่น เราสามารถเขียนฟังก์ชันเพื่อคำนวณการใช้งบประมาณหรือเพื่อดึงแดชบอร์ดที่สรุปในครั้งเดียว // in cloud code main js parse cloud define("getdashboarddata", async (request) => { const currentuser = request user; if (!currentuser) throw "not authorized"; // query transactions for this user for the current month const startofmonth = ; // e g first day of month const endofmonth = ; // e g first day of next month const query = new parse query("transaction"); query equalto("user", currentuser); query greaterthanorequalto("date", startofmonth); query lessthan("date", endofmonth); const results = await query find({ usemasterkey false }); // sum the amounts by category etc let totalspent = 0; let bycategory = {}; results foreach(tx => { }); // also get budget for this month return { totalspent, bycategory, budgetlimit, remaining budgetlimit totalspent }; }); ฟังก์ชันนี้ (เพียงแค่เป็นการแสดงตัวอย่าง) สอบถามฐานข้อมูลและส่งคืนข้อมูลที่มีโครงสร้างสำหรับแดชบอร์ด ฟรอนต์เอนด์ที่น่ารักของคุณสามารถเรียกใช้มันผ่าน rest api post /functions/getdashboarddata พร้อมกับโทเค็นเซสชัน และรับการตอบกลับในรูปแบบ json การใช้ cloud functions จะทำให้การจัดการตรรกะเป็นศูนย์กลางและลดการเรียกหลายครั้งจากไคลเอนต์ ข้อมูลเชิงลึกทางการเงินอัตโนมัติ (การรวม ai) ฟีเจอร์ที่โดดเด่นคือคำแนะนำที่ขับเคลื่อนด้วย ai สำหรับสิ่งนี้ คุณสามารถรวม llm (เช่น gpt 4) ในแบ็กเอนด์เพื่อวิเคราะห์ข้อมูลผู้ใช้และสร้างคำแนะนำ หนึ่งในวิธีการคือการใช้ฟังก์ชันคลาวด์ที่เมื่อถูกเรียก จะรวบรวมธุรกรรมล่าสุดของผู้ใช้ จัดรูปแบบคำสั่ง และเรียก api ของ openai สำคัญ เก็บคีย์ api ของ openai ของคุณอย่างปลอดภัยใน back4app คุณสามารถเพิ่มเป็นตัวแปรสภาพแวดล้อม (back4app อนุญาตให้เพิ่มตัวแปรสภาพแวดล้อมที่กำหนดเองหรือใช้การกำหนดค่าใน cloud code) และ อย่าเปิดเผยต่อสาธารณะ ( stripe & การชำระเงิน เอกสาร lovable https //docs lovable dev/tips tricks/setting up payments# text=%2a%20use%20stripe%e2%80%99s%20no,paste%20the%20link%20into%20lovable ) ( วิธีสร้างแบ็กเอนด์ผู้ช่วย ai คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so ) ตัวอย่างเช่น ใน cloud code const openai api key = process env openai api key; // stored in back4app config const openai = require('openai'); // (after adding the openai npm package in package json) const openai = new openai(openai api key); parse cloud define("getspendingadvice", async (request) => { const user = request user; if (!user) throw "unauthorized"; // 1 fetch user’s transactions (e g , last 30 days) const txquery = new parse query("transaction"); txquery equalto("user", user); txquery greaterthan("date", / one month ago /); const txns = await txquery find(); const summary = summarizetransactions(txns); // e g , total spending, top categories // 2 call openai api with a prompt const prompt = `you are a financial assistant the user spent ${summary total} this month major categories ${summary topcategories} provide one personalized tip to save money next month `; const response = await openai complete({ prompt parameters }); return { advice response text }; }); เมื่อหน้าจอแชทบอทฟรอนต์เอนด์ที่น่ารักต้องการข้อความใหม่ มันจะเรียก getspendingadvice ฟังก์ชันคลาวด์ทำงานหนัก (ดึงข้อมูล, เรียก ai) และส่งคืนข้อความคำแนะนำเพื่อแสดง นี่ช่วยให้คีย์ openai และตรรกะของคุณอยู่บนเซิร์ฟเวอร์ รักษาความปลอดภัย 3 4 การจัดการการแจ้งเตือนและการเตือนภัย แอปการเงินส่วนบุคคลมักจะส่งการแจ้งเตือน (เช่น “คุณเกินงบประมาณของคุณ” หรือการเตือนให้ป้อนค่าใช้จ่าย) โดยใช้ back4app คุณมีตัวเลือกไม่กี่อย่าง การแจ้งเตือนแบบพุช หากคุณสร้างแอปมือถือหรือ pwa, back4app (parse) สามารถรวมเข้ากับบริการพุชของ apple/google ได้ คุณจะต้องติดตั้ง parse push sdk และใช้ cloud functions หรือ cloud jobs เพื่อส่งการแจ้งเตือนเมื่อเงื่อนไขตรงตามที่กำหนด การแจ้งเตือนทางอีเมล/sms คุณสามารถใช้ cloud code เพื่อส่งอีเมลได้ parse server อนุญาตให้ส่งอีเมลผ่าน mailgun, sendgrid, ฯลฯ โดยการกำหนดค่าอะแดปเตอร์อีเมล สำหรับ mvp คุณอาจข้ามขั้นตอนนี้ไป แต่ก็มีให้ใช้งาน นอกจากนี้ยังสามารถใช้ api ของบริการ (twilio สำหรับ sms, ฯลฯ) จาก cloud code เมื่อเกิดการกระตุ้นบางอย่าง (เช่น งบประมาณเกิน) ตัวอย่าง หากคุณต้องการแจ้งเตือนเมื่อการใช้จ่าย > งบประมาณ, คุณสามารถเพิ่ม cloud function checkbudgetstatus ที่คำนวณการใช้จ่าย (เช่นใน getdashboarddata ) และหากเกินงบประมาณ, จะใช้ api อีเมลเพื่อส่งคำเตือนไปยังอีเมลของผู้ใช้ ซึ่งสามารถเรียกใช้เป็นระยะ (หรือกระตุ้นหลังจากการทำธุรกรรมใหม่แต่ละครั้ง) 3 5 แนวปฏิบัติด้านความปลอดภัยที่ดีที่สุด ความปลอดภัยเป็นสิ่งสำคัญเมื่อจัดการกับข้อมูลทางการเงิน การควบคุมการเข้าถึงข้อมูล เราตั้งค่า clps/acls – ตรวจสอบให้แน่ใจว่าการเขียนฐานข้อมูลแต่ละครั้งตั้งค่า acl เพื่อให้เฉพาะเจ้าของ (และผู้ดูแลระบบ) เท่านั้นที่สามารถอ่านได้ ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=%2a%20class,for%20anonymous%20users%20using%20sessions ) ในด้านลูกค้า อย่าคิดว่า ผู้ใช้ไม่สามารถดัดแปลงข้อมูลได้; เซิร์ฟเวอร์ควรบังคับใช้การตรวจสอบ (เช่น ใน cloud functions, ใช้ request user จากเซสชันเพื่อกรองข้อมูล ไม่ใช่ userid ที่จัดเตรียมโดยลูกค้า) อย่าเปิดเผยความลับ คีย์ api ทั้งหมด (back4app master key, openai key, stripe secret key, ฯลฯ) ต้องอยู่ในแบ็กเอนด์เท่านั้น อย่าวางพวกเขาในโค้ดด้านหน้า หรือคำสั่ง lovable lovable มีฟีเจอร์ “เพิ่มคีย์ api” สำหรับการจัดเก็บคีย์อย่างปลอดภัยหากจำเป็น ( stripe & payments เอกสาร lovable https //docs lovable dev/tips tricks/setting up payments# text=%2a%20use%20stripe%e2%80%99s%20no,paste%20the%20link%20into%20lovable ), และ back4app ใช้ตัวแปรสภาพแวดล้อมสำหรับสิ่งนี้ ( วิธีสร้างแบ็กเอนด์ ai assistant คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so ) ใน cloud code เข้าถึงพวกเขาผ่าน process env (ตามที่แสดงข้างต้น) ( วิธีสร้างแบ็กเอนด์ ai assistant คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so ) ด้วยวิธีนี้ แม้ว่าโค้ดด้านหน้าของคุณจะถูกตรวจสอบ คีย์ที่ละเอียดอ่อนก็จะไม่ปรากฏ ตรวจสอบข้อมูลที่ป้อน แม้ว่า lovable อาจสร้างฟอร์มพร้อมการตรวจสอบบางอย่าง แต่ควรตรวจสอบที่เซิร์ฟเวอร์ด้วย ตัวอย่างเช่น ตรวจสอบให้แน่ใจว่าจำนวนค่าใช้จ่ายไม่เป็นลบ หรือว่าเขตข้อมูลข้อความไม่ยาวเกินไป เพื่อป้องกันการใช้ผิดหรือการโจมตีด้วยการแทรก ฟังก์ชัน cloud ของ parse สามารถใช้การตรวจสอบพารามิเตอร์ (การ request params ในฟังก์ชัน cloud สามารถตรวจสอบรูปแบบที่คาดหวังได้) ใช้ https และ sdk ล่าสุด จุดสิ้นสุดของ back4app เป็น https โดยค่าเริ่มต้น ตรวจสอบให้แน่ใจว่าชื่อโดเมนที่กำหนดเองของคุณ (หากคุณใช้) ก็ต้องมีความปลอดภัยเช่นกัน ใช้ parse sdk ล่าสุดซึ่งรวมถึงแพตช์ความปลอดภัย นอกจากนี้ ให้รักษาความทันสมัยของการพึ่งพา cloud code ของคุณ (เช่น ไลบรารี stripe หรือ openai) โดยการนำไปใช้เบื้องหลังด้วยแนวทางเหล่านี้ คุณได้ตั้งรากฐานที่แข็งแกร่ง ฐานข้อมูลที่สามารถขยายได้ , การตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัย, โลจิกฝั่งเซิร์ฟเวอร์สำหรับการคำนวณทางการเงิน, และจุดเชื่อมต่อสำหรับ ai และการชำระเงิน ต่อไปเราจะสร้างรายได้จากแพลตฟอร์มนี้โดยการรวม stripe สำหรับการสมัครสมาชิก 4\ กลยุทธ์การสร้างรายได้ การรวม stripe สำหรับการสมัครสมาชิกพรีเมียม เพื่อเปลี่ยนผู้ช่วยทางการเงินของคุณให้เป็นธุรกิจ b2c ที่มีศักยภาพ คุณอาจเสนอโมเดลฟรีมีม ฟีเจอร์พื้นฐานฟรี, ฟีเจอร์ขั้นสูง (เช่น การวิเคราะห์ ai รายละเอียดหรือบัญชีไม่จำกัด) เป็น พรีเมียม เราจะใช้ stripe สำหรับการประมวลผลการชำระเงิน เนื่องจากมันรองรับการเรียกเก็บเงินแบบสมัครสมาชิกได้อย่างง่ายดาย back4app และ lovable ทั้งสองสามารถรวมเข้ากับ stripe ได้ดี – lovable ยังรองรับการใช้ stripe payment links ได้ทันทีสำหรับการตั้งค่าที่รวดเร็ว ( stripe & payments เอกสารของ lovable https //docs lovable dev/tips tricks/setting up payments# text=key%20takeaways ) เราจะครอบคลุมการรวมแบบทีละขั้นตอนโดยใช้ back4app cloud code และ api ของ stripe สำหรับโซลูชันที่แข็งแกร่ง รวมถึงการกล่าวถึงทางเลือกที่ง่ายกว่า 4 1 การตั้งค่า stripe และการสร้างผลิตภัณฑ์ สร้างบัญชี stripe หากคุณยังไม่ได้ลงทะเบียน ให้ลงทะเบียนที่ stripe ในแดชบอร์ด รับ api keys ของคุณ (คุณจะต้องใช้ secret key สำหรับการเรียกจากเซิร์ฟเวอร์และ publishable key สำหรับการใช้งานฝั่งไคลเอนต์) ( stripe back4app backend https //www back4app com/docs/cloud code functions/integrations/stripe# text=3 1%20,key ) อย่าเปิดเผย secret key ต่อสาธารณะ กำหนดข้อเสนอพรีเมียมของคุณ ใน stripe ตั้งค่า product สำหรับการสมัครสมาชิกของคุณ (เช่น “finassist premium”) และ pricing plan (เช่น $5 ต่อเดือน) คุณสามารถทำได้ในแดชบอร์ด stripe ภายใต้ products ซึ่งจะให้คุณมี price id (หรือ plan id) ที่คุณจะใช้เมื่อสร้างการสมัครสมาชิกหรือเซสชันการชำระเงิน 4 2 การรวม back4app ผ่าน cloud functions เราจะรวม stripe โดยใช้ back4app cloud code เพื่อให้การซื้อและการตรวจสอบการสมัครสมาชิกเกิดขึ้นอย่างปลอดภัยในฝั่งเซิร์ฟเวอร์ ( stripe back4app backend https //www back4app com/docs/cloud code functions/integrations/stripe# text=in%20this%20guide%2c%20we%20are,integration%20using%20a%20web%20example ) กระบวนการทั่วไป การสร้างลูกค้า เมื่อผู้ใช้เลือกพรีเมียม ให้สร้างลูกค้า stripe สำหรับพวกเขา (หากยังไม่ได้สร้าง) เราสามารถทำได้โดยอัตโนมัติเมื่อสมัครสมาชิกหรือเมื่อพยายามอัปเกรดครั้งแรก เซสชันการชำระเงิน (การสมัครสมาชิก) ใช้ checkout หรือ subscription api ของ stripe เพื่อเรียกเก็บเงินจากผู้ใช้ webhook หรือการยืนยัน หลังจากการชำระเงิน ยืนยันการสมัครสมาชิกและทำเครื่องหมายผู้ใช้ว่าเป็นพรีเมียมในฐานข้อมูลของเรา มาดำเนินการเหล่านี้กันเถอะ ติดตั้ง stripe sdk ใน cloud code ในโฟลเดอร์ cloud code ของคุณบน back4app ให้รวม stripe ใน package json ขึ้นอยู่ (เช่น, "stripe" "^12 0 0" ) จากนั้นใน main js , ให้เริ่มต้นมัน const stripe = require('stripe')(process env stripe secret key); เก็บ stripe secret key ในการตั้งค่า back4app (ภายใต้ การตั้งค่าเซิร์ฟเวอร์ > ตัวแปรสภาพแวดล้อม ) ฟังก์ชันลูกค้าและการสมัครสมาชิกของ stripe เพิ่มฟังก์ชันคลาวด์เพื่อจัดการการอัปเกรด parse cloud define("createstripecheckout", async (request) => { const user = request user; if (!user) throw "not logged in"; const email = user get("email"); // 1 create stripe customer if not exists let customerid = user get("customerid"); if (!customerid) { const customer = await stripe customers create({ email }); customerid = customer id; user set("customerid", customerid); await user save(null, { usemasterkey true }); // save customerid in user } // 2 create checkout session for subscription const session = await stripe checkout sessions create({ customer customerid, success url "https //\<your app>/premium success", // redirect url after success cancel url "https //\<your app>/upgrade", // if they cancel payment method types \["card"], mode "subscription", line items \[{ price "\<your stripe price id>", quantity 1 }] }); return { sessionid session id }; }); ฟังก์ชันคลาวด์นี้ทำสองสิ่ง ตรวจสอบให้แน่ใจว่าผู้ใช้มีบันทึกลูกค้า stripe และสร้างเซสชันการชำระเงินสำหรับการสมัครสมาชิก เซสชันนี้จะให้ url ที่ผู้ใช้จะถูกเปลี่ยนเส้นทางไปเพื่อชำระเงิน (เราจะใช้ checkout ที่นี่เพื่อความเรียบง่าย; มันจัดการ ui การชำระเงินทั้งหมด) ธงพรีเมียม เราได้เพิ่ม customerid ฟิลด์ไปยัง user สำหรับการรวม stripe (คุณสามารถเพิ่มมันได้ผ่าน back4app dashboard หรือใช้ user set ตามที่กล่าวข้างต้น) ( stripe back4app backend https //www back4app com/docs/cloud code functions/integrations/stripe# text=we%20will%20also%20add%20two,user%20to%20its%20stripe%20counterpart ) นอกจากนี้ยังเพิ่มฟิลด์ boolean ispremium (ค่าเริ่มต้นเป็น false) เราจะตั้งค่า ispremium=true เมื่อการสมัครสมาชิกเริ่มใช้งาน เปลี่ยนเส้นทางไปยัง stripe checkout ในส่วนหน้าของ lovable ของคุณ เมื่อผู้ใช้คลิก “อัปเกรดเป็นพรีเมียม” ให้เรียกใช้ createstripecheckout ฟังก์ชันคลาวด์ (เช่น ผ่าน rest post /functions/createstripecheckout พร้อมกับโทเค็นเซสชัน) มันจะส่งกลับ sessionid ใช้ stripe js ในส่วนหน้าเพื่อเปลี่ยนเส้นทาง การเป็นสิ่งที่น่ารักในฐานะที่เป็น front end แบบไม่มีโค้ดอาจไม่รวม stripe js โดยอัตโนมัติ แต่คุณสามารถแทรกสคริปต์นี้ในส่วนประกอบ html/js หรือเป็นส่วนหนึ่งของตัวจัดการ onclick โดยใช้ตัวแก้ไข (หรือหลังจากการส่งออกโค้ด) การจัดการหลังการชำระเงิน หลังจากที่ผู้ใช้ชำระเงินแล้ว, stripe checkout จะนำพวกเขาไปยัง success url ที่เราจัดเตรียมไว้ (คุณสามารถสร้างหน้า “ขอบคุณ” ง่ายๆ ใน lovable ที่ /premium success ) อย่างไรก็ตาม ณ จุดนี้ การชำระเงินเสร็จสิ้นแล้ว แต่ระบบหลังบ้านของเราไม่ได้รับข้อมูลเพื่ออัปเดต ispremium มีสองวิธีในการจัดการกับเรื่องนี้ เพื่อความเรียบง่าย เราจะใช้วิธี (a) parse cloud define("verifysubscription", async (request) => { const user = request user; if (!user) throw "not logged in"; const customerid = user get("customerid"); if (!customerid) return { ispremium false }; // get all subscriptions for the customer from stripe const subs = await stripe subscriptions list({ customer customerid, status "active" }); const hasactive = subs data && subs data length > 0; if (hasactive) { user set("ispremium", true); await user save(null, { usemasterkey true }); } return { ispremium hasactive }; }); หน้าสำเร็จของคุณสามารถเรียก verifysubscription หากมันคืนค่า ispremium\ true , คุณจะรู้ว่าผู้ใช้ได้รับการอัปเกรดแล้ว (และแบ็คเอนด์ได้ทำเครื่องหมายพวกเขาแล้ว) ในการเข้าสู่ระบบครั้งถัดไป หรือการใช้งานแอปครั้งถัดไป ฝั่งหน้าสามารถตรวจสอบ user อ็อบเจ็กต์ที่ ispremium ฟิลด์ (ผ่าน parse sdk หรือ /users/me get) เพื่อควบคุมฟีเจอร์ 4 3 จำกัดฟีเจอร์พรีเมียม เมื่อมีการตั้งค่าการชำระเงินแล้ว ให้ดำเนินการกำหนดการเข้าถึงในทั้งส่วนหน้าและส่วนหลัง ส่วนติดต่อผู้ใช้/ประสบการณ์ผู้ใช้ด้านหน้า หาก user ispremium เป็นเท็จ คุณสามารถปิดการใช้งานหรือซ่อนฟีเจอร์พรีเมียมได้ ตัวอย่างเช่น หาก “การวิเคราะห์รายละเอียด ai” เป็นฟีเจอร์เฉพาะพรีเมียม ปุ่มหรือรายการเมนูสำหรับฟีเจอร์นี้ควรไม่แสดงหรือแสดงข้อความ “อัปเกรดเพื่อเข้าถึงฟีเจอร์นี้” หลังจากอัปเกรด ให้แสดงฟีเจอร์เหล่านี้อีกครั้ง เนื่องจากส่วนหน้าสามารถรับสถานะ ispremium ของผู้ใช้หลังจากเข้าสู่ระบบ (เก็บไว้หรือดึงผ่านการเรียก api) ให้ใช้การเรนเดอร์ตามเงื่อนไข (lovable อาจอนุญาตให้เพิ่มเงื่อนไขในตรรกะของมัน หรือคุณจัดการในโค้ดหลังจากการส่งออก) การบังคับใช้ด้านหลัง อย่าพึ่งพาส่วนหน้าเพียงอย่างเดียว – ต้องบังคับใช้ที่ด้านหลังด้วย ตัวอย่างเช่น หากมีฟังก์ชัน cloud getdetailedreport ที่เป็นพรีเมียม ให้ตรวจสอบ request user get("ispremium") ที่ด้านบนและโยนข้อผิดพลาดหรือปฏิเสธหากไม่ใช่พรีเมียม นอกจากนี้ หากคุณมีคลาสแยกสำหรับข้อมูลพรีเมียม ให้ใช้ clps หรือบทบาท คุณอาจสร้าง บทบาท “พรีเมียม” ใน parse และมอบหมายผู้ใช้ที่จ่ายเงินให้กับบทบาทนั้น จากนั้นการอนุญาตคลาสหรือการเข้าถึงฟังก์ชันบางอย่างอาจถูกจำกัดให้กับบทบาทนั้น parse clp รองรับการเข้าถึงตามบทบาท ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=controls,of%20access%20controls ) นี่เป็นวิธีที่ซับซ้อนมากขึ้น แต่เมื่อขยายขึ้น มันเป็นวิธีที่สะอาดในการจัดการสิทธิ์ การทดสอบ จำลองทั้งสองสถานการณ์ – ผู้ใช้ฟรีและผู้ใช้พรีเมียม ตรวจสอบให้แน่ใจว่าผู้ใช้ฟรีที่ทำการกระทำพรีเมียมจะถูกปฏิเสธอย่างสุภาพ (เช่น ส่วนหน้าจะแสดงข้อความอัปเกรดแทนที่จะเรียก api หรือหากเรียก api ข้อผิดพลาดจะถูกจัดการ) ตรวจสอบให้แน่ใจว่าผู้ใช้พรีเมียมไม่มีอุปสรรค 4 4 ทางเลือกในการสร้างรายได้อย่างรวดเร็วด้วยลิงก์การชำระเงิน (การกล่าวถึงที่เลือกได้) หากสิ่งที่กล่าวมาข้างต้นรู้สึกซับซ้อนสำหรับ mvp โปรดทราบว่า stripe payment links เสนอวิธีการที่รวดเร็วและไม่ต้องเขียนโค้ด คุณสามารถสร้างลิงก์การชำระเงินใน stripe สำหรับผลิตภัณฑ์การสมัครสมาชิกของคุณและเพียงแค่ฝังลิงก์นั้นในแอปของคุณ (เช่น ปุ่ม “อัปเกรด” จะเปิดหน้าชำระเงินที่โฮสต์โดย stripe) เอกสารของ lovable ยังแนะนำสิ่งนี้สำหรับกระบวนการชำระเงินที่รวดเร็ว ( stripe & payments เอกสารของ lovable https //docs lovable dev/tips tricks/setting up payments# text=there%20are%20many%20ways%20to,secure%20and%20efficient%20payment%20processing ) ( stripe & payments เอกสารของ lovable https //docs lovable dev/tips tricks/setting up payments# text=key%20takeaways ) ข้อจำกัดคือคุณจะต้องทำการปรับยอดด้วยตนเองว่าผู้ใช้คนไหนชำระเงิน (เช่น ผ่าน csv หรือแดชบอร์ดของ stripe) เว้นแต่คุณจะยังคงใช้ webhook สำหรับการทดลองหรือโปรโตไทป์ ลิงก์การชำระเงินก็ใช้ได้ ผู้ใช้คลิกลิงก์ ชำระเงินที่เว็บไซต์ของ stripe และคุณอัปเกรดพวกเขาด้วยตนเองใน back4app โดยการตั้งค่าฟิลด์ แต่สำหรับวิธีการที่สามารถขยายได้ วิธีการที่เรารายละเอียดไว้จะราบรื่นกว่าสำหรับประสบการณ์ของผู้ใช้ (อัปเกรดบัญชีโดยอัตโนมัติ) 4 5 การพิจารณาหลังการสมัครสมาชิก ใบเสร็จและใบแจ้งหนี้ stripe สามารถจัดการการส่งอีเมลใบเสร็จได้ คุณยังสามารถรวมพอร์ทัลลูกค้าของ stripe เพื่อจัดการการสมัครสมาชิก (ให้ผู้ใช้ยกเลิกหรืออัปเดตบัตรด้วยตนเอง) ระยะเวลาทดลอง คุณสามารถเสนอระยะเวลาทดลองโดยการสร้างการสมัครสมาชิก stripe ด้วย trial days หรือโดยการตั้งค่าเพียงแค่ ispremium หลังจากระยะเวลา นี่สามารถจัดการได้ผ่านการตั้งค่าของ stripe แต่ต้องแน่ใจว่ามันสะท้อนในตรรกะของแอปของคุณ (เช่น แสดงสถานะ “ทดลอง”) การขยายการชำระเงิน stripe เองสามารถขยายได้ดี เมื่อคุณมีผู้ใช้มากขึ้น ให้ติดตามเหตุการณ์ webhook และตรวจสอบให้แน่ใจว่าฟังก์ชัน cloud ของคุณสำหรับ stripe ได้รับการปรับให้เหมาะสม (อย่าดึงข้อมูลที่ไม่จำเป็น) เราจะพูดถึงการขยายเพิ่มเติมในภายหลัง ในขั้นตอนนี้ คุณมีวิธีการที่จะ สร้างรายได้จากแอปของคุณผ่านการสมัครสมาชิก – ผู้ใช้สามารถอัปเกรดเพื่อปลดล็อกฟีเจอร์พรีเมียม และแบ็กเอนด์ของคุณรู้ว่าใครเป็นพรีเมียม ตอนนี้มาพูดถึงวิธีการ ขยาย แพลตฟอร์มนี้ให้กับผู้ใช้จำนวนมากและทำให้มันมีประสิทธิภาพและปลอดภัยในระยะยาว 5\ การพิจารณาการขยายและความปลอดภัย การสร้างแพลตฟอร์ม b2c ที่ประสบความสำเร็จหมายถึงการวางแผนสำหรับการเติบโต ทั้ง lovable ai และ back4app เหมาะสมสำหรับการขยายตัว lovable สร้างส่วนหน้าที่มีคุณภาพสำหรับการผลิต และ back4app (parse) เป็นบริการที่จัดการโดยอัตโนมัติซึ่งจัดการการขยายตัว (การจัดกลุ่มฐานข้อมูล, โครงสร้างพื้นฐานที่ปรับขนาดอัตโนมัติ) สำหรับคุณ ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=key%20takeaways ) อย่างไรก็ตาม คุณควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการออกแบบแอปของคุณเพื่อให้แน่ใจว่าสามารถจัดการกับภาระที่เพิ่มขึ้นได้อย่างมีประสิทธิภาพ 5 1 การจัดโครงสร้างข้อมูลอย่างมีประสิทธิภาพ การออกแบบโมเดล ทบทวนสคีมาข้อมูลของคุณเมื่อจำนวนผู้ใช้เพิ่มขึ้น คลาสที่เราสร้างขึ้น (ผู้ใช้, การทำธุรกรรม, งบประมาณ) ควรเพียงพอ แต่ควรพิจารณาปริมาณ ผู้ใช้คนเดียวอาจบันทึกการทำธุรกรรมได้หลายพันรายการ ฐานข้อมูล parse (ที่รองรับโดย mongodb หรือ postgresql บน back4app ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=enabling%20developers%20to%20launch%20back,as%20database%20management%2c%20authentication%2c%20live )) สามารถจัดการกับคอลเลกชันขนาดใหญ่ได้ แต่คุณอาจต้องการดัชนีในฟิลด์ที่ถูกสอบถามบ่อย โดยค่าเริ่มต้น parse จะทำดัชนี objectid และ pointers; สำหรับฟิลด์อื่น ๆ เช่น วันที่ หรือ หมวดหมู่ , ควรพิจารณาสร้างดัชนีฐานข้อมูลหากจำเป็น (back4app อนุญาตให้เพิ่มดัชนีผ่านตัวแก้ไขสคีมาหรือโปรแกรมmatically) การแยกความกังวล หากแอปของคุณขยาย (เช่น การเพิ่มการลงทุนหรือข้อมูลอื่น ๆ) ให้สร้างคลาสแยกต่างหากแทนที่จะทำให้คอลเลกชันหนึ่งมีข้อมูลหลายประเภท สิ่งนี้จะทำให้การสอบถามแต่ละครั้งมีความชัดเจนและมีประสิทธิภาพ 5 2 การเพิ่มประสิทธิภาพการสอบถาม การสอบถามที่ไม่มีประสิทธิภาพอาจทำให้แอปของคุณช้าลงเมื่อข้อมูลเพิ่มขึ้น ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการสอบถาม parse เหล่านี้ ใช้การค้นหาที่มีดัชนี “parse ใช้ดัชนีเพื่อให้การค้นหาของคุณสามารถดูข้อมูลในกลุ่มย่อยแทนที่จะเป็นการสแกนทั้งหมด” ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text= ) ชื่นชอบการค้นหาที่ใช้เงื่อนไขความเท่ากันหรือช่วงในฟิลด์ที่มีดัชนี ตัวอย่างเช่น, query equalto("user", currentuser) หรือช่วงวันที่ใช้ดัชนี ในขณะที่การค้นหาสำหรับ != หรือ regex ที่ซับซ้อนจะไม่ใช้ดัชนีและควรหลีกเลี่ยง ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text=queries%20that%20use%20indexing%20very,comparative%20queries%2c%20like%20%e2%80%9cgreater%20than%e2%80%9d ) แทนที่จะ notequalto("category", "food") , ค้นหาสำหรับหมวดหมู่อื่น ๆ ที่เฉพาะเจาะจงหรือปรับโครงสร้างตรรกะ เขียนการค้นหาที่จำกัด ดึงข้อมูลที่คุณต้องการเท่านั้น parse อนุญาตให้คุณเลือกฟิลด์เฉพาะและตั้งค่าขีดจำกัด โดยค่าเริ่มต้น การค้นหาจะคืนค่าผลลัพธ์สูงสุด 100 รายการ ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text=a%20query%20limit%20is%20100,the%20number%20of%20results%20returned ) ใช้การแบ่งหน้า ( skip / limit ) สำหรับรายการธุรกรรมแทนที่จะดึงข้อมูลหลายพันรายการในครั้งเดียว ตัวอย่างเช่น เพื่อแสดงประวัติธุรกรรม ให้ดึง 50 รายการในครั้งเดียว (โดยใช้ limit 50 ) และนำไปใช้ “โหลดเพิ่มเติม” ใน ui หลีกเลี่ยงการรวมข้อมูลขนาดใหญ่ในไคลเอนต์ หากคุณต้องการรวมข้อมูล (เช่น, ผู้ใช้ + ธุรกรรม + งบประมาณ) อาจมีประสิทธิภาพมากกว่าที่จะทำใน cloud code (เซิร์ฟเวอร์) และส่งผลลัพธ์ที่รวมกันหนึ่งรายการ แทนที่ไคลเอนต์จะทำการร้องขอและรวมหลายรายการ เราใช้วิธีนี้ใน getdashboarddata ฟังก์ชัน cloud 5 3 กลยุทธ์การแคช การแคชฝั่งลูกค้า sdk ของ parse รองรับการแคชผลลัพธ์การค้นหาในเครื่อง ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text=caching%20queries%20will%20increase%20your,requests%20have%20not%20yet%20completed ) ตัวอย่างเช่น บนมือถือ คุณสามารถใช้ query cachepolicy = cachepolicy cache then network เพื่อแสดงข้อมูลที่แคชอย่างรวดเร็วในขณะที่ดึงข้อมูลอัปเดต ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text=caching%20queries%20will%20increase%20your,requests%20have%20not%20yet%20completed ) ในบริบทของเว็บ คุณอาจแคชข้อมูลบางอย่างในหน่วยความจำหรือ localstorage (เช่น ยอดคงเหลือที่ทราบล่าสุด) เพื่อทำให้แอปดูรวดเร็วอยู่เสมอ ควรรีเฟรชในพื้นหลังเพื่อความถูกต้อง การแคชฝั่งเซิร์ฟเวอร์ back4app ไม่ได้ให้บริการแคชในหน่วยความจำแบบสำเร็จรูปสำหรับผลลัพธ์การค้นหา แต่คุณสามารถดำเนินการแคชง่ายๆ ใน cloud functions หากจำเป็น ตัวอย่างเช่น หากการสร้างรายงาน ai ที่หนักใช้เวลานาน คุณอาจเก็บผลลัพธ์ในคลาสใหม่ (หรือแม้แต่ในวัตถุ cachedreport ที่มี timestamp) เพื่อให้คำขอถัดไปภายใน 10 นาทีส่งคืนผลลัพธ์ที่แคชแทนที่จะคำนวณใหม่ นี่มีประโยชน์โดยเฉพาะหากผู้ใช้จำนวนมากขอการวิเคราะห์จาก ai บ่อยๆ – แคชการวิเคราะห์ครั้งล่าสุดเพื่อลดการเรียก api (และค่าใช้จ่าย) cdn สำหรับทรัพย์สินแบบสแตติก back4app ให้บริการไฟล์ผ่าน cdn โดยอัตโนมัติ หากแอปของคุณมีภาพหรือการดาวน์โหลด (เช่น ฟีเจอร์รายงาน pdf) ให้เก็บไว้โดยใช้การจัดเก็บไฟล์ parse ซึ่งใช้ cdn เพื่อส่งมอบอย่างรวดเร็วทั่วโลก ( parse self hosted vs back4app https //blog back4app com/parse self hosted/# text=parse%20self%20hosted%20vs%20back4app,cache ) 5 4 งานเบื้องหลังและการทำงานอัตโนมัติ เมื่อฐานผู้ใช้ของคุณเติบโตขึ้น คุณจะต้องการทำให้การบำรุงรักษาและงานที่หนักเป็นอัตโนมัติ งานที่กำหนดเวลา (cron) parse อนุญาตให้กำหนดเวลางาน cloud code เพื่อให้ทำงานในช่วงเวลาที่กำหนด ( วิธีสร้าง parse cron job ของคุณ back4app backend https //www back4app com/docs/platform/parse cron job# text=introduction ) ( วิธีสร้าง parse cron job ของคุณ back4app backend https //www back4app com/docs/platform/parse cron job# text=1,created%20in%20a%20cloud code%20directory ) ตัวอย่างเช่น คุณสามารถสร้างงานที่ทำงานทุกคืนเพื่อสร้าง “สรุปสิ้นเดือน” สำหรับผู้ใช้แต่ละคน หรือเคลียร์ข้อมูลที่ล้าสมัย ในแดชบอร์ดของ back4app ภายใต้การตั้งค่าเซิร์ฟเวอร์ คุณสามารถกำหนดเวลางานเหล่านี้ให้ทำงานทุกวัน/ทุกสัปดาห์ ( parse server คืออะไร ? | back4app https //www back4app com/product/what is parse server# text=what%20is%20parse%20server%20%3f,long%20running%20computation%20at%20any ) ( วิธีสร้าง backend สำหรับ typescript? บทเรียน back4app https //www back4app com/tutorials/how to build a backend for typescript# text=back4app%20www,at%20whatever%20interval%20suits ) กำหนดงานด้วย parse cloud job("jobname", (request) => { }) ใน cloud code ( วิธีสร้าง parse cron job ของคุณ back4app backend https //www back4app com/docs/platform/parse cron job# text=2,some%20time%20and%20destroy%20them ) ใช้สิ่งนี้สำหรับ การส่งอีเมลสรุปประจำเดือน การคำนวณรายงานประจำปีและบันทึกเพื่อการเข้าถึงอย่างรวดเร็ว การลบหรือเก็บข้อมูลเก่า (การทำความสะอาด) งานที่เกิดขึ้นเป็นระยะๆ ที่ไม่ต้องการให้ผู้ใช้รอ webhook & การรวมภายนอก เมื่อคุณขยายตัว คุณอาจรวมบริการเพิ่มเติม (อาจดึงข้อมูลการทำธุรกรรมจากธนาคารผ่าน api เป็นต้น) ออกแบบ backend ของคุณเพื่อจัดการกับ webhook ภายนอกหรือการดึงข้อมูล cron – โดยใช้ cloud functions หรือ jobs ตามที่เหมาะสม ตัวอย่างเช่น หากเชื่อมโยง api ของธนาคารที่ส่งธุรกรรม ใช้ตัวรับ webhook (สามารถทำได้ผ่านเส้นทาง express ที่กำหนดเองใน cloud code หรือเซิร์ฟเวอร์ขนาดเล็กภายนอกที่เขียนไปยัง parse ผ่าน rest) 5 5 การตรวจสอบและการบันทึก การบันทึก ใช้ console log() ใน cloud code อย่างใจกว้างรอบๆ การดำเนินการที่สำคัญ (แต่หลีกเลี่ยงการบันทึกข้อมูลที่ละเอียดอ่อนในสภาพแวดล้อมการผลิต) back4app มีบันทึกที่คุณสามารถดูข้อผิดพลาดหรือปัญหาด้านประสิทธิภาพได้ สิ่งนี้จะช่วยระบุการค้นหาที่ช้า หรือการชำระเงินที่ล้มเหลวจาก stripe เป็นต้น การวิเคราะห์ ติดตามเมตริกการใช้งาน – เช่น จำนวนธุรกรรมต่อผู้ใช้, จำนวนการค้นหา ai ที่ทำ – เพื่อให้คุณทราบว่าฟีเจอร์ใดที่ถูกใช้งานมาก (และอาจต้องการการปรับแต่งหรือการจัดการค่าใช้จ่ายหากใช้ api ai ที่ต้องชำระเงิน) การขยาย backend การปรับขนาดอัตโนมัติของ back4app จะจัดการแอปที่มีขนาดเว็บทั่วไป แต่หากแอปของคุณเติบโตอย่างรวดเร็ว ให้พิจารณาสิ่งเหล่านี้ การปรับแต่งฐานข้อมูล หากใช้ mongodb คอลเลกชันที่มีขนาดใหญ่มากอาจต้องการการแบ่งส่วน – back4app สามารถจัดการได้ด้วยแผนที่ต้องชำระเงิน แต่คุณควรพูดคุยกับพวกเขาหากมีการเข้าถึงข้อมูลหลายล้านรายการ การแยกการอ่าน/เขียน parse ไม่สามารถทำสิ่งนี้โดยตรงที่ระดับแอป แต่คุณสามารถออกแบบการใช้งานของคุณให้การอ่านที่หนัก (เช่น การวิเคราะห์) ทำในสำเนาหรือผ่านข้อมูลที่ส่งออกไปยังคลังข้อมูล โดยให้ฐานข้อมูลหลักมุ่งเน้นไปที่การค้นหาธุรกรรม การจำกัดอัตรา ตั้งค่าขีดจำกัดที่เหมาะสมเพื่อป้องกันการละเมิด (back4app อาจมีขีดจำกัดอัตราเริ่มต้นต่อวินาที; ตรวจสอบให้แน่ใจว่าฝั่งหน้าของคุณไม่ทำให้ api ทำงานหนักโดยไม่ตั้งใจ) cloud code ที่ทำงานพร้อมกัน หากคุณรัน cloud functions ที่หนัก โปรดทราบว่าพวกเขาทำงานบนทรัพยากรที่จำกัด สำหรับการคำนวณที่หนักมาก คุณอาจส่งไปยัง aws lambda หรือบริการแยกและเรียกจาก cloud code หรือไม่ก็แบ่งงานออกเป็นชิ้นเล็กๆ หรือใช้งานเบื้องหลังที่สามารถทำงานตามลำดับ 5 6 การเฝ้าระวังความปลอดภัยอย่างต่อเนื่อง เมื่อคุณเติบโต ความต้องการด้านความปลอดภัยก็เติบโตขึ้นเช่นกัน ใช้บทบาทสำหรับผู้ดูแลระบบ สร้างบทบาท “ผู้ดูแลระบบ” หากคุณต้องการเข้าถึงข้อมูลผู้ใช้หรือทำการตรวจสอบ จากนั้นให้บทบาทนั้นมีสิทธิ์สูงขึ้น ตัวอย่างเช่น ผู้ดูแลระบบอาจมีสิทธิ์ในการอ่าน/เขียนธุรกรรมทั้งหมดเพื่อวัตถุประสงค์ในการสนับสนุน ผู้ใช้ทั่วไปจะไม่มีสิทธิ์นี้ ด้วยวิธีนี้คุณจะไม่ต้องใช้กุญแจหลักโดยไม่จำเป็น การตรวจสอบปกติ ตรวจสอบการตั้งค่า clp และ acl ของคุณเป็นระยะๆ ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=controls,of%20access%20controls ) มันง่ายในระหว่างการพัฒนาในการเปิดบางสิ่งสำหรับการทดสอบและลืมที่จะล็อคมัน ใช้เครื่องมือแดชบอร์ดความปลอดภัยของ back4app เพื่อตรวจสอบคลาสที่เป็นสาธารณะเมื่อไม่ควรเป็น การหมุนเวียนความลับ อัปเดตกุญแจ api ของคุณหากจำเป็นและเก็บไว้ใน config หากกุญแจอาจรั่วไหล (เช่น คุณบันทึกโดยไม่ตั้งใจ) ให้สร้างใหม่ stripe และ openai อนุญาตให้หมุนกุญแจ การปฏิบัติตาม หากคุณจัดการข้อมูลทางการเงินจำนวนมาก ให้พิจารณามาตรฐานการปฏิบัติตาม ตัวอย่างเช่น อย่าเก็บข้อมูลบัญชีธนาคารหรือข้อมูลบัตรที่ละเอียดอ่อนบนเซิร์ฟเวอร์ของคุณ (ปล่อยให้เป็นหน้าที่ของ stripe) ปฏิบัติตามกฎหมายความเป็นส่วนตัวสำหรับข้อมูลผู้ใช้ (เสนอการลบข้อมูลตามคำขอ ฯลฯ ซึ่งทำได้ง่ายขึ้นเนื่องจากทั้งหมดอยู่ในแพลตฟอร์มเดียวเช่น back4app) สุดท้าย, ทดสอบในขนาดใหญ่ เมื่อเป็นไปได้ ใช้สคริปต์หรือบริการทดสอบเพื่อจำลองผู้ใช้จำนวนมากที่ใช้แอปของคุณพร้อมกัน ดูว่าระบบทำงานอย่างไร – บางทีเวลาตอบสนองในฟังก์ชัน getdashboarddata อาจดีสำหรับ 100 ธุรกรรม แต่ช้าลงที่ 10,000 (จากนั้นคุณอาจพิจารณาการรวมยอดรายเดือนในคลาสงบประมาณเพื่อหลีกเลี่ยงการรวมทุกครั้ง) การระบุปัญหาเหล่านี้ล่วงหน้าจะช่วยประหยัดความยุ่งยากในภายหลัง บทสรุป ตอนนี้คุณได้วางแผน สร้าง และเตรียมพร้อมที่จะขยายผู้ช่วยการเงินส่วนบุคคลที่ขับเคลื่อนด้วย ai แบบฟูลสแต็ค! 🎉 เริ่มต้นจากขั้นตอนการออกแบบที่ช่วยโดย llm ทำให้แน่ใจว่าคุณได้พิจารณาทุกด้าน (และคุณสามารถกลับไปใช้ llm เพื่อขอแนวคิดในการปรับปรุงได้เสมอ) ส่วนหน้า lovable ai ให้คุณมี ui ที่ใช้งานได้และมีความสวยงามในเวลาที่น้อยกว่าที่จะเขียนโค้ดด้วยมือ ( lovable https //lovable dev/# text= )】 และมันเชื่อมต่อกับ back4app backend ที่ทรงพลังซึ่งจัดการข้อมูล การตรวจสอบสิทธิ์ และรวมเข้ากับ ai และการชำระเงินอย่างปลอดภัย คุณได้ใช้ stripe สำหรับการสร้างรายได้ โดยปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเพื่อให้ผู้ใช้ที่จ่ายเงินเท่านั้นที่ปลดล็อกคุณค่าพรีเมียม ด้วยการแคช คำถามที่มีประสิทธิภาพ และงานเบื้องหลัง แอปได้รับการออกแบบมาเพื่อรองรับการเติบโต ตอนนี้ขึ้นอยู่กับคุณที่จะเริ่มต้นและปรับปรุงต่อไป ติดตามความคิดเห็นของผู้ใช้ ใช้เทคนิคการวางแผน ai ของคุณเพื่อระดมความคิดเกี่ยวกับฟีเจอร์ใหม่ (อาจจะเป็น ai ที่แนะนำการปรับงบประมาณ หรือการรวมเข้ากับบัญชีธนาคาร) และปรับปรุงประสบการณ์อย่างต่อเนื่อง โดยการรวมเครื่องมือที่ไม่ต้องเขียนโค้ด/เขียนโค้ดน้อยเข้ากับตรรกะที่กำหนดเอง คุณสามารถ เคลื่อนที่อย่างรวดเร็ว แต่ยังคงควบคุมคุณภาพและความสามารถในการขยายตัวของผลิตภัณฑ์ของคุณได้อยู่ดี ขอให้โชคดีในการสร้างผู้ช่วยทางการเงินของคุณ – พื้นฐานทั้งหมดได้ถูกจัดเตรียมไว้ให้คุณสร้าง เพื่อนทางการเงินที่น่ารัก และ สามารถขยายได้ สำหรับผู้ใช้ของคุณ! 🚀 แหล่งข้อมูล เอกสาร back4app (parse) เกี่ยวกับการสร้างโมเดลข้อมูล ความปลอดภัย และการรวม stripe ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=authorization%20determines%20if%20an%20authenticated,two%20levels%20of%20access%20controls ) ( คู่มือสำหรับผู้เริ่มต้นเกี่ยวกับแพลตฟอร์ม parse บน back4app — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=parse%20uses%20access%20control%20lists,will%20always%20override%20acl%20permissions ) ( stripe back4app backend https //www back4app com/docs/cloud code functions/integrations/stripe# text=we%20will%20also%20add%20two,user%20to%20its%20stripe%20counterpart ) ( stripe back4app backend https //www back4app com/docs/cloud code functions/integrations/stripe# text=in%20this%20guide%2c%20we%20are,integration%20using%20a%20web%20example )7】 เว็บไซต์ทางการของ lovable ai และคู่มือในการสร้างแอปเว็บจากการป้อนข้อความธรรมชาติ ( lovable https //lovable dev/# text= ) ( lovable ai คู่มือสำหรับผู้เริ่มต้นที่ดีที่สุด https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=lovable%20ai%20is%20an%20innovative,pleasing%20designs%20and%20robust%20functionality )7】 เอกสารที่น่ารัก – เคล็ดลับการรวม stripe (ลิงก์การชำระเงินกับการตั้งค่าขั้นสูง ( stripe & การชำระเงิน เอกสารที่น่ารัก https //docs lovable dev/tips tricks/setting up payments# text=there%20are%20many%20ways%20to,secure%20and%20efficient%20payment%20processing ) ( stripe & การชำระเงิน เอกสารที่น่ารัก https //docs lovable dev/tips tricks/setting up payments# text=key%20takeaways )0】 back4app บล็อก – การใช้ openai กับ back4app (สภาพแวดล้อม cloud code และการจัดเก็บคีย์ที่ปลอดภัย ( วิธีสร้าง ai assistant backend คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=at%20this%20stage%20of%20the,the%20required%20cloud%20code%20functions ) ( วิธีสร้าง ai assistant backend คู่มือทีละขั้นตอน! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so )3】 แนวทางปฏิบัติที่ดีที่สุดในการวิเคราะห์ – คำแนะนำเกี่ยวกับการเพิ่มประสิทธิภาพการค้นหาและการแคชสำหรับ scali ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text= ) ( parse server คู่มือแนวทางปฏิบัติที่ดีที่สุด https //blog back4app com/parse server best practices/# text=caching%20queries%20will%20increase%20your,requests%20have%20not%20yet%20completed )9】 back4app cron jobs – วิธีการกำหนดตารางงานพื้นหลังสำหรับการบำรุงรักษาและการรายงานอัตโนมัติ ( วิธีการสร้าง cron job ของคุณใน parse back4app backend https //www back4app com/docs/platform/parse cron job# text=1,created%20in%20a%20cloud code%20directory )7】 ข้อมูลเชิงลึกเกี่ยวกับการวางแผน llm – โมเดลที่ก้าวหน้าต่างๆ เช่น gpt 4 สามารถแยกความต้องการของโครงการได้อย่างมีประสิทธิภาพ ( การใช้ llms เพื่อจัดการโครงการของฉัน (ตอนที่ 1) medium https //medium com/@docherty/can llms help me manage my projects part 1 ee4342b1ca0a# text=llms%20can%20effectively%20generate%20detailed,the%20project%20down%20into%20tasks )2】