How to Create a Basic CRUD Application with Blazor?

개요 이 가이드는 blazor를 사용하여 완전한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 안내합니다 이 튜토리얼에서는 back4app 프로젝트를 구성하고, 데이터베이스 스키마를 설계하며, rest api를 통해 blazor 프론트엔드를 back4app과 통합합니다 이 과정은 강력한 백엔드를 구축하는 데 도움이 되며, 웹 애플리케이션이 데이터를 효율적으로 관리할 수 있도록 보장합니다 먼저, basic crud app blazor 라는 제목의 back4app 프로젝트를 설정하여 데이터 관리 시스템의 중추 역할을 하게 됩니다 다음으로, back4app ai 에이전트의 도움을 받거나 수동으로 자세한 컬렉션과 필드를 설정하여 확장 가능한 데이터베이스 설계를 만듭니다 그 후, back4app 관리 앱의 힘을 활용하여 사용자 친화적인 드래그 앤 드롭 인터페이스로 컬렉션을 손쉽게 관리합니다 마지막으로, rest api를 사용하여 blazor 프론트엔드를 back4app에 연결하고 적절한 접근 제어로 백엔드를 안전하게 보호합니다 이 튜토리얼이 끝날 무렵, 필수 crud 작업과 사용자 인증 및 안전한 데이터 업데이트를 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 될 것입니다 주요 학습 포인트 신뢰할 수 있는 백엔드를 사용하여 데이터 작업을 원활하게 처리하는 crud 애플리케이션을 구축합니다 확장 가능한 백엔드를 생성하고 이를 blazor 프론트엔드와 통합하는 방법에 대한 통찰력을 얻습니다 back4app 관리 앱의 드래그 앤 드롭 기능을 활용하여 데이터 관리를 간소화합니다 애플리케이션을 신속하게 배포하기 위한 docker 컨테이너화 등 배포 기술을 배웁니다 전제 조건 시작하기 전에 다음을 확인하세요 back4app 계정과 새 프로젝트가 설정되어 있습니다 도움이 필요하면 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 방문하세요 blazor 개발 환경이 필요합니다 최신 net sdk(버전 6 이상)를 사용하여 visual studio 또는 visual studio code를 사용하세요 c#, blazor 및 restful api에 대한 기본 지식이 필요합니다 필요한 경우 blazor 문서 https //docs microsoft com/en us/aspnet/core/blazor 를 확인하세요 1단계 – 초기 프로젝트 설정 새 back4app 프로젝트 설정하기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 선택하세요 프로젝트 제목을 입력하세요 basic crud app blazor 및 화면의 지침에 따라 생성 프로세스를 완료하세요 새 프로젝트 만들기 설정 후, 새 프로젝트가 대시보드에 표시되어 백엔드를 구성할 수 있는 견고한 기반을 제공합니다 2단계 – 데이터베이스 스키마 설계하기 데이터 모델 만들기 이 기본 crud 애플리케이션을 위해 여러 컬렉션을 만들어야 합니다 아래는 데이터베이스를 효율적으로 설정하기 위한 필드와 데이터 유형이 포함된 컬렉션의 예입니다 1\ 항목 수집 필드 데이터 유형 목적 id 객체 id 자동 생성된 고유 식별자 제목 문자열 항목의 이름 또는 제목 설명 문자열 항목에 대한 간단한 요약입니다 생성일 날짜 항목이 생성된 시간 스탬프 업데이트됨 날짜 항목이 마지막으로 수정된 시간 2\ 사용자 수집 필드 데이터 유형 목적 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 사용자를 위한 고유 식별자 이메일 문자열 사용자의 이메일 주소 비밀번호 해시 문자열 안전한 로그인을 위한 암호화된 비밀번호 생성일 날짜 계정 생성의 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 이러한 컬렉션은 back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 설정하고 필요한 열을 추가하여 수동으로 만들 수 있습니다 새 클래스 만들기 데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필드가 필수인지 여부를 결정하여 열을 정의할 수 있습니다 열 만들기 스키마 생성을 위한 back4app ai 에이전트 사용하기 back4app ai 에이전트는 대시보드에서 직접 스키마 생성을 간소화합니다 컬렉션과 필드에 대한 세부 정보를 포함한 프롬프트를 입력하면 ai 에이전트가 필요한 데이터베이스 스키마를 자동으로 생성합니다 ai 에이전트 활용 방법 ai 에이전트에 접근하기 back4app 대시보드에 로그인하고 설정 또는 메인 메뉴에서 ai 에이전트를 찾습니다 데이터 모델 정의하기 컬렉션과 필드를 나열하는 설명 프롬프트를 붙여넣습니다 검토 및 확인하기 제안된 스키마를 확인하고 프로젝트에 적용합니다 샘플 프롬프트 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 이 ai 에이전트를 사용하면 시간을 절약할 뿐만 아니라 일관되고 효율적인 스키마 설정을 보장합니다 3단계 – 관리자 앱 활성화 및 crud 작업 관리 관리자 앱 소개 back4app 관리자 앱은 백엔드 데이터를 관리하기 위한 코드 없는 드래그 앤 드롭 인터페이스를 제공합니다 이 직관적인 도구를 사용하면 crud 작업을 쉽게 수행할 수 있습니다 관리자 앱 활성화 back4app 대시보드에서 “더보기” 메뉴로 이동합니다 “관리자 앱” 을 클릭한 다음 “관리자 앱 활성화 ” 초기 관리자 사용자를 생성하여 관리자 자격 증명을 설정합니다 이로 인해 기본 역할과 시스템 컬렉션도 설정됩니다 관리자 앱 활성화 활성화한 후, 관리자 앱에 로그인하여 컬렉션과 데이터를 관리합니다 관리자 앱 대시보드 관리자 앱으로 crud 작업 수행하기 관리자 앱 내에서 다음을 수행할 수 있습니다 레코드 생성 컬렉션 내에서 “레코드 추가” 버튼을 클릭하여 새 항목을 추가합니다 레코드 읽기/업데이트 레코드를 클릭하여 세부 정보를 확인하거나 필드를 수정합니다 레코드 삭제 더 이상 필요하지 않은 항목을 제거합니다 이 간단한 드래그 앤 드롭 인터페이스는 데이터 관리 경험을 크게 향상시킵니다 4단계 – blazor와 back4app 연결하기 이제 백엔드가 구성되었으므로 blazor 프론트엔드를 back4app과 통합할 시간입니다 blazor에서 rest api 사용하기 parse sdk는 blazor에 적용되지 않으므로 crud 작업을 수행하기 위해 rest api를 활용합니다 blazor 애플리케이션에서 httpclient를 사용하여 back4app의 rest 엔드포인트와 상호작용합니다 예시 rest를 통한 항목 가져오기 항목을 가져오기 위해 blazor 프로젝트에 서비스를 만드세요 예를 들어 // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } blazor 구성 요소 내에서 이러한 api 호출을 통합하여 crud 작업을 관리하세요 5단계 – 백엔드 보안 액세스 제어 목록(acl) 구현 객체에 acl을 설정하여 데이터를 보호하세요 예를 들어, 개인 항목을 만들기 위해 public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } 클래스 수준 권한(clp) 구성 back4app 대시보드 내에서 각 컬렉션의 clp를 조정하여 권한이 있는 사용자만 민감한 데이터에 접근하거나 수정할 수 있도록 하세요 6단계 – 사용자 인증 관리 blazor에서 사용자 계정 설정 back4app은 parse의 사용자 클래스를 활용하여 인증을 처리합니다 blazor 앱에서 rest 호출을 통해 사용자 가입 및 로그인을 관리합니다 예를 들어 // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } 로그인 및 세션 관리를 위해 유사한 방법을 구현할 수 있습니다 소셜 로그인, 이메일 인증 및 비밀번호 복구와 같은 추가 기능은 back4app 대시보드를 통해 설정할 수 있습니다 7단계 – blazor 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리에서 코드를 배포하여 blazor 애플리케이션을 원활하게 호스팅할 수 있습니다 7 1 프로덕션 빌드 생성 터미널에서 프로젝트 디렉토리를 엽니다 게시 명령을 실행합니다 dotnet publish c release 이 명령은 blazor 앱을 위한 최적화된 정적 파일이 포함된 게시 폴더를 생성합니다 빌드를 확인합니다 출력 폴더에 필요한 파일(예 index html , javascript, css 등)이 포함되어 있는지 확인합니다 7 2 코드 정리 및 업로드 귀하의 git 저장소는 blazor 애플리케이션의 전체 소스를 포함해야 합니다 예시 폴더 구조는 다음과 같을 수 있습니다 basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md 샘플 파일 program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); github에 커밋하고 푸시하기 프로젝트 폴더에서 git 초기화하기 (아직 하지 않았다면) git init 파일 추가하기 git add 변경 사항 커밋하기 git commit m "blazor 프론트엔드 소스 코드의 초기 커밋" github 리포지토리 생성하기 이름을 basic crud app blazor frontend 로 설정하세요 리포지토리 푸시하기 git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 웹 배포와 리포지토리 통합하기 웹 배포 옵션에 접근하기 back4app 대시보드에서 프로젝트 ( basic crud app blazor )를 열고 웹 배포 섹션으로 이동합니다 github 계정 연결하기 프롬프트에 따라 github 계정을 연결하여 back4app이 귀하의 리포지토리에 접근할 수 있도록 합니다 리포지토리 및 브랜치 선택하기 리포지토리 (예 basic crud app blazor frontend )와 브랜치 (예 main )를 선택하여 blazor 코드를 포함합니다 7 4 배포 구성 다음과 같은 추가 세부정보를 제공하십시오 빌드 명령 게시된 폴더가 미리 생성되지 않은 경우, 다음과 같은 명령을 지정하십시오 dotnet publish c release 출력 디렉토리 출력 경로를 설정하십시오 (예 bin/release/net6 0/wwwroot ) 환경 변수 구성에서 필요한 환경 설정(예 api 키)을 추가하십시오 7 5 docker로 blazor 애플리케이션 컨테이너화하기 배포를 위해 docker를 선호하는 경우, 리포지토리에 dockerfile 을 포함하십시오 다음은 예입니다 \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] 그런 다음, 웹 배포 설정에서 docker 옵션을 선택하여 컨테이너화된 애플리케이션을 배포하십시오 7 6 애플리케이션 시작하기 배포 시작하기 back4app 대시보드에서 배포 버튼을 클릭하세요 빌드 모니터링하기 back4app이 github에서 코드를 가져오고, 필요시 빌드 명령을 실행하며, 컨테이너에 앱을 배포합니다 url 가져오기 배포 과정이 완료되면 back4app이 호스팅된 blazor 애플리케이션의 url을 제공합니다 7 7 배포 확인하기 제공된 url 열기 브라우저에서 url을 방문하여 배포된 앱을 확인하세요 애플리케이션 테스트하기 모든 페이지가 올바르게 로드되고 crud 작업이 예상대로 작동하는지 확인하세요 필요시 문제 해결하기 브라우저 개발자 도구를 사용하고 back4app의 배포 로그를 검토하여 문제를 진단하세요 8단계 – 요약 및 추가 탐색 축하합니다! blazor와 back4app을 사용하여 기본 crud 애플리케이션을 성공적으로 구축했습니다 " basic crud app blazor "라는 제목의 프로젝트를 설정하고, 항목 및 사용자에 대한 컬렉션을 설계했으며, 원활한 데이터 관리를 위해 back4app 관리 앱을 활용했습니다 또한, rest api를 사용하여 blazor 프론트엔드를 back4app과 통합하고 강력한 보안 조치를 적용했습니다 향후 단계 프론트엔드 확장 더욱 상세한 보기, 검색 기능 또는 실시간 알림으로 blazor 앱을 향상시키세요 고급 기능 추가 클라우드 기능, 타사 통합 또는 역할 기반 권한을 통합하는 것을 고려하세요 추가 자료 상담 back4app 문서 https //www back4app com/docs 및 기타 고급 튜토리얼을 검토하여 애플리케이션을 더욱 최적화하고 확장하세요 이 가이드를 따르면, 이제 back4app을 사용하여 blazor 애플리케이션을 위한 확장 가능하고 안전한 crud 백엔드를 구축할 수 있는 기반이 마련되었습니다 즐거운 코딩 되세요!