agency os

เอเจนซี่โอเอส

AgencyOS คือทุกสิ่งที่คุณต้องการเพื่อทำให้เอเจนซี่ของคุณเริ่มต้นใช้งาน หรือปรับปรุงเครื่องมือสำหรับบริษัทที่คุณมีอยู่ เว็บไซต์ / แอปพลิเคชัน Nuxt 3 + แบ็กเอนด์ Directus

มาถึงคุณโดยความร่วมมือระหว่าง Directus และ NuxtLabs

บทนำ · คุณสมบัติ · ? การติดตั้งและการพัฒนา · ? การปรับใช้ · ? เทคสแต็ค · ? ความช่วยเหลือของชุมชน · ❤️ มีส่วนร่วม

การแนะนำ

ส่วนที่ง่ายที่สุด อย่างหนึ่งในการดำเนินธุรกิจเอเจนซี่ดิจิทัลให้ประสบความสำเร็จก็คือการ ทำงานจริง ฉันหมายถึง ใครล่ะจะไม่ชอบที่จะทุ่มเทเพื่อทำงานร่วมกัน ออกแบบ และสร้างสิ่งที่น่าทึ่งให้กับลูกค้า

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

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

AgencyOS เป็นระบบปฏิบัติการโอเพ่นซอร์สที่ช่วยคุณดำเนินการ (หรือเริ่มต้น) หน่วยงานดิจิทัลของคุณ สร้างขึ้นจากเครื่องมือโอเพ่นซอร์ส (Nuxt และ Directus) และออกแบบมาให้สามารถแฮ็กได้ 100% คุณจึงสามารถสร้างโซลูชัน แอปการจัดการโครงการ ระบบปฏิบัติการของเอเจนซี่ของคุณได้ในเวลาอันรวดเร็ว

ทำไม

มีคนจำนวนไม่น้อยในทีมหลักของ Directus ที่มีประสบการณ์ในการดำเนินธุรกิจเอเจนซี่ และเรารู้ว่านี่ไม่ใช่เพียงสายรุ้งและแสงแดดเท่านั้น เราต้องการสร้างเครื่องมือที่พันธมิตรเอเจนซี่ของเรา (และเอเจนซี่อื่นๆ) จะได้รับคุณค่ามากมาย นอกจากนี้ยังสร้างขึ้นเพื่อเป็นตัวอย่างที่สมบูรณ์เพื่อแสดงพลังและความยืดหยุ่นของ Directus ในฐานะแพลตฟอร์มในการสร้างแอปและเครื่องมือของคุณเองอย่างรวดเร็ว

เริ่มต้นใช้งาน

• → อ่านคำแนะนำในการติดตั้ง
• → ดูไซต์สาธิต
• → ชมวิดีโอสอน

---

คุณสมบัติ

เว็บไซต์

เมื่อคุณทำงานหนักเพื่อส่งมอบให้กับลูกค้า - ไซต์ของคุณมีแนวโน้มที่จะประสบปัญหา AgencyOS มีเทมเพลตเว็บไซต์ที่สวยงามซึ่งปรับแต่งได้ง่ายและผสานรวมกับ CMS ที่ไม่มีส่วนหัวที่ใช้งานง่ายอยู่แล้ว

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

• เครื่องมือสร้างเพจแบบไดนามิกพร้อมการแสดงตัวอย่างสด
• โพสต์ในบล็อกและหมวดหมู่
• การสร้างแบบฟอร์มแบบไดนามิกพร้อมการตรวจสอบความถูกต้อง
• การสร้างภาพ OG แบบไดนามิก
• รองรับ SEO เต็มรูปแบบตั้งแต่แกะกล่อง – (เมตาแท็ก, แผนผังเว็บไซต์, การเปลี่ยนเส้นทาง, JSON-LD และอื่น ๆ )
• ฟังก์ชั่นการค้นหาทั่วโลก
• ยูทิลิตี้ทั่วไป ดังนั้นคุณไม่จำเป็นต้องรวมแพ็คเกจอื่นอีก
• รองรับ Google แบบอักษร
• ESLint และ Prettier ได้รับการกำหนดค่าไว้ล่วงหน้า
• รองรับโหมดมืดเต็มรูปแบบ
• สร้างธีมด้วยไฟล์ปรับแต่งที่ง่ายดาย

CRM / ตัวติดตามโครงการ

การรักษาความสัมพันธ์ที่สำคัญกับลูกค้าไม่ได้ขึ้นอยู่กับทีมขายเท่านั้น เหตุใดจึงต้องแยกการจัดการโครงการและเครื่องมือ CRM ออกจากกัน AgencyOS มี CRM ที่ปรับแต่งได้อย่างสมบูรณ์ เพื่อให้คุณสามารถทำงานได้ตามที่คุณต้องการ

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

