[ WWDC2018 ] - 創(chuàng)建屬于你自己的 Swift Playgrounds 訂閱

WWDC2018: 創(chuàng)建屬于你自己的 Swift Playgrounds 訂閱

Session 413：Create Your Own Swift Playgrounds Subscription

Swift Playgrounds 是一款革命性的 iPad 應(yīng)用，可以用強(qiáng)大的 Swift 語言進(jìn)行教學(xué)。蘋果推崇在 Swift Playgrounds 上人人都能使用 Swift 編程的原則，讓所有人都能學(xué)習(xí)、編碼以及教授代碼課程。

本 Session 主要講如何利用 WWDC2018 新的模板工具制作出屬于自己的 Playground Book以及如何托管自己的訂閱源并分享給他人。讓我們帶著這兩個(gè)問題來閱讀本文。

Playground 電子書簡介

蘋果在 Swift Playgrounds 應(yīng)用上提供了很多學(xué)習(xí)編程相關(guān)的 Playground Book，本文就通俗的稱之為電子書。

Playground 電子書（.playgroundbook），它能夠幫助你管理內(nèi)容，生成瀏覽目錄，使你更容易找到自己想要學(xué)習(xí)的章節(jié)及頁面，下面是 Playground 電子書頁面的一張截圖，感受一下：

swift_playground_preview.jpeg

圖的左邊是源代碼編輯器，右邊是“所見即所得”的實(shí)時(shí)視圖。相比于 Xcode Playgrounds 功能更加強(qiáng)大，感興趣的讀者可以查閱相關(guān)資料，本文不做詳述。

WWDC2016 - Session 408 Introducing Swift Playgrounds

目錄格式

在學(xué)習(xí)如何利用新的版本工具前，我們先快速了解下 Playground 電子書的目錄格式。
Playground 電子書，是一個(gè)帶有 .playgroundbook 后綴名的文件，可以理解為一個(gè)文件夾資源包，它是一個(gè)嵌套的文件夾結(jié)構(gòu)格式，其中包括所有資源文件。

playground_book_package_structure.png

我們根據(jù)目錄結(jié)構(gòu)主要把它區(qū)分三個(gè)層次：

  • Contents：Playground 電子書根目錄，包含所有資源文件，屬于最高層級，其中包含 Chapters 文件夾以及一個(gè)配置文件 Manifest.plist。

  • Chapters：總章節(jié)文件夾，包含所有章節(jié)文件夾。每個(gè)章節(jié)文件夾都帶有 .playgroundchapter 后綴，并且其目錄下都包含 Pages 文件夾以及一個(gè)配置文件 Manifest.plist。

  • Pages: 總頁面文件夾，包含所有頁面文件夾，每個(gè)頁面文件夾都帶有 .playgroundpage 后綴，其目錄下都包含著自己運(yùn)行所需要的所有資源以及一個(gè)配置文件 Manifest.plist。

package_structure_folder_names.png

上述的三個(gè)目錄下都有屬于自己 Manifest 配置文件，有什么作用呢？

分別如下：

  • 描述電子書的信息

  • 描述章節(jié)及目錄信息

  • 描述頁面信息以及其行為（詳述請移步至官方文檔）

至此，你可能會有個(gè)小疑惑，為何文件夾會有后綴，干啥用的呢？

  • .playgroundbook

  • .playgroundpage

  • .playgroundchapter

這個(gè)設(shè)計(jì)官方給出了一個(gè)解釋：僅僅就是為了表明其類型。（No more thing.）

此外還有兩種文件夾，一般放置與 Contents 目錄下：

  • Sources：輔助的 Swift 源文件，如果放置在 Contens 目錄下，意味著所有 Page 都能訪問，屬于全局范疇。

  • Resources：電子書的資源文件，一般放置一些圖片、音頻文件等等，其他類似于 Sources 文件夾。

PlaygroundSupport

在制作 Playground 電子書時(shí)，PlaygroundSupport 對于我們來說是一個(gè)非常有幫助的組件，我們可以利用該組件在 Playground 與 LiveView 之間進(jìn)行交互，如：

  • 共享和訪問持久化數(shù)據(jù)

  • 訪問 Playground 并對其進(jìn)行管理

  • 操作 LiveView 顯示或者隱藏

  • 在 Playground 與 LiveView 之間進(jìn)行消息傳遞

  • 保存用戶的學(xué)習(xí)進(jìn)度等等

