iOS应用程序

示例应用程序是探索Adobe Experience Manager(AEM)无头功能的绝佳方式。此iOS应用程序演示了如何使用AEM GraphQL API来使用持久查询来查询内容。

iOS带AEM Headless的SwiftUI应用程序

查看 GitHub上的源代码

前提条件

应在本地安装以下工具：

Xcode 9.3+ (需要macOS)
Git

AEM要求

iOS应用程序可与以下AEM部署选项配合使用。所有部署都需要 WKND Site v2.0.0+ 安装。

iOS应用程序旨在连接到 AEM发布 环境中，但是，如果在iOS应用程序配置中提供了身份验证，则可以从AEM Author中源内容。

使用方法

克隆 adobe/aem-guides-wknd-graphql 存储库：

$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

Launch Xcode 并打开文件夹 ios-app
修改文件 Config.xcconfig 文件和更新 AEM_SCHEME 和 AEM_HOST 以匹配目标AEM发布服务。
```
// The http/https protocol scheme used to access the AEM_HOST
AEM_SCHEME = http
// Target hostname for AEM environment, do not include http:// or https://
AEM_HOST = localhost:4503
```
如果连接到AEM作者，请添加 AEM_AUTH_TYPE 和支持 Config.xcconfig.

基本身份验证

的 AEM_USERNAME 和 AEM_PASSWORD 验证本地AEM用户对WKND GraphQL内容的访问权限。
```
AEM_AUTH_TYPE = basic
AEM_USERNAME = admin
AEM_PASSWORD = admin
```
令牌身份验证

的 AEM_TOKEN 是访问令牌对具有WKND GraphQL内容访问权限的AEM用户进行身份验证。
```
AEM_AUTH_TYPE = token
AEM_TOKEN = abcd...0123
```
使用Xcode构建应用程序，并将该应用程序部署到iOS模拟器
应用程序上应显示WKND网站的历险列表。选择冒险可打开探险详情。在冒险列表视图中，提取以从AEM刷新数据。

代码

以下是如何构建iOS应用程序的摘要，如何连接到AEM Headless以使用GraphQL持久查询检索内容，以及如何显示该数据。完整代码可在 GitHub.

持久化查询

遵循AEM无头最佳实践，iOS应用程序使用AEM GraphQL持久查询来查询冒险数据。应用程序使用两个持久查询：

wknd/adventures-all 持久查询，该查询会返回具有一组简略属性的AEM中的所有冒险。此持久查询驱动初始视图的探险列表。

# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}

wknd/adventure-by-slug 持久查询，返回单个冒险项 slug （一个自定义属性，用于唯一标识冒险），具有一组完整的属性。此持久查询支持探险详细信息视图。

# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
      }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

执行GraphQL持久查询

AEM持久查询是通过HTTPGET执行的，因此，不能使用使用HTTPPOST（如Apollo）的常用GraphQL库。而是创建一个自定义类，以执行对AEM的持久查询HTTPGET请求。

AEM/Aem.swift 实例化 Aem 类，用于与AEM Headless的所有交互。模式是：

每个持久化查询都具有相应的公共函数(例如， getAdventures(..) 或 getAdventureBySlug(..))调用iOS应用程序的视图以获取冒险数据。
公共函数调用一个专用函数 makeRequest(..) 会调用AEM Headless的异步HTTPGET请求，并返回JSON数据。
然后，每个公共函数都会解码JSON数据，并执行任何必需的检查或转换，然后再将Adventure数据返回到视图。

