Flutter CI & CD ที่ ClickUp

ด้วยทีมมือถือที่เติบโตขึ้นและการปล่อยอัปเดตทุกสัปดาห์ การมีสายงาน CI ที่เชื่อถือได้จึงเป็นสิ่งสำคัญ เราจำเป็นต้องสามารถสร้างและทดสอบแอปของเรา รวมถึงนำไปเผยแพร่บน App Store และ Google Play Store ได้ นอกจากนี้ เรายังดูแลเวอร์ชันพรีวิวภายในเพื่อทดสอบฟีเจอร์ล่าสุดอีกด้วย

เรียนรู้วิธีที่เราใช้ClickUp,Fastlane และGitHub Actionsเพื่อทำให้การผสานรวมอย่างต่อเนื่อง (CI) และการส่งมอบอย่างต่อเนื่อง (CD) ของเราเป็นอัตโนมัติ

ชีวิตของแมลง 🐜

มาเริ่มกันด้วยการทบทวนกระบวนการจัดการและแก้ไขข้อบกพร่องของเราอย่างรวดเร็ว

งานใน ClickUp ประกอบด้วยข้อมูลทุกอย่างเกี่ยวกับบั๊ก เราใช้สถานะที่กำหนดเองเช่น กำลังดำเนินการ หรือ รอการตรวจสอบโค้ด เพื่อติดตามสถานะของบั๊ก ระบบ CI จะเปลี่ยนสถานะโดยอัตโนมัติฟิลด์ที่กำหนดเองจะเก็บข้อมูลเพิ่มเติมเช่น ผู้ที่รายงานบั๊ก ผู้ที่รับผิดชอบแก้ไข กำหนดการปล่อยแก้ไข เป็นต้น

กระบวนการทำงานของฝ่ายประชาสัมพันธ์ 📜

สองขั้นตอนแรกที่กล่าวไว้ข้างต้นไม่เกี่ยวข้องกับ CI จริง ๆ แต่ขั้นตอนที่สามน่าสนใจ...

กระบวนการพัฒนาของเราจะทำงานสำหรับทุก PR โดยจะตรวจสอบโค้ด, รูปแบบ และการทดสอบทั้งหมดก่อนที่จะเริ่มสร้างไฟล์สำหรับ Android และ iOS

เมื่อการสร้างสำเร็จ ระบบ CI จะโพสต์ข้อความในภารกิจที่เชื่อมโยงไว้ วิศวกร QA สามารถไปที่ PR ดาวน์โหลดไฟล์สร้าง หรือใช้เว็บพรีวิวได้

ข้อความ CI อัตโนมัติที่โพสต์ในภารกิจ ClickUp ที่เชื่อมโยงหลังจากสร้างสำเร็จ

การตั้งค่า Flutter บน CI runner 🛠

เราใช้ GitHub action ที่รู้จักกันดีsubosito/flutter-actionเพื่อตั้งค่า Flutter บน CI โดยค่าเริ่มต้น มันจะติดตั้ง Flutter เวอร์ชันที่เสถียรล่าสุดให้โดยอัตโนมัติ เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นกับเวิร์กโฟลว์ CI ของคุณเมื่อมีการปล่อยเวอร์ชันใหม่ของ Flutter คุณควรระบุเวอร์ชันที่ต้องการติดตั้งด้วยตนเอง

หากคุณมีเวิร์กโฟลว์หลายรายการ ควรจัดเก็บเวอร์ชันของ flutter ไว้ในไฟล์จะดีกว่า เราใช้ FLUTTER_VERSION ไว้ในโฟลเดอร์หลักของที่เก็บโค้ด

อีกวิธีง่าย ๆ คือเก็บเวอร์ชันของ Flutter เป็น GitHub secret และเข้าถึงมันโดยใช้ {{ secrets. FLUTER_VERSION }}.

ตัวอย่างเว็บ 🕸

ด้วยความสามารถของ Flutter ที่สามารถทำงานบนเว็บได้ เราจึงสามารถสร้างตัวอย่างการแสดงผลบนเว็บของคำขอการดึงข้อมูล (pull requests) ได้อย่างสมบูรณ์ โดยใช้แพ็กเกจdevice_previewเราสามารถปรับขนาดและตั้งค่าของอุปกรณ์ได้ตามต้องการ

การดูตัวอย่างได้พิสูจน์แล้วว่ามีประโยชน์มาก และไม่เพียงแต่ใช้โดยทีม QA ของเราเท่านั้น นักออกแบบและผู้จัดการผลิตภัณฑ์ก็ชอบมันเช่นกันเพื่อทำการปรับปรุงคุณสมบัติใหม่ ๆ อย่างรวดเร็ว

ผ่านทาง Flutter

วิธีสร้างตัวอย่างเว็บ 🐶

เพื่อเริ่มต้นใช้งาน ให้ตรวจสอบให้แน่ใจว่าแอปของคุณรองรับFlutter web—ไม่ทุก API ที่ได้รับการสนับสนุน

ในแอปของเรา ตัวอย่างเช่น เราจำเป็นต้องปิดการแจ้งเตือนแบบพุชและเว็บซ็อกเก็ต

