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

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

sparesos's photo
sparesos
·

2 min read

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

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

ความต้องการ

  • Node.js v18หรือv20.10.0

  • npm v9หรือv10

**หมายเหตุ:**เพื่อให้แน่ใจว่าคุณใช้ Node.js เวอร์ชันที่ถูกต้อง เราขอแนะนำให้ใช้ตัวจัดการเวอร์ชัน เช่นnvm ไฟล์ . nvmrcในไดเร็กทอรีรูทของรีโพอนี้จะช่วยให้แน่ใจว่าใช้เวอร์ชันที่ถูกต้องเมื่อคุณเรียกใช้nvm install.

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

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

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

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

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

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

npm start

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

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

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

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

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

  1. สร้างแอปผ่านทางพอร์ทัลนักพัฒนา

  2. เลือกแหล่งที่มาของแอป > URL การพัฒนา

  3. ใน ฟิลด์ URL การพัฒนาให้ป้อน URL ของเซิร์ฟเวอร์การพัฒนา

  4. คลิกดูตัวอย่างซึ่งจะเปิดโปรแกรมแก้ไข Canva (และแอป) ในแท็บใหม่

  5. คลิกเปิด (หน้าจอนี้จะปรากฏขึ้นเฉพาะเมื่อใช้แอปเป็นครั้งแรกเท่านั้น)

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

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

ตามค่าเริ่มต้น ทุกครั้งที่คุณทำการเปลี่ยนแปลงแอป คุณจะต้องโหลดแอปทั้งหมดใหม่เพื่อดูผลลัพธ์ของการเปลี่ยนแปลงเหล่านั้น หากคุณเปิดใช้งานHot Module Replacement (HMR) การเปลี่ยนแปลงจะสะท้อนให้เห็นโดยไม่ต้องโหลดใหม่ทั้งหมด ซึ่งจะช่วยเร่งความเร็วของวงจรการพัฒนาได้อย่างมาก

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

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

  1. นำทางไปยังแอปผ่านทางแอปของคุณ

  2. เลือกกำหนดค่าแอปของคุณ

  3. คัดลอกค่าจาก ช่อง แหล่งที่มาของแอปค่านี้จะไม่ซ้ำกันสำหรับแต่ละแอปและไม่สามารถปรับแต่งได้

  4. .envเปิด ไฟล์ในไดเร็กทอรีของชุดเริ่มต้น

  5. ตั้งCANVA_APP_ORIGINค่าตัวแปรสภาพแวดล้อมให้เป็นค่าที่คัดลอกมาจาก ฟิลด์ แหล่งที่มาของแอป :

     CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE

  6. ตั้งค่าCANVA_HMR_ENABLEDตัวแปรสภาพแวดล้อมเป็นtrue:

     CANVA_HMR_ENABLED=true

  7. รีสตาร์ทเซิร์ฟเวอร์การพัฒนาท้องถิ่น

  8. โหลดแอปใหม่ด้วยตนเองเพื่อให้แน่ใจว่า HMR มีผลใช้งาน

การดูตัวอย่างแอพใน Safari

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

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

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

npm start examples

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

   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

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

npm start <example-name>

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

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

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

  1. ไปที่หน้าแอปของคุณ

  2. คัดลอก ID ของแอปจาก คอลัมน์ ID แอปในตารางแอป

  3. ในไฟล์ชุดเริ่มต้น.envให้ตั้งค่าCANVA_APP_IDเป็น ID ของแอป

    ตัวอย่างเช่น:

     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. เริ่มต้นตัวอย่าง:

     npm start fetch

ต้องระบุ ID ของแอปอย่างชัดเจนเนื่องจากจำเป็นต้องระบุ ID เพื่อส่งและยืนยันคำขอ HTTPหากคุณไม่ได้ตั้งค่า 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เพื่อชี้ไปที่แบ็กเอนด์การผลิต

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