แนะนำให้ใช้ Code With Me ของ JetBrains แทน

Code With Me: The Collaborative Programming Service by JetBrains
Start working on code together now. Code With Me makes collaborative development and code sharing online easy, efficient, and secure.
JetBrainsJetBrains

เคยมั้ย อยากจะแชร์ประสบการณ์การเขียนโค้ดให้กับคนอื่นๆ ไม่ว่าจะเป็นเพื่อนร่วมงาน เพื่อนร่วม Deadline หรือแม้แต่แบ่งปันความรู้ แต่ทีนี้จะแชร์การเขียนโค้ดยังไงให้มันเห็นขั้นตอนได้ชัดเจนล่ะ? ซึ่งส่วนใหญ่ก็คงเลือกที่จะใช้วิธีทั่วไปอย่างการแชร์หน้าจอผ่าน Team Viewer หรือบันทึกภาพวีดีโอจากหน้าจอตัวเองเลยแล้วส่งขึ้น YouTube เป็นต้น

แต่จะดีกว่ามั้ยนะ ถ้าเราสามารถแชร์โค้ดระหว่างกันได้แบบ Realtime เลย แก้ไขแยกคนละส่วนได้พร้อมๆกัน นั่นล่ะครับที่เรียกว่า Realtime Collaborative Editing ที่เจ้าของบล็อกจะมาเล่าให้ฟังกันในวันนี้

เกริ่นเรื่องก่อน

เรื่องมันมีอยู๋ว่าเจ้าของบล็อกได้ไปสอนที่แห่งหนึ่ง ซึ่งก็เหมือนปกติน่ะแหละ ที่จะต้องต่อคอมเข้ากับโปรเจคเตอร์เพื่อแสดงภาพหน้าจอคอมให้คนอื่นๆดู แล้วเจ้าของบล็อกก็สอนไป พิมพ์ไปตามปกติ

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

นั่นล่ะครับปัญหา

อาจจะดูเหมือนเป็นปัญหาเล็กๆน้อยๆ แต่เจ้าของบล็อกก็แอบคิดอยู่นะว่าจะมีวิธีไหนบ้างที่แก้ไขปัญหานี้ได้บ้าง โดยมีเงื่อนไข 2 อย่างหลักๆคือ

  1. ในระหว่างที่เจ้าของบล็อกพิมพ์โค้ดอยู่ ณ ตอนนั้น คนอื่นๆสามารถไปเปิดไฟล์อื่นๆได้ หรือเลื่อนไปดูโค้ดที่บรรทัดอื่นได้
  2. อยากใช้ IDE ตัวเดิม ถ้าเป็นสาย Web จะเขียนบน IDE ตัวไหนก็ได้ แต่สำหรับ Android จะให้ดีมันก็ต้องเขียนอยู่บน Android Studio สิ (คงไม่มีใครใช้ Sublime เขียน Android App เนอะ?)

ก็เลยทำให้เจ้าของบล็อกได้พบเจอกับ Floobits นั่นเอง

Floobits คืออะไร?

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

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

แต่แบบนี้มันก็ตอบโจทย์แค่ความต้องการแรกของเจ้าของบล็อก เพราะอยากจะใช้ Android Studio มากกว่า จะให้มาพิมพ์โค้ดแอนดรอยด์ในนี้ก็บ้าแล้ว เหนื่อยตายกันพอดีสิ ไหนจะเรื่อง Gradle ไหนจะเรื่องการ Compile + Run อีก

นั่นแหละคือสิ่งที่ Floobits สามารถทำได้ครับ เพราะมันมี Plugin สำหรับ IntelliJ IDEA

Android Studio based on IntelliJ IDEA

พอไปนั่งส่องดูก็พบว่ามันมี Plugin สำหรับ Emacs, Sublime Text, Neovim, Atom และ IntelliJ IDEA และก็คงจะมีรองรับ IDE ต่างๆเพิ่มเติมอีกในอนาคต

