사랑스러운 AI와 Back4App으로 확장 가능한 AI 기반 웹 앱 구축

기업가들은 이제 ai 기반 개발 도구와 확장 가능한 백엔드 서비스를 결합하여 웹 앱을 신속하게 구축할 수 있습니다 이 튜토리얼은 개인 재무 도우미 를 구축하는 방법에 대한 완전한 로드맵을 제공합니다 초기 계획 에서 ai 생성 프론트 엔드 (lovable ai), 강력한 back4app 백엔드 , stripe 수익화 , 그리고 마지막으로 확장 및 보안 모범 사례 를 포함하여 b2c 플랫폼을 위한 것입니다 끝으로, 여러분은 자신의 ai 기반 재무 도우미를 출시하기 위한 명확하고 실행 가능한 계획을 갖게 될 것입니다 1\ llm을 활용한 소프트웨어 계획 코드를 작성하기 전에 대형 언어 모델(llm)을 활용하여 소프트웨어를 계획하는 것부터 시작하세요 anthropic claude 3 7 , openai gpt 4 , 및 deepseek r1 와 같은 현대의 추론 능력을 갖춘 모델은 간단한 아이디어를 상세한 프로젝트 청사진으로 변환할 수 있습니다 사실, “llm은 간단한 프로젝트 개요에서 상세한 프로젝트 설명을 효과적으로 생성하고 프로젝트를 작업으로 나눌 수 있습니다 ” ( llm을 활용하여 내 프로젝트를 관리하기 (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 자문 모듈, 기술 스택(프론트엔드, 백엔드, 데이터베이스)에 대한 권장 사항 ui를 위한 웹 프레임워크와 빠른 개발을 위한 baas(backend as a service)를 사용하는 것을 제안할 수 있습니다 아래는 claude 3 7과 openai gpt o3 미니 하이트를 사용한 결과입니다 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) 예상 결과 llm은 클라이언트 서버 디자인을 제안할 수 있습니다 여기서 프론트엔드 (웹 또는 모바일 앱)은 사용자 인터페이스(비용 입력 양식, 대시보드, 채팅 ui)를 처리하고 백엔드 는 데이터 저장, 비즈니스 로직 및 ai 서비스 호출을 처리합니다 확장성과 속도를 고려할 때 lovable ai 를 사용하여 빠른 프론트엔드 생성을 추천하고 back4app (parse platform) 을 백엔드로 추천할 수 있습니다 응답은 데이터 모델(예 사용자 클래스, 거래 클래스, 예산 클래스)과 챗봇 기능이 조언을 위해 llm api를 호출하는 방법을 설명할 수 있습니다 불명확한 점이 있으면 주저하지 말고 후속 질문을 하세요 목표는 모든 주요 기능을 포함하는 구조화된 구현 계획 입니다 기능 및 작업 분류 마지막으로, 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 챗봇 , 등과 함께 하위 작업을 포함합니다 다음과 같이 말할 수 있습니다 “ 인증 – 가입/로그인 페이지(프론트엔드) 및 사용자 관리 api(백엔드) 구축; 비용 추적 – 비용 입력 ui, 거래를 저장하기 위한 백엔드 엔드포인트; 예산 책정 – 예산 설정을 위한 ui, 남은 예산을 계산하기 위한 백엔드 로직; ai 조언 챗봇 – 사용자 지출을 분석하고 팁을 반환하기 위해 백엔드에 ai api(openai)를 통합” – 등등 기술 스택 추천 을 요청할 수도 있습니다 예 “차트, 알림 및 결제용 stripe와 같은 3rd party 통합을 위한 라이브러리나 서비스 추천 ” llm의 답변은 선택에 도움이 될 수 있습니다(예를 들어, 차트 라이브러리를 제안하거나 보안 조치를 상기시킬 수 있습니다) 이 계획 단계가 끝날 무렵, 당신은 llm 생성 사양 기능 목록, 아키텍처 개요 및 기술 스택 제안이 있어야 합니다 이것을 시작 청사진으로 간주하세요 – 자신의 통찰력에 따라 항상 조정할 수 있지만 – ai 지원 추론으로 계획 프로세스를 극적으로 가속화합니다 2\ 사랑스러운 ai로 mvp 개발 (프론트엔드) 계획이 있으면, 최소 기능 제품 (mvp) 프론트엔드를 빠르게 구축할 수 있습니다 사랑스러운 ai , ai 기반 앱 빌더입니다 사랑스러운 ai는 자연어 프롬프트를 작동하는 웹 애플리케이션 코드로 변환하여 빠른 프로토타이핑 과 디자인을 가능하게 합니다 앱의 ui와 기능을 간단한 영어로 설명하면, “아름다운 미학을 가진 완전한 기능의 애플리케이션으로 변모하는 것을 지켜볼 수 있습니다 ” ( 사랑스러운 https //lovable dev/# text=creating%20software%20has%20never%20been,functional%20application%20with%20beautiful%20aesthetics ) 이 도구는 손으로 코딩하는 것보다 20배 빠릅니다 – 당신은 단순히 아이디어를 설명하면 사랑스러운 ai가 코드를 생성하고 ui를 만들어 줍니다 ( 사랑스러운 https //lovable dev/# text= ) 개인 재무 도우미를 위해 이를 활용하는 방법은 다음과 같습니다 2 1 사랑스러운 설정 및 새 프로젝트 시작하기 가입하기 lovable ai 웹사이트 https //lovable dev 로 가서 계정을 생성하세요(아직 생성하지 않았다면) 로그인한 후, 대시보드에서 새 프로젝트를 만드세요 ( lovable ai 초보자를 위한 궁극적인 가이드 https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=1 ) 텍스트 입력창(프롬프트 인터페이스)이 나타나며, 여기서 애플리케이션을 설명합니다 초기 프롬프트 – 앱 설명하기 새 프로젝트에서 재무 보조 앱에 대한 자세한 설명을 입력하세요 예를 들어 프롬프트 "소비자를 위한 개인 재무 보조 앱 이 앱은 가입/로그인 페이지; 사용자의 현재 월 예산과 지출을 보여주는 대시보드; 지출 추가를 위한 양식(금액, 카테고리, 날짜); 카테고리별 월 예산 설정 페이지; 그리고 보조자가 재무 질문에 답하는 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에 따라 지시하세요 프롬프트 "대시보드에 카테고리별 지출의 원형 차트와 '남은 예산'에 대한 요약 카드를 추가하세요 전체 앱에 차분한 청록색 색 구성표를 사용하세요 " lovable은 이러한 변경 사항을 적용합니다 – 요청한 대로 원형 차트 구성 요소를 추가하고 테마 색상을 스타일링합니다 현대 ux 원칙을 따르므로 변경 사항은 여전히 전문적으로 보일 것입니다 ( lovable https //lovable dev/# text= ) 레이아웃 및 텍스트 조정 일부 텍스트나 레이블이 이상적이지 않다면, 직접 수정하거나 ai에게 요청할 수 있습니다 예를 들어, “'ai 챗봇' 페이지 제목을 '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 자리 표시자 추가 프론트엔드가 백엔드와 통신해야 하는 위치를 식별합니다 사용자 가입 또는 로그인 시(가입/로그인 api 호출), 거래 추가 시(비용을 백엔드에 post), 대시보드 데이터 가져오기 시(최신 총액을 get), ai 챗봇이 조언을 요청할 때(ai를 호출하는 백엔드 엔드포인트 호출)와 같은 가능성이 있는 지점이 포함됩니다 lovable에서는 실제 api 호출이 없을 수 있지만, 코드에 함수나 주석을 배치하여 알림으로 사용할 수 있습니다 예를 들어, 비용 양식의 onsubmit 핸들러에 다음과 같은 주석이나 의사 코드를 포함합니다 // todo 백엔드 api를 호출하여 비용 저장 back4app (parse) sdk 또는 api에 연결 lovable은 npm 패키지를 포함하고 fetch 호출을 할 수 있습니다 통합을 위한 두 가지 주요 옵션이 있습니다 parse rest/graphql api 사용 lovable이 back4app의 rest 엔드포인트를 직접 호출하도록 할 수 있습니다 예를 들어, 백엔드 클래스를 설정한 후, 새 거래를 생성하기 위한 api 호출은 fetch 예를 들어, https //parseapi back4app com/classes/transaction 에 post하는 것처럼 보일 수 있습니다 lovable에서는 이를 양식 제출 논리에 포함시킬 것입니다 (정확한 api 및 키는 백엔드 섹션에서 다룰 것입니다 ) parse javascript sdk 사용 lovable이 코드를 github에 동기화하고 편집할 수 있도록 하므로, 더 편리한 프론트엔드 통합을 위해 parse js sdk를 설치할 수 있습니다 그러나 단순성을 위해 많은 개발자들이 mvp를 위해 직접 rest 호출이나 클라우드 함수 호출을 사용합니다 더미 데이터로 테스트 실제 백엔드가 준비되기 전에 lovable에서 api 호출을 시뮬레이션할 수 있습니다 예를 들어, 비용 양식이 대시보드를 채우는 로컬 목록에 항목을 추가하도록 할 수 있습니다(임시 상태) 이렇게 하면 프론트엔드 흐름이 작동하는지 확인할 수 있습니다 백엔드가 라이브가 되면 이러한 부분을 실제 api 호출로 교체할 것입니다 이 단계가 끝나면 개인 재무 도우미를 위한 완전히 설계된 프론트엔드 를 갖추게 됩니다 – 모두 자연어 프롬프트를 통해 생성되고 다듬어졌습니다 이 코드는 귀하의 소유입니다(lovable은 이를 내보내거나 github에 동기화할 수 있도록 합니다) ( lovable https //lovable dev/# text=image%3a%20you%20own%20the%20code ) 이제 이 앱의 데이터와 ai 기능을 지원할 백엔드를 구축할 시간입니다 3\ back4app (parse)를 이용한 백엔드 구현 백엔드에는 back4app , 오픈 소스 parse 플랫폼을 위한 호스팅 서비스입니다 back4app은 데이터베이스, 사용자 인증, 클라우드 기능 등을 갖춘 즉시 사용 가능한 확장 가능한 백엔드를 제공합니다 ( back4app에서 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=compared%20to%20individual%20setups %20,and%20integration%20with%20other%20services ) ( back4app에서 parse 플랫폼에 대한 초보자 가이드 — 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 데이터베이스를 프로비저닝합니다 앱의 대시보드에서 데이터베이스 브라우저 를 열어 데이터에 대한 클래스(테이블)를 정의하세요 데이터 모델 정의하기 우리의 기능을 기반으로 세 가지 주요 클래스를 계획합니다 사용자 – back4app에는 이미 인증을 위한 내장 사용자 클래스가 있습니다 필요에 따라 추가 필드로 확장할 수 있습니다(예 “프리미엄” 플래그 또는 stripe 고객 id, 나중에 수익화 참조) 거래 – 각 지출/수입 항목을 저장합니다 일반적인 필드 금액 (숫자) – 수입의 경우 양수, 지출의 경우 음수 또는 단순히 항상 양수이며 별도의 유형 필드가 있습니다 카테고리 (문자열) – 예 “음식”, “임대료”, “오락” 날짜 (날짜) – 거래가 발생한 시점 사용자 (pointer< user>) – 이 거래를 소유한 사용자에 대한 포인터 (선택 사항) 설명 (문자열) – 거래에 대한 메모 예산 – 예산 정보를 저장합니다 카테고리별 예산이나 일반 월별 예산이 있을 수 있습니다 월 (문자열 또는 날짜) – 예 “2025 03”로 월을 식별합니다 카테고리 (문자열, 선택 사항) – 카테고리별 예산을 설정하는 경우 (또는 전체 예산을 위한 “all”과 같은 특별한 값을 가지는 경우) 금액 (숫자) – 해당 월(및 카테고리)의 예산 한도 사용자 (pointer< user>) – 소유자 클래스 수준 보안 설정 코딩하기 전에 보안 규칙을 구성하여 데이터가 사용자별로 격리되도록 합니다 parse는 데이터를 보호하기 위해 acl(액세스 제어 목록)과 클래스 수준 권한(clp)을 사용합니다 기본적으로, 거래 및 예산 클래스는 소유자만 접근할 수 있도록 설정합니다 back4app에서 각 클래스의 보안 설정으로 이동합니다 공용 읽기/쓰기 액세스를 비활성화합니다 “인증된 사용자”에 대한 읽기/쓰기를 활성화합니다 (로그인한 사용자가 접근할 수 있도록 하려면, or 더 좋습니다 객체별 acl을 사용하세요) 우리는 객체를 저장할 때 객체 수준 acl을 시행할 것입니다 각 transaction 또는 budget 항목은 소유 사용자(그리고 아마도 관리자 역할)만 읽을 수 있는 acl을 갖게 됩니다 이는 한 사용자의 재무 데이터가 다른 사용자로부터 비공개로 유지되도록 보장합니다 ( back4app에서 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=authorization%20determines%20if%20an%20authenticated,two%20levels%20of%20access%20controls ) ( back4app에서 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=parse%20uses%20access%20control%20lists,will%20always%20override%20acl%20permissions ) 3 2 사용자 인증 구현 back4app의 parse server는 사용자 인증을 간단하게 만듭니다 회원가입 및 로그인 user 클래스는 이를 기본적으로 처리합니다 rest api 호출 또는 parse sdk를 사용하여 사용자를 가입시키고 로그인할 수 있습니다 예를 들어, rest를 통해 /users 에 username 과 password 를 post하면 사용자가 생성됩니다; 자격 증명을 사용하여 /login 에 post하면 로그인됩니다(세션 토큰 반환) 프론트엔드에서 parse js sdk를 사용하는 경우 parse user signup() 및 parse user login() 메서드를 제공합니다 oauth (선택 사항) 소셜 로그인을 원하신다면(구글, 페이스북 등), parse는 인증 데이터를 연결하여 sdk를 통해 이를 지원합니다 mvp의 경우, 사용자 이름/이메일과 비밀번호가 가장 간단합니다 이메일 인증 back4app에서 이메일 인증을 활성화하는 것을 고려하세요(사용자가 이메일을 확인하도록) parse는 이메일을 보내어 이를 처리할 수 있습니다 이는 선택 사항이지만, 프로덕션 b2c 앱에는 좋습니다 보안 모범 사례 절대 평문 비밀번호를 전송하거나 저장하지 마십시오 parse는 내부적으로 해싱을 처리합니다 또한 강력한 비밀번호를 강제하거나 보안을 위해 타사 인증을 사용해야 합니다 추가로, https를 사용하십시오 (back4app 엔드포인트는 기본적으로 https입니다) 그래서 자격 증명이 네트워크를 통해 평문으로 전송되지 않습니다 3 3 프론트엔드와 백엔드 연결 데이터 모델과 인증이 준비되었으므로, lovable 프론트엔드를 이 백엔드에 연결하십시오 api 자격 증명 back4app에서 앱 id 와 자바스크립트 키 (클라이언트 sdk를 사용하는 경우) 또는 rest api 키 (직접 rest 호출을 위한)를 가져옵니다 이는 앱 설정 > 보안 및 키에서 찾을 수 있습니다 마스터 키를 절대 클라이언트에 노출하지 마십시오 – 이는 서버 측에서 전체 권한으로만 사용됩니다 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() 을 호출한 다음 “transaction”에 대한 parse object를 생성하고 저장하면 http 호출을 추상화할 수 있습니다 lovable 프론트엔드에서는 비용 양식이 제출될 때 이를 수행하는 작은 스크립트를 포함할 수 있습니다 팁 로그인에서 세션 토큰을 사용하여 후속 요청을 인증하세요(필요에 따라 안전하게 저장하세요, 예 메모리나 로컬 저장소에) 비즈니스 로직을 위한 클라우드 함수 기본 crud를 처리하는 직접 rest 호출이 있지만, 더 복잡한 작업을 위해서는 클라우드 함수 를 사용해야 합니다 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 응답을 받을 수 있습니다 클라우드 기능을 사용하면 로직이 중앙 집중화되고 클라이언트에서의 여러 호출이 줄어듭니다 자동화된 재무 통찰력 (ai 통합) 두드러진 특징은 ai 기반의 조언입니다 이를 위해 백엔드에 llm(예 gpt 4)을 통합하여 사용자 데이터를 분석하고 추천을 생성할 수 있습니다 한 가지 접근 방식은 클라우드 기능을 사용하는 것으로, 호출될 때 사용자의 최근 거래를 수집하고 프롬프트를 형식화한 다음 openai의 api를 호출하는 것입니다 중요 openai api 키를 back4app에 안전하게 저장하세요 환경 변수로 추가할 수 있습니다(back4app은 사용자 정의 환경 변수를 추가하거나 cloud code에서 config를 사용할 수 있도록 허용합니다) 및 절대 공개하지 마세요 ( 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의 경우 이 기능을 건너뛸 수 있지만, 사용 가능합니다 또는 특정 트리거가 발생할 때 cloud code에서 서비스의 api (sms용 twilio 등)를 사용할 수 있습니다 (예 예산 초과) 예시 예산보다 지출이 많을 때 알림을 원한다면, 지출을 계산하는 cloud function checkbudgetstatus 를 추가할 수 있습니다 (예 getdashboarddata ) 예산을 초과하면 이메일 api를 사용하여 사용자 이메일로 경고를 보냅니다 이는 주기적으로 호출되거나 각 새로운 거래 후에 트리거될 수 있습니다 3 5 보안 모범 사례 재무 데이터를 다룰 때 보안은 매우 중요합니다 데이터 접근 제어 clp/acl을 설정합니다 – 모든 데이터베이스 쓰기가 acl을 설정하여 소유자(및 관리자)만 읽을 수 있도록 확인합니다 ( back4app의 parse 플랫폼 초보자 가이드 — 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 마스터 키, openai 키, stripe 비밀 키 등)는 백엔드에만 있어야 합니다 결코 프론트엔드 코드나 lovable 프롬프트에 넣지 마십시오 lovable은 필요할 경우 키를 안전하게 저장할 수 있는 “api 키 추가” 기능을 제공합니다 ( stripe 및 결제 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 어시스턴트 백엔드 구축 방법 단계별 가이드! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so ) cloud code에서는 process env 를 통해 접근합니다 (위에서 설명한 대로) ( ai 어시스턴트 백엔드 구축 방법 단계별 가이드! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so ) 이렇게 하면 프론트엔드가 검사되더라도 민감한 키가 보이지 않습니다 입력 검증 lovable이 일부 검증이 포함된 양식을 생성할 수 있지만, 항상 서버에서도 검증해야 합니다 예를 들어, 비용 금액이 음수가 아니거나 텍스트 필드가 지나치게 길지 않은지 확인하여 오용이나 주입 공격을 방지해야 합니다 parse cloud functions는 매개변수 검증을 사용할 수 있습니다 (cloud function의 request params 는 예상 형식에 대해 확인할 수 있습니다) https 및 최신 sdk 사용 back4app 엔드포인트는 기본적으로 https입니다 사용자 정의 도메인(사용하는 경우)도 보안이 되어 있는지 확인하십시오 보안 패치가 포함된 최신 parse sdk를 사용하십시오 또한 cloud code 종속성을 최신 상태로 유지하십시오 (예 stripe 또는 openai 라이브러리) 이러한 관행으로 백엔드를 구현함으로써, 강력한 기반을 마련합니다 확장 가능한 데이터베이스 , 안전한 사용자 인증, 재무 계산을 위한 서버 측 논리, ai 및 결제를 위한 통합 지점 다음으로, 우리는 구독을 위한 stripe 를 통합하여 이 플랫폼을 수익화할 것입니다 4\ 수익화 전략 프리미엄 구독을 위한 stripe 통합 재무 도우미를 실행 가능한 b2c 비즈니스로 전환하기 위해, 기본 기능은 무료, 고급 기능(상세 ai 분석 또는 무제한 계정과 같은)을 프리미엄 , 제공할 가능성이 높습니다 우리는 결제 처리를 위해 stripe 를 사용할 것이며, 이는 구독 청구를 쉽게 지원합니다 back4app과 lovable은 모두 stripe와 잘 통합되며 – lovable은 빠른 설정을 위해 stripe 결제 링크를 즉시 지원합니다 ( stripe 및 결제 lovable 문서 https //docs lovable dev/tips tricks/setting up payments# text=key%20takeaways ) 우리는 back4app cloud code와 stripe의 api를 사용하여 강력한 솔루션을 위한 단계별 통합을 다룰 것이며, 더 간단한 대안도 언급할 것입니다 4 1 stripe 설정 및 제품 생성 stripe 계정 만들기 아직 만들지 않았다면, stripe에 가입하세요 대시보드에서 api 키 를 얻으세요 (서버 호출을 위해 비밀 키가 필요하고 클라이언트 측 사용을 위해 공개 키가 필요합니다) ( stripe back4app 백엔드 https //www back4app com/docs/cloud code functions/integrations/stripe# text=3 1%20,key ) 비밀 키를 공개적으로 노출하지 마세요 프리미엄 제공 정의하기 stripe에서 구독을 위한 제품 을 설정하세요 (예 “finassist 프리미엄”) 및 가격 계획 을 설정하세요 (예 월 $5) stripe 대시보드의 제품 섹션에서 이 작업을 수행할 수 있습니다 이렇게 하면 구독 또는 체크아웃 세션을 생성할 때 사용할 가격 id(또는 계획 id)를 얻을 수 있습니다 4 2 클라우드 기능을 통한 back4app 통합 우리는 back4app 클라우드 코드를 사용하여 stripe를 통합하여 구독 구매 및 검증이 서버 측에서 안전하게 이루어지도록 할 것입니다 ( stripe back4app 백엔드 https //www back4app com/docs/cloud code functions/integrations/stripe# text=in%20this%20guide%2c%20we%20are,integration%20using%20a%20web%20example ) 일반적인 흐름 고객 생성 사용자가 프리미엄을 선택하면, 그들을 위해 stripe 고객을 생성하세요 (아직 생성되지 않았다면) 가입 시 또는 첫 업그레이드 시도 시 자동으로 이 작업을 수행할 수 있습니다 체크아웃 세션 (구독) stripe의 체크아웃 또는 구독 api를 사용하여 사용자에게 요금을 청구하세요 웹훅 또는 확인 결제 후 구독을 확인하고 사용자를 데이터베이스에서 프리미엄으로 표시하세요 이것들을 구현해 봅시다 cloud code에 stripe sdk 설치하기 back4app의 cloud code 폴더에 stripe를 포함하세요 package json 의 dependencies에 (예 "stripe" "^12 0 0" ) 그런 다음, main js , 초기화하세요 const stripe = require('stripe')(process env stripe secret key); 저장 stripe secret key 를 back4app 구성에 (아래 서버 설정 > 환경 변수 )에 스트라이프 고객 및 구독 기능 업그레이드를 처리하기 위해 클라우드 기능 추가 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을 제공합니다 (여기서는 단순함을 위해 체크아웃을 사용합니다; 모든 결제 ui를 처리합니다) 프리미엄 플래그 우리는 customerid 필드를 user 에 추가했습니다 stripe 통합을 위해 (back4app 대시보드를 통해 추가하거나 위와 같이 user set 을 사용하여 추가할 수 있습니다) ( stripe back4app 백엔드 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 체크아웃으로 리디렉션 사용자의 lovable 프론트엔드에서 “프리미엄으로 업그레이드”를 클릭하면, createstripecheckout 클라우드 함수를 호출합니다 (예 rest를 통해 post /functions/createstripecheckout 세션 토큰과 함께) 이 함수는 sessionid 프론트엔드에서 stripe js를 사용하여 리디렉션합니다 사랑스러운 노코드 프론트엔드가 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 프리미엄 기능 제한 결제 흐름이 설정되면, 프론트엔드와 백엔드 모두에서 게이팅을 구현합니다 프론트엔드 ui/ux 만약 user ispremium 가 false라면, 프리미엄 기능을 비활성화하거나 숨길 수 있습니다 예를 들어, “ai 상세 분석”이 프리미엄 전용 기능이라면, 해당 버튼이나 메뉴 항목은 표시되지 않거나 “이 기능에 접근하려면 업그레이드하세요 ”라는 메시지를 표시해야 합니다 업그레이드 후에는 이러한 기능을 다시 표시하세요 프론트엔드는 로그인 후 사용자의 ispremium 상태를 가져올 수 있으므로(저장하거나 api 호출을 통해 가져올 수 있음), 조건부 렌더링을 사용하세요(로버블은 논리에 조건을 추가할 수 있도록 허용할 수 있으며, 내보낸 후 코드에서 처리할 수 있습니다) 백엔드 집행 프론트엔드에만 의존하지 마세요 – 백엔드에서도 집행하세요 예를 들어, 프리미엄인 cloud function getdetailedreport 가 있다면, 맨 위에서 request user get("ispremium") 를 확인하고 프리미엄이 아닐 경우 오류를 발생시키거나 거부하세요 마찬가지로, 프리미엄 데이터에 대해 별도의 클래스를 가지고 있다면, clp 또는 역할을 사용하세요 parse에서 “프리미엄”이라는 역할 을 생성하고, 유료 사용자를 해당 역할에 할당할 수 있습니다 그런 다음 특정 클래스 권한이나 기능 접근을 해당 역할로 제한할 수 있습니다 parse clp는 역할 기반 접근을 지원합니다 ( back4app의 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=controls,of%20access%20controls ) 이는 더 고급이지만, 확장할 때 권한 관리를 깔끔하게 할 수 있는 방법입니다 테스트 두 가지 시나리오를 시뮬레이션하세요 – 무료 사용자와 프리미엄 사용자 무료 사용자가 프리미엄 작업을 시도할 때 부드럽게 거부되는지 확인하세요(예 프론트엔드가 api를 호출하는 대신 업그레이드 프롬프트를 표시하거나, api가 호출되면 오류가 처리됨) 프리미엄 사용자가 차단되지 않도록 하세요 4 4 대안적인 빠른 수익 창출을 위한 결제 링크 (선택적 언급) 위의 내용이 mvp에 대해 복잡하게 느껴진다면, stripe 결제 링크 는 더 빠르고 코드 없는 솔루션을 제공합니다 구독 제품에 대한 결제 링크를 stripe에서 생성하고 그 링크를 앱에 간단히 삽입할 수 있습니다 (예 “업그레이드” 버튼을 클릭하면 stripe에서 호스팅하는 체크아웃이 열립니다) lovable의 문서에서는 빠른 체크아웃 흐름을 위해 이것을 제안하기도 합니다 ( stripe 및 결제 lovable 문서 https //docs lovable dev/tips tricks/setting up payments# text=there%20are%20many%20ways%20to,secure%20and%20efficient%20payment%20processing ) ( stripe 및 결제 lovable 문서 https //docs lovable dev/tips tricks/setting up payments# text=key%20takeaways ) 단점은 사용자가 결제한 내역을 수동으로 조정해야 한다는 것입니다 (예 csv 또는 stripe 대시보드를 통해) 웹훅을 여전히 구현하지 않는 한 파일럿이나 프로토타입의 경우, 결제 링크는 괜찮습니다 사용자가 링크를 클릭하고 stripe 사이트에서 결제한 후, back4app에서 필드를 설정하여 수동으로 업그레이드합니다 그러나 확장 가능한 솔루션의 경우, 우리가 자세히 설명한 통합 방법이 사용자 경험에 훨씬 더 원활합니다 (계정을 자동으로 업그레이드합니다) 4 5 구독 후 고려사항 영수증 및 인보이스 stripe는 영수증 이메일 발송을 처리할 수 있습니다 사용자가 스스로 구독을 취소하거나 카드를 업데이트할 수 있도록 stripe 고객 포털을 통합할 수도 있습니다 체험 기간 trial days로 stripe 구독을 생성하거나 일정 기간 후에만 ispremium 을 설정하여 체험을 제공할 수 있습니다 이는 stripe의 설정을 통해 관리할 수 있지만, 앱 로직에 반영하는 것을 잊지 마세요 (예 “체험” 상태 표시) 결제 확장 stripe 자체는 잘 확장됩니다 사용자가 늘어날수록 웹훅 이벤트를 모니터링하고 stripe의 클라우드 기능이 최적화되어 있는지 확인하세요 (불필요한 데이터를 가져오지 마세요) 다음에는 더 많은 확장에 대해 다룰 것입니다 이 단계에서, 당신은 구독을 통해 앱을 수익화하는 방법 을 갖게 되었습니다 – 사용자는 프리미엄 기능을 잠금 해제하기 위해 업그레이드할 수 있으며, 백엔드는 누가 프리미엄인지 알고 있습니다 이제 많은 사용자에게 이 플랫폼을 확장 하고 장기적으로 성능과 보안을 유지하는 방법을 다루겠습니다 5\ 확장 및 보안 고려사항 성공적인 b2c 플랫폼을 구축하는 것은 성장을 계획하는 것을 의미합니다 lovable ai 와 back4app 은 확장에 적합합니다 lovable은 프로덕션 등급의 프론트엔드를 생성하고, back4app (parse)은 데이터베이스 클러스터링, 자동 확장 인프라 등 많은 확장을 자동으로 처리하는 관리형 서비스입니다 ( back4app의 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=key%20takeaways ) 그럼에도 불구하고, 증가하는 부하를 효율적으로 처리할 수 있도록 앱 디자인에서 모범 사례를 따라야 합니다 5 1 효율적인 데이터 구조화 모델 디자인 사용자 수가 증가함에 따라 데이터 스키마를 재검토하십시오 우리가 만든 클래스(사용자, 거래, 예산)는 충분해야 하지만, 볼륨을 고려하십시오 단일 사용자가 수천 개의 거래를 기록할 수 있습니다 parse 데이터베이스(back4app의 mongodb 또는 postgresql 지원)는 ( back4app의 parse 플랫폼에 대한 초보자 가이드 — 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와 포인터를 인덱싱합니다; date 또는 category ,과 같은 다른 필드에 대해서는 필요에 따라 데이터베이스 인덱스를 생성하는 것을 고려하십시오 (back4app은 스키마 편집기 또는 프로그래밍 방식으로 인덱스를 추가할 수 있습니다) 관심사의 분리 앱이 확장되면(예 투자 또는 기타 데이터 추가) 많은 유형의 데이터로 하나의 컬렉션을 과부하하는 대신 별도의 클래스를 생성하십시오 이렇게 하면 각 쿼리가 집중되고 간결하게 유지됩니다 5 2 쿼리 성능 최적화 비효율적인 쿼리는 데이터가 증가함에 따라 앱을 느리게 할 수 있습니다 다음 parse 쿼리 모범 사례를 따르십시오 인덱스 쿼리 사용하기 “parse는 인덱스를 사용하므로 쿼리가 전체 스캔 대신 데이터의 하위 집합을 살펴볼 수 있습니다 ” ( parse server 모범 사례 가이드 https //blog back4app com/parse server best practices/# text= ) 인덱스 필드에서 동등성 또는 범위 조건을 사용하는 쿼리를 선호하세요 예를 들어, query equalto("user", currentuser) 또는 날짜 범위는 인덱스를 사용하지만, != 또는 복잡한 정규 표현식 쿼리는 인덱스를 사용하지 않으므로 피해야 합니다 ( 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 클라우드 함수에서 이 접근 방식을 사용했습니다 5 3 캐싱 전략 클라이언트 측 캐싱 parse sdk는 쿼리 결과를 로컬에 캐싱하는 것을 지원합니다 ( 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 객체)에 저장하여 이후 요청이 10분 이내에 캐시된 결과를 반환하도록 할 수 있습니다 이는 많은 사용자가 ai에게 분석을 자주 요청하는 경우 특히 유용합니다 – api 호출(및 비용)을 줄이기 위해 마지막 분석을 캐시하세요 정적 자산을 위한 cdn back4app는 파일을 자동으로 cdn을 통해 제공합니다 앱에 이미지나 다운로드(예 pdf 보고서 기능)가 있는 경우, parse file 저장소를 사용하여 이를 저장하면 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 ) ( typescript용 백엔드 구축 방법? 튜토리얼 back4app https //www back4app com/tutorials/how to build a backend for typescript# text=back4app%20www,at%20whatever%20interval%20suits ) 다음과 같이 cloud code에서 parse cloud job("jobname", (request) => { }) 로 작업을 정의합니다 ( parse cron job 생성 방법 back4app backend https //www back4app com/docs/platform/parse cron job# text=2,some%20time%20and%20destroy%20them ) 다음과 같은 용도로 사용합니다 매월 요약 이메일 전송 연간 보고서 계산 및 빠른 접근을 위해 저장 오래된 데이터 제거 또는 아카이브 (정리) 사용자가 대기할 필요가 없는 주기적인 작업 웹훅 및 외부 통합 확장함에 따라 더 많은 서비스를 통합할 수 있습니다 (예 api를 통해 은행 거래 데이터를 가져오는 등) 외부 웹훅이나 크론 가져오기를 처리하도록 백엔드를 설계하세요 – 적절한 경우 cloud functions 또는 작업을 사용합니다 예를 들어, 거래를 전송하는 은행 api를 연결하는 경우, 웹훅 수신기를 사용하세요 (cloud code의 사용자 정의 express 경로를 통해 또는 rest를 통해 parse에 기록하는 외부 소형 서버를 통해 수행할 수 있습니다) 5 5 모니터링 및 로깅 로깅 사용 console log() 를 클라우드 코드에서 중요한 작업 주위에 넉넉히 사용하세요 (하지만 프로덕션에서 민감한 정보는 로깅하지 마세요) back4app은 오류나 성능 문제를 볼 수 있는 로그를 제공합니다 이는 느린 쿼리나 실패한 stripe 결제를 식별하는 데 도움이 됩니다 분석 사용 메트릭을 추적하세요 – 예를 들어, 사용자당 몇 건의 거래가 이루어지는지, 몇 건의 ai 쿼리가 발생하는지 – 이를 통해 어떤 기능이 많이 사용되는지 알 수 있습니다 (유료 ai api를 사용하는 경우 최적화 또는 비용 관리가 필요할 수 있습니다) 백엔드 확장 back4app의 자동 확장은 일반적인 웹 규모 앱을 처리하지만, 앱이 정말로 성장한다면 다음 사항을 고려하세요 데이터베이스 최적화 mongodb를 사용하는 경우, 매우 큰 컬렉션은 샤딩이 필요할 수 있습니다 – back4app은 유료 플랜으로 이를 처리할 수 있지만, 수백만 개의 레코드에 도달할 경우 그들과 논의해야 합니다 읽기/쓰기 분리 parse는 앱 레벨에서 이를 직접 수행할 수 없지만, 분석과 같은 많은 읽기가 복제본에서 수행되거나 데이터 웨어하우스로 내보낸 데이터를 통해 이루어지도록 사용을 설계할 수 있습니다 이렇게 하면 기본 db는 트랜잭션 쿼리에 집중할 수 있습니다 요금 제한 남용을 방지하기 위해 적절한 제한을 설정하세요 (back4app은 초당 기본 요금 제한이 있을 수 있습니다; 프론트엔드가 api를 무의식적으로 과도하게 호출하지 않도록 하세요) 동시 클라우드 코드 무거운 클라우드 기능을 실행하는 경우, 제한된 리소스에서 실행된다는 점에 유의하세요 매우 무거운 계산의 경우, aws lambda 또는 별도의 서비스로 오프로드하고 클라우드 코드에서 이를 호출할 수 있습니다 또는 작업을 더 작은 청크로 나누거나 순차적으로 실행할 수 있는 백그라운드 작업을 사용할 수 있습니다 5 6 지속적인 보안 경계 성장함에 따라 보안 요구도 증가합니다 관리자 역할 사용 사용자 데이터에 접근하거나 조정이 필요할 경우 “admin” 역할을 생성하세요 그런 다음 해당 역할에 더 높은 권한을 부여하세요 예를 들어, 관리자는 지원 목적으로 모든 거래를 읽고 쓸 수 있는 권한을 가질 수 있습니다 일반 사용자는 그렇지 않습니다 이렇게 하면 마스터 키를 임의로 사용할 필요가 없습니다 정기 감사 주기적으로 clp 및 acl 설정을 검토하세요 ( back4app의 parse 플랫폼 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=controls,of%20access%20controls ) 개발 중에 테스트를 위해 무언가를 열어두고 잠그는 것을 잊는 것은 쉽습니다 back4app의 보안 대시보드 도구를 사용하여 공개되어서는 안 되는 클래스가 공개되어 있는지 확인하세요 비밀 키 회전 필요할 경우 api 키를 업데이트하고 구성에 보관하세요 키가 유출되었을 가능성이 있는 경우(예 실수로 로그에 기록한 경우) 재생성하세요 stripe와 openai는 키 롤링을 허용합니다 준수 많은 재무 데이터를 처리하는 경우 준수 기준을 고려하세요 예를 들어, 민감한 은행 계좌나 카드 정보를 서버에 저장하지 마세요(그것은 stripe에 맡기세요) 사용자 데이터에 대한 개인 정보 보호 법률을 준수하세요(요청 시 데이터 삭제 제공 등, 이는 back4app과 같은 단일 플랫폼에 모두 있기 때문에 더 쉽습니다) 마지막으로, 규모에서 테스트하세요 가능한 경우 스크립트나 테스트 서비스를 사용하여 많은 사용자가 동시에 앱을 사용하는 것을 시뮬레이션하세요 시스템이 어떻게 작동하는지 지켜보세요 – 예를 들어, getdashboarddata 기능의 응답 시간은 100건의 거래에는 괜찮지만 10,000건에서는 느려질 수 있습니다(그런 경우 매번 합산하는 것을 피하기 위해 예산 클래스에서 월별 총계를 미리 집계하는 것을 고려할 수 있습니다) 이러한 문제를 사전에 식별하면 나중에 머리 아픈 일을 줄일 수 있습니다 결론 이제 전체 스택 ai 기반 개인 재무 도우미를 계획하고 구축하며 확장할 준비가 되었습니다! 🎉 llm 지원 설계 단계에서 시작하면 모든 측면을 고려했음을 보장합니다(그리고 개선 아이디어에 대해 항상 llm과 다시 연결할 수 있습니다) lovable ai 프론트 엔드는 수작업으로 코딩하는 데 걸리는 시간의 일부만에 기능적이고 세련된 ui를 제공했습니다( lovable https //lovable dev/# text= )】, 그리고 데이터, 인증을 처리하고 ai 및 결제와 안전하게 통합되는 강력한 back4app 백엔드 에 연결되어 있습니다 수익 창출을 위해 stripe를 구현했으며, 유료 사용자만 프리미엄 가치를 잠금 해제할 수 있도록 모범 사례를 따랐습니다 캐싱, 효율적인 쿼리 및 백그라운드 작업을 통해 앱은 성장을 처리하도록 설계되었습니다 이제 당신이 시작하고 반복할 차례입니다 사용자 피드백을 모니터링하고, ai 계획 기법을 사용하여 새로운 기능을 브레인스토밍하세요(예 예산 조정을 제안하는 ai 또는 은행 계좌와의 통합), 그리고 경험을 지속적으로 개선하세요 코드 없는/저코드 도구와 자신만의 맞춤 논리를 결합함으로써, 당신은 빠르게 움직일 수 있습니다 하지만 여전히 제품의 품질과 확장성에 대한 통제를 유지할 수 있습니다 당신의 재무 어시스턴트를 구축하는 데 행운을 빕니다 – 당신이 사랑할 수 있는 사랑스러운 그리고 확장 가능한 재무 동반자를 사용자에게 제공할 수 있는 기초가 모두 마련되어 있습니다! 🚀 출처 back4app (parse) 문서 데이터 모델링, 보안 및 stripe 통합에 대한 ( back4app의 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=authorization%20determines%20if%20an%20authenticated,two%20levels%20of%20access%20controls ) ( back4app의 parse 플랫폼에 대한 초보자 가이드 — sitepoint https //www sitepoint com/parse platform back4app beginner guide/# text=parse%20uses%20access%20control%20lists,will%20always%20override%20acl%20permissions ) ( stripe back4app 백엔드 https //www back4app com/docs/cloud code functions/integrations/stripe# text=we%20will%20also%20add%20two,user%20to%20its%20stripe%20counterpart ) ( stripe back4app 백엔드 https //www back4app com/docs/cloud code functions/integrations/stripe# text=in%20this%20guide%2c%20we%20are,integration%20using%20a%20web%20example )7】 사랑스러운 ai 공식 사이트 및 자연어 프롬프트로 웹 앱을 구축하는 가이드 ( 사랑스러운 https //lovable dev/# text= ) ( 사랑스러운 ai 궁극적인 초보자 가이드 https //codeparrot ai/blogs/lovable ai the ultimate beginner guide# text=lovable%20ai%20is%20an%20innovative,pleasing%20designs%20and%20robust%20functionality )7】 사랑스러운 문서 – stripe 통합 팁 (결제 링크 vs 고급 설정 ( 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 블로그 – back4app에서 openai 사용하기 (클라우드 코드 환경 및 보안 키 저장소 ( ai 어시스턴트 백엔드 구축 방법 단계별 가이드! https //blog back4app com/ai assistant backend/# text=at%20this%20stage%20of%20the,the%20required%20cloud%20code%20functions ) ( ai 어시스턴트 백엔드 구축 방법 단계별 가이드! https //blog back4app com/ai assistant backend/# text=you%20can%20now%20access%20the,cloud%20code%20functions%20like%20so )3】 파스 최적화 및 캐싱에 대한 가이드 – 쿼리 최적화 및 캐싱에 대한 지침 ( 파스 서버 최선의 관행 가이드 https //blog back4app com/parse server best practices/# text= ) ( 파스 서버 최선의 관행 가이드 https //blog back4app com/parse server best practices/# text=caching%20queries%20will%20increase%20your,requests%20have%20not%20yet%20completed )9】 back4app 크론 작업 – 유지 관리 및 자동 보고를 위한 백그라운드 작업 예약하는 방법 ( parse 크론 작업을 만드는 방법 back4app 백엔드 https //www back4app com/docs/platform/parse cron job# text=1,created%20in%20a%20cloud code%20directory )7】 llm 계획에 대한 통찰 – gpt 4와 같은 고급 모델이 프로젝트 요구 사항을 효과적으로 분해할 수 있는 방법 ( 내 프로젝트를 관리하기 위한 llm 활용하기 (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】