Strapi(Headless CMS) + Next.js + Heroku ทำเว็บง่ายๆๆ แบบอุ้ยๆ

วันนี้จะลองทำเว็บง่ายๆ โดยใช้ 

Backend : Strapi ได้ API ในตัวด้วย
Frontned : Next.js(React.js)
Deploy : Heroku


ตามเค้าเข้าใจผม

Backend + API
Strapi เป็น Headless CMS โดยใช้ Node.js พัฒนา โดยมี API ให้ในตัวเลย สะดวกสบายมาก ไม่ต้องมานั่งเขียน API แยก + แถมหลังบ้านกับใช้งานง่ายมาก แบบเว็บไซส์ที่ไมซับซ้อนขึ้นงาน จบงาย ได้อย่างไวเลย

อาจจะมี function มากกว่านี้ เดียวผมลองเล่นดูแบบลึกๆๆอีกทีครับ

ข้อดี

Opensource
ฟรีครับ เราสามารถร่วม contribute กับคนอื่น ๆ ได้ในโปรเจกต์นี้


Customizable
มีระบบในการจัดการ spec ของ API ได้ผ่านหน้า admin dashboard 100% JS — โค๊ดที่เราได้คือ JavaScript, Node.js (เราสามารถแก้ไขได้ด้วย ถ้าไม่พอใจ อยากปรับแต่ง API เองมากขึ้น)

Self-hosted
ติดตั้งบนเครื่องของเราเอง ไม่ต้องเสียค่าใช้จ่ายในการใช้บริการแบบเจ้าอื่น ๆ


RESTFul
สามารถสร้างให้ API ของเราพ้นข้อมูลออกมาได้หลากหลายรูปแบบ เพื่อให้การเขียน Client มาเชื่อมต่อข้อมูลง่ายที่สุด


Plugins
มี Plugin ให้เลือกพอสมควร ถ้าเราอยากให้รูปที่อัพโหลดผ่าน API ของเราไปฝากไว้ที่ Cloudinary ล่ะ ต้องทำอย่างไร? ถ้าเมื่อก่อนเราก็ต้องเขียนเอง แต่นี่แค่ติดตั้ง Plugin แก้ไขค่าต่าง ๆ เช่น API Key และ Secret key ก็สามารถใช้งานได้แล้ว




Link : https://auto-land.herokuapp.com/admin/


https://auto-land.herokuapp.com/api/product-cars/



Frontend
ใช้ Next.js ใช้ง่านงานจริงๆ Support SEO ด้วย มีความรู้ React.js บ้างก็สามารถใช้งาน Next.js ได้หล่ะ (แต่เดียวมาเจาะเรื่อง Next.js แยกออกมาอีกที) ทำงานได้ไว้เรียก API จาก Strapi มาใช้งาน แอบใช้ Taiwild


Link : https://caronedrive.herokuapp.com/



Deploy

ผ่านไว้ที่ Heroku โดยให้ connect กับ github ผมเอง แล้วซิงค์กัน กด deploy จบเลย

แต่อาจจะมีแก้ไข config ที่ Strapi นิดหน่อยให้เข้าหลังบ้านได้




Comments

Post a Comment

Popular posts from this blog

Brave Browser คือ อีหยังว่ะ ทำไมสาย dev ต้องใช้งาน