พอร์ทัลลูกค้า

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

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

---

- การติดตั้งและการพัฒนา

AgencyOS มีสองส่วนหลัก ได้แก่ แบ็กเอนด์และ API ที่ขับเคลื่อนโดย Directus และเว็บไซต์ส่วนหน้าและแอปพลิเคชันที่ขับเคลื่อนโดย Nuxt

- Directus - แบ็กเอนด์ + CMS ไร้หัว

1 - สร้างโปรเจ็กต์ Directus

มีสองวิธีที่คุณสามารถตั้งค่าโปรเจ็กต์ Directus เพื่อใช้สำหรับ AgencyOS ได้อย่างรวดเร็ว

1a - ลงทะเบียนสำหรับบัญชี Directus Cloud

https://directus.cloud/register

นี่คือปุ่มง่าย คุณไม่ต้องยุ่งกับ Docker หรือหาวิธีปรับใช้อินสแตนซ์ Directus ที่ AWS, Digital Ocean หรือโฮสต์ที่คล้ายกัน เพียงไม่กี่คลิกและในเวลาไม่ถึง 2 นาที คุณก็จะมีโปรเจ็กต์ Directus ที่พร้อมใช้งาน

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

หรือ

1b - โฮสต์อินสแตนซ์ Directus ด้วยตนเอง

หากคุณต้องการโฮสต์ Directus ด้วยตนเอง เราขอแนะนำให้คุณดำเนินการดังกล่าวด้วย Docker

หมายเหตุสำคัญ : นี่เป็นการเปิดตัวชุมชนโอเพ่นซอร์สฟรี ดังนั้นเราจึงไม่สามารถให้การสนับสนุนอินสแตนซ์ที่โฮสต์ด้วยตนเองได้ หากไม่มีใบอนุญาต Enterprise Self-Hosted หรือข้อตกลงการสนับสนุนอย่างเป็นทางการ เรียนรู้เพิ่มเติมและติดต่อทีมงานของเราเพื่อขอรายละเอียดเกี่ยวกับ Enterprise Self-Hosted

คุณจะพบ docker-compose.yaml ภายใน repo ที่คุณสามารถใช้เพื่อหมุนอินสแตนซ์ Directus ในเครื่องเพื่อทดสอบได้อย่างรวดเร็ว คุณควรติดตั้งและใช้งาน Docker บนเครื่องของคุณก่อน คุณสามารถ ดาวน์โหลดได้ที่นี่

PostgreSQL เป็นผู้จำหน่ายฐานข้อมูล ที่ได้รับการทดสอบและเป็นที่ต้องการ สำหรับโปรเจ็กต์นี้ โปรเจ็กต์ได้รับการทดสอบและตรวจสอบแล้วว่าทำงานกับไฟล์ docker-compose.yaml ที่รวมอยู่ใน repo Directus รองรับผู้จำหน่ายฐานข้อมูล SQL มากมาย แต่เราทดสอบโปรเจ็กต์นี้กับ PostgreSQL เท่านั้น

 # Navigate to the .directus directory
$ cd .directus

# Run docker compose
$ docker compose up

# Docker does it's thing and your Directus project will be available at http://localhost:8055/ or http://0.0.0.0:8055/

คุณสามารถดูคำแนะนำในการติดตั้งเพิ่มเติมโดยใช้ Docker ได้ที่นี่ในเอกสารประกอบของ Directus

สำหรับการปรับใช้โปรเจ็กต์แบบเรียลไทม์ โปรดดูส่วนการปรับใช้

2 - สร้างโทเค็นแบบคงที่สำหรับผู้ใช้ผู้ดูแลระบบ

คุณต้องมีโทเค็นแบบคงที่เพื่อเริ่มต้นโปรเจ็กต์

1. ไปที่ไดเรกทอรีผู้ใช้
2. เลือกผู้ใช้ที่เป็นผู้ดูแลระบบ
3. เลื่อนลงไปที่ช่องโทเค็น
4. สร้างโทเค็นและคัดลอก
5. บันทึกผู้ใช้ (อย่าลืมบันทึกเพราะคุณจะได้รับข้อผิดพลาดที่แสดงว่าโทเค็นไม่ถูกต้อง!)

3 - ใช้เทมเพลต AgencyOS

เปิดเทอร์มินัลของคุณ รันคำสั่งต่อไปนี้ และเพียงปฏิบัติตามคำแนะนำ

npx directus-template-cli@latest apply

