มาสร้าง web application โดยไม่เขียน code กันเถอะ !

สวัสดีครับทุกคน วันนี้ผมอยากจะแชร์ประสบการณ์การเทรนนิ่งของผม ซึ่งเป็นการเทรนที่ค่อนข้างจะกินเวลาเยอะมากเลยทีเดียว

ก่อนอื่นเลยอาจจะต้องท้าวความทั้งกับคนที่เป็นทั้ง developer หรือ non developer ก่อนเนาะ เพราะว่าจะได้ทำความเข้าใจให้ตรงกัน

การที่เราจะสร้าง web application “แบบ basic” หลักๆ เลยนั้นจะประกอบด้วย 2 ส่วนใหญ่ๆ ก็คือ
1. หน้าบ้าน
2. หลังบ้าน

หน้าบ้านก็คือหน้าเว็ปที่เราๆ คุณๆ ท่านๆ คลิกแล้วมันสามารถทำ something ให้เราได้ แสดงผลเรื่องต่างๆออกมาให้เราดู ให้เราเห็น
ส่วนหลังบ้านนั้นก็คือ เมื่อเราคลิกๆไปแล้วนั้น มันจะเกิด process การทำงานต่างๆที่คนสั่งคลิกนั้นไม่ได้เห็นเลย อาจจะวิ่งไปทำงานหลายๆอย่างมากกว่าจะตอบกลับมาและแสดงผลให้เราเห็น

เกริ่นมาซะยาว เราจะเริ่มเข้าสู่สาระกันซะที

แล้วปัญหามันคืออะไร ?
ก็ง่ายๆครับ ในเมื่อเขียนโค้ดมันก็ต้องใช้เวลา ใช้คนเยอะ(ยังไม่พูดถึงแก้bugหรือdeployน้ะ)จะดีกว่าไหมถ้าเราไม่ต้องเขียนโค้ดแล้วมันก็สามารถทำ web ได้แบบไวๆตามความต้องการได้ !
หรือ
ถ้าเขียนโค้ดไม่เป็นหล่ะ แต่ก็สามารถทำ web ได้ ???? น่าสนใจป๊ะ

นี่แหละคือหัวข้อที่เราจะพูดกันในวันนี้
No-code concept เกิดขึ้นมาตั้งแต่เมื่อใดก็ไม่รู้และก็คงจะแข่งขันกันอยู่หลายเจ้า เพราะคงคิดกันว่าในอนาคตอาจจะไม่จำเป็นต้องใช้คนที่มีความสามารถทาง coding แต่ทำงานด้านนี้ได้(programmer อาจจะโดน disrupt เป็นรายต่อไป 55555+ปัจจุบันอะไรๆก็เกิดขึ้นได้หมด )อีกทั้งยังแก้เรื่อง programmer ขาดตลาดอีกตังหาก(พูดไปนั่น)

อย่างที่บอกข้างต้นคือก็คงจะมีหลายเจ้าให้ได้เลือกใช้กัน แต่วันนี้ผมจะมานำเสนอที่สิ่งที่ผมได้ประสบพบเจอมานั่นก็คือ wem.io (หากอยากจะลองก็googleเข้าไปสมัครได้เลย)

หลักการของมันเลยก็คือ จะมี
1. data model ก็คือ database ที่เค้าออกแบบมาให้ใช้งานกับตัว flowchart ได้อย่างง่าย หากใครได้เข้าไปดู demo ก็คงจะเห็นได้ว่าคลิก list (ในที่นี้คือ database ปกตินะแหละ) แล้วดับเบิ้ลข้อมูลใน list มันก็จะนำข้อมูลของ row นั้นๆมาโชว์ให้ท่านเห็นเลยโดยที่ไม่ต้อง query ให้มันปวดหัว(แค่คลิกๆๆๆๆๆ จริงๆ) แก้ไข, เพิ่ม, ลบ จบได้โดยไว

