Démarrer avec AWS

Créer une application iOS

Créer une application iOS simple avec AWS Amplify

Module 1 : Créer et déployer une application iOS

Dans ce module, vous allez créer une application iOS et la déployer dans le cloud en utilisant le service d'hébergement Web AWS Amplify.

Introduction

AWS Amplify propose un flux de travail basé sur Git pour la création, la gestion, l'intégration et le déploiement de backends sans serveur dédiés aux applications Web et mobiles. L'interface en ligne de commande Amplify (Amplify CLI) simplifie la provision et la gestion des services backend, notamment l'authentification d'utilisateurs et les API REST ou GraphQL pour vos applications. Les bibliothèques Amplify vous permettent d'intégrer facilement ces services en ajoutant seulement quelques lignes de code à vos applications.

Nous allons commencer ce module par la création d'une nouvelle application iOS permettant d'enregistrer des notes dans un carnet de voyage. Une note se compose d'un titre, d'une description et d'une image. Nous améliorerons cette application au fil des modules.

Ce que vous apprendrez

  • Créer une application iOS
  • Mettre à jour l'affichage principal
  • Créer et tester votre application

Concepts clés

SwiftUI – SwiftUI offre une méthode simple pour créer des interfaces utilisateur sur toutes les plates-formes Apple avec la puissance du langage de programmation Swift.

 Durée

10 minutes

 Services utilisés

Implémentation

  • Créer une application iOS

    Démarrez Xcode et sélectionnez Create a new Xcode project (Créer un projet Xcode) dans l'écran d'introduction :

    iOSTutorial-Module1-Step1

    Sous iOS, Application, sélectionnez Single View App (Application à affichage unique) et cliquez sur Suivant :

    iOSTutorial-Module1-Step2

    Renseignez le nom de votre projet, par exemple iOS Getting Started. Vérifiez que la langue est définie sur Swift et l'interface sur SwiftUI, puis cliquez sur Suivant :

    iOSTutorial-Module1-Step3

    Pour finir, sélectionnez un répertoire et cliquez sur Créer pour créer le projet.

  • Mettre à jour l'affichage principal

    Dans la liste de fichiers à gauche de Xcode, ouvrez ContentView.swift et remplacez le code par le contenu suivant :

    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
    }

    Que venons-nous d'ajouter ?

    • Nous avons créé une classe Note pour stocker les données des notes. Nous avons utilisé deux propriétés distinctes pour ImageName et Image. Nous nous occuperons d'Image plus tard dans la section Ajouter le stockage.
    • Nous avons créé une classe UserData pour contenir les données spécifiques de l'utilisateur, à ce stade, juste une liste d'objets Note.
    • L'affichage principal ContentView contient une liste de ListRow.
    • Chaque ligne est rendue par un ListRow : une pile horizontale avec une image et du texte. Le texte est une pile verticale avec le nom de la note, en gras, et la description de la note.
    • Pour finir, nous avons ajusté ContentView_Previews et ajouté prepareTestData() pour permettre un rendu préliminaire dans le canevas.
  • Développement et test

    Vérifiez le canevas pour vous assurer que la mise en page est bien celle souhaitée. Si vous ne voyez pas le canevas, vous pouvez l'activer au moyen du menu Éditeur, puis cliquez sur Canevas. Vous devrez peut-être également cliquer sur le bouton reprise dans le canevas pour générer l'aperçu de la mise en page.

    iOSTutorial-Module1-Step4

    Notez que les données pour l'aperçu sont générées dans le code (à partir de la ligne 70), les données n'apparaissent pas à l'exécution. Si tout semble OK, générez et lancez l'application dans le simulateur. Cliquez sur le menu Produit et sélectionnez Exécuter ou tapez  . Vous pouvez aussi cliquer sur le bouton Lire ▶️ dans la barre d'outils.

    iOSTutorial-Module1-Step5

    Après quelques instants, l'application démarre dans le simulateur iOS, avec un écran initial vide. Les données d'aperçu ne sont pas restituées à l'exécution, elles sont uniquement conçues pour les aperçus à l'intérieur de Xcode.

    iOSTutorial-Module1-step6

Conclusion

Vous avez créé une application iOS. Vous pouvez maintenant commencer à la développer avec Amplify !

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Initialiser Amplify