ลองเล่น enduro.js

เนื่องจากเปิด facebook เจอพี่ที่รู้จัก share มา อ่านดูน่าสนใจดี เลยลองเล่นสักหน่อย


เริ่มจากสร้างโฟลเดอร์ที่จะใช้ทดสอบ และเปิด command line ขึ้นมา

ติดตั้ง enduro โดยพิมพ์ npm install enduro -g แล้วรอสักพัก

พอเสร็จแล้วก็ทำการสร้างโปรเจ็คใหม่ด้วยคำสั่ง enduro create helloworld แล้วรอสักพัก ก็จะได้โฟลเดอร์ helloworld มา โดยมีไฟล์ในโฟลเดอร์ดังนี้

ภายในโฟลเดอร์ helloworld

ลองทดสอบ enduro ใน development mode ด้วยคำสั่ง enduro dev รอสักพัก Browser จะเปิดขึ้นมาอัตโนมัติไปที่ URL : http://localhost:3000 แล้วพบข้อความ Cannot GET /

ลองกลับไปดูที่ command line จะเห็นข้อความ ดังนี้

ตรงบนๆ หน่อย จะเห็นข้อความว่า Admin ui available at: localhost:5000/admin งั้นเราลองเข้าไปดู จะพบหน้าตา ดังนี้

หน้า Admin

เห็นในกรอบสีดำด้านล่างบอกให้เพิ่ม admin user เราก็ลองเพิ่มดูตามที่เค้าบอก โดยกลับไปที่ command line แล้วเพิ่ม admin user

เพิ่ม admin user ในระบบ

แล้วลอง run ดูอีกที ด้วยคำสั่ง enduro dev จะพบ ดังนี้

เราก็อยากรู้ว่าหน้านี้มันมายังไง ก็ลองไปเปิดโค๊ดดูซักหน่อย

โดยในโฟลเดอร์ pages จะมีไฟล์ index.hbs มีโค๊ด ดังนี้

pages/index.hbs

โดยตัว {{greeting}} และ {{superlative}} จะใช้ javascript object จากไฟล์ index.js ที่อยู่ในโฟลเดอร์ cms มีโค๊ด ดังนี้

cms/index.js

และ {{>end}} เป็นการเรียกใช้ component จากไฟล์ end.hbs ที่อยู่ในโฟลเดอร์ components มีโค๊ด ดังนี้

components/end.hbs

กลับไปลองเข้าหน้า admin อีกครั้ง ใส่ username และ password กด Submit

หน้า Login สำหรับ admin

เย้ เข้าระบบได้แล้ว ดังนี้

หน้าแรก admin

ลองเปลี่ยนคำใน Greeting และ Superlative เล่นๆ ดู แล้วกดปุ่ม Publish ที่มุมขวา หน้าแสดงคำก็จะเปลี่ยนไป ดังนี้

Change word of Greeting and Superlative

หรือลองกดปุ่ม Temp เพื่อดูตัวอย่างก่อนก็ได้

จบ…นอนได้

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.