Image
  Brave Browser ก็คือ Browser ตัวหนึ่งนั้นหล่ะ แต่ผมไม่พูดถึงการใช้งานนะ จะบอกสิ่งที่ได้จาก Brave ก็คือ  ทุกๆๆครั้งที่เราเปิดเว็บไซส์ผ่าน Brave เราจะได้ token(BAT) ด้วยนะ  โดยจะสรุปว่าได้  token ทุกๆเดือน อารมณ์เงินเดือนเลย แต่จะได้มากน้อยแค่ไหน ส่วน Login การได้  Token นี้ผมขอไปดึงข้อมูลมาจาก siamblockchain.com มาให้นะครับ "Brave สร้างรายได้ให้กับคนเล่นเน็ตได้ด้วย อ่านถึงข้อนี้อาจจะตกใจว่า Brave มันทำเงินได้ด้วยหรอ? คำตอบคือใช่ Brave มีฟีเจอร์ในการสร้างรายได้ให้กับผู้ใช้งานด้วย โดยผู้ใช้งานจะได้รายได้มากถึง 70 เปอร์เซ็นต์จาก Brave Ads โดยโฆษณาใน Brave จะแบ่งเป็นหลัก ๆ 2 ประเภทคือ User Ads และ Publisher Integrated Ads ต่างกันที่ส่วนแบ่งรายได้เท่านั้น User Ads – มีตัวเลือกให้เปิดปิดได้ ถ้าไม่ชอบเห็นโฆษณาก็สามารถเลือกบล็อคมันได้ โดยที่ไม่จำเป็นต้องจ่ายเงินอะไรให้กับ Brave ทั้งนั้น แต่ถ้าเปิดดู Ads มันจะเป็นช่องทางให้กับ Brand ที่อยากโฆษณากับผู้ใช้งาน Brave โดยผู้ใช้งานจะได้รับค่าโฆษณา 70 เปอร์เซ็นต์ และ Brave ได้รับ 30 เปอร์เซ็นต์ Publisher Integrated Ads – เหมือน...
Read more

เรียกใช้งาน Lalamove API ดึงค่าขนส่ง แบบพี่วินนะ

Image
วันนี้ผมจะมาเรียกใช้งาน lalamove แบบเรียกพี่วิน(มอเตอร์ไซส์) มารับของไปส่งให้ลูกค้า ภาษาที่เรียกใช้เป็น PHP เรียกผ่าน CURL นะครับ เนื่องจาก API ที่ให้เรามามีเยอะมากๆๆๆ  ถ้าอยากรู้ส่วนไหนเพิ่มเติมสามารถอ่านได้เองเลยนะครับที่ https://developers.lalamove.com/ วันนี้ผมจะมาดูเฉพาะการเรียกดูราคาจาก ต้นทาง ส่งไป ยังปลาย ทางผู้รับนะครับ ผมดูจากตรงนี้นะครับ https://developers.lalamove.com/#get-quotation  - Postman เผื่อเรียกดู - optional  - Service Types ของ lalamove ที่มีให้เรา    - WALKER    - MOTORCYCLE แบบที่เราจะใช้งานกัน    - CAR    - SEDAN    - VAN    - TRUCK175    - TRUCK330    - TRUCK550 Let's GOOOOO 1. สมัครสมาชิก สร้าง KEY ให้เรียบร้อยก่อน จะได้ API key กับ API secret มานะ 2. ไปดูตรง Authentication ก่อนนะครับ จะเกียวกับการ config ตรง lalamove https://developers.lalamove.com/?shell#authentication 3. POST  ค่าไปยัง Sandbox: https://rest.sandbox.lalamove.com/v3/quotations Production: https...
Read more

Blockchain Project - Exchange Calculator [Chainlink Fall Hackathon 2021]

Image
ผมได้ทำ Project ที่เกียวกับ Blockchain ส่งประกวดที่ Chainlink Fall Hackathon 2021 แต่ไม่ได้ที่อะไรเลยนะครับ 555 แต่เป็นการกดดันตัวเองให้เรียนรู้การเขียน Smart Contract ให้เป็น ถ้าไม่อย่างนั้นก็ไม่มีจุดหมายปลายทางอะไรครับ Project นี้ จะเป็นการ Input ค่า ETH ไป แล้วจะแปลงเป็นสกุลเงินต่างๆ ว่าเท่าไรบ้างนะครับ เช่น 1 ETH => XXXX Dai 1 ETH => XXX BUSD  LINK :  https://devpost.com/software/exchange-calculator Inspiration The inspiration was that uniswap wanted to do a uniswap project, but to do the Exchange Calculator for each coin. What it does Exchange Calculator How we built it Hardhat for solidity Deploy to alchemy(KOVAN) Frontend(Ether.js) used reactjs Chainlink Ethereum Data Feeds Challenges we ran into The challenge is no knowledge at all just starting to study Get knowledge from different places Then try to submit a contest. Accomplishments that we're proud of I can do Solidity since start to end project. What we learned The working theory of blockchain Programming sol...
Read more