如果我們想在 LiveView 上顯示一個(gè) View，利用 PlaygroundSupport 可以這樣寫：

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0, y:0, width: 200, height: 200)

PlaygroundPage.current.live = view

使用 Swift Playgrounds 模板

了解了上述的一些基本知識后，再來看看 Swift Playgrounds 模板，這是今年 WWDC2018 新推出的，支持 Xcode 9.3 以上，首先我們先拋出一個(gè)問題，為何會有 Swift Playgrounds 模板這東西？

回顧

從 WWDC 2016 Swift Playground Books 誕生開始，制作 Playground 電子書是比較麻煩的，筆者認(rèn)為主要原因有兩點(diǎn)：

  • 因?yàn)槟阋獓?yán)格按照上述所說的文件目錄結(jié)構(gòu)的格式來整理你的文件，如果萬一中間某個(gè)處弄錯(cuò)了，那么在 iPad 上就無法正常運(yùn)行。像這種操作應(yīng)該實(shí)現(xiàn)自動化生成文件目錄結(jié)構(gòu)，讓開發(fā)者更加關(guān)注其實(shí)現(xiàn)。

  • 從上面這一條可以看出，調(diào)試起來是個(gè)坑，很難定位的自己是哪出錯(cuò)了。在程序上，調(diào)試只能以打印 Log 的方式進(jìn)行，無法進(jìn)行斷點(diǎn)調(diào)試也是個(gè)痛點(diǎn)。

當(dāng)然網(wǎng)上也有人寫過一些工具來解決上述的問題。但今年，WWDC2018 蘋果自家終于推出專門的模板來解決上述所提到的痛點(diǎn)。下面我們趕緊來看看如何使用該模板制作 Playground 電子書吧。

模板介紹

Swift Playgrounds 模板是一個(gè)幫助制作者調(diào)試、快速創(chuàng)建的一個(gè) Xcode 工程，讓制作者更加關(guān)注于內(nèi)容的創(chuàng)建。

這個(gè) Xcode 工程有三個(gè)不同的 Target 來幫助你創(chuàng)作屬于你的 Playground 電子書：

swift_playground_template_target.png

PlaygroundBook Target

這個(gè) Target 主要用于自動生成 Playground 電子書，解決了上述所說的第一個(gè)痛點(diǎn)。

playground_book_target.png

通過 Xcode 目錄可知，這個(gè) Target 所有文件都在 PlaygroundBook 文件夾下，其中包含文章前所說的 Sources 和 PrivateResources(Resources) 文件夾，還有默認(rèn)包含一個(gè)章節(jié)以及一個(gè)頁面。

Book_Sources Target

book_sources_target.png

這個(gè) Target 我們可以簡單理解為把 Sources 源文件編譯成一個(gè)靜態(tài)庫，供 LiveViewTestApp Target 使用，這里有個(gè)點(diǎn)需要注意，如果你創(chuàng)建了多個(gè) Page，并且需要進(jìn)行調(diào)試的時(shí)候要明確你要調(diào)試那個(gè) LiveView，從而并進(jìn)行 Debug 視圖切換。

LiveViewTestApp Target

live_view_test_app_target.png

這個(gè) Target 目的已經(jīng)很明確了，就是針對 LiveView 進(jìn)行調(diào)試的，解決了上述所說的第二個(gè)痛點(diǎn)。此處不再詳述。

模板使用

我們先簡單剖析模板的源碼，上述已經(jīng)解釋了三個(gè) Target 的作用，下面我們來看下，它們之間是怎么交互的。

在 Sources 文件夾中有兩個(gè)源文件：

  • LiveViewController.swift
sources_code_review_liveviewcontoller.png

這里需要注意的是 Swift 類被起了個(gè)別名
@objc(Book_Sources_LiveViewController) 暴露給 Objective-C。

  • LiveViewSupport.swift
sources_code_review_liveviewsupport.png

這個(gè)源文件僅僅聲明了一個(gè) public 方法，并返回 Storyboard 中的一個(gè)控制器實(shí)例。

初學(xué)者可能會覺得疑惑，LiveViewController 貌似沒有遵循 PlaygroundLiveViewable 協(xié)議，怎么沒有報(bào)編譯錯(cuò)誤？原因是在 PlaygroundSupport 組件中就給 UIViewController 加了個(gè)擴(kuò)展，并遵循其協(xié)議。

