# การเริ่มต้นใช้งานชุดพัฒนาแอป Canva: คู่มือสำหรับนักพัฒนา

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1736101972629/1eac1214-55bc-4515-ac36-af1106b245ea.png align="center")

**Apps SDK** สำหรับแพลตฟอร์มการพัฒนาแอปของ Canva 🎉**เริ่มต้นด้วยทุกสิ่งที่คุณต้องการเพื่อให้แอปพร้อมใช้งานได้ภายในไม่กี่นาที รวมถึงโปรเจ็กต์สำเร็จรูปและตัวอย่างมากมาย เอกสารประกอบทั้งหมดสำหรับแพลตฟอร์มนี้อยู่ที่** `canva dev docsapps`

\*\*หมายเหตุ:\*\*ชุดเริ่มต้นและเอกสารประกอบถือว่ามีประสบการณ์กับ TypeScript และ React ในระดับหนึ่ง

## ความต้องการ

* Node.js `v18`หรือ`v20.10.0`
    
* npm `v9`หรือ`v10`
    

\*\*หมายเหตุ:\*\*เพื่อให้แน่ใจว่าคุณใช้ Node.js เวอร์ชันที่ถูกต้อง เราขอแนะนำให้ใช้ตัวจัดการเวอร์ชัน เช่น[`nvm`](https://github.com/nvm-sh/nvm#intro) ไฟล์ . <mark> nvmrc</mark>ในไดเร็กทอรีรูทของรีโพอนี้จะช่วยให้แน่ใจว่าใช้เวอร์ชันที่ถูกต้องเมื่อคุณเรียกใช้`nvm install`.

## เริ่มต้นอย่างรวดเร็ว

```plaintext
git clone git@github.com:canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit
npm install
```

## การใช้แผ่นแม่แบบ

### ขั้นตอนที่ 1: เริ่มต้นเซิร์ฟเวอร์การพัฒนาในพื้นที่

ไดเร็กทอรี`src`ประกอบด้วยเทมเพลตของแอปพลิเคชัน

หากต้องการเริ่มเซิร์ฟเวอร์การพัฒนาแบบสำเร็จรูป ให้เรียกใช้คำสั่งต่อไปนี้:

```plaintext
npm start
```

เซิร์ฟเวอร์จะพร้อมใช้งานที่[http://localhost:](http://localhost:8080/) 8080

โค้ดต้นฉบับของแอปอยู่ใน`src/app.tsx`ไฟล์

### ขั้นตอนที่ 2: ดูตัวอย่างแอป

เซิร์ฟเวอร์พัฒนาระบบภายในจะเปิดเผยเฉพาะชุด JavaScript เท่านั้น ดังนั้นคุณจึงไม่สามารถดูตัวอย่างแอปได้โดยไปที่[http://localhost:8080](http://localhost:8080/)คุณสามารถดูตัวอย่างแอปได้ผ่านตัวแก้ไข Canva เท่านั้น

การดูตัวอย่างแอป:

1. สร้างแอปผ่านทาง[พอร์ทัลนัก](https://www.canva.com/developers/apps)พัฒนา
    
2. เลือก**แหล่งที่มาของแอป &gt; URL การ**พัฒนา
    
3. ใน ฟิลด์ **URL การพัฒนา**ให้ป้อน URL ของเซิร์ฟเวอร์การพัฒนา
    
4. คลิก**ดูตัวอย่าง**ซึ่งจะเปิดโปรแกรมแก้ไข Canva (และแอป) ในแท็บใหม่
    
5. คลิก**เปิด** (หน้าจอนี้จะปรากฏขึ้นเฉพาะเมื่อใช้แอปเป็นครั้งแรกเท่านั้น)
    

แอปจะปรากฏในแผงด้านข้าง

### (ทางเลือก) ขั้นตอนที่ 3: เปิดใช้งานการเปลี่ยนโมดูลร้อน

ตามค่าเริ่มต้น ทุกครั้งที่คุณทำการเปลี่ยนแปลงแอป คุณจะต้องโหลดแอปทั้งหมดใหม่เพื่อดูผลลัพธ์ของการเปลี่ยนแปลงเหล่านั้น หากคุณเปิดใช้งาน[Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) การเปลี่ยนแปลงจะสะท้อนให้เห็นโดยไม่ต้องโหลดใหม่ทั้งหมด ซึ่งจะช่วยเร่งความเร็วของวงจรการพัฒนาได้อย่างมาก

**หมายเหตุ:** HMR จะ**ไม่**ทำงานในขณะที่รันเซิร์ฟเวอร์การพัฒนาในคอนเทนเนอร์ Docker

เพื่อเปิดใช้งาน HMR:

1. นำทางไปยังแอปผ่านทาง[แอปของ](https://www.canva.com/developers/apps)คุณ
    
2. เลือก**กำหนดค่าแอปของ**คุณ
    
3. คัดลอกค่าจาก ช่อง **แหล่งที่มาของแอป**ค่านี้จะไม่ซ้ำกันสำหรับแต่ละแอปและไม่สามารถปรับแต่งได้
    
4. `.env`เปิด ไฟล์ในไดเร็กทอรีของชุดเริ่มต้น
    
5. ตั้ง`CANVA_APP_ORIGIN`ค่าตัวแปรสภาพแวดล้อมให้เป็นค่าที่คัดลอกมาจาก ฟิลด์ **แหล่งที่มาของแอป** :
    
    ```plaintext
    CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE
    ```
    
6. ตั้งค่า`CANVA_HMR_ENABLED`ตัวแปรสภาพแวดล้อมเป็น`true`:
    
    ```plaintext
    CANVA_HMR_ENABLED=true
    ```
    
7. รีสตาร์ทเซิร์ฟเวอร์การพัฒนาท้องถิ่น
    
8. โหลดแอปใหม่ด้วยตนเองเพื่อให้แน่ใจว่า HMR มีผลใช้งาน
    

<details><summary>การดูตัวอย่างแอพใน Safari</summary><p></p><p><strong></strong></p><p><code></code></p><p><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources"></a></p><p></p><ol><li></li></ol><div class="highlight highlight-source-shell notranslate position-relative overflow-auto"><pre><span class="pl-c"><span class="pl-c"></span></span><span class="pl-c"><span class="pl-c"></span></span><span class="pl-k"></span><span class="pl-k"></span></pre><div class="zeroclipboard-container"></div></div><ol><li><a href="https://localhost:8080/"></a></li><li><ol><li><strong></strong></li><li><strong></strong></li></ol></li><li><strong></strong><a href="https://localhost:8080/"></a></li><li></li></ol><p></p><p><strong></strong><code></code><code></code></p></details>

## การรันตัวอย่าง

โฟลเดอร์ นี้`examples`ประกอบด้วยแอปสาธิตสำหรับ Canva API ที่หลากหลาย

หากต้องการดูรายการแอปตัวอย่างทั้งหมด ให้รันคำสั่งต่อไปนี้:

```plaintext
npm start examples
```

คุณสามารถใช้ปุ่มลูกศรเพื่อนำทางไปยังรายการและกด Enter เพื่อเรียกใช้ตัวอย่างที่ต้องการ ซึ่งจะมีลักษณะดังนี้:

```plaintext
   npm start examples

   ? Which example would you like to run? ›
   ❯   app element children
       app embed elements
       app image elements
       app shape elements
       app text elements
       asset upload
       authentication
       color
       design editing
    ↓  design token
```

หากต้องการเริ่มแอปตัวอย่างที่เจาะจง ให้เรียกใช้คำสั่งต่อไปนี้:

```plaintext
npm start <example-name>
```

## การรันตัวอย่างแบ็กเอนด์

ตัวอย่างบางตัวอย่างมีแบ็กเอนด์ แบ็กเอนด์นี้ถูกกำหนดไว้ใน`backend/server.ts`ไฟล์ของตัวอย่าง เริ่มทำงานโดยอัตโนมัติเมื่อ`npm start`เรียกใช้คำสั่ง และพร้อมใช้งานที่[http://localhost:](http://localhost:3001/) 3001

ในการเรียกใช้ตัวอย่างที่มีแบ็กเอนด์:

1. ไปที่หน้า[แอปของคุณ](https://www.canva.com/developers/apps)
    
2. คัดลอก ID ของแอปจาก คอลัมน์ **ID แอป**ในตารางแอป
    
3. ในไฟล์ชุดเริ่มต้น`.env`ให้ตั้งค่า`CANVA_APP_ID`เป็น ID ของแอป
    
    ตัวอย่างเช่น:
    
    ```plaintext
    CANVA_APP_ID=AABBccddeeff
    CANVA_APP_ORIGIN=#
    CANVA_BACKEND_PORT=3001
    CANVA_FRONTEND_PORT=8080
    CANVA_BACKEND_HOST=http://localhost:3001
    CANVA_HMR_ENABLED=FALSE
    ```
    
4. เริ่มต้นตัวอย่าง:
    
    ```plaintext
    npm start fetch
    ```
    

ต้องระบุ ID ของแอปอย่างชัดเจนเนื่องจากจำเป็นต้องระบุ ID เพื่อ[ส่งและยืนยันคำขอ HTTP](https://www.canva.dev/docs/apps/verifying-http-requests/)หากคุณไม่ได้ตั้งค่า ID ใน`.env`ไฟล์ ระบบจะแสดงข้อผิดพลาดเมื่อพยายามเรียกใช้ตัวอย่าง

**หมายเหตุ** : หากคุณกำลังรันเซิร์ฟเวอร์บน HTTPS (เช่น เพื่อทดสอบบน Safari) อย่าลืมเปลี่ยนตัวแปร`CANVA_BACKEND_HOST`สภาพแวดล้อมเป็น`https://localhost:3001`

## การปรับแต่งโฮสต์แบ็คเอนด์

หากแอปของคุณมีแบ็กเอนด์ URL ของเซิร์ฟเวอร์อาจขึ้นอยู่กับว่าเป็นเวอร์ชันพัฒนาหรือเวอร์ชันใช้งานจริง ตัวอย่างเช่น ในระหว่างการพัฒนา แบ็กเอนด์อาจทำงานบน URL โฮสต์โลคัล แต่เมื่อแอปอยู่ในเวอร์ชันใช้งานจริง แบ็กเอนด์จะต้องเปิดใช้งานบนอินเทอร์เน็ต

เพื่อปรับแต่ง URL ของเซิร์ฟเวอร์ได้ง่ายยิ่งขึ้น:

1. เปิด`.env`ไฟล์ในโปรแกรมแก้ไขข้อความที่คุณเลือก
    
2. ตั้งค่า`CANVA_BACKEND_HOST`ตัวแปรสภาพแวดล้อมให้เป็น URL ของเซิร์ฟเวอร์
    
3. เมื่อส่งคำขอให้ใช้`BACKEND_HOST`เป็น URL ฐาน:
    

1. `หมายเหตุ: BACKEND_HOSTเป็นค่าคงที่ทั่วโลกที่ประกอบด้วยค่าของCANVA_BACKEND_HOSTตัวแปรสภาพแวดล้อม ตัวแปรนี้เปิดให้แอปใช้งานได้ผ่าน webpack และไม่จำเป็นต้องนำเข้า`
    
2. ก่อนจะรวมแอปสำหรับการผลิต โปรดอัปเดต`CANVA_BACKEND_HOST`เพื่อชี้ไปที่แบ็กเอนด์การผลิต
    

```plaintext
const response = await fetch(`${BACKEND_HOST}/custom-route`);
```