เวิร์กโฟลว์ตัวอย่างนี้สร้างตัวอย่างเว็บของแอป Flutter ของคุณและอัปโหลดไปยัง S3 bucket เราใช้ตัวแปรสภาพแวดล้อม ENABLE_DEVICE_PREVIEW เพื่อปิดการใช้งาน device_preview ในโหมดการผลิต

ขั้นตอน Fix base href จำเป็นต้องใช้เพราะการพรีวิวจะไม่ปรากฏอยู่ที่รากของบัคเก็ต

และโค้ดบางส่วนเพื่อเปิดใช้งาน device_preview แบบมีเงื่อนไข

ตัวแปรสภาพแวดล้อมเป็นเครื่องมือที่ทรงพลังและช่วยให้อัลกอริทึมการตัดโค้ดที่ไม่จำเป็น (tree shaking) ของ Flutter สามารถลบโค้ดสำหรับดีบักออกได้ในเวอร์ชันที่ปล่อยให้ใช้งานจริง

ทางลัด 💨

Fastlane ช่วยให้การสร้าง, การลงนาม, และการPLOYแอป Flutter ง่ายขึ้นอย่างมาก. มันจัดการใบรับรอง, โปรไฟล์การจัดเตรียม, และการตั้งค่าอื่น ๆ ของเรา. เราใช้ GitHub secrets เพื่อเก็บรหัสผ่านและโทเค็นอย่างปลอดภัย.

การดำเนินการ Fastlane ที่มีประโยชน์:

ตัวอย่างบิลด์สำหรับนักพัฒนา iOS 🍏

อย่าลืม setup_ci มันจะช่วยคุณจากข้อผิดพลาดแปลกๆ 👾. เรียนรู้เพิ่มเติมเกี่ยวกับFastlane สำหรับแอป Flutter.

การลงนามใน Android 🔒

วิธีที่ง่ายที่สุดในการลงนามในบิลด์ที่ปล่อยของ Android อย่างปลอดภัยคือการเก็บโทเค็นเป็น GitHub secrets และใช้ตัวแปรสภาพแวดล้อมและคีย์ชั่วคราว jks ที่สร้างโดย CI:

เราเก็บคีย์ jks ในรูปแบบสตริงที่ถูกเข้ารหัส base64 ใน Github Secrets และถอดรหัสในเวิร์กโฟลว์:

ปล่อยและขั้นตอนการผลิต 🚀

เวิร์กโฟลว์ก่อนการปล่อยเวอร์ชันจะทำงานสำหรับสาขาที่เริ่มต้นด้วย release/v. มันจะลบโค้ดการดีบักและโค้ดภายในทั้งหมดเพื่อให้แน่ใจว่าเราทดสอบโค้ดเดียวกันที่จะถูกปล่อยออกมา

นอกจากนี้ กระบวนการทำงานก่อนการปล่อยเวอร์ชันจะโพสต์ไปยังช่องทาง Slack ต่างๆ เพื่อแจ้งให้ทีม QA และทีมการตลาดทราบเกี่ยวกับการปล่อยเวอร์ชันใหม่โดยใช้webhooks ที่เข้ามา

หลังจากทดสอบทุกอย่างอย่างละเอียดแล้ว เราจะสร้างการปล่อยบน GitHub ซึ่งจะกระตุ้นกระบวนการทำงานของระบบจริง ระบบจะสร้างและลงนามแอปด้วยใบรับรองการผลิตและส่งไปยัง App Store

เคล็ดลับเพิ่มเติมสำหรับ CI ของคุณ 🦾

หากคุณใช้ปุ่มกดสำหรับ GitHub Actions คุณอาจพบปัญหาหากมีการกดปุ่มหลายครั้งติดต่อกันไปยังสาขาเดียวกัน ระบบอาจเริ่มการทำงานของเวิร์กโฟลว์มากกว่าหนึ่งครั้งพร้อมกัน ซึ่งอาจทำให้เสียเวลาในการสร้างหรือเกิดปัญหาอื่น ๆ ได้

สรุป 🍩

การสร้าง CI ของคุณเป็นกระบวนการที่สนุก เริ่มต้นได้ง่ายและคุณสามารถพัฒนาต่อไปได้เรื่อยๆ CI ของเราดำเนินตามหนึ่งในค่านิยมหลักของ ClickUp: ก้าวหน้าสู่ความสมบูรณ์แบบ เรากำลังทำงานปรับปรุง CI อย่างต่อเนื่องเพื่อทีม QA และวิศวกรรมของเรา

การผสมผสานระหว่าง ClickUp, GitHub Actions และ Fastlane นั้นทรงพลังมากและช่วยให้สามารถสร้าง CI/CD pipeline ที่ยืดหยุ่นและอัตโนมัติเต็มรูปแบบได้ในเวลาไม่ถึงชั่วโมง ลองใช้ดูสิ!

เรามีหัวข้อที่น่าสนใจมากมายที่กำลังจะมาถึง อย่าลืมติดตามบล็อก ClickUp Engineering! 🦄