เอาล่ะ ครบเงื่อนไขที่เจ้าของบล็อกต้องการแล้ว ทีนี้มาดูกันต่อดีกว่าว่าใช้งานยังไง

สิ่งที่ต้องทำก่อนจะเริ่มต้นใช้งาน

ต้องบอกก่อนว่าเนื่องจากผมเป็น Android Developer ดังนั้นภาพขั้นตอนในนี้จะเป็นขั้นตอนสำหรับ Android Studio นะครับ ส่วนคนที่ใช้ IDE ตัวอื่นๆ ลองเข้าไปดูขั้นตอนของ IDE แต่ละตัวได้ที่นี่

Floobits: Plugin Help
Floobits

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

และการเข้าใช้งานด้วย Github ก็ไม่มีอะไรต้องห่วง เพราะตัว Floobits ขอเข้าถึงเฉพาะข้อมูลส่วนตัวที่เปิด Public อยู่แล้ว

เมื่อสมัครเสร็จแล้ว (ต้องยืนยันอีเมลล์ด้วยหรือป่าวไม่รู้ แต่สมัครโดยใช้ Github ไม่ต้องยืนยันอะไร) ก็ลองเข้าไปที่ หน้าดาวน์โหลด Plugin ของ IDE ที่ต้องการได้เลยครับ

Floobits: Plugin Help
Floobits

ซึ่งของ Android Studio หรือ IntelliJ IDEA ไปเปิดหน้าต่าง Plugin ในตัวโปรแกรม แล้วติดตั้งจาก Repository ได้เลย เพียงแค่พิมพ์ค้นหา Plugin ที่ชื่อว่า Floobits พอติดตั้งเสร็จแล้วก็ Restart Android Studio ก่อนจะใช้งาน

พอเปิด Android Studio ขึ้นมาใหม่อีกครั้งก็จะมีหน้าต่างของ Floobits ขึ้นมาให้ล็อกอิน ก็ให้กดเลือกที่ I already have an account

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

ในกรณีที่ไม่ได้ล็อกอินผ่านหน้าเว็ป ก็สามารถเข้าไปในเว็ปเผื่อเอาค่า JSON ของ User เจ้าของบล็อกไปใส่ในตัว Floobits บน Android Studio เองก็ได้

โดยเปิดไฟล์ ~/.floorc.json ผ่าน Android Studio ได้เลย โดยเลือกไปที่ Tools > Floobits > Open settings (~/.floorc.json)

พร้อมแล้ว เย้! มาเริ่มใช้งานกันเถอะ!

การใช้งานของ Floobits จะทำได้ 2 ทางคือผ่านเมนูข้างบนหรือผ่านหน้าต่าง Sidebar

เวลาต้องการเริ่มให้ Floobits ทำงานก็ให้เลือกไปที่ Tools > Floobits > Share Project Publicly หรือ Share Project Privately ซึ่งความแตกต่างระหว่าง Public กับ Private คือแบบ Private คนนอกจะค้นหาโปรเจคของเจ้าของบล็อกไม่เจอ (หน้าเว็ปมี Browse เพื่อหาว่าโปรเจคไหนของใครกำลัง Live อยู่) ส่วน Public ก็คือคนนอกสามารถค้นหาเจอได้นั่นเอง

แต่ไม่ต้องห่วงไปครับเพราะแบบ Public เนี่ย คนอื่นเข้ามาดูได้ แต่เจ้าของห้องสามารถกำหนดได้ว่าจะให้คนไหนเข้าถึงสิทธิ์อะไรได้บ้าง จึงไม่ต้องห่วงว่าจะมีใครก็ไม่รู้เข้ามาป่วนโปรเจคของเจ้าของบล็อก

ในกรณีที่กดจากหน้าต่างใน Sidebar ก็สามารถกดที่ปุ่มลูกศรสีเขียวได้เลย และจะมีหน้าต่างถามอีกทีว่าอยากจะให้เป็นแบบ Public หรือ Private

