somedd / swift-storeapp Goto Github PK

• 스토리보드 ViewController에 Cell에 Section Header로 사용할 Custom Cell을 추가한다.

• 상세 화면(DetailViewController)으로 선택한 cell의 detail_hash 값을 전달하세요.
• http://crong.codesquad.kr:8080/woowa/detail/{detail_hash} URL 형식으로 요청하고 받은 JSON 데이터를 Decode 하는 네트워크 담당 모델 객체를 만드세요.
  • URL 예시 http://crong.codesquad.kr:8080/woowa/detail/H9881 또는 http://crong.codesquad.kr:8080/woowa/detail/HDF4C
• 상세 화면을 표시하기 전에 네트워크 담당 모델 객체에서 데이터를 받아서 화면 정보를 채워서 표시하세요.
  • self.view 커스텀 클래스를 UIScrollView로 지정하고 하위 뷰들은 self.view.contentView 에 추가하세요.
  • ScrollView ContentSize에 대해 찾아보고, 전체 콘텐츠 높이를 계산해서 스크롤되도록 값을 지정하세요.
  • 상단 ScrollView 에 thumb_images 항목의 이미지들을 Page 형태로 추가하세요. 좌우로 페이지 넘기듯이 넘어가도록 만드세요.
  • 설명 아래부분에는 제품 상세 설명을 위해서 detail_section 항목의 이미지들을 코드로 이어서 붙이세요.

피드백 모음

• 아래 주소별로 JSON 데이터를 받아오는 모델 객체를 만든다.
  • HTTP 프로토콜 GET 요청으로 다음 주소에서 메인반찬 JSON 데이터를 받는다. http://crong.codesquad.kr:8080/woowa/main
  • HTTP 프로토콜 GET 요청으로 다음 주소에서 국.찌게 JSON 데이터를 받는다. http://crong.codesquad.kr:8080/woowa/soup
  • HTTP 프로토콜 GET 요청으로 다음 주소에서 밑반찬 JSON 데이터를 받는다. http://crong.codesquad.kr:8080/woowa/side

• 다음 2개 파일을 다운로드해서 프로젝트에 복사하고 JSONDecoder를 활용해서 모델 객체를 기존 main과 함께 섹션(section)을 구분할 수 있도록 개선한다.

• HTTP 요청은 URLSession 관련 프레임워크를 활용한다.
  • 응답으로 받은 JSON 데이터를 마찬가지 방법으로 Decode해서 StoreItem 객체로 변환한다.
  • 모델 객체는 응답이 도착하면 Notification을 보내서 테이블뷰의 해당 섹션만 업데이트한다.

• 스토리보드 ViewController에 Cell을 Content View를 기준으로 하위 뷰들에 오토레이아웃을 적용한다.
  • 메뉴 이미지 뷰는 top, bottom, lead 제약을 주고 width 제약을 넣는다. height와 width 비율은 1:1로 aspectRatio를 맞춘다.
  • 타이틀 제목은 메뉴 이미지보다 10pt 우측에 lead 제약을 주고, top, tail 제약을 주고, height 제약을 준다.
  • 상세 설명도 top 제약만 타이틀 제목보다 4pt 띄우고, 나머지는 타이틀에 맞춘다.
  • 메뉴 가격도 width 제약을 넣고, 나머지는 타이틀과 마찬가지로 제약을 준다.
  • 이벤트 배지는 최소width 제약만 주고 글자 내용에 맞추고, 없을 경우 감춘다.

• 다운로드가 완료되면 앱 디렉토리 중에 Cache 디렉토리에 URL에 있는 파일명으로 저장한다.
• 셀을 표기할 때 이미 다운로드된 이미지가 있으면 표시하고, 새로운 파일이 다운로드 완료되면 해당 이미지를 테이블뷰 셀에 뒤늦게(lazy) 표시한다.
  • 화면에 표시할 때 다운로드를 담당하는 스레드와 화면을 처리하는 스레드를 위한 GCD Queue를 구분해서 처리한다.
  • 이미지를 다 받을때 까지 화면이 하얗게 멈춰있지 않도록 만든다.

Step5 피드백 모음.

• 3개의 JSON 데이터가 모두 받고 나면 JSON 데이터에 포함된 이미지 URL을 분리해서 Image 파일들을 다운로드 받는다.
  • 이미지 파일들을 병렬처리해서 한꺼번에 여러개를 다운로드하도록 구성한다.
  • (선택1) GCD Queue를 활용하거나
  • (선택2)Download Task 방식으로 구현한다.

• Reachability.m 또는 Alamofire를 프로젝트에 추가한다.
• 앱 시작할 때 인터넷 연결이 안되어 있으면, JSON 데이터 파일로 첫 화면을 로딩한다. 그 이후 앱이 서버에 연결 가능하면 네트워크 모델을 통해서 JSON 데이터를 받아서 화면을 갱신한다.

피드백 모음

• 위 파일을 다운로드해서 프로젝트에 복사하고 JSONDecoder를 활용해서 내부에 Array 타입으로 변환하는 DataSource에서 사용할 모델 객체를 만든다.
  • subscript로 배열에 index로 접근하면 StoreItem 구조체를 반환한다.
  • StoreItem은 Decodable 프로토콜을 채택하고, main.json에 있는 키와 값을 매핑해서 속성으로 갖도록 구현한다.

UIStackView로 가격 및 뱃지 View 변경

피드백 모음

• Cocoapod 를 설치한다.
  • https://github.com/devxoul/Toaster 저장소에 있는 Toaster 패키지를 cocoapod 으로 설치한다.
  • pod으로 설치한 Toaster 모듈을 import 하고 테이블뷰 셀을 터치하면 (didSelect) 타이틀 메뉴와 (할인된)최종 가격 정보를 toast 형태로 표시한다.

• 앱 실행중에 연결성이 바뀌는 경우 노티를 받아서 연결이 안되어 있는 경우 화면의 가장자리(border)를 UIColor.red 로 표시한다.
• 연결된 경우 border를 UIColor.green 으로 표시한다.

• 상세 화면에 대한 Delegate 프로토콜과 프로토콜을 채택하는 속성을 추가하세요.
  • 상세 화면에서 결과를 전달하기 위한 Delegate 프로토콜을 선언하세요.
  • 프로토콜에는 주문을 완료했을 때 호출할 메소드를 선언하세요.
  • ViewController에는 프로토콜을 채택하고 위의 메소드를 구현하세요.
• [주문하기] 버튼을 누르면 델리게이트 객체에 주문 완료 메소드를 호출합니다.
  • 프로토콜 채택한 객체는 슬랙으로 “누가-얼마짜리-메뉴” 주문을 POST 요청으로 보내는 기능을 네트워크 모델에 추가하세요.
  • 주문을 완료하고 나면 창을 닫고 이전 화면으로 돌아가도록 작성하세요.
  • 슬랙 incoming hook URL https://hooks.slack.com/services/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

• ViewController 를 Navigation Controller로 embed
• cell을 선택하면 상품 상세 화면을 보이도록 새로운 뷰 컨트롤러를 구현
• 상세 화면 디자인은 NextStep 참고

• 테이블뷰에 새로운 프로토타입 Cell을 추가하고, Custom 스타일로 지정하고 다음과 같이 디자인한다.
• UITableViewDataSource 프로토콜 구현 부분에서 cell을 위에서 만든 DataSource 모델 객체에 접근해서 테이블뷰를 표시한다.

피드백 모음

Step3 피드백 반영 및 Step4 피드백 모음

피드백 모음