iOS SwiftUI-App

Beispielanwendungen eignen sich hervorragend, um die Headless-Funktionen von Adobe Experience Manager (AEM) zu erkunden. Diese iOS-Anwendung zeigt, wie Inhalte mithilfe der GraphQL-APIs von AEM abgefragt werden. Der Apollo Client iOS wird verwendet, um die GraphQL-Abfragen zu generieren und Daten Swift-Objekten zuzuordnen, um die App zu unterstützen. SwiftUI wird zum Rendern einer einfachen Listen- und Detailansicht des Inhalts verwendet.

Anzeigen der Quellcode auf GitHub

Voraussetzungen

Die folgenden Tools sollten lokal installiert werden:

AEM

Das Programm ist für die Verbindung mit einem AEM konzipiert Veröffentlichen Umgebung mit der neuesten Version der WKND-Referenz-Site installiert.

Wir empfehlen Bereitstellen der WKND-Referenz-Site in einer Cloud Service-Umgebung. Lokales Setup mit das AEM Cloud Service SDK oder AEM 6.5 QuickStart-JAR kann auch verwendet werden.

Informationen zur Verwendung

  1. Klonen Sie die aem-guides-wknd-graphql repository:

    git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Launch Xcode und öffnen Sie den Ordner ios-swiftui-app

  3. Datei ändern Config.xcconfig Datei und Aktualisierung AEM_HOST , um Ihrer AEM-Veröffentlichungsumgebung zu entsprechen

    // Target hostname for AEM environment, do not include http:// or https://
    AEM_HOST = localhost:4503
    // GraphQL Endpoint
    AEM_GRAPHQL_ENDPOINT = /content/cq:graphql/wknd/endpoint.json
    
  4. Erstellen Sie die Anwendung mit Xcode und stellen Sie die App auf dem iOS-Simulator bereit.

  5. Eine Liste der Abenteuer von der WKND-Referenz-Website sollte auf der Anwendung angezeigt werden.

Der Code

Nachstehend finden Sie eine kurze Zusammenfassung der wichtigen Dateien und des Codes, mit denen die Anwendung betrieben wird. Den vollständigen Code finden Sie unter GitHub.

Apollo iOS

Die Apollo iOS -Client wird von der App verwendet, um die GraphQL-Abfrage gegen AEM auszuführen. Der Beamte Apollo-Tutorial enthält viel mehr Details zur Installation und Verwendung.

schema.json ist eine Datei, die das GraphQL-Schema aus einer AEM Umgebung mit installierter WKND-Referenz-Site darstellt. schema.json wurde von AEM heruntergeladen und zum Projekt hinzugefügt. Der Apollo-Client prüft alle Dateien mit der Erweiterung .graphql als Teil einer benutzerdefinierten Build-Phase. Der Apollo-Client verwendet dann die schema.json -Datei und .graphql Abfragen zum automatischen Generieren der Datei API.swift.

Dadurch erhält die Anwendung ein stark typisiertes Modell zur Ausführung der Abfrage und des Modells/der Modelle, die die Ergebnisse darstellen.

Benutzerdefinierte Build-Phase in Xcode

AdventureList.graphql enthält die Abfrage zur Abfrage der Abenteuer:

query AdventureList
{
  adventureList {
    items {
      _path
      adventureTitle
      adventurePrice
      adventureActivity
      adventureDescription {
        plaintext
        markdown
      }
      adventureDifficulty
      adventureTripLength
      adventurePrimaryImage {
        ...on ImageRef {
          _authorUrl
          _publishUrl
        }
      }
    }
  }
}

Network.swift erstellt die ApolloClient. Die endpointURL verwendet wird, wird durch Lesen der Werte der Config.xcconfig -Datei. Wenn Sie eine Verbindung zu einem AEM herstellen möchten Autor -Instanz, die zum Hinzufügen zusätzlicher Header für die Authentifizierung erforderlich ist, sollten Sie die ApolloClient hier.

// Network.swift
private(set) lazy var apollo: ApolloClient = {
        // The cache is necessary to set up the store, which we're going to hand to the provider
        let cache = InMemoryNormalizedCache()
        let store = ApolloStore(cache: cache)
  
        let client = URLSessionClient()
        let provider = DefaultInterceptorProvider(client: client, shouldInvalidateClientOnDeinit: true, store: store)
        let url = Connection.baseURL // from Configx.xcconfig 

        // no additional headers, public instances by default require no additional authentication
        let requestChainTransport = RequestChainNetworkTransport(interceptorProvider: provider, endpointURL: url)

        return ApolloClient(networkTransport: requestChainTransport,store: store)
    }()
}

Adventure-Daten

Die Anwendung ist so konzipiert, dass sie eine Liste von Abenteuern und dann eine Detailansicht jedes Abenteuers anzeigt.

