Nozioni di base su AWS

Creazione di un'applicazione iOS

Crea una semplice applicazione iOS utilizzando AWS Amplify

Modulo 1: creazione e distribuzione di un'applicazione iOS

In questo modulo, creerai un'applicazione iOS e la distribuirai nel cloud tramite il servizio di hosting Web di AWS Amplify.

Introduzione

AWS Amplify fornisce un flusso di lavoro basato su Git per creare, gestire, integrare e distribuire back-end serverless per applicazioni Web e per dispositivi mobili. L'interfaccia a riga di comando (CLI) Amplify mette a disposizione una semplice interfaccia utente basata su testo per offrire e gestire servizi di back-end, ad esempio l'autenticazione utente o l'API REST o GraphQL per le tue applicazioni. Le librerie Amplify consentono una facile integrazione di questi servizi di back-end con l'aggiunta di poche righe di codice alle tue applicazioni.

In questo modulo, inizieremo creando una nuova applicazione iOS per prendere note di viaggio. Una nota è composta da un titolo, una descrizione e un'immagine. Miglioreremo questa applicazione nei seguenti moduli.

Avrai modo di approfondire i seguenti aspetti

  • Creazione di un'applicazione iOS
  • Aggiornamento della visualizzazione principale
  • Creazione e test dell'applicazione

Concetti chiave

SwiftUI: SwiftUI rappresenta un modo semplice per creare interfacce utente in tutte le piattaforme Apple con la potenza del linguaggio di programmazione Swift.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Creazione di un'applicazione iOS

    Avvia Xcode e seleziona Create a new Xcode project (Crea un nuovo progetto Xcode) dalla splash screen:

    iOSTutorial-Module1-Step1

    In iOS, Application (Applicazione) , seleziona Single View App (App visualizzazione singola), quindi fai clic su Next (Avanti):

    iOSTutorial-Module1-Step2

    Digita un nome per il progetto, ad esempio iOS Getting Started. Assicurati che il linguaggio sia impostato su Swift e che l'interfaccia utente sia SwiftUI, quindi fai clic su Next (Avanti):

    iOSTutorial-Module1-Step3

    Infine, seleziona una directory e fai clic su Create (Crea) per creare il progetto.

  • Aggiornamento della visualizzazione principale

    Dall'elenco di file a sinistra di Xcode, apri ContentView.swift e sostituisci il codice con questo contenuto:

    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
    }

    Che cosa abbiamo aggiunto?

    • Abbiamo creato una classe Note per archiviare i dati delle note. Abbiamo utilizzato due proprietà diverse per ImageName e Image. Ci occuperemo dell'immagine in seguito nella sezione Aggiunta di storage.
    • Abbiamo creato una classe UserData per contenere i dati specifici dell'utente, in questa fase solo un elenco di oggetti Note.
    • La visualizzazione principale ContentView contiene un elenco di ListRow
    • Ogni riga è renderizzata da una ListRow: una stack orizzontale con un'immagine e testo. Il testo è una stack verticale con il nome della nota, in grassetto, e la relativa descrizione.
    • Infine, abbiamo adattato le ContentView_Previews e abbiamo aggiunto prepareTestData() per consentire una renderizzazione dell'anteprima nel canvas.
  • Creazione e test

    Controlla il canvas per verificare che il layout corrisponda alle aspettative. Se non vedi il canvas, puoi abilitarlo utilizzando il menu Editor, quindi facendo clic su Canvas. Potrebbe inoltre essere necessario fare clic sul pulsante resume (Riprendi) per generare l'anteprima del layout.

    iOSTutorial-Module1-Step4

    Tieni presente che i dati dell'anteprima vengono generati nel codice (a partire dalla riga 70) e non compaiono in runtime. Se l'aspetto è quello previsto, crea e avvia l'applicazione nel simulatore. Fai clic sul menu Product (Prodotto) e seleziona Run (Esegui) o digita . In alternativa, puoi fare clic sul pulsante Play (Riproduci) ▶️ nella barra degli strumenti.

    iOSTutorial-Module1-Step5

    Dopo qualche istante, l'applicazione parte nel simulatore iOS con una schermata inizialmente vuota. I dati dell'anteprima non vengono renderizzati in runtime, sono previsti solo per l'anteprima in Xcode.

    iOSTutorial-Module1-step6

Conclusione

Hai creato correttamente un'applicazione iOS. Ora sei pronto per iniziare a creare con Amplify.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Inizializzazione di Amplify