การใช้แท็ก @latest ช่วยให้คุณดาวน์โหลดเทมเพลตเวอร์ชันล่าสุดของเรา ในกรณีที่คุณเคยรันคำสั่งก่อนหน้านี้

1. เลือกเทมเพลต Agency OS
2. วาง URL ไปยังอินสแตนซ์ Directus ของคุณ
3. วางโทเค็นคงที่ผู้ใช้ผู้ดูแลระบบของคุณ
4. รอให้สคริปต์เสร็จสิ้น

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเครื่องมือ Directus Template CLI ได้ที่นี่ หมายเหตุ : อาจใช้เวลาสักครู่ก่อนที่สคริปต์เทมเพลตจะทำงานหากคุณใช้อินสแตนซ์ Directus ที่โฮสต์ระยะไกล

---

⛰️ Nuxt - ส่วนหน้า

สำหรับเว็บไซต์และพอร์ทัลลูกค้าของคุณ AgencyOS ใช้ Nuxt เป็นเฟรมเวิร์กส่วนหน้าที่คุณเลือก

1 - โคลน repo

ใช้เทมเพลตนี้

หรือจากเทอร์มินัล

git clone https://github.com/directus-community/agency-os.git your-project

นำทางไปยังโครงการ

cd your-project

2 - แก้ไขไฟล์ .env ของคุณ

• เปลี่ยนชื่อไฟล์ env.example เป็น .env
• เพิ่ม URL ไปยังอินสแตนซ์ Directus ของคุณ
• เพิ่มโทเค็นแบบคงที่สำหรับผู้ใช้ผู้ดูแลระบบของคุณที่คุณสร้างไว้ด้านบน

ไฟล์ .env ของคุณควรมีลักษณะเช่นนี้

 # Directus Setup
DIRECTUS_URL = " https://your-instance.directus.app "
DIRECTUS_SERVER_TOKEN = " your_directus_server_token_for_server_only_routes "
SITE_URL = " http://localhost:3000 "

# Stripe Setup (If you want to allow payments within the portal)
STRIPE_SECRET_KEY = sk_test_xxxxxxxxxxxxxxx
STRIPE_PUBLISHABLE_KEY = pk_xxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET = whsec_xxxxxxxxxxxxxxx

3 - ติดตั้งการพึ่งพาของคุณ

pnpm i

4 - เริ่มเซิร์ฟเวอร์การพัฒนา

pnpm dev

http://localhost:3000

5 - สร้างเพื่อการผลิตเมื่อคุณพร้อม

pnpm build

- การปรับใช้

การปรับใช้ Nuxt - ส่วนหน้า

โปรดตรวจสอบเอกสารการปรับใช้ Nuxt อย่างเป็นทางการสำหรับผู้ให้บริการที่รองรับ นี่คือโฮสต์ยอดนิยมบางส่วนที่ทำงานได้ดีกับ Nuxt

ตัวเลือกคลิกเดียว

หมายเหตุ: Vercel เป็นเป้าหมายการปรับใช้ที่แนะนำสำหรับ AgencyOS ในขณะนี้ เนื่องจากปัญหาหน่วยความจำเล็กน้อยกับกระบวนการสร้างบน Netlify

เวอร์เซล

เน็ตลิฟาย

การปรับใช้ Directus - แบ็กเอนด์

หากคุณไม่ต้องการยุ่งกับ DevOps หรือปั่นเซิร์ฟเวอร์ คุณสามารถเริ่มต้นโปรเจ็กต์ใหม่บน Directus Cloud ได้ในเวลาประมาณ 90 วินาที

หากคุณต้องการโฮสต์ด้วยตนเอง Docker คือวิธีที่แนะนำในการปรับใช้ Directus โปรดตรวจสอบ Directus Docker Guide อย่างเป็นทางการ

แหล่งข้อมูลสำหรับ Directus โฮสติ้งด้วยตนเอง

• ปรับใช้ Directus ไปยัง DigitalOcean ด้วย Docker
• ปรับใช้ Directus บนทางรถไฟ

---

- เทคสแต็ค

นัท

สร้างแอปพลิเคชัน Vue.js ถัดไปของคุณด้วยความมั่นใจโดยใช้ Nuxt เฟรมเวิร์กโอเพ่นซอร์สภายใต้ลิขสิทธิ์ MIT ที่ทำให้การพัฒนาเว็บง่ายและมีประสิทธิภาพ เฟรมเวิร์ก Vue ชั้นนำที่จัดการการกำหนดเส้นทาง การเรนเดอร์ฝั่งเซิร์ฟเวอร์ และอื่นๆ

เรียนรู้เพิ่มเติมเกี่ยวกับ Nuxt

ไดเร็กตัส