AEM GraphQL JSON数据使用 AEM/Models.swift，映射到JSON对象时返回了我的AEM Headless。

    /// # 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(completion: @escaping ([Adventure]) ->  ()) {

        // Create the HTTP request object representing the persisted query to get all adventures
        let request = makeRequest(persistedQueryName: "wknd-shared/adventures-all")

        // Wait fo the HTTP request to return
        URLSession.shared.dataTask(with: request) { (data, response, error) in
            // Error check as needed
            if ((error) != nil) {
                print("Unable to connect to AEM GraphQL endpoint")
                completion([])
            }

            if (!data!.isEmpty) {
                // Decode the JSON data into Swift objects
                let adventures = try! JSONDecoder().decode(Adventures.self, from: data!)

                DispatchQueue.main.async {
                    // Return the array of Adventure objects
                    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响应数据模型

iOS首选将JSON对象映射到键入的数据模型。

的 src/AEM/Models.swift 定义可解析映射到由AEM JSON响应返回的AEM JSON响应的Swift结构和类。

视图

SwiftUI用于应用程序中的各种视图。 Apple提供了使用SwiftUI构建列表和导航.

WKNDAdventuresApp.swift

应用程序的条目，包括 AdventureListView 谁 .onAppear 事件处理程序用于通过获取所有历险数据 aem.getAdventures(). 共享 aem 在此处初始化对象，并将其作为 EnvironmentObject.
Views/AdventureListView.swift

显示历险列表(基于 aem.getAdventures())，并使用 AdventureListItemView.
Views/AdventureListItemView.swift

显示历险列表(Views/AdventureListView.swift)。
Views/AdventureDetailView.swift

显示冒险的详细信息，包括标题、描述、价格、活动类型和主图像。此视图会使用查询AEM以了解有关冒险的完整详细信息 aem.getAdventureBySlug(slug: slug)，其中 slug 参数将根据选择列表行传递。

远程映像

冒险内容片段引用的图像由AEM提供。此iOS应用程序使用路径 _path 字段，并为 AEM_SCHEME 和 AEM_HOST 创建完全限定的URL。

如果连接到AEM上需要授权的受保护资源，则还必须将凭据添加到图像请求中。

SDWebImageSwiftUI 和 SDWebImage 用于从AEM加载远程图像，该图像会填充 AdventureListItemView 和 AdventureDetailView 视图。

的 aem 类(在 AEM/Aem.swift)可通过以下两种方式方便使用AEM图像：

aem.imageUrl(path: String) 用于在视图中将AEM方案添加到前面，并将主机托管到图像的路径，从而创建完全限定的URL。

// adventure.image() => /content/dam/path/to/an/image.png
let imageUrl = aem.imageUrl(path: adventure.image())
// imageUrl => http://localhost:4503/content/dam/path/to/an/image.png

的 convenience init(..) in Aem 根据iOS应用程序配置，在图像HTTP请求中设置HTTP授权标头。

如果 基本身份验证 ，则会将基本身份验证附加到所有图像请求。

/// AEM/Aem.swift
///
/// # Basic authentication init
/// Used when authenticating to AEM using local accounts (basic auth)
convenience init(scheme: String, host: String, username: String, password: String) {
    ...

    // Add basic auth headers to all Image requests, as they are (likely) protected as well
    SDWebImageDownloader.shared.setValue("Basic \(encodeBasicAuth(username: username, password: password))", forHTTPHeaderField: "Authorization")
}

如果 令牌身份验证 ，则令牌身份验证会附加到所有图像请求。

/// AEM/Aem.swift
///
/// # Token authentication init
///  Used when authenticating to AEM using token authentication (Dev Token or access token generated from Service Credentials)
convenience init(scheme: String, host: String, token: String) {
    ...

    // Add token auth headers to all Image requests, as they are (likely) protected as well
    SDWebImageDownloader.shared.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
}

如果 无验证 配置，则不会将身份验证附加到图像请求。

在SwiftUI本机中使用类似方法 AsyncImage. AsyncImage 在iOS 15.0及更高版本上受支持。

全新改良搜索功能

iOS应用程序

前提条件

AEM要求

使用方法

代码

持久化查询

执行GraphQL持久查询

GraphQL响应数据模型

视图

远程映像

其他资源

Business.Adobe.com资源

在此页面上

查看下一个：

学习

文档

社区

技术支持

资源

Adobe 帐户

Adobe