ตั้งชื่อให้เรียบร้อยซะ สามารถตั้งชื่อแตกต่างกับชื่อโปรเจคที่ทำอยู่ก็ได้นะ และสามารถเลือกเฉพาะไฟล์ที่ต้องการให้เห็นก้ได้นะ เผื่อว่ามีพวก API Key หรือ URL บางอย่างที่ไม่อยากเปิดเผยให้เห็น แต่ถ้าอยากแสดงให้เห็นทั้งหมดเลยก็เลือกที่ Update Entire Project ได้เลย

จากนั้นก็รอซักพัก ก็จะเห็น URL โผล่ขึ้นใน Message ของหน้าต่าง Floobits ซึ่งคนอื่นสามารถเข้าผ่านหน้าเว็ปได้ทันทีเช่นกัน และไฟล์ต่างๆก็จะถูกทยอยส่งขึ้นเซิฟเวอร์เพื่อให้สามารถแก้ไขได้พร้อมๆกัน

เพียงแค่เข้าหน้าเว็ปก็สามารถดูได้ทันทีเลยจ้า สะดวกสบายสุดๆ แต่ถ้าตั้ง Permission ให้แก้ไขไฟล์ในโปรเจคนี้ได้ ก็สามารถทำผ่านหน้าเว็ปได้เช่นกัน เพียงแค่ว่ามันจะไม่มีพวก Auto Suggestion สำหรับ Android ให้ ซึ่งจะลำบากพอสมควร

และสมมติว่าเจ้าของบล็อกจากจะเปิดของคนอื่นที่เค้ากำลังทำอยู่ ก็จะหนีมาเปิดใน Android Studio ดีกว่า

ถ้าต้องการเปิดโปรเจคของคนอื่น ให้เลือก Tools > Floobits > Join Workspace by URL แล้วก็ใส่ URL ที่ของคนนั้นๆลงไปได้เลย แล้วเลือก Path ที่ต้องการเก็บโปรเจคไว้ในเครื่องให้เรียบร้อย

จากนั้นก็ลุยให้เต็มที่เล้ยยยยยย

อื่นๆที่ควรรู้

การแก้ไขโค้ดใดๆก็ตามคนอื่นๆก็จะเห็นตำแหน่ง Cursor ของทุกๆคนได้ ดังนั้นคนอื่นๆจะ Drag หรือ Hightlight ข้อความไหนอยู่ก็สามารถเห็นได้จ้า

คำสั่งบางอย่างที่อยู่ใน Tools > Floobits สามารถกดจากหน้าต่าง Floobits ใน Sidebar แทนได้เลย โดยเรียงคำสั่งตามลำดับในภาพดังนี้

  • Run : เชื่อมต่อกับ Server เพื่อแก้ไขโค้ดแบบ Realtime ร่วมกับคนอื่นๆ
  • Stop : หยุดการเชื่อมต่อกับ Server ซึ่งยังคงสามารถแก้ไขโค้ดในไฟล์ต่างๆได้อยู่ แต่คนอื่นๆจะไม่เห็นการเปลี่ยนแปลง
  • Clear Highlights : เวลาที่คนอื่นเลื่อน Cursor ไปมา ตัว Floobits จะแสดงแถบ Highlight เป็นสีต่างๆแยกตามแต่ละคน แต่ Highlight จะไม่ได้หายไปทันทีเมื่อเลื่อนไปบรรทัดอื่น จะยังแสดงอยู่ซักพักหนึ่ง ซึ่งอาจจะรู้สึกว่ารกสายตาไปบ้าง ก็ให้กดปุ่มนี้เพื่อเคลียร์ทิ้งได้เลย
  • Summon everyone in workspace to current cursor location : เป็นการเรียกให้ทุกๆคนมาดูโค้ดในบรรทัดที่เลือกอยู่ ทุกๆคนที่อยู่ในโปรเจคตัวนี้จะถูกย้ายไปเปิดไฟล์ของคนที่กด Summon และเลื่อนไปบรรทัดนั้นๆทันที (เหมาะมากๆในเวลาที่ “เฮ้ยๆ มาดูโค้ดบรรทัดนี้หน่อยสิ” แล้วกดปุ่ม Summon เรียกทุกคนมาดู)
  • Follow All Changes in workspace : อันนี้เหมาะสำหรับคนที่ไม่ได้แก้ไขโค้ด หรือคนนั่งดูนั่นเอง เมื่อมีโค้ดตรงไหนเปลี่ยนแปลง ก็จะเลื่อนไปดูที่ตรงจุดนั้นๆให้ทันที
  • Stop following changes : ปิดการ Follow All Changes นั่นเอง
  • Open Workspace in Browser : เปิดโปรเจคตัวนี้บนหน้าเว็ปแทน
  • Open Workspace Settings in Browser : เปิดหน้าตั้งค่าสำหรับ Floobits ของโปรเจคตัวนี้ ซึ่งจะต้องเปิดเป็นหน้าเว็ป
  • Help : ก็เปิดหน้าเว็ปเพื่อดู Help น่ะแหละ

