Conceitos básicos da AWS

Criar uma aplicação iOS

Criar uma aplicação iOS simples usando o AWS Amplify

Módulo 1: Criar e implantar um aplicativo iOS

Neste módulo, você criará uma aplicação iOS e a implantará na nuvem usando o serviço de hospedagem na web do AWS Amplify.

Introdução

O AWS Amplify oferece um fluxo de trabalho baseado em Git para criar, gerenciar, integrar e implantar back-ends sem servidor para aplicações móveis e da Web. A CLI do Amplify dispõe de uma interface de usuário simples baseada em texto para provisionar e gerenciar serviços de back-end, como autenticação de usuário ou API REST ou GraphQL para suas aplicações. As bibliotecas do Amplify permitem integrar facilmente esses serviços de back-end com apenas algumas linhas de código em suas aplicações.

Neste módulo, começaremos criando uma aplicação iOS nova para fazer anotações de viagem. Uma anotação é composta de um título, uma descrição e uma imagem. Vamos aprimorar essa aplicação nos módulos posteriores.

O que você aprenderá

  • Criar uma aplicação iOS
  • Atualizar a visualização principal
  • Compilar e testar sua aplicação

Conceitos principais

SwiftUI: SwiftUI é uma forma simples de compilar interfaces de usuário em todas as plataformas Apple com a tecnologia da linguagem de programação Swift.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Criar uma aplicação iOS

    Inicie o Xcode e selecione Create a new Xcode project (Criar novo projeto do Xcode) na tela inicial:

    iOSTutorial-Module1-Step1

    Em iOS, Application (Aplicação), selecione Single View App (Aplicativo de visualização única) e clique em Next: (Próximo).

    iOSTutorial-Module1-Step2

    Digite um nome para o projeto, por exemplo Conceitos básicos do iOS. Verifique se Language (Linguagem) está definida como Swift e User Interface (Interface de usuário) como SwiftUI, depois clique em Next: (Próximo).

    iOSTutorial-Module1-Step3

    Por fim, selecione um diretório e clique em Create (Criar) para criar o projeto.

  • Atualizar a visualização principal

    Na lista de arquivos à esquerda do Xcode, abra o ContentView.swift e substitua o código por este conteúdo:

    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
    }

    O que acabamos de adicionar?

    • Criamos uma classe Note para armazenar os dados das anotações. Usamos duas propriedades distintas para ImageName e Image. Cuidaremos de Image mais adiante na seção Adicionar armazenamento.
    • Criamos uma classe UserData para armazenar os dados do usuário específico, neste estágio, apenas uma lista de objetos Note.
    • A visualização principal ContentView contém uma lista de ListRows
    • Cada linha é renderizada por uma ListRow: uma pilha horizontal com uma imagem e texto. O texto é uma pilha vertical com o nome, em negrito, e a descrição da anotação.
    • Por fim, ajustamos ContentView_Previews e adicionamos prepareTestData() para permitir que uma demonstração seja renderizada na tela.
  • Compilar e testar

    Observe a tela para verificar se o layout está conforme o desejado. Caso não veja a tela, habilite-a pelo menu Editor e clique em Canvas (Tela). Talvez também seja necessário clicar no botão resume (retomar) na tela para gerar a demonstração do layout.

    iOSTutorial-Module1-Step4

    Observe que os dados para a demonstração são gerados no código (que começa na linha 70). Os dados não aparecem em tempo de execução. Se tudo estiver correto, compile e inicie o aplicativo no simulador. Clique no menu Product (Produto) e selecione Run (Executar) ou digite  . Se preferir, clique no botão Play (Reproduzir) ▶️ na barra de ferramentas.

    iOSTutorial-Module1-Step5

    Após algum tempo, o aplicativo é iniciado no simulador iOS, com uma tela inicial vazia. Os dados da demonstração não são renderizados em tempo de execução, eles se destinam apenas às demonstrações dentro do Xcode.

    iOSTutorial-Module1-step6

Conclusão

Você criou um aplicativo iOS com êxito. Você está pronto para começar a compilar com o Amplify!

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Inicializar o Amplify