Image de présentation CREATIVE HORIZONS / Swift

Êtes-vous prêt à écrire votre propre symphonie dans le monde du développement iOS 16 avec Swift ? Vous êtes au bon endroit ! Ce tutoriel va vous guider à travers les étapes pour créer votre première application iOS en utilisant Swift et SwiftUI, le cadre de développement d'interface utilisateur d'Apple. Et ce n'est pas tout ! À la fin de ce tutoriel, vous aurez créé votre propre application iOS, même si vous n'avez jamais écrit une seule ligne de code auparavant. Embarquez avec nous dans cette aventure passionnante !

Préparation du terrain : Installer Xcode

Tout grand voyage commence par un premier pas, et le nôtre ne fait pas exception. Pour faire vibrer la mélodie de Swift, vous aurez besoin de Xcode, l'atelier de développement iOS par excellence d'Apple. Pour l'installer, allez sur l'App Store de votre Mac, cherchez "Xcode", puis cliquez sur "Installer". C'est simple comme bonjour, non ? Ce tutoriel utilisera Xcode 14, le dernier actuel mais les étapes seront très similaires sur les prochains. 

XcodeApple  

Étape 1 : Création d'un nouveau projet

Lancez Xcode et sélectionnez "Create a new Xcode project". Ensuite, choisissez "App" sous l'onglet "iOS", et cliquez sur "Next". Donnez un nom à votre application, disons "MyFirstApp". Assurez-vous que "SwiftUI" est sélectionné comme "Interface" et que "Swift" est le "Language" choisi. Enfin, sélectionnez l'emplacement de votre projet et appuyez sur "Create".

Étape 2 : Exploration de la structure du projet

Votre projet est maintenant créé, ouvrez grand les yeux et explorons-le. Le fichier ContentView.swift est l'endroit où vous passerez le plus de temps, c'est ici que vous écrirez la plupart de votre code. Voici à quoi ressemble le code par défaut dans ContentView.swift:


import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

Étape 3 : Écrire notre premier code Swift

Il est temps de faire chanter SwiftUI pour nous. Nous allons commencer par afficher un simple message de bienvenue sur l'écran. Remplacez le code par défaut dans ContentView.swift par le suivant :


import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Bienvenue sur iOS 16 avec SwiftUI!")
            .font(.largeTitle)
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Ce code crée un objet Text qui affiche le message "Bienvenue sur iOS 16 avec SwiftUI!". La fonction .font(.largeTitle) définit la taille de la police et .padding() ajoute de l'espace autour du texte.

Étape 4 : Ajouter une interactivité

Une application sans interactivité est comme un orchestre sans chef, alors ajoutons un bouton à notre application. Remplacez le code dans ContentView.swift par le suivant :


import SwiftUI

struct ContentView: View {
    // Ici nous déclarons notre variable d'état (@State)
    @State private var welcomeMessage = "Bienvenue sur iOS 16 avec SwiftUI!"
    
    var body: some View {
        // Le VStack nous permet d'empiler verticalement des éléments
        VStack {
            Text(welcomeMessage)
                .font(.largeTitle)
                .padding()
            
            Button(action: {
                // Cette zone nous permet d'effectuer une action lorsque le bouton
                // est appuyé, ici en l'occurence de changer notre variable
                welcomeMessage = "Vous avez appuyé sur le bouton!"
            }) {
                // Cette zone définit l'apparence du bouton, nous pouvons y
                // incorporer n'importe quel élément pour donner le
                // style que l'on veut au bouton
                Text("Appuyez ici")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Dans ce code, nous avons ajouté un bouton qui change le message de bienvenue quand vous appuyez dessus. L'attribut @State est une fonctionnalité de SwiftUI qui permet de garder une trace de l'état de l'application. Ce qui veut dire qu'une variable qui dispose de l'attribut @State préviendra l'application qu'il faut rafraichir l'écran lorsque celle-ci est changée. Petite astuce, si vous souhaitez remettre à 0 l'écran de preview, appuyez simplement sur l'icon de punaise en haut à gauche de cet écran:  

Boutons iOSGaurav 

Quelques fonctions et composants annexes intéressants

  1. Navigation View : Pour ajouter une barre de navigation à votre application, vous pouvez utiliser NavigationView. Par exemple :

NavigationView {
    Text("Bonjour, SwiftUI!")
        .navigationBarTitle("Accueil")
}

Attention, le modifier .navigationBarTitle ne se place pas directement sur l'élément NavigationView, mais sur son enfant direct.

  1. Listes : Vous pouvez créer des listes en utilisant List. Par exemple :

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

  1. Formulaires : Form est utilisé pour regrouper les éléments d'interface utilisateur liés à l'entrée de données de l'utilisateur. Par exemple :

Form {
    Section(header: Text("Nom")) {
        TextField("Entrez votre nom", text: $name)
    }
    Section(header: Text("Email")) {
        TextField("Entrez votre email", text: $email)
    }
}

 

  1. Alertes : Vous pouvez afficher des alertes en utilisant Alert. Par exemple :

Button(action: {
    showAlert = true
}) {
    Text("Montrer l'Alerte")
}
.alert(isPresented: $showAlert) {
    Alert(title: Text("Alerte importante"), message: Text("SwiftUI est génial !"), dismissButton: .default(Text("OK")))
}

 

Il y a beaucoup plus à découvrir avec SwiftUI. Je vous encourage à consulter la documentation officielle et à expérimenter par vous-même. Souvenez-vous : la meilleure façon d'apprendre est de faire !

Félicitations ! Vous avez créé votre première application iOS avec Swift et SwiftUI. Vous pouvez maintenant explorer davantage SwiftUI et expérimenter différentes vues et interactions. Gardez à l'esprit que chaque grande application commence par une simple étincelle d'idée, alors continuez à explorer, apprendre et surtout à coder.

Logo de marque CREATIVE HORIZONS TUTORIELS