Front End Web With React+AEM For Beginner Part1
สวัสดีครับชาว Dev ทุกท่าน ในบทความนี้เราจะมามาพูดคุยกันเกี่ยวกับการใช้ React ร่วมกับ AEM ว่ามีวิธีการใช้งานอย่างไรบ้าง ในการพัฒนาเว็บไซต์สำหรับองค์กรหรือธุรกิจต่างๆ โดยนำเทคโนโลยีต่างๆ มาใช้งานร่วมกัน เพื่อให้ได้ผลลัพธ์ที่ดียิ่งขึ้น ซึ่ง React และ AEM เป็นเครื่องมือที่ใช้กันอย่างแพร่หลายในการพัฒนาเว็บไซต์
React เป็น library ของ JavaScript ที่ใช้สำหรับสร้าง User Interface โดยมีความยืดหยุ่นและสามารถเขียนโค้ดได้อย่างสะดวก ในขณะที่ AEM นั้นเป็น platform ที่ใช้สำหรับจัดการเนื้อหาบนเว็บไซต์ โดยใช้โครงสร้างแบบ CMS (Content Management System) ที่ช่วยให้ผู้ดูแลเว็บไซต์สามารถเพิ่ม ลบ แก้ไขเนื้อหาบนเว็บไซต์ได้อย่างสะดวกและรวดเร็ว
ซึ่งการนำ React มาใช้งานร่วมกับ AEM นั้นช่วยเพิ่มความยืดหยุ่นและเพิ่มประสิทธิภาพในการพัฒนาเว็บไซต์ โดยที่ผู้พัฒนาสามารถใช้ React เพื่อสร้าง Component ต่างๆ และนำมาใช้งานบนหน้าเว็บไซต์ AEM โดยใช้ SPA Editor ของ AEM ในการเปิดเว็บไซต์แบบ Single Page อีกทั้ง AEM ยังช่วยวิเคราะห์ด้านการตลาดและจัดการด้านแคมเปญการตลาดไว้ให้อีก สามารถดูฟีเจอร์ เพิ่มเติมของ AEM ได้ที่นี่ เลยครับ
ในหัวข้อถัดไป เราไปดูในการติดตั้งและเตรียม envioment ให้พร้อมการใช้งานกันครับ
Local Development Environment
Required software Java JDK 11 for AEM 6.5+. Download
- Apache Maven (3.3.9 or newer) Download หรือจะให้ homebrew ก็ Run “brew install maven”
- Node.js. Download
- npm. Download
- AEM as a Cloud Service SDK. Click Here
ให้ดาวโหลด ที่ขึ้นต้นด้วย AEM SDK for AEM vxxxxx Download เก็บไว้ก่อนครับ เดี๋ยวเรามาอธิบายเพิ่มให้การติดตั้ง
Setup local AEM instance
การที่ setup AEM ครับ จะแบ่งอยู่ 2 ประเภท
- Author — AEM Author สำหรับไว้การจัดการบทเนื้อหาหรือ feature ต่างๆที่ develop ไว้
- Publish — AEM Publish ซึ่งผู้ใช้งานทั่วจะเห็น เนื้อหาที่เผยแพร่ แล้วยังเป็นส่วนทั้งสำหรับ connect กับ developer ในการใช้งาน
Setup local AEM Author
หลังจากที่เรา AEM as a Cloud Service SDK แล้วนะครับ ให้ทำการ unzip file
- สร้าง folder ~/aem-sdk/author
- Copy file aem-sdk-quickstart จากที่ เรา unzip file มาก่อนหน้านั้น นำมาวาง ใน folder “aem-sdk/author” แล้วทำการเปลี่ยนชื่อเป็น “aem-author-p4502.jar”
3. ทำการ Start local AEM Author Service โดยใช้ Command line ในการ executing
java -jar aem-author-p4502.jar
4.เมื่อ Run เสร็จแล้ว เราสามารถ เข้า AEM Author Service ได้ที่ http://localhost:4502 ใน Web browser
โดย username จะตั้ง default เป็น admin
ส่วน password ถ้าตอนติดตั้งจากขั้นต้องด้านบน ถ้าไม่ได้เปลี่ยนอะไรจะสามารถใช้ default ที่ระบบให้มาคือ admin
Setup local AEM Publish
- สร้าง folder ~/aem-sdk/publish
- Copy file aem-sdk-quickstart จากที่ เรา unzip file มาก่อนหน้านั้น นำมาวาง ใน folder “aem-sdk/publish” แล้วทำการเปลี่ยนชื่อเป็น aem-publish-p4503.jar
3. ทำการ Start local AEM Author Service โดยใช้ Command line ในการ executing
java -jar aem-publish-p4503.jar
4.เมื่อ Run เสร็จแล้ว เราสามารถ เข้า AEM Publish Service ได้ที่ http://localhost:4503 ใน Web browser
คราวนี้เราก็ได้ AEM ที่พร้อมใช้งานแล้วครับ เดี๋ยวขั้นตอนถัดไปจะเป็นสร้าง Project ครับ
Create project
ในขั้นตอนนี้ จะเป็นการสร้าง projectใหม่ ซึ่งจะถูกสร้างโดยในพื้นฐานของ AEM Project Archetype ซึ่ง AEM จะถูก create สำหรับ React โดยเฉพาะ
- สร้าง folder สำหรับเก็บ Project ครับ ซึ่งในที่นี้ ผมสร้างเป็น “react-aem”
- เปิด terminal แล้วRun “cd react-aem” เพื่อทำการติดตั้ง project
- ใช้คำสั่ง Meven
mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
-D archetypeGroupId=com.adobe.aem \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=35 \
-D appTitle="React AEM" \
-D appId="com-aem-react" \
-D artifactId="com-aem-react-guide" \
-D groupId="com.lab.aem.com.aem.react.guide" \
-D frontendModule="react" \
-D aemVersion="cloud"พวก appTitle, appId, artifactId, groupId ค่าพวกนี้สามารถเปลี่ยนได้ตามความต้องการ นะครับ ซึ่งเราดูค่าต่างๆได้จากที่นี่
ผลลัพธ์หลังจาก run เสร็จ
4. โครงสร้างของ projoect
ซึ่งในบทความนี้ เราจะเน้น ui.frontend เป็นหลัก ในการพัฒนาเวป
ถ้าอยากดูรายละเอียดเพิ่มเติม สามารถดูเอกสารที่นี่
ถัดมาจะทำการ build ไปที่ AEM
5. จาก comand ที่แล้วครับ จะทำการ cd com-aem-react-guide เข้าไปที่ root project
6. Run command
mvn clean install -PautoInstallSinglePackage
แล้วก็ รอ รอ รอ
ในที่สุด
แต่ถึงขั้นตอนนี้ก็ยังไม่เสร็จนะครับ ยังมีขั้นตอนไป check AEM instance ก่อนว่า Package ต่างๆใน AEM ยังเปิดอยู่หรือไม่?
7.ให้เรา เข้า http://localhost:4502/crx/packmgr/index.jsp. เพื่อ check Package Manager
เราค้นหา โดยใช้คำขึ้นต้น com-aem-react-guide ว่าเปิดครบหรือไม่ ซึ่ง คำขึ้นต้นพวกนี้จะได้มาจากการตั้ง artifactId จากหัวข้อข้างบน
ถ้าเปิดหมดแล้วก็เสร็จซักทีในการ setup project ครับ แต่ก่อนจะในส่วนการ intragtae บน React จะขอแนะนำการใช้ AEM ในส่วน Author Contentเบื้องต้นนะครับ เพราะในส่วนนี้ก็เป็นส่วนสำคัญในการ map content ครับ
Author Content
เราจะมาลองแก้ไข content ที่ระบบตั้งค่าให้แต่ครั้งแรกซึ่ง
- เริ่มต้นจากการเข้า http://localhost:4502/sites.html/content.
- คลิก us>en>Homepage แล้วกด checkbox เพื่อแสดงเมนู หลังจากนั้น กดปุ่ม Edit
3. จะเข้าไปสู่หน้า edit content ซึ่งเราลองเพิ่มเติม ใน component นี้ดูครับ
4. ต่อมาครับ เราจะลองมาดูว่า สิ่งที่เราแก้ไขใน component นั้น แล้วถ้า ถูก publish จะเป็นยังไง เราสามารถเลือก view as Published ซึ่งจะทำการเปิดหน้าใหม่ขึ้นมา http://localhost:4502/content/com-aem-react/us/en/home.html?wcmmode=disabled
เราจะเห็น Preview ขึ้นมาครับ
5.ทำการคลิก เปิด Inspector กดที่ Tab Network แล้ว refresh ที่หน้า preview อีกทีครับ คราวนี้เราจะเห็นไฟล์ en.model.json หรือจะลอง duble click ก็จะเปิด json file ก้อนนั้นขึ้นมา http://localhost:4502/content/com-aem-react/us/en.model.json
ซึ่ง JSON ส่วนนี้จะเป็นการแสดงผลเนื้อหาต่างๆตามที่เราจัดไว้ แล้วก็เป็นส่วนสำคัญในการ map content จาก AEM เข้าไปใน React Compoent ซึ่งเราจะพูดถึงบทต่อในขั้นตอน integrate บน React