ในหน้าต่างบน Android Studio จะสามารถกดเลือกคำสั่งต่างๆได้เช่นกัน เช่นอยาก Follow Code Changes ของคนที่ต้องการ เป็นต้น และในกรณีที่เป็นเจ้าของโปรเจคหรือ Permission เป็น Administer จะสามารถเปลี่ยนแปลง Permission คนอื่นหรือเตะคนนั้นๆออกจากห้องได้ทันทีเลยเช่นกัน

หน้าต่างที่แสดงข้อความต่างๆของ Floobits ยังสามารถใช้พิมพ์พูดคุยกับคนอื่นๆได้เหมือนกันนะ รองรับภาษาไทยด้วย แต่รู้สึกว่าหน้าต่างนี้มันจะทำงานหนักไปหน่อยเลยรู้สึกอืดๆ แต่ไม่ส่งผลกับส่วนอื่นๆใน Android Studio นะเออ

ส่วนข้อความภาษาไทยที่แสดงสระหรือวรรณยุกต์ลอยไม่ค่อยสวย อันนั้นเป็นปัญหาที่ Android Studio นะ แต่ถ้าคุยบนหน้าเว็ปก็สามารถแสดงข้อความภาษาไทยได้ปกติดี

ความเจ๋งอีกอย่างที่ไม่ได้อยู่ในความต้องการตอนแรก คือมันสามารถเปิด Video Call ระหว่างคนอื่นๆด้วยกันได้ด้วยนะ ซึ่งเบื้องหลังคือการใช้ WebRTC ด้วยล่ะ ไม่ต้องมีเซิฟเวอร์เป็นตัวกลาง สามารถใช้งานได้ทันทีเมื่อใช้ Chrome หรือ Firefox โดยไม่ต้องลงปลั๊กอินเพิ่ม

วิธีเปิดกล้องก็เพียงแค่คลิกที่ภาพของเราที่อยู่ตรงขวามือเท่านั้นเองครับ อ๊ะๆ ฟีเจอร์นี้ใช้ได้เฉพาะบนหน้าเว็ปเท่านั้นนะครับ ไม่สามารถใช้งานใน Android Studio ได้ เพราะงั้นอาจจะเปิดหน้าเว็ปอีกตัวเพื่อคุยก็ได้ หรือไปใช้ Video Call เจ้าอื่นเลยก็ได้เช่นกัน

