# 用Strapi 10分鐘就建好API(Strapi介紹-前篇)

<!-- Put the link to this slide here so people can follow -->
來源: https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html

[前篇(快速入門)](https://hackmd.io/oXdEw-gBTSGheNsARMJYVg)
[中篇(概念架構介紹)](https://hackmd.io/LqgfRVBXQf-OYFrvdiT7Hw)
[後篇(部署及設定)](https://hackmd.io/-2zeYcrgR52aI-gssI-XFQ)

:+1: 不用設定資料庫以及接觸後端程式，用Strapi就能為你的前端網頁快速建置好API !!

---

## Step 1. 在電腦上安裝Strapi

//cmd line
npm install strapi@beta -g

<!-- --- -->

## Step 2. 使用指令快速新建你的Strapi專案
(此快速建置的流程中，預設的資料庫為SQLite，可以在指令中另外選擇)

路徑: **/my-project

//cmd line
//my-project: 你的專案名稱
strapi new my-project --quickstart

### 成功後自動開啟註冊頁面

註冊一個最高層級使用者的帳號(此為開發模式，可以放心測試，帳號隨便註冊都可以)


### 註冊完成後就會看到admin儀表板頁面


---

## Step 3. 建立和更新資料結構 Create a new Content Type

資料結構是擁有多個欄位以及資料的集合，接下來先新增Restaurant的資料結構試試看！

### 建立Restaurant的資料結構:

1. 新增資料結構:
- 點擊右上角的 ==+增加資料結構== 的按鈕
- 在名稱中輸入 ==Restaurant==
- 點擊 ==儲存==

2. 儲存之後，馬上就可以新增欄位(Restaurant, Description)

#### 點擊右上的==新增欄位==
#### 首先設定餐廳的名稱
- 點擊==字串==
- 在**基本設定**中，==名稱==的輸入框輸入 Restaurant
- 在**進階設定**中，勾選==必填欄位==以及==唯一欄位==
- 點擊==繼續==

#### 接著設定餐廳的描述
- 點擊==文字==
- 在**基本設定**中，==名稱==的輸入框輸入 Description
- 在**進階設定**中，勾選==顯示視覺化編輯器(WYSIWYG)==
- 點擊==儲存==

![]()

#### 點擊右上角的==儲存==


---

### 建立Category的資料結構(返回建立和更新資料結構主頁面):

1. 新增資料結構:
- 點擊右上角的 ==+增加資料結構== 的按鈕
- 在名稱中輸入 ==Category==
- 點擊 ==儲存==

2. 儲存之後，馬上就可以新增欄位(Category, 關聯)

#### 點擊右上的==新增欄位==
#### 首先設定Category的名稱
- 點擊==字串==
- 在**基本設定**中，==名稱==的輸入框輸入 Category
- 在**進階設定**中，勾選==必填欄位==以及==唯一欄位==
- 點擊==繼續==

#### 接著設定Category的關聯
- 點擊==關聯==
- 在**定義關係**中，==左邊的==的輸入框輸入 restaurant，==右邊的==User-Permissions改為選擇==Restaurant==
- 中間很多條線的地方，選擇==最右邊的圖示==(多對多)，Categories 有而且屬於許多 Restaurants
- 點擊==儲存==

![]()

#### 點擊右上角的==儲存==


---

## Step 4. 為各個資料結構增添一點內容吧！

### 1. Restaurants: 點擊左上角的Restaurants
:::info
你沒看錯也沒有打錯字，Strapi會自動將資料結構名稱變為複數的單字
:::

- 在==Restaurant==中輸入`Strapi Restaurant`
- 在==Description==中輸入`Strapi restaurant is a cosy restaurant delivering one of the very fastest and nicest dining experiences in the world, combining nods to tradition with fierce modernity, warmth with daring.`
- 點擊右上角的==儲存==


### 2. Categories: 點擊左上角的Categories
- 點擊右上角的==建立新的Category==

- 在==Category==中輸入`Convenient`
- 點擊右上角的==儲存==

- 再新增一筆！

- 在==Category==中輸入`Time Saving`
- 點擊右上角的==儲存==

- 將新增完的Categories，給Restaurant使用吧！

- 點擊左上角回到Restaurant的頁面
- 點選其中一筆Restaurant的資料，並編輯他
- 在頁面右邊，Categories中，新增關聯 選擇你要與這筆資料關聯的category
- 點擊右上角的==儲存==


---

## Step 5. 設定 角色與權限
:::warning
:warning: 沒有設定此步驟，你將沒有權限使用API (403 forbidden)
備註: Strapi預設為關閉公開API的權限
:::

- 點擊左側擴充功能中的==身份與權限==
- 點擊==Public==
- 在權限區域中，將Restaurant以及Category的 ==find== ==findOne== 都勾選起來
- 點擊右上角的==儲存==


## Step 6. 開心使用API~

### 專案的網址為 `http://localhost:1337/`
接著你可以在網址後面加上像是 `/restaurants`來使用restaurants的API

http://localhost:1337/restaurants

### :gift: 使用graphQL需要另外安裝插件

:::info
需在專案目錄下輸入以下指令來完成安裝graphQL

//cmd line
strapi install graphql

使用以下網址即可使用graphQL

http://localhost:1337/graphql

:::

:::warning
:warning: strapi在develop環境下可以直接使用graphQL，然而production需要增加以下設定
- 檔案路徑: (沒有就自己建)

./extensions/graphql/config/settings.json

{
  "endpoint": "/graphql",
  "tracing": false,
  "shadowCRUD": true,
  "playgroundAlways": true,
  "depthLimit": 7,
  "amountLimit": 100
}

:::