안녕하세요~ totally 개발자입니다. 오늘은 파이어베이스 Cloud Firestore(클라우드 데이터베이스)를 사용하여 제품들을 담고 불러오도록 하겠습니다. Step 1: 먼저 파이어베이스에 접속하셔서 왼쪽에 "모든 제품"을 클릭하시고 Realtime Database를 클릭해줍니다. Step 2: "데이터베이스 만들기" 버튼을 눌러줍니다. Step 3: 위치를 asia-northeast3 (Seoul)로 설정합니다. Step 4: "프로덕션 모드에서 시작"으로 하고 "사용 설정"을 클릭합니다. Step 5: "컬렉션 시작"을 눌러 컬렉션 ID에 products로 입력하고 "다음"을 눌러줍니다. Firestore의 구조는 Collection이 있고 그 하위에 Document가 있습니다. 하나의 컬렉션에..

안녕하세요~ totally 개발자입니다. 오늘은 파이어베이스 연동을 진행해보도록 하겠습니다. 추후 올릴 유튜브 강좌에서는 아래 연동 부분은 생략할 것이기 때문에 블로그 포스팅을 통해 참고하여 진행해주시기 바랍니다. Step 1: 파이어베이스 콘솔에 접속합니다. https://console.firebase.google.com/u/1/?hl=ko Step 2: 프로젝트를 추가합니다. 저는 test-project로 명명하겠습니다. Step 3: 애널리틱스 사용 설정으로 해주시고 '계속'을 선택합니다. Step 4: 기존에 생성하신 애널리틱스 계정이 있다면 선택해주시고 없으시면 새로 생성하시면 됩니다. Step 5: 애널리틱스 계정을 아래처럼 입력하시고, 위치 선택 후 저장해주시면 됩니다. Step 6: 새 프..

안녕하세요~ totally 개발자입니다. 저번 시간에 이어 이번에는 장바구니 페이지에서 각 제품의 수량을 변경하거나 원하는 제품을 삭제하는 로직을 추가해보도록 하겠습니다. 아직 데이터베이스를 구성하기 전이므로 수동 리스트로 제품 상세 내용을 불러올 것입니다. Step 1: item_basket_page.dart 파일을 열어주셔서 basketList를 아래 productList로 넣어줍니다. class _ItemBasketPageState extends State { List productList = [ Product( productNo: 1, productName: "노트북(Laptop)", productImageUrl: "https://picsum.photos/id/1/300/300", price: 6..

안녕하세요~ totally 개발자입니다. 저번 포스팅까지는 UI구성에 대해 살펴보았고, 이번 포스팅에서는 본격적인 로직 구성을 들어가보도록 하겠습니다. Step 1: 먼저 pubspec.yaml 파일을 열어 shared_preferences 패키지를 입력하고 flutter pub get 해줍니다. 장바구니는 별도의 서버 데이터베이스가 아닌 shared_preferences 패키지를 통해 간단하게 디스크에 저장하고 불러올 것입니다. 이전에 shared_preferences를 설명한 포스팅이 있으니 자세한 내용은 아래를 통해 확인해주시면 됩니다. https://totally-developer.tistory.com/54 [023] 플러터 (Flutter) 배우기 - Shared Preferences (디스크에..

안녕하세요~ totally 개발자입니다. 쇼핑몰을 운영하다보면 주문 취소 및 환불이 생기게 되기 마련입니다. 그렇게 되면 구글 애널리틱스4를 이용하여 전자상거래를 구축할 때 purchase 이벤트를 만들었다면 refund 이벤트도 만들어서 주문 취소 및 환불의 경우에도 데이터를 제대로 집계할 수 있습니다. 다만 여기서 유의하실 점은 5-10분 짧은 시간에 여러 개의 구매 및 환불 이벤트는 연이어 일으키는 경우에는 제대로 집계되지 않을 수 있다는 점도 인지하고 계셔야 합니다. 짧은 시간 내에 여러 번의 환불을 인식해야 하는 경우에는 전자상거래 refund 이벤트가 아니라 별도의 GA4 이벤트(예를 들어 refund_product처럼 가칭 이벤트를 하나 생성해서 별도의 매개변수를 패스하는 방식을 사용해보는 ..

안녕하세요~ totally 개발자입니다. 저번 포스팅에 이어 제품을 주문한 후에 주문을 조회할 수 있는 페이지 디자인을 해보도록 하겠습니다. Step 1: my_order_list_page.dart 파일을 생성해주고 item_checkout_page.dart에 있던 소스 코드 파일을 전부 복사하여 붙여주고 클래스 이름만 MyOrderListPage로 수정해줍니다. Step 2: models 폴더 안에 모델로 사용할 order.dart 파일을 생성해주고 다음처럼 추가해줍니다. Step 3: enums 폴더를 만드시고 그 안에 각각 payment_status.dart 파일과 delivery_status.dart 파일을 만들어줍니다. 결제 상태와 배송 상태를 표시하기 위해 enum(열거형)을 사용하는데 DB에..