# (📖#) IAP app內購功能 (IOS)

### * 前言

IAP即是<span style="font-weight: bold;bold;text-decoration: underline;">In-App Purchase</span>的意思。
顧名思義就是在app裡面做<span style="font-weight: bold;bold;">購買</span>的動作。

---

### * 研究歷程

網路上有對於IAP的文章以及資料不算多也不算少，不過要符合我們Angular ionic的環境確實是費了我不少心力，在此推薦一個實作影片↓↓

※ 實作影片 : [**How to Make iOS In-App Purchases Inside Ionic**](https://www.youtube.com/watch?v=cmuD9KG0PVs)

以下我會細部講解該如何實作這一部分

---

### * 實作 (新增一筆內購項目)

首先，我們必須先到app store後台，點選 <span style="font-weight: bold;bold;text-decoration: underline;">功能</span> → <span style="font-weight: bold;bold;text-decoration: underline;">APP內購買項目</span>
<div style="display: flex;">
<img src="https://i.imgur.com/41gunL7.png" style="height: 425px;"></img>
</div>

<br>

點擊 ⊕ 新增一筆內購項目
<div style="display: flex;">
<img src="https://i.imgur.com/SO39dm5.png" style="height: 425px;"></img>
</div>

⚠ 若按下出現此訊息 ↓ ，請DAP部門協助操作 [**這裡**](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E4%B8%8A%E6%9E%B6%E4%BB%98%E8%B2%BB-ios-app-%E9%9C%80%E8%A6%81%E7%9A%84%E9%8A%80%E8%A1%8C%E5%B8%B3%E6%88%B6%E8%A8%AD%E5%AE%9A-1e88e9ab85b8)。

<div style="display: flex;">
<img src="https://i.imgur.com/pvAgyxr.png" style="height: 425px;"></img>
</div>

<br>

點擊按鈕後，就會進入新增頁面，產品類型分為四種，<span style="font-weight: bold;bold;text-decoration: underline;">消耗性項目</span>、<span style="font-weight: bold;bold;text-decoration: underline;">非消耗性項目</span>、<span style="font-weight: bold;bold;text-decoration: underline;">自動續訂型訂閱</span>、<span style="font-weight: bold;bold;text-decoration: underline;">非續訂型訂閱</span>，這部分google有很多資料說明，可以去網路上搜尋，那我也在這提供一個給大家[**參考**](https://medium.com/@mikru168/ios-app%E5%85%A7%E8%B3%BC%E5%8A%9F%E8%83%BD-in-app-purchase-6286a71105e2)。

<br>

這裡有一個地方要跟大家說明一下
<div style="display: flex;">
<img src="https://i.imgur.com/cLnFsTW.png"></img>
</div>
<br>

產品ID這部分不是亂取的，可以看到我們這裡是com.digiwin.A1Cloud.A1App.A1coin50
前面com.digiwin.A1Cloud.A1App其實就是我們這個app的<span style="font-weight: bold;bold;text-decoration: underline;">bundle ID</span>，我把bundle ID稱做<span style="font-weight: bold;bold;text-decoration: underline;">身分證字號</span>，每個app就和我們人一樣都有獨一無二的身分證字號。

那麼bundle ID又是在何時被我們設定出來的呢?其時在當初創建好這個專案的時候，我們就要想好該取什麼bundle ID，然後寫在程式檔<span style="font-weight: bold;bold;text-decoration: underline;">config.xml</span>裡，如圖 ↓
<div style="display: flex;">
<img src="https://i.imgur.com/Hz5HY6a.png"></img>
</div>

<br>

後面A1coin50則是可以隨便取，根據此筆內購，你想賦予它什麼名字都可以。
以上就是產品ID取名格式。

---

### * 插曲

在往下做程式撰寫前，我發現一個很重大的問題，從上面的主題(實作-新增一筆內購項目)，我們可以發現這是在正式區，也就是已上架的app後台設定的，而且內購項目，產品ID的設定又需要正式區app的bundle ID，也就是說，我們開發區的app程式，跟這個後台是沒有任何關係連結的，開發區有開發區的bundle ID，但是開發區並沒有後台可以設定內購項目測試，所以想要開發這部分，我勢必要用正式區的程式來做測試開發。

後來我想到一個辦法(若聽不懂也沒關係，可以先看過，也可以直接問我)...
#### **1.** 先推一個最新版本到app後台，必須高於目前上架的版本，此版本內的程式已安裝IAP套件，但是實質邏輯並未撰寫。

#### **2.** 送審。

#### **3.** 送審通過後，有個東西可以讓測試人員先行測試即將上架的最新版本，叫做TestFlight，我們就可以從TestFlight安裝即將上架的最新版本app。

#### **4.** 之後我就可以用codepush推更新到最新版的app，然後就可以做開發測試了，不過要切記，此版本的app不要在後台按下"發佈"，否則store上的app就會變成這個最新版本了。

當以上問題解決後，可以開始實作程式撰寫的部分了。

---

### * 實作 (程式撰寫)

(過程中可以照著研究歷程時提到的實作影片)

#### **1.** 在程式方面，我們要先引入[**InAppPurchase**](https://ionicframework.com/docs/v3/native/in-app-purchase/)套件。

#### **2.** InAppPurchase套件 - getProducts()
這個function主要是先從app store後台<span style="font-weight: bold;bold;text-decoration: underline;">取得</span>我們已經設定好的內購項目資訊，所以我們可以把它寫在constructor又或者是其他生命週期裡，看自己如何設計。


如下圖，console出來的就是我們剛剛設定的一筆內購項目，當然如果後台設定多筆，這裡console出來的也會是多筆。


#### **3.** InAppPurchase套件 - buy()
這個function如其名，就是<span style="font-weight: bold;bold;text-decoration: underline;">購買</span>，並且在紅色圈圈部分，則是寫在購買後要做什麼樣的邏輯處理。

buy()裡的參數是要帶某一個<span style="font-weight: bold;bold;text-decoration: underline;">內購項目的ID</span>。


#### **4.** InAppPurchase套件 - restorePurchases()
這個function用來做<span style="font-weight: bold;bold;text-decoration: underline;">回覆購買</span>，我自己不是很了解這個功能@@，所以想更加深入了解可以上網查詢😆，可以當做補充用。


以上4點都是在ts檔寫的，接下來看看html要如何撰寫呢。

其實html很簡單，我就只有做一個按鈕，並且在按下按鈕的時候，會得到50元A1幣。