AdventuresDataModel.swift ist eine Klasse, die eine Funktion enthält fetchAdventures(). Diese Funktion verwendet die ApolloClient , um die Abfrage auszuführen. Bei einer erfolgreichen Abfrage weist das Ergebnisarray den Typ AdventureListQuery.Data.AdventureList.Item, wird automatisch von der API.swift -Datei.

func fetchAdventures() {
        Network.shared.apollo
            //AdventureListQuery() generated based on AdventureList.graphql file
           .fetch(query: AdventureListQuery()) { [weak self] result in
           
             guard let self = self else {
               return
             }
                   
             switch result {
             case .success(let graphQLResult):
                print("Success AdventureListQuery() from: \(graphQLResult.source)")

                if let adventureDataItems =  graphQLResult.data?.adventureList.items {
                    // map graphQL items to an array of Adventure objects
                    self.adventures = adventureDataItems.compactMap { Adventure(adventureData: $0!) }
                }
                ...
             }
           }
}

Es ist möglich, AdventureListQuery.Data.AdventureList.Item direkt, um die Anwendung zu aktivieren. Es ist jedoch sehr möglich, dass einige Daten unvollständig sind und einige Eigenschaften daher möglicherweise null sind.

Adventure.swift ist ein benutzerdefiniertes Modell, das als Wrapper des von Apollo generierten Modells verwendet wird. Adventure initialisiert mit AdventureListQuery.Data.AdventureList.Item. A typealias wird verwendet, um den Code lesbarer zu machen:

// use typealias
typealias AdventureData = AdventureListQuery.Data.AdventureList.Item

Die Adventure structure mit einer AdventureData -Objekt:

struct Adventure: Identifiable {
    let id: String
    let adventureTitle: String
    let adventurePrice: String
    let adventureDescription: String
    let adventureActivity: String
    let adventurePrimaryImageUrl: String
    
    // initialize with AdventureData object aka AdventureListQuery.Data.AdventureList.Item
    init(adventureData: AdventureData) {
        // use path as unique idenitifer, otherwise
        self.id = adventureData._path ?? UUID().uuidString
        self.adventureTitle = adventureData.adventureTitle ?? "Untitled"
        self.adventurePrice = adventureData.adventurePrice ?? "Free"
        self.adventureActivity = adventureData.adventureActivity ?? ""
        ...

Dadurch können wir dann Standardwerte angeben und zusätzliche Prüfungen auf unvollständige Daten durchführen. Anschließend können Sie die Adventure sicher modellieren, um verschiedene UI-Elemente zu unterstützen, und nicht ständig nach Nullwerten suchen müssen.

In AEM werden Inhaltselemente durch _path. In Adventure.swift Wir füllen die id -Eigenschaft mit dem Wert von _path. Dies ermöglicht Folgendes Adventure um Identifiable -Schnittstelle und erleichtert die Iteration über ein Array oder eine Liste.

Ansichten

SwiftUI wird für die verschiedenen Ansichten in der Anwendung verwendet. Ein tolles Tutorial für Erstellen von Listen und Navigation finden Sie auf der Entwickler-Site von Apple. Der Code für diese Anwendung wird lose von ihr abgeleitet.

WKNDAdventuresApp.swift ist der Eintrag des Antrags. Er umfasst AdventureListView und .onAppear -Ereignis wird verwendet, um die Abenteuerdaten abzurufen.

AdventureListView.swift - erstellt eine NavigationView und eine Liste von Abenteuern, die von AdventureRowView. Navigation zu einer AdventureDetailView ist hier eingerichtet.

AdventureRowView - zeigt das Primärbild des Abenteuers und den Abenteuer-Titel in einer Zeile an.

AdventureDetailView - zeigt ein vollständiges Detail des individuellen Abenteuers, einschließlich Titel, Beschreibung, Preis, Aktivitätstyp und Primärbild.

Wenn die Apollo-CLI ausgeführt und neu generiert wird API.swift Dadurch wird die Vorschau angehalten. Um die Funktion Automatische Vorschau zu verwenden, müssen Sie die Apollo CLI Phase erstellen und überprüfen, um das Skript auszuführen Nur für Install-Builds.

Nur nach Installations-Builds suchen

Remote-Bilder

SDWebImageSwiftUI und SDWEbImage werden verwendet, um die Remote-Bilder von AEM zu laden, die das primäre Abenteuer-Bild in der Zeilen- und Detailansicht ausfüllen.

Die AsyncImage ist eine native SwiftUI-Ansicht, die ebenfalls verwendet werden kann. AsyncImage wird nur für iOS 15.0+ unterstützt.

Zusätzliche Ressourcen

Auf dieser Seite