Introducción a AWS

Crear una aplicación iOS

Crear una aplicación iOS sencilla con AWS Amplify

Módulo 1: crear e implementar una aplicación iOS

En este módulo, creará una aplicación iOS y la implementará en la nube con el servicio de alojamiento web de AWS Amplify.

Introducción

AWS Amplify proporciona un flujo de trabajo basado en Git destinado a crear, administrar, integrar e implementar backends sin servidor para aplicaciones web y móviles. La Command Line Interface (CLI, Interfaz de línea de comandos) de Amplify proporciona una interfaz de usuario simple basada en texto para aprovisionar y administrar servicios de backend, como la autenticación de usuario o una API REST o GraphQL para sus aplicaciones. Las bibliotecas de Amplify permiten integrar fácilmente estos servicios de backend con solo algunas líneas de código en las aplicaciones.

En este módulo, comenzaremos con la creación de una nueva aplicación iOS para tomar notas de viaje. Una nota se compone de un título, una descripción y una imagen. Mejoraremos esta aplicación en los siguientes módulos.

Lo que aprenderá

  • Crear una aplicación iOS
  • Actualizar la vista principal
  • Crear y probar su aplicación

Conceptos clave

SwiftUI: SwiftUI es una forma sencilla de crear interfaces de usuario en todas las plataformas de Apple con el poder del lenguaje de programación Swift.

 Tiempo de realización

10 minutos

 Servicios utilizados

Implementación

  • Crear una aplicación iOS

    Inicie Xcode y seleccione Create a new Xcode project (Crear un nuevo proyecto de Xcode) en la pantalla de bienvenida:

    iOSTutorial-Module1-Step1

    En iOS, Application (iOS, Aplicación), seleccione Single View App (Aplicación de vista única) y haga clic en Next (Siguiente):

    iOSTutorial-Module1-Step2

    Escriba un nombre para el proyecto, por ejemplo, Introducción a iOS. Asegúrese de que el lenguaje esté configurado en Swift y la interfaz de usuario sea SwiftUI, luego haga clic en Next (Siguiente):

    iOSTutorial-Module1-Step3

    Por último, seleccione un directorio y haga clic en Create (Crear) para crear el proyecto.

  • Actualizar la vista principal

    Desde la lista de archivos a la izquierda de Xcode, abra ContentView.swift y reemplace el código con este contenido:

    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
    }

    ¿Qué acabamos de agregar?

    • Creamos una clase Note para almacenar los datos de las notas. Utilizamos dos propiedades distintas para ImageName e Image. Nos ocuparemos de Image más adelante en la sección Agregar almacenamiento.
    • Creamos una clase UserData para contener datos específicos del usuario, en esta etapa, solo una lista de objetos de Note.
    • La vista principal ContentView contiene una lista de ListRow's
    • Cada línea es representada por una ListRow: una pila horizontal con una imagen y texto. El texto es una pila vertical con el nombre (en negrita) y la descripción de la nota.
    • Por último, ajustamos ContentView_Previews y agregamos prepareTestData() para permitir una representación de vista previa en el lienzo.
  • Crear y probar

    Verifique el lienzo para verificar que el diseño sea el deseado. Si no ve el lienzo, puede habilitarlo en el menú Editor, luego haga clic en Canvas (Lienzo). Es posible que también deba hacer clic en el botón resume (reanudar) en el lienzo para generar la vista previa del diseño.

    iOSTutorial-Module1-Step4

    Tenga en cuenta que los datos para la vista previa se generan en el código (a partir de la línea 70), los datos no aparecen en el tiempo de ejecución. Si todo está bien, cree e inicie la aplicación en el simulador. Haga clic en el menú Product (Producto) y seleccione Run (Ejecutar) o presione  . Como alternativa, puede hacer clic en el botón Play (Reproducir) ▶️ en la barra de herramientas.

    iOSTutorial-Module1-Step5

    Luego de un momento, la aplicación se inicia en el simulador de iOS, con una pantalla inicial vacía. Los datos de vista previa no se procesan en el tiempo de ejecución, solo están destinados a vistas previas dentro de Xcode.

    iOSTutorial-Module1-step6

Conclusión

Ha creado correctamente una aplicación iOS. ¡Está listo para comenzar a crear con Amplify!

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Inicializar Amplify