下面我們來看看是如何在 Pages 中的 LiveView 引用的：

pages_code_liveview.png

有些童鞋這此處又會有一個(gè)疑惑，那就是 instantiateLiveView 在 Pages 是怎么識別的？回顧上文，你會找出答案。（Sources 文件夾中的源文件屬于 Global files，并且該方法還是 public）

我們再來看看 LiveViewTestApp Target 中的 AppDelegate.swift:

liveview_test_app_code_review.png

setUpLiveView 方法是直接調(diào)用 Book_Sources Target 生成的靜態(tài)庫調(diào)用其方法實(shí)現(xiàn)的，當(dāng)有多個(gè)不同的 LiveView 進(jìn)行調(diào)試時(shí)，此處要記得更改。

至此，模板的原理及使用應(yīng)該都差不多了。下面我們再回到這個(gè) Session 的另一個(gè)主題：如何托管自己的訂閱源并分享給他人？

如何把制作好的 Playground 電子書安裝到 iPad？

這里有兩種較為常用的方法：

  • AirDrop，沒錯(cuò)，直接把 .playgroundbook 文件通過 AirDrop 丟給 iPad。

  • iCloud Drive（iCloud 云盤）

Swift Playgrounds 訂閱 Feeds 格式

上文已經(jīng)講了很多關(guān)于制作 Playground 電子書的知識，現(xiàn)在開始我們要關(guān)注，如果把制作的電子書分享給他人學(xué)習(xí)呢？

我們一般把一系列的 Playground 電子書相關(guān)資源托管至遠(yuǎn)端，并把其描述成一個(gè) Feeds JSON 文件，然后 Swift Playgrounds 再通過解析其內(nèi)容來達(dá)到訂閱的目的。下面我們來了解一下該 JSON 的數(shù)據(jù)格式及結(jié)構(gòu)。


{
    "title": "WWDC Photo Filters",
    "publisherName": "Holly and Grace",
    "feedIdentifier": "io.github.WWDCPhotoFilters",
    "contactURL": "mailto:example@apple.com", // 訂閱發(fā)布者的聯(lián)系方式
    "formatVersion": "1.0", //訂閱 Feed 發(fā)布版本號
    "documents": [
        {
            "title": "Image Transitions",
            "overviewSubtitle": "CIFilters in the Transition Category.",
            "detailSubtitle": "Filters in CICategoryTransition.",
            "description": "Learn some ways to use Core Image to transition between images.",
            "contentIdentifier": "io.github.WWDCPhotoFilters.imageTransitions",
            "contentVersion": "1.0",
            "url": "https://WWDCPhotoFilters.github.io/ImageTransitions/ImageTransitions.playgroundbook.zip",
            "publishedDate": "2018-05-18T12:00:00+00:00",
            "lastUpdatedDate": "2018-05-18T12:00:00+00:00",
            "thumbnailURL": "ImageTransitions/thumbnail.png",
            "bannerImageURL": "ImageTransitions/bannerImage.png",
            "additionalInformation": [
                {
                    "name": "Languages",
                    "value": "English"
                }
            ],
            "previewImageURLs": []
        }
    ]
}

訂閱 Feeds JSON 數(shù)據(jù)分兩部分：

1.訂閱 Feed 相關(guān)信息

  • title：訂閱 Feed 的標(biāo)題
subscription_title.png
  • publisherName：訂閱發(fā)布者的名稱
subscription_publisher_name.png
  • feedIdentifier：訂閱 Feed 的唯一ID，一般直接用翻轉(zhuǎn)域名來標(biāo)識

2.document：即電子書相關(guān)信息

  • title：電子書的標(biāo)題

  • overviewSubtitle：電子書概覽標(biāo)題

subscription_document_title.png
  • detailSubtitle：電子書更加具體的標(biāo)題
subscription_document_subtitle.png
  • description：電子書相關(guān)信息的一些描述
subscription_document_description.png

  • contentIdentifier： 電子書的唯一ID，一般是在 feedIdentifier 的基礎(chǔ)上拼接電子書的名稱

  • contentVersion：電子書發(fā)布版本號

  • thumbnailURL：電子書 icon

