AWS 시작하기
iOS 애플리케이션 구축
AWS Amplify를 사용하여 단순한 iOS 애플리케이션 생성
모듈 1: iOS 앱 생성 및 배포
이 모듈에서는 AWS Amplify의 웹 호스팅 서비스를 사용하여 iOS 애플리케이션을 생성하고 클라우드에 배포합니다.
소개
AWS Amplify는 웹 및 모바일 애플리케이션에 대한 서버리스 백엔드의 생성, 관리, 통합 및 배포를 위한 Git 기반 워크플로를 제공합니다. Amplify CLI는 사용자 인증 또는 REST 또는 GraphQL API와 같은 애플리케이션 백엔드 서비스를 프로비저닝하고 관리할 수 있는 단순한 텍스트 기반 사용자 인터페이스를 제공합니다. Amplify 라이브러리는 이러한 백엔드 서비스를 코드 몇 줄로 손쉽게 애플리케이션에 통합하는 데 사용됩니다.
이 모듈에서는 여행 메모를 기록하는 새 iOS 애플리케이션을 생성합니다. 메모는 제목, 설명 및 사진으로 구성됩니다. 다음 모듈에서는 이 애플리케이션에 향상된 기능을 추가합니다.
배우게 될 내용
- iOS 애플리케이션 생성
- 기본 보기 업데이트
- 애플리케이션 구축 및 테스트
완료 시간
10분
사용되는 서비스
구현
-
iOS 애플리케이션 생성
Xcode를 시작하고 시작 화면에서 [새 Xcode 프로젝트 생성(Create a new Xcode project)]을 선택합니다.
[iOS, 애플리케이션(iOS, Application)]에서 [단일 보기 앱(Single View App)]을 선택하고 [다음:(Next:)]을 클릭합니다.
프로젝트 이름을 입력합니다(예: iOS Getting Started). [언어(Language)]가 [Swift]로 설정되어 있고 [사용자 인터페이스(User Interface)]가 [SwiftUI]로 설정되어 있는지 확인한 후 [다음:(Next:)]을 클릭합니다.
마지막으로 디렉터리를 선택하고 [생성(Create)]을 클릭하여 프로젝트를 생성합니다.
-
기본 보기 업데이트
Xcode 왼쪽의 파일 목록에서 ContentView.swift를 열고 다음 콘텐츠로 코드를 바꿉니다.
import SwiftUI // singleton object to store user data class UserData : ObservableObject { private init() {} static let shared = UserData() @Published var notes : [Note] = [] @Published var isSignedIn : Bool = false } // the data class to represents Notes class Note : Identifiable, ObservableObject { var id : String var name : String var description : String? var imageName : String? @Published var image : Image? init(id: String, name: String, description: String? = nil, image: String? = nil ) { self.id = id self.name = name self.description = description self.imageName = image } } // a view to represent a single list item struct ListRow: View { @ObservedObject var note : Note var body: some View { return HStack(alignment: .center, spacing: 5.0) { // if there is an image, display it on the left if (note.image != nil) { note.image! .resizable() .frame(width: 50, height: 50) } // the right part is a vertical stack with the title and description VStack(alignment: .leading, spacing: 5.0) { Text(note.name) .bold() if ((note.description) != nil) { Text(note.description!) } } } } } // this is the main view of our app, // it is made of a Table with one line per Note struct ContentView: View { @ObservedObject private var userData: UserData = .shared var body: some View { List { ForEach(userData.notes) { note in ListRow(note: note) } } } } // this is use to preview the UI in Xcode struct ContentView_Previews: PreviewProvider { static var previews: some View { let _ = prepareTestData() return ContentView() } } // this is a test data set to preview the UI in Xcode func prepareTestData() -> UserData { let userData = UserData.shared userData.isSignedIn = true let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two." let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic") let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone") n1.image = Image(systemName: n1.imageName!) n2.image = Image(systemName: n2.imageName!) userData.notes = [ n1, n2 ] return userData }
추가한 항목
- Note 데이터를 저장할 Note 클래스를 생성했습니다. ImageName과 Image의 고유 속성 2개를 사용했습니다. Image는 나중에 스토리지 추가 섹션에서 처리합니다.
- 특정 사용자 데이터를 보관할 UserData 클래스를 생성했습니다. 이 단계에서는 Note 객체의 목록만 포함됩니다.
- 기본 보기 ContentView에는 ListRow 목록이 포함됩니다.
- 각 줄은 이미지와 텍스트가 있는 수평 스택인 ListRow에 의해 렌더링됩니다. 텍스트는 굵게 표시된 메모 이름과 메모 설명이 있는 수직 스택입니다.
- 마지막으로 캔버스에서 렌더링을 미리 볼 수 있도록 ContentView_Previews를 조정하고 prepareTestData()를 추가했습니다.
-
구축 및 테스트
캔버스를 확인하여 레이아웃이 원하는 대로 표시되는지 확인합니다. 캔버스가 표시되지 않는 경우 [편집기(Editor)] 메뉴를 사용하여 활성화한 다음 [캔버스(Canvas)]를 클릭하면 됩니다. [캔버스(Canvas)]에서 [다시 시작(resume)] 버튼을 클릭하여 레이아웃 미리 보기를 생성해야 할 수도 있습니다.
미리 보기 데이터는 코드로 생성됩니다(70번 줄에서 시작). 이 데이터는 런타임 시 표시되지 않습니다. 모든 항목을 확인한 후 시뮬레이터에서 앱을 구축하고 시작합니다. 제품(Product) 메뉴에서 실행(Run)을 선택하거나 을(를) 입력합니다. 또는 도구 모음에서 [재생(Play)]▶️ 버튼을 클릭해도 됩니다.
잠시 후 iOS 시뮬레이터에서 앱이 시작되고 초기 빈 화면이 표시됩니다. 미리 보기 데이터는 런타임 시 렌더링되지 않으며 Xcode 안에서 미리 보기용으로만 제공됩니다.