jamstack ecommerce example
1.0.0
เนื่องจากหน้าเว็บที่ผู้เยี่ยมชมไม่ได้รับการเข้าถึงจะไม่ถูกสร้างขึ้นแบบไดนามิกเมื่อมีการร้องขอ แต่สร้างไว้ล่วงหน้าและทำหน้าที่เป็นไฟล์ HTML แบบคงที่กระบวนการของการเปิดตัวคุณสมบัติและเนื้อหาใหม่ดูแตกต่างจากเว็บแอปพลิเคชัน "ดั้งเดิม" เล็กน้อย
การพัฒนาท้องถิ่น: การพัฒนาคุณสมบัติใหม่สามารถทำได้ในท้องถิ่น
nuxt.js มาพร้อมกับเครื่องมือที่มีประสิทธิภาพมากเพื่อรองรับประสบการณ์นักพัฒนาที่ยอดเยี่ยมเช่นเซิร์ฟเวอร์ dev ที่มีการเปลี่ยนโมดูลร้อนและโหลดสดใหม่
เนื้อหาสำหรับผลิตภัณฑ์จะถูกเก็บไว้ในพื้นที่เก็บข้อมูล GIT ควบคู่ไปกับซอร์สโค้ดเพื่อให้นักพัฒนาสามารถใช้ข้อมูลผลิตภัณฑ์จริงในระหว่างการใช้งานและการทดสอบ
จุดสิ้นสุดของ API ควรมีการใช้เซิร์ฟเวอร์จำลองเช่น Wiremock หรือ Mockserver เพื่อทำงานอย่างอิสระจากระบบภายนอกจริง สำหรับการรับรองความถูกต้องของ OpenID Connect ให้พิจารณาการตั้งค่า Keycloak ในพื้นที่
หมายเหตุ: โครงการตัวอย่างนี้ไม่รวมเซิร์ฟเวอร์จำลองใด ๆ
เนื้อหาการดึงข้อมูลล่วงหน้า: ทุกครั้งที่ข้อมูลผลิตภัณฑ์ใหม่หรือที่ได้รับการปรับปรุงจะต้องเผยแพร่บนเว็บไซต์ไฟล์เนื้อหา JSON ที่ดึงมาล่วงหน้าจะต้องได้รับการอัปเดตในพื้นที่เก็บข้อมูล GIT ก่อนที่จะสร้างไฟล์ HTML แบบคงที่เวอร์ชันใหม่
สคริปต์เนื้อหา Node.js พิเศษจะเชื่อมต่อกับ Salesforce และดึงข้อมูลล่าสุดผ่าน Salesforce REST API ไฟล์เนื้อหา JSON ได้รับการอัปเดตตามนั้นและสามารถมุ่งมั่นไปยังพื้นที่เก็บข้อมูล GIT
มันขึ้นอยู่กับคุณอย่างสมบูรณ์ที่ไหนและเวลาที่สคริปต์นี้ถูกดำเนินการ ตัวอย่างเช่นมันสามารถเรียกใช้เป็นการกระทำของ GitHub หรือในกระบวนการ CI บน Travis CI
หมายเหตุ: Salesforce เป็นเพียงตัวอย่างของแหล่งข้อมูลที่มีศักยภาพในการรับเนื้อหาจาก ไฟล์เนื้อหาสามารถสร้างได้จากแหล่งข้อมูลอื่น ๆ
การเผยแพร่ไฟล์ HTML แบบคงที่: ทุกที่กระทำในพื้นที่เก็บข้อมูล GIT แสดงถึงการใช้งานและสถานะเนื้อหาบางอย่างของเว็บไซต์ซึ่งอาจเผยแพร่ได้
กระบวนการสร้างแปลงซอร์สโค้ดเป็นชิ้นที่ปรับให้เหมาะสมและสร้างไฟล์ HTML แบบคงที่โดยการคำนวณเส้นทางที่เข้าถึงได้ทั้งหมดสำหรับส่วนประกอบของหน้าเว็บที่นำไปใช้และไฟล์เนื้อหาที่ดึงมาล่วงหน้า
ในที่สุดไฟล์เว็บไซต์ที่สร้างขึ้นทั้งหมดสามารถเผยแพร่ไปยังเว็บเซิร์ฟเวอร์หรือเครือข่ายการส่งเนื้อหาใด ๆ เช่น NetLify
หมายเหตุ: กระบวนการสร้างยังสามารถใช้ประโยชน์จากคำขอ API เพื่อโหลดเนื้อหาที่ไม่ได้เก็บไว้ในไฟล์เนื้อหาในที่เก็บ GIT
การปรับปรุงแบบไดนามิกผ่าน APIs: ผู้เข้าชมจะได้รับไฟล์ HTML แบบคงที่เมื่อโหลดเว็บไซต์ในเบราว์เซอร์ นี่เป็นสิ่งที่รวดเร็วมากเพราะไม่มีสิ่งใดที่ต้องการสร้างขึ้นบนเซิร์ฟเวอร์
เมื่อหน้าเว็บได้โหลด JavaScript แบบไดนามิกและปรับปรุงหน้าด้วยคุณสมบัติแบบไดนามิก นี่อาจเป็นคุณสมบัติเช่นตะกร้าสินค้าหรือแสดงเนื้อหาผู้ใช้ส่วนบุคคล
ข้อมูลแบบไดนามิกสามารถดึงข้อมูลได้โดยการส่งคำขอ API จากเบราว์เซอร์ ผู้เข้าชมสามารถตรวจสอบความถูกต้องโดยใช้โปรโตคอลมาตรฐานเช่น OAuth 2.0 และ OpenID Connect เพื่อให้เว็บไซต์นำเสนอเนื้อหาแต่ละรายการ
ทำไม ช่วยให้การเข้าสู่ระบบกับผู้ใช้ลูกค้าจริงในชุมชนสายฟ้า
ขั้นตอนนี้เป็นสิ่งจำเป็นหากคุณวางแผนที่จะใช้สคริปต์การอัปเดตเนื้อหาและหากคุณต้องการตั้งค่าการออกจากระบบอัตโนมัติในชุมชน Lightning เมื่อผู้ใช้ออกจากระบบในเว็บไซต์
ทำไม มันเพิ่มวัตถุ "หมวดหมู่ผลิตภัณฑ์" ที่กำหนดเองให้กับ Salesforce org ของคุณและติดตั้งฟิลด์ที่กำหนดเองในวัตถุ Product2 เพื่อให้คุณกำหนดหมวดหมู่ผลิตภัณฑ์ที่เป็นของ นอกจากนี้ยังติดตั้งองค์ประกอบของเว็บ Lightning ที่จะใช้ในหน้าชุมชนล็อกเอาต์พิเศษซึ่งจะลงทะเบียนผู้ใช้โดยอัตโนมัติ
ดาวน์โหลดและติดตั้ง Salesforce CLI
เปิดเทอร์มินัลในไดเรกทอรี salesforce
เชื่อมต่อ Salesforce CLI กับ Salesforce org ของคุณ
sfdx force:auth:web:login -a MyOrg -sปรับใช้โครงการ SFDX ไปยังองค์กร Salesforce ของคุณ
sfdx force:source:deploy -p force-appทำไม จะช่วยให้เซิร์ฟเวอร์ API และสคริปต์เนื้อหาสามารถเชื่อมต่อกับ Salesforce กับผู้ใช้ทางเทคนิคเฉพาะซึ่งอนุญาตให้มีการควบคุมการเข้าถึงส่วนบุคคล
ทำไม จำเป็นต้องแสดงหน้าเข้าสู่ระบบระหว่างโฟลว์การตรวจสอบความถูกต้องของ OpenID Connect
หากคุณต้องการตั้งค่าการออกจากระบบอัตโนมัติสำหรับผู้ใช้ชุมชนเมื่อพวกเขาออกจากระบบบนเว็บไซต์ทำตามขั้นตอนเพิ่มเติมเหล่านี้:
ทำไม เป็นสิ่งจำเป็นสำหรับการรับรองความถูกต้องของ OpenID Connect สำหรับผู้เยี่ยมชมเว็บไซต์และอนุญาตให้เซิร์ฟเวอร์ API และสคริปต์เนื้อหาเชื่อมต่อกับ Salesforce อย่างปลอดภัย
ขั้นตอนนี้เป็นทางเลือกเนื่องจากที่เก็บ Git มีตัวอย่างผลิตภัณฑ์และหมวดหมู่สำหรับการสาธิตแล้ว
คุณควรมีบันทึกสำหรับวัตถุ Product2 ใน org salesforce ของคุณซึ่งมีการใช้งานและมีรายการสมุดราคาในหนังสือราคาบางเล่มที่ใช้สำหรับการอัปเดตเนื้อหา
คุณสามารถสร้างหมวดหมู่ผลิตภัณฑ์บางประเภทและกำหนดให้กับผลิตภัณฑ์ของคุณ
หมายเหตุ: สคริปต์ต้องการเมตาดาต้า Salesforce ที่จะนำไปใช้ในองค์กรของคุณ
เปิดเทอร์มินัลใน content-scripts ไดเรกทอรี
ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
| ชื่อ | คำอธิบาย |
|---|---|
| salesforce_instance_url | URL พื้นฐานของอินสแตนซ์ Salesforce (รูปแบบ https://xx##.salesforce.com ) |
| salesforce_api_version | Salesforce API เวอร์ชันที่จะใช้ |
| salesforce_token_endpoint | OAuth 2.0 Token Endpoint ของอินสแตนซ์ Salesforce |
| salesforce_client_id | คีย์ผู้บริโภคของแอพที่เชื่อมต่อ (คัดลอกก่อนจากมุมมองแอป) |
| salesforce_client_secret | ความลับของผู้บริโภคของแอพที่เชื่อมต่อ (คัดลอกก่อนจาก App View) |
| salesforce_username | ชื่อผู้ใช้ของผู้ใช้การรวม |
| salesforce_password | รหัสผ่านของผู้ใช้การรวม + โทเค็นความปลอดภัย (เพียงเชื่อมต่อทั้งสอง) |
| salesforce_price_book_name | ไม่จำเป็น. หนังสือราคาที่จะใช้ ค่าเริ่มต้น: "หนังสือราคามาตรฐาน" |
ตัวอย่าง:
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n เคล็ดลับ: คุณสามารถใส่การกำหนดตัวแปรเหล่านี้ในไฟล์ที่เรียกว่า .env ใน content-scripts ไดเรกทอรีสำหรับการพัฒนาและการทดสอบ
ติดตั้งการพึ่งพา node.js
yarn install เรียกใช้สคริปต์เพื่ออัปเดตหมวดหมู่และผลิตภัณฑ์ JSON ใน content ไดเรกทอรี
yarn start เปิดเทอร์มินัลในไดเรกทอรี api
ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
| ชื่อ | คำอธิบาย |
|---|---|
| ท่าเรือ | พอร์ตเซิร์ฟเวอร์ท้องถิ่นเพื่อฟัง ค่าเริ่มต้น: 3000 |
| salesforce_instance_url | URL พื้นฐานของอินสแตนซ์ Salesforce (รูปแบบ https://xx##.salesforce.com ) |
| salesforce_api_version | Salesforce API เวอร์ชันที่จะใช้ |
| salesforce_token_endpoint | OAUTH 2.0 จุดสิ้นสุดของอินสแตนซ์ Salesforce (ไม่ใช่ชุมชน) |
| salesforce_jwks_endpoint | OpenId Connect JSON Web Key Set ปลายทางของชุมชน Salesforce Lightning |
| salesforce_issuer_url | URL ผู้ออกที่รวมอยู่ในโทเค็น ID ที่ออกโดย Salesforce |
| salesforce_client_id | คีย์ผู้บริโภคของแอพที่เชื่อมต่อ (คัดลอกก่อนจากมุมมองแอป) |
| salesforce_client_secret | ความลับของผู้บริโภคของแอพที่เชื่อมต่อ (คัดลอกก่อนจาก App View) |
| salesforce_username | ชื่อผู้ใช้ของผู้ใช้การรวม |
| salesforce_password | รหัสผ่านของผู้ใช้การรวม + โทเค็นความปลอดภัย (เพียงแค่เชื่อมต่อทั้งสอง) |
| salesforce_price_book_name | ไม่จำเป็น. หนังสือราคาที่จะใช้ ค่าเริ่มต้น: "หนังสือราคามาตรฐาน" |
| Security_cors_origin | URL พื้นฐานของเว็บแอปพลิเคชันอนุญาตให้เข้าถึงเซิร์ฟเวอร์ |
ตัวอย่าง:
PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000 เคล็ดลับ: คุณสามารถใส่การกำหนดตัวแปรเหล่านี้ในไฟล์ที่เรียกว่า .env ในไดเรกทอรี api สำหรับการพัฒนาและการทดสอบ
ติดตั้งการพึ่งพา node.js
yarn installเรียกใช้เซิร์ฟเวอร์
yarn startเปิดเทอร์มินัลในไดเรกทอรีรากของโครงการ
ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้
| ชื่อ | คำอธิบาย |
|---|---|
| api_url | URL พื้นฐานของเซิร์ฟเวอร์ API |
| logout_url | ไม่จำเป็น. URL ออกจากระบบของชุมชน Lightning Salesforce |
| oauth2_authorize_endpoint | OAUTH 2.0 จุดสิ้นสุดการอนุญาตของชุมชน Salesforce Lightning |
| oauth2_userinfo_endpoint | จุดสิ้นสุดข้อมูลผู้ใช้ของเซิร์ฟเวอร์ API |
| oauth2_client_id | คีย์ผู้บริโภคของแอพที่เชื่อมต่อ (คัดลอกก่อนจากมุมมองแอป) |
| oauth2_scopes | OAuth 2.0 ขอบเขตการร้องขอในระหว่างการตรวจสอบแล้ว |
ตัวอย่าง:
API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id เคล็ดลับ: คุณสามารถใส่การกำหนดตัวแปรเหล่านี้ในไฟล์ที่เรียกว่า .env ในไดเรกทอรีรากโครงการสำหรับการพัฒนาและการทดสอบ
หมายเหตุ: หากตัวแปร LOGOUT_URL ไม่ได้ให้ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้า LOGOUT ของเว็บไซต์ทันทีโดยไม่ต้องใช้ RoundTrip ภายนอก
ติดตั้งการพึ่งพา node.js
yarn installเปิดใช้งานเซิร์ฟเวอร์การพัฒนาที่มีการโหลดสด ...
yarn dev ... หรือสร้างไฟล์ HTML แบบคงที่ก่อนแล้วให้บริการไฟล์เหล่านี้จากไดเรกทอรี dist
yarn generate
yarn startเปิดเบราว์เซอร์ของคุณบน http: // localhost: 3000
ใบอนุญาต MIT
