iOS-app

[AEM Headless as a Cloud Service]{class="badge informative"}

Voorbeeldtoepassingen zijn een geweldige manier om de mogelijkheden zonder kop van Adobe Experience Manager (AEM) te verkennen. Deze iOS-toepassing laat zien hoe u query's uitvoert op inhoud met GraphQL API's van AEM die doorlopende query's gebruiken.

Bekijk de ​ broncode op GitHub ​

Vereisten prerequisites

De volgende gereedschappen moeten lokaal worden geïnstalleerd:

AEM-vereisten

De iOS-toepassing werkt met de volgende AEM-implementatieopties. Alle plaatsingen vereisen de ​ Plaats van WKND v3.0.0+ ​ om worden geïnstalleerd.

De toepassing van iOS wordt ontworpen om met AEM te verbinden publiceert milieu, nochtans kan het inhoud van de Auteur van AEM als de authentificatie in de configuratie van de toepassing van iOS wordt verstrekt.

Hoe wordt het gebruikt

De code

Hieronder volgt een overzicht van de manier waarop de iOS-toepassing is gebouwd, hoe deze verbinding maakt met AEM Headless om inhoud op te halen met behulp van GraphQL persisted query's en hoe deze gegevens worden gepresenteerd. De volledige code kan op ​ GitHub ​ worden gevonden.

Blijvende query's

Na de beste praktijken van AEM Headless, gebruikt de toepassing van iOS AEM GraphQL voortgezette vragen om avontuurgegevens te vragen. De toepassing gebruikt twee voortgeduurde vragen:

# Retrieves a list of all Adventures
#
# Optional query variables:
# - { "offset": 10 }
# - { "limit": 5 }
# - {
#    "imageFormat": "JPG",
#    "imageWidth": 1600,
#    "imageQuality": 90
#   }

query ($offset: Int, $limit: Int, $sort: String, $imageFormat: AssetTransformFormat=JPG, $imageWidth: Int=1200, $imageQuality: Int=80) {
  adventureList(
    offset: $offset
    limit: $limit
    sort: $sort
    _assetTransform: {
      format: $imageFormat
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
  }) {
    items {
      _path
      slug
      title
      activity
      price
      tripLength
      primaryImage {
        ... on ImageRef {
          _path
          _dynamicUrl
        }
      }
    }
  }
}

query ($slug: String!, $imageFormat:AssetTransformFormat=JPG, $imageSeoName: String, $imageWidth: Int=1200, $imageQuality: Int=80) {
  adventureList(
    filter: {slug: {_expressions: [{value: $slug}]}}
    _assetTransform: {
      format: $imageFormat
      seoName: $imageSeoName
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
  }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          _dynamicUrl
        }
      }
      description {
        json
        plaintext
        html
      }
      itinerary {
        json
        plaintext
        html
      }
    }
    _references {
      ... on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

GraphQL-query uitgevoerd

AEM persisted query's worden uitgevoerd via HTTP GET en daarom kunnen veelgebruikte GraphQL-bibliotheken die HTTP POST gebruiken, zoals Apollo, niet worden gebruikt. Maak in plaats daarvan een aangepaste klasse die de voortgezette HTTP-query-aanvragen bij AEM uitvoert.

AEM/Aem.swift instantieert de klasse Aem die wordt gebruikt voor alle interacties met AEM Headless. Het patroon is:

    /// # getAdventures(..)
    /// Returns all WKND adventures using the `wknd-shared/adventures-all` persisted query.
    /// For this func call to work, the `wknd-shared/adventures-all` query must be deployed to the AEM environment/service specified by the host.
    ///
    /// Since HTTP requests are async, the completion syntax is used.
    func getAdventures(params: [String:String], completion: @escaping ([Adventure]) ->  ()) {

        let request = makeRequest(persistedQueryName: "wknd-shared/adventures-all", params: params)

        URLSession.shared.dataTask(with: request) { (data, response, error) in
            if ((error) != nil) {
                print("Unable to connect to AEM GraphQL endpoint")
                completion([])
            } else if (!data!.isEmpty) {
                let adventures = try! JSONDecoder().decode(Adventures.self, from: data!)
                DispatchQueue.main.async {
                    completion(adventures.data.adventureList.items)
                }
            }
        }.resume();
    }

    ...

    /// #makeRequest(..)
    /// Generic method for constructing and executing AEM GraphQL persisted queries
    private func makeRequest(persistedQueryName: String, params: [String: String] = [:]) -> URLRequest {
        // Encode optional parameters as required by AEM
        let persistedQueryParams = params.map { (param) -> String in
            encode(string: ";\(param.key)=\(param.value)")
        }.joined(separator: "")

        // Construct the AEM GraphQL persisted query URL, including optional query params
        let url: String = "\(self.scheme)://\(self.host)/graphql/execute.json/" + persistedQueryName + persistedQueryParams;

        var request = URLRequest(url: URL(string: url)!);

        // Add authentication to the AEM GraphQL persisted query requests as defined by the iOS application's configuration
        request = addAuthHeaders(request: request)

        return request
    }

    ...

GraphQL-responsgegevensmodellen

iOS geeft de voorkeur aan het toewijzen van JSON-objecten aan getypte gegevensmodellen.

src/AEM/Models.swift bepaalt ​ decodable ​ Swift structs en klassen die aan de antwoorden van AEM JSON in kaart brengen die door AEM JSON antwoorden zijn teruggekeerd.

Weergaven

SwiftUI wordt gebruikt voor de diverse meningen in de toepassing. Apple verstrekt een het worden begonnen leerprogramma voor ​ bouwend lijsten en navigatie met SwiftUI ​.

Externe afbeeldingen

Afbeeldingen waarnaar wordt verwezen door adventure Content Fragments, worden aangeboden door AEM. Deze iOS-toepassing gebruikt het veld path _dynamicUrl in de GraphQL-reactie en plaatst de voorvoegsels AEM_SCHEME en AEM_HOST voor het maken van een volledig gekwalificeerde URL. Als _dynamicUrl zich ontwikkelt tegen de AE SDK, wordt null geretourneerd, zodat de ontwikkeling terugvalt op het _path -veld van de afbeelding.

Als u verbinding wilt maken met beveiligde bronnen op AEM waarvoor toestemming vereist is, moeten ook referenties worden toegevoegd aan afbeeldingsaanvragen.

​ SDWebImageSwiftUI ​ en ​ SDWebImage ​ worden gebruikt om de verre beelden van AEM te laden die het beeld van het Avontuur op AdventureListItemView en AdventureDetailView meningen bevolken.

De aem -klasse (in AEM/Aem.swift ) vereenvoudigt het gebruik van AEM-afbeeldingen op twee manieren:

Een gelijkaardige benadering kan met SwiftUI-inheemse ​ AsyncImage ​ worden gebruikt. AsyncImage wordt ondersteund door iOS 15.0+.

Aanvullende bronnen