และนอกเหนือจากนั้นยังมีสิ่งที่เรียกว่า Mugshots อีกด้วย ซึ่งเป็นการเปิดกล้องเหมือนกันนั่นแหละ แต่จะไม่ใช่ Video Call เพราะ Mugshots คือการอัปเดทภาพจากกล้องของเครื่องเราทุกๆ 1 นาทีแทน และจะเป็นภาพขาวดำแทนนะ เค้าบอกว่าเพื่อไม่ให้ผู้ใช้สับสนระหว่าง Mugshots กับ Video Call หรือจะปิดกล้องแล้วใช้แต่ไมค์อย่างเดียวก็ได้นะ

และนอกจากคุยกันผ่าน WebRTC ได้แล้ว ยังสามารถเปิด Google Hangout จากหน้าเว็ปได้ทันทีเลยนะ หรือจะ Screen Sharing ก็ทำได้เช่นกัน (จะเวอร์เกินไปแล้ววววว) ซึ่งเบื้องหลังความสามารถของมันก็คือ Google Hangout นั่นแหละ

สำหรับ Screen Sharing จะต้องมีการติดตั้ง Plugin ของ Chrome เพิ่มด้วย

มันฟรีมั้ย? หรือต้องเสียตัง?

หลังจากดูความสามารถของมันกันแบบจุใจแล้ว ผู้ที่หลงเข้ามาอ่านหลายๆคนก็อาจจะสงสัยกันว่าตัวนี้มีค่าใช้จ่ายอะไรยังไง ก็ดูตามนี้ได้เลยจ้า

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

แอบเสียดายเล็กน้อยก็ตรงที่ค่าใช้จ่ายขั้นต่ำเริ่มที่ $15 เนี่ยแหละ จริงๆเจ้าของบล็อกอยากได้ Private แค่ 1 โปรเจค แล้วราคาซัก $5 มากกว่านะ เพราะ $15 นี่แพงกว่าค่า VPS ที่เจ้าของบล็อกใช้ในปัจจุบันเสียอีก ฮาๆ

สรุป

ต้องบอกเลยว่า Floobits เป็นเครื่องมือที่เจ๋งมากครับ ตอบโจทย์ความต้องการพื้นฐานของเจ้าของบล็อกได้เลย แถมยังทำอะไรได้อีกหลายๆอย่างเกินคาดด้วยล่ะ จึงเป็นสาเหตุที่ทำให้ Floolibs แตกต่างจากเจ้าอื่นๆครับ โดยปัญหาหลักๆของเจ้าอื่นๆคือ เจ้าของบล็อกใช้งานกับ Android Studio ไม่ได้นั่นแหละ ส่วนเรื่อง Video Call นี่เป็นฟีเจอร์รองจริงๆ เพราะสามารถใช้ Video Call ตัวอื่นทดแทนได้

สำหรับเรื่องความเร็วในการอัปเดทข้อมูลแบบ Realtime ของตัว Floobits จากที่ลองใช้งานดูก็ต้องบอกแหละว่ามันไม่ได้ Realtime ถึงระดับ Zero Lag หรอก เพราะมันก็ขึ้นอยู่กับอินเตอร์เน็ตของผู้ใช้ด้วยแหละ แต่ก็ยังอยู่ในเกณฑ์ที่รับได้ อินเตอร์เน็ตบ้านทั่วไปจะ Delay ไม่เกิน 5 วินาที (จากที่ลองกับเพื่อนนะ)

อาจจะติดปัญหานิดหน่อยตรงกรณีที่เผลอไปแก้โค้ดบรรทัดเดียวกัน เพราะมันไม่เหมือน Version Control ที่จะเก็บ Change History และด้วยความที่มันทำงานแบบ Realtime ถ้าแก้บรรทัดเดียวกันในช่วงเวลาเดียวกัน โค้ดก็จะถูกเขียนทับจากเครื่องที่อัปเดทช้าสุดโดยทันที

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

ของดีแบบนี้ต้องลองครับ แล้วจะรู้ว่ามันดีจริงๆนะเออ

แหล่งอ้างอิง