AWS 시작하기

iOS 애플리케이션 구축

AWS Amplify를 사용하여 단순한 iOS 애플리케이션 생성

모듈 1: iOS 앱 생성 및 배포

이 모듈에서는 AWS Amplify의 웹 호스팅 서비스를 사용하여 iOS 애플리케이션을 생성하고 클라우드에 배포합니다.

소개

AWS Amplify는 웹 및 모바일 애플리케이션에 대한 서버리스 백엔드의 생성, 관리, 통합 및 배포를 위한 Git 기반 워크플로를 제공합니다. Amplify CLI는 사용자 인증 또는 REST 또는 GraphQL API와 같은 애플리케이션 백엔드 서비스를 프로비저닝하고 관리할 수 있는 단순한 텍스트 기반 사용자 인터페이스를 제공합니다. Amplify 라이브러리는 이러한 백엔드 서비스를 코드 몇 줄로 손쉽게 애플리케이션에 통합하는 데 사용됩니다.

이 모듈에서는 여행 메모를 기록하는 새 iOS 애플리케이션을 생성합니다. 메모는 제목, 설명 및 사진으로 구성됩니다. 다음 모듈에서는 이 애플리케이션에 향상된 기능을 추가합니다.

배우게 될 내용

  • iOS 애플리케이션 생성
  • 기본 보기 업데이트
  • 애플리케이션 구축 및 테스트

주요 개념

SwiftUI – SwiftUISwift 프로그래밍 언어를 활용하여 모든 Apple 플랫폼에 사용자 인터페이스를 구축할 수 있는 간편한 방법입니다.

 완료 시간

10분

 사용되는 서비스

구현

  • iOS 애플리케이션 생성

    Xcode를 시작하고 시작 화면에서 [새 Xcode 프로젝트 생성(Create a new Xcode project)]을 선택합니다.

    iOSTutorial-Module1-Step1

    [iOS, 애플리케이션(iOS, Application)]에서 [단일 보기 앱(Single View App)]을 선택하고 [다음:(Next:)]을 클릭합니다.

    iOSTutorial-Module1-Step2

    프로젝트 이름을 입력합니다(예: iOS Getting Started). [언어(Language)]가 [Swift]로 설정되어 있고 [사용자 인터페이스(User Interface)]가 [SwiftUI]로 설정되어 있는지 확인한 후 [다음:(Next:)]을 클릭합니다.

    iOSTutorial-Module1-Step3

    마지막으로 디렉터리를 선택하고 [생성(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)] 버튼을 클릭하여 레이아웃 미리 보기를 생성해야 할 수도 있습니다.

    iOSTutorial-Module1-Step4

    미리 보기 데이터는 코드로 생성됩니다(70번 줄에서 시작). 이 데이터는 런타임 시 표시되지 않습니다. 모든 항목을 확인한 후 시뮬레이터에서 앱을 구축하고 시작합니다. 제품(Product) 메뉴에서 실행(Run)을 선택하거나 을(를) 입력합니다. 또는 도구 모음에서 [재생(Play)]▶️ 버튼을 클릭해도 됩니다.

    iOSTutorial-Module1-Step5

    잠시 후 iOS 시뮬레이터에서 앱이 시작되고 초기 빈 화면이 표시됩니다. 미리 보기 데이터는 런타임 시 렌더링되지 않으며 Xcode 안에서 미리 보기용으로만 제공됩니다.

    iOSTutorial-Module1-step6

결론

iOS 앱이 생성되었습니다. 이제 Amplify로 구축을 시작할 수 있습니다!

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
닫기
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
닫기

Amplify 초기화