2. flowchart คือการเขียนการไหลว่าจะทำอะไรก่อนหรือหลัง แล้วจะแสดงอะไรบ้าง พอแสดงหน้านี้แล้วทำการคลิกที่ปุ่มนี้จะให้ไปทำอะไรต่อไป ใส่ logic flow การทำงานในนี้ได้เลย เพราะใน flowchart ก็จะประกอบด้วยหลายๆเครื่องมือที่ wem คงจะคิดว่าเพียงพอ(มั้ง) เช่น
- interactive node คือหน้าที่เอาไว้แสดงผม หรือเอาไว้โต้ตอบการทำการที่จะทำต่าง หรือใส่ปุ่มใส่ข้อมูลต่างๆที่ต้องการ
- decision node คือหากตั้งเงื่อนไขแล้วถ้าเป็นจริง จะทำอะไร ไม่จริงจะทำอะไร
assignment node คือการค่าที่ต้องการว่าควรจะเป็นค่าอะไร
- list node คือเอาไว้เรียก data list (เปรียบเสมือนdatabase)เพื่อจะกระทำการอะไรกับข้อมูล จะทำงานกับปุ่ม save หรือ discard ตามlogicที่ต้องการ
- loop node คือ ลูปนั้นแหละ เพราะ ไหนๆก็ไหนๆทำงานกับ row อยู่แล้ว แล้วถ้าอยากทำทุก row อะ ก็ใช้loopนี้แหละวนเอา

แบบคร่าวๆก็แค่นี้แหละ หากอ่านแล้วงง (ต้อง งง แน่นแน่) ก็ดู demo ไปนะ 5555

สิ่งที่ผมสงสัย(ผู้อ่านก็น่าจะสงสัยเหมือนกัน มั้ง)
ถาม: เอ๊ะ แบบนี้มันจะทำ logic ที่ซ้ำซ้อนได้อะป๊าว เว็ปข้าพเจ้าไม่ได้กากๆนะ logic แบบมโหฬาร ?
ตอบ: อันนั้นก็ขึ้นอยู่กับการเข้าใจที่จะหยิบเครื่องมือมาใช้ (ซึ่งคนเขียนมันก็ยังอ่อนหัดอยู่ 5555)

ถาม:ถ้าทำเสร็จแล้ว อยากจะ publish ไปเลยหล่ะ ?
ตอบ: มันก็เลยมีconfigนิดนึงให้เซ็ตแล้วก็ publish project บนตัว wem ได้เลย แต่ของฟรีมันไม่มีในโลกนะ ท่านก็จะโดนเก็บตัง 55555

ถาม: ทำได้แค่นี้หรออ ??
ตอบ: นี่เป็นเพียงคร่าวๆ เพราะจริงๆในตัว wem มันก็เครื่องมือค่อนข้างเยอะ มีทั้งขั้น advance เช่นทำ web service, api, ทำรีพอต บลาๆ (document มันมีให้ท่านให้ท่านได้ศึกษาด้วย)

**** เอาจริงๆ แค่เอาไปทำ prototype คลิกนี้ไปหน้านี้มี input box แบบนี้ มันก็โอเครนะ ถ้ามันทำได้โครตไว ****

เขียนเยอะก็ ขก อ่านกัน(เพราะผู้เขียนก็เคยรู้สึก 555)
สรุปๆๆๆๆๆๆๆ
ก็ ผมเพียงแค่อยากจะมาแชร์ประสบการณ์ ไม่ได้มาขายของนะ เพราะตอนแรกผมเองก็คิดอยู่ในใจว่ามันคงจะลำบากกว่านี้(ผมไม่ชอบพวกลากๆ คลิกๆ อยู่แล้ว) แต่ก็ได้เปิดโลกในอีกมุมนึงว่าทุกวันนี้มันไปถึงไหนแล้ว อะไรๆก็ต้อง ง่าย ไว สะดวกสบาย

WEM and me

ปล. หากผิดพลาดประการใด ขออภัยด้วยนะครับ
ปล2. เป็นblogแรกของผู้เขียนครับ 5555555