Introducción a AWS
Crear una aplicación iOS
Crear una aplicación iOS sencilla con AWS Amplify

crear una aplicación ios
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
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:
En iOS, Application (iOS, Aplicación), seleccione Single View App (Aplicación de vista única) y haga clic en Next (Siguiente):
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):
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.
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.
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.
Conclusión
Ha creado correctamente una aplicación iOS. ¡Está listo para comenzar a crear con Amplify!