เริ่มต้นการผจญภัยบน Near BOS : พัฒนา Decentralized Web ที่ง่ายดายไม่ยุ่งยากสำหรับ Dev web2 เราจะพาคุณเริ่มก้าวไปทีละก้าว
Blockchain Operating System (BOS) ทำให้การสร้าง, แชร์ และใช้ web3 เป็นเรื่องง่ายมากขึ้น เหมือนกับ toolbox ที่คุณหยิบชิ้นส่วนในกล่อง (component) มาประกอบเป็น site ของคุณได้อย่างรวดเร็ว โดย BOS เป็นทั้งพื้นที่ให้พัฒนาและสังคมออนไลน์ ที่ช่วยให้ User เข้าถึง component การแบ่ง (forking) component สู่ User คนอื่นๆ ได้อย่างไม่ติดขัด และ deploy บน near network ได้อย่างง่ายดาย
ในทางตรงกันข้ามกับ application ของ Web2 ที่โดยปกติ ในการสร้างพัฒนาต้องดันเข้า GitHub แล้วค่อย deploy ซึ่ง BOS มอบทางเลือกใหม่ที่สะดวกรวดเร็ว โดยการที่ให้ User สร้าง component ได้ง่ายๆ deploy ขึ้น on-chain ภายในไม่กี่นาที และดูผลลัพธ์ผ่าน Gateway (near.social หรือ near.org.) ได้ทันที ทางใหม่นี้ลดความยุ่งยากในการที่จะต้องดันเข้า GitHub และช่วยเพิ่มความปลอดภัยที่ component code ถูกเก็บ on-chain นอกจากนี้ การ deploy บน BOS ยังรวดเร็วกว่าวิธีเดิมๆ ทำให้ การ deploy front-ends ไปยัง smart contracts บน mainnet เสร็จสิ้นในไม่กี่นาที
3 คำ ที่ควรทราบ (3 เสาหลักแห่ง BOS)
คำที่อาจพบเจอได้บ่อยในบทความนี้ ที่คุณควรทราบ ซึ่งมีความสำคัญต่อการทำความเข้าใจในการทำงานกับ BOS เพราะเป็นองค์ประกอบพื้นฐานของ system:
Components : ส่วนประกอบ frontends ที่ช่วยแก้ปัญหาเฉพาะได้ คล้ายกับ React ซึ่งถ้าคุณคุ้นเคยกับ React อยากบอกว่าการพัฒนากับ BOS ค่อนข้างตรงไปตรงมากว่า
Blockchain : ที่เคยเกริ่นถึงการเก็บ code ไว้ on-chain ให้นึกภาพว่าสิ่งนี้ทำหน้าที่คล้าย GitHub ที่เก็บ code บน web2 ซึ่ง สิ่งนี้จะเก็บ component's code เหมือนเก็บ assets และ data ไว้บน Near chain
Gateways : ให้นึกภาพว่าสิ่งนี้คือ hosting platforms คล้ายกับ Vercel ซึ่งเป็นเหมือน platforms ที่รวม decentralized frontends (components) จากหลายๆ ที่มาเผยแพร่ให้ User เช่น near.org, near.social
มาเริ่มกันเถอะ
ขอบอกก่อนเริ่มว่า คุณกำลังพัฒนาบน NEAR การปรับแก้ไขทั้งหมดจะถูก deploy on-chain ดังนั้นคุณต้องมี Account NEAR ก่อน และฝาก $NEAR เข้าไปไว้เป็นค่าดำเนินการ (gas)
ส่วนตัวขอแนะนำให้สร้าง Account NEAR กับ Meteor Wallet โดยติดตั้ง extension บน browser เพื่อการดำเนินการที่รวดเร็วมากขึ้น ส่วนตัวรู้สึกเร็วกว่าการใช้ App mynear ที่ทุกครั้งเวลาต้องดำเนินการกับ Blockchain จะประหยัดเวลาในการ sign a contract มากขึ้น (ไม่ต้องห่วงเรื่อง gas เพราะใช้ไม่เยอะ //ผู้แปล: สามารถของ gas ฟรีได้ที่ shard.dog/killswitch)
ขั้นต่อไป…
เมื่อมี Account NEAR +$NEAR ในกระเป๋าแล้ว ก็เริ่มต้นกันเลย แต่ขอย้ำอีกครั้ง นี่เป็นประสบการณ์ส่วนตัวที่คิดว่าเป็นทางที่เร็วที่สุด และไม่ยากในการสร้าง และ deploy บน BOS
ไปที่ jutsu.ai และ log in โดยใช้ Account NEAR
เหมือนที่เคยบอกไว้ก่อนหน้า ถ้าคุณคุ้นเคยกับ React คุณอาจเข้าใจ concept ส่วนใหญ่ แต่ทุกอย่างใน React ไม่ได้ถูกผสานเข้าด้วยกันอย่างสมบูรณ์ ตอนนี้มีแค่คำสั่ง /useState/ /useEffect/ /useCallback/ /useMemo/ ที่ผสานเข้ากับ BOS เดี๋ยวจะทำให้ดูนะ
ในรูปตัวอย่างข้างบนนี้ ได้สร้าง toggle button component อย่างง่ายโดยใช้ /useState/ และมี 2-3 อย่างควรจดไว้ :
ไม่จำเป็นต้อง import statements ทุกอย่างเกิดขึ้นเบื้องหลัง ที่ต้องทำก็แค่เรียกใช้คำสั่ง
JSX code อะไรก็ตามที่ส่งเข้าไป return statement จะถูกแสดงผล render ในหน้าตัวอย่าง preview screen
ปุ่ม deploy button มุมบนขวา ใช้เพื่อ deploy on-chain และคุณสามารถดู application ของคุณใน gateway (Link ตัวอย่างของรูปด้านบน อันนี้ใช้เวลาน้อยกว่า 10 นาทีในการสร้างและ deploy)
คุณยังเข้าถึงพื้นที่ควบคุมปรับแต่งของคุณ เพื่อใช้แก้ debug ได้ด้วย
BOS 101 - BOS VM แตกต่างยังไง ?
BOS VM มาพร้อมกับบาง function และ component ที่ตั้งค่าไว้แล้ว และมีบางส่วนที่กำลังดำเนินการ สิ่งที่ต้องคำนึงคือ function ไม่ได้เหมือนกับ React จริงๆ ดังนั้นการทำงานต่างๆ อาจไม่สอดคล้องกันนัก
ต่างกับ React ตรงที่ คุณไม่ต้อง นำเข้า hooks ด้วย statements คุณแค่ใช้เมื่อต้องการได้เลย
ไม่มีเจ้าสิ่ง /App.js/ เมื่อคุณเรียกคำสั่ง function และ export เพื่อให้ code ทำงาน นี่ไม่ใช่การทำงานกับ components (BOS) เพียงแค่คุณ return JSX code แค่นั้นเอง ง่ายๆเลย
คุณไม่สามารถ download npm package และ import แต่คุณต้องเข้าถึง built-in packages ซัก 2-3 อัน เพื่อทำงาน
/fetch/ : function fetch บน BOS ทำงานเหมือน hook คือแทนที่จะ returning a promise แต่มัน returns a value
const res = fetch("https://rpc.mainnet.near.org/status");
return res.body;
/asyncFetch/ : คือคำสั่ง returns a promise ในกรณีที่คุณต้องการเรียก API แบบ asynchronous
function reportUptime() {
asyncFetch("https://rpc.mainnet.near.org/status").then((res) => {
const uptime = res.body.uptime_sec;
Near.call("uptime.near", "reportUptime", { uptime });
});
}
return <button onClick={reportUptime}>Report Uptime</button>;
Caching: การดำเนินการ VM เพื่อ caching layer ที่ network ส่วนใหญ่ request มา ในกรณีที่คุณอยากจัดการด้วยตัวเอง (manual) คุณต้องเข้าถึง /useCache/
const status = useCache(
() =>
asyncFetch("https://rpc.mainnet.near.org/status").then((res) => res.body),
"mainnetRpcStatus",
{ subscribe: true }
);
return status;
list ของ Primitive APIs ที่ใช้ได้บน BOS - ที่นี่
BOS 102 - Widgets และ Props
Widgets เป็น component ที่ทำไว้แล้ว (Component ที่สร้างและ deploy แล้ว) ที่ช่วยให้คุณสามารถรวม component เข้ากับ code ของคุณได้ นึกภาพเหมือนการนำ component เข้ามาใน code ของคุณ สิ่งนี้เป็นการตัดหั่นให้ code ที่ยาวและซับซ้อนกลายเป็นสะอาดเรียบง่ายขึ้น และอยู่เป็น component แยกต่างหาก
นี่คือ tips เกี่ยวกับ widgets:
Widget มี /src/ เป็น property ที่เมื่อคุณพยายาม import component ซักอัน แต่ถ้า component นั้นผิดพลาดหรือยังไม่ได้ deploy ก็จะขึ้น error
Props: เหมือน React Component คุณส่งต่อ props ไป widgets ได้ แต่ใน VM คุณต้องเรียกคำสั่ง /props/ และส่ง props ไปใน object
ในรูปตัวอย่างด้านบน มีการใช้คำสั่ง /useState/ สามารถเห็นได้ว่า เป็นการ import component เข้าไปใน form ของ widget และ component นั้นก็ถูก render ใน component ของ widget นี้ และยังสามารถสร้าง+เขียนเติม code ได้ต่อตามที่ต้องการ นี่เป็นการช่วยทำให้ components ก้อนใหญ่กลายเป็นก้อนเล็ก และช่วยให้หน้า code สะอาดและอ่านง่ายมากขึ้นด้วย
Useful built-in Components
Image Uploader: ในการจัดการ upload รูปภาพบน BOS รูปภาพทั้งหมดจะถูก upload โดยใช้ built-in component ในคำสั่ง /IpfsImageUpload/ รูปภาพจะถูกอัพเข้าไปใน near social IPFS แล้วคุณถึงจะได้ hash in an object กลับมา โดยคุณแยก hash ได้จากส่วน /cid/
const [state, setState] = useState(null)
return (
<div className='container row'>
<div>
Image upload: <br />
<IpfsImageUpload image={state} />
</div>
<div className='mt-2'>
{state.img.cid && (
<img
src={`https://ipfs.near.social/ipfs/${state.cid}`}
alt='uploaded'
/>
)}
</div>
</div>
);
Web3 connect: BOS เป็น solution ที่ปรับให้ Dev สามารถทำงานร่วมใน blockchain ที่แตกต่างกันได้ (EVM chains อย่าง Ethereum, polygon, celo)
return (
<div>
<Web3Connect />
</div>
);
// The Web3Connect Component gives you access to Metamask, Wallet Connect and Ledger
// In order to connect to different chains
BOS 103 - Styling บน BOS
ปรับแต่งจัดรูปแบบบน BOS ค่อนข้างต่างจาก React เนื่องจากทำผ่าน built-in Styled Component หรือ Bootstrap ดังนั้นหากคุณคุ้นเคยกับ built-in Styled Component หรือ Bootstrap คุณก็สามารถปรับแต่งหน้าตา components ได้ไม่ยาก แต่ถ้าไม่ชินก็สามารถอ่าน docs เพื่อทำความเข้าใจได้เหมือนกัน
ดังรูปด้านบน ที่ใช้ Styled-Component เพื่อปรับแต่ง Root container และใช้ Bootstrap เพื่อแต่ง buttons คุณสามารถใช้ทั้งสองอันพร้อมกัน หรืออันใดอันหนึ่งก็ได้ ตามสะดวกเลย
วิธี Fork Widget บน BOS
แน่นอนว่า BOS ก็ทำการ Fork ได้ง่ายๆ ไม่ว่าจะเพื่อพัฒนาต่อ หรือ run ในเครื่อง และเรียนรู้เพิ่ม ในรู้ตัวอย่างด้านล่างที่มีการใช้งาน Near social gateway อยู่ คุณสามารถพบ fork button ใน menu bar ด้านบนขวา
สรุป
เริ่มต้นใช้ Near BOS ในฐานะ Dev web2 ถือเป็นการเปิดโลกให้ในการสร้าง website เพราะ BOS ทำให้ทุกอย่างง่ายขึ้นด้วยชุดเครื่องมือ toolkit ที่ให้คุณหยิบชิ้นส่วนประกอบร่าง และสร้าง site บน the Near network ได้อย่างรวดเร็ว ซึ่งแตกต่างจากวิถีการสร้าง Web ในแบบเดิมๆ
นึกภาพให้ BOS เป็นเหมือนกล่องใบหนึ่ง ที่มี 3 ส่วนสำคัญ : Components, Blockchain, and Gateways สิ่งเหล่านี้ทำงานร่วมกันเพื่อให้ทุกอย่างปลอดภัยและเข้าถึงได้ ในแนวทางที่ง่าย รัดกุม และมีประสิทธิภาพ สำหรับ Dev web2 ที่จะสำรวจโลกแห่ง Web3 ของ decentralized application เริ่มต้นเดินทางไปกับ BOS และดูว่า BOS จะพาคุณไปที่ไหน !
ทำความเข้าใจ BOS เพิ่มเติม ไปอ่านได้ที่ docs
ที่มา
https://slimdev.hashnode.dev/getting-started-on-near-bos-as-a-web2-developer#heading-getting-started
0 💬 🗨️