Directus เป็น CMS ไร้หัวที่เปลี่ยนฐานข้อมูล SQL ของคุณให้เป็น REST และ GraphQL API ได้ทันที และมอบแอปที่สวยงามและใช้งานง่ายที่ไม่ต้องใช้โค้ดเพื่อจัดการเนื้อหาและข้อมูลทั้งหมดของคุณ แต่ยังเป็นมากกว่า CMS ที่ไม่มีหัวอีกด้วย เป็นแพลตฟอร์มข้อมูลแบบเปิดที่มีเครื่องมือทั้งหมดที่คุณต้องการสำหรับการสร้าง จัดการ ให้บริการ แสดงภาพ และแม้กระทั่งทำให้ข้อมูลของคุณเป็นแบบอัตโนมัติสำหรับเว็บ อุปกรณ์เคลื่อนที่ หรือโปรเจ็กต์ดิจิทัลครั้งถัดไป

เรียนรู้เพิ่มเติมเกี่ยวกับไดเรกตัส

---

UI

• Nuxt UI - ส่วนประกอบที่มีสไตล์และปรับแต่งได้อย่างเต็มที่สำหรับ Nuxt Nuxt UI เป็นไลบรารีองค์ประกอบ UI อย่างเป็นทางการสำหรับ Nuxt
• Tailwind CSS – เฟรมเวิร์ก CSS เน้นยูทิลิตี้ที่ช่วยให้คุณสามารถสร้างเว็บไซต์ได้อย่างรวดเร็วและรักษาความสอดคล้องของสมาชิกในทีม มีปลั๊กอิน Tailwind หลายตัวติดตั้งอยู่และพร้อมใช้งานเช่นกัน ทั้งตัวพิมพ์และแบบฟอร์ม
• Headless UI – ส่วนประกอบ UI ที่ไม่มีสไตล์และเข้าถึงได้อย่างสมบูรณ์
• FormKit – ไลบรารีฟอร์มสำหรับ Vue ที่ช่วยคุณประหยัดเวลาหลายชั่วโมงโดยทำให้การสร้างแบบฟอร์มง่ายขึ้น รวมถึงการจัดการข้อผิดพลาด การตรวจสอบ การกำหนดธีม และแม้กระทั่งการสร้างจากสคีมาแบบสำเร็จรูป
• ไอคอน Nuxt - เพิ่มองค์ประกอบ <Icon> ที่ช่วยให้คุณใช้ไอคอนได้มากมาย ดูไอคอนที่ใช้ได้ ที่นี่

สาธารณูปโภค

• VueUse – การรวบรวมยูทิลิตี้ Vue Composition ติดตั้งและกำหนดค่าแล้ว เพื่อให้คุณสามารถนำเข้าองค์ประกอบใด ๆ ในไลบรารีได้ทันที
• VueUse Motion – องค์ประกอบที่ทำให้ส่วนประกอบของคุณเคลื่อนไหว ทำให้ง่ายต่อการสร้างแอนิเมชั่นที่มีรสนิยมโดยใช้ความพยายามน้อยลง

- ความช่วยเหลือจากชุมชน

สำหรับความช่วยเหลือหรือสนับสนุนชุมชน โปรดดูที่เซิร์ฟเวอร์ Directus Discord

• Directus Discord – เข้าร่วมกับนักพัฒนาและสมาชิกชุมชนมากกว่า 10,000 คนเพื่อถามคำถามและสนทนาสดเกี่ยวกับ Directus
• Nuxt Discord

❤️ร่วมสมทบทุน

AgencyOS เป็นโครงการที่ขับเคลื่อนโดยชุมชน ดังนั้นเราจึงยินดีเป็นอย่างยิ่งที่จะมีส่วนร่วมจากคุณ

คุณสามารถมีส่วนร่วมได้ดังนี้:

• เปิดปัญหาหากคุณเชื่อว่าคุณพบจุดบกพร่อง
• ส่งคำขอดึงเพื่อเพิ่มคุณสมบัติใหม่/ปรับปรุงคุณภาพชีวิต/แก้ไขข้อบกพร่อง

ขอบคุณ

AgencyOS ถูกสร้างขึ้นโดย Bryant Gillespie (@bryantgillespie) แต่ก็ต้องขอบคุณมากสำหรับ...

• @rijkvanzanten และ @benhaynes สำหรับการสร้าง Directus และรวมถึงฉันในการเดินทางด้วย
• @atinux และ @alexchopin สำหรับการสร้างเฟรมเวิร์ก Nuxt
• @intevel และ @becem-gharbi สำหรับแต่ละโมดูล nuxt-directus ที่แยกจากกันซึ่งทำหน้าที่เป็นแหล่งที่มาของแรงบันดาลใจ