subscription_document_thumbnail1.png
subscription_document_thumbnail2.png
  • bannerImageURL：電子書 banner，用于展示及推廣相關(guān)視覺圖
subscription_document_banner.png

  • additionalInformation：額外信息，采用 Key-Value 的方式

  • previewImageURLs：電子書預(yù)覽圖

subscription_document_preview.png

字段比較多，建議刷下官方文檔有點(diǎn)印象

托管你的訂閱源

了解了訂閱 Feeds JSON 數(shù)據(jù)格式后，那么如何托管自己的訂閱源并分享給他人，我們可以把一系列 Playground 電子書的所有資源托管至第三方，創(chuàng)建自己的 JSON 文件，生成自己的訂閱鏈接，然后再通過 Safari 進(jìn)行訂閱。

下面我們以 GitHub Page 為例，來展示如果托管自己的訂閱源：

subscription_web_hosts.png

1.首先創(chuàng)建一個(gè)屬于自己的 GitHub Page。不知道創(chuàng)建 GitHub Page 的童鞋請移步至官方文檔

subscription_create_own_repo (1).png

2.然后在倉庫設(shè)置中配置好 GitHub Page。

subscription_create_own_repo_github_pages.png

4.創(chuàng)建 Feeds JSON 文件，為了舉例筆者直接用 WWDC 上演示的 JSON 鏈接

5.在倉庫中新建一個(gè) index.html 或 README.md 文件，并把自己的訂閱鏈接放入其中。


<a > Subscribe
</a>

6.都配置好后，我們的訂閱源已經(jīng)托管至GitHub了，現(xiàn)在可以分享給其他小伙伴了，如何分享呢？

訂閱電子書 Feeds 的方式有兩種：

  • 通過裝有 Swift Playgrounds 應(yīng)用的 iPad，使用 Safari 訪問 GitHub Page，即 http://tingxins.com/Playground.github.io 。 點(diǎn)擊之前已配置好的鏈接進(jìn)行訪問，即點(diǎn)擊 Subscribe，然后系統(tǒng)會自動調(diào)取 Swift Playgrounds 應(yīng)用。
subscription_create_own_repo_github_pages_link.png
  • 直接在 Swift Playgrounds 應(yīng)用內(nèi)進(jìn)行收到添加訂閱鏈接的方式進(jìn)行訂閱。
manual_subscription_indicator.jpg

小結(jié)

本文針對 Session 主要總結(jié)了兩個(gè)主要點(diǎn)并通過舉例加深讀者對其印象：

  • 如何利用 WWDC2018 新的模板工具制作出屬于自己的 Playground Book。

  • 如何托管自己的訂閱源并分享給他人

感興趣的童鞋還可以看看往期的 WWDC:

WWDC 2018 - Session 402 Getting the Most out of Playgrounds in Xcode

WWDC 2018 - Session 418 Source Control Workflows in Xcode

WWDC 2017 - Session 410 Localizing Content for Swift Playgrounds

WWDC 2017 - Session 416 Teaching with Swift Playgrounds

WWDC 2017 - Session 408 What’s New in Swift Playgrounds

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,017評論 3贊 119
  • 比特幣產(chǎn)業(yè)分為：上／中／下游 通常講，上游是指比特幣的產(chǎn)出，即挖礦和礦廠。終有指交易和存儲。下游指比特幣的相關(guān)應(yīng)用...
    法明_52d3閱讀 488評論 0贊 0
  • 哈哈，題目很噱頭吧！但我保證內(nèi)容很樸實(shí)，樸實(shí)、樸實(shí)！ 專欄留言上頭條這樣的事，對于高手來說可能只是小菜一碟。但對于...
    慧說早安閱讀 374評論 5贊 3
  • 四月，空氣里彌漫著一種香氣，微微弱弱若有若無，柳絮飄飛間，有股子超凡脫俗的韻味。院子里的白楊吐出嫩葉，風(fēng)起時(shí)已不再...
    笨阿三閱讀 194評論 0贊 1
  • 病態(tài)共生、全能自戀、偏執(zhí)分裂 無法分清想象也現(xiàn)實(shí)的區(qū)別，認(rèn)為想象的應(yīng)該就是現(xiàn)實(shí)，不符合想象的就會無法理解無法接受，...
    阿中2016閱讀 597評論 0贊 0