Error Tracking ด้วย Sentry.io

เกริน เกริ่น เกริ้น …

ว่าด้วยเรื่องของ Error tracking แล้วเนี่ยก็มี Tool มากมาย หรือในบางภาษา หรือเฟรมเวิร์คที่ใช่ ก็อาจจะมี Library ให้ใช้อยู่แล้วก็ได้ ซึ่งบางตัวที่ใช้เมื่อมี Error มาก็จะส่งไปที่อีเมล อีเมล แล้วก็อีเมล ​แล้วถ้ามีหลายโปรเจคล่ะ ก็ส่งไปที่อีเมล อีเมล อีเมลๆ โอ้นี่ยังไม่รวม อีเมลอื่นๆ อีกนะ ถ้าไม่จัดกลุ่มของอีเมลนี่หากันไม่เจอเลยว่า อันไหนเป็น Error

วันนี้เลยมี Tool อันนึงมาแนะนำ นั่นคือ Sentry.io ที่มีฟีเจอร์การทำงานที่เรียกได้ว่าครบเลยรองรับหลาย Platform และติดตั้งง่ายมากกก แล้ว Sentry.io มีฟีเจอร์ อะไรบ้างไปดูกัน

Platforms

ปล. ใน Blog นี่ยกมาแค่บางฟีเจอร์เท่านั้นนะ (https://sentry.io/features/)

Issues List

Error tracking list

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

Issue Detail

พอกดเข้ามาจากหน้ารายการ ก็จะเจอรายละเอียดต่างๆ ที่ละเอียดมาก เช่น เกิด Issue จากบราวเซอร์อะไร เวอร์ชันไหน ไฟล์ไหน บรรทัดที่เท่าไหร่ URL ไหน บลาๆ นี่แค่เป็นค่าตั้งต้นที่ Sentry กำหนดมาให้นะ

นั่นหมายความว่าเราสามารถ Custom ค่าจะส่งมาบอก Sentry ได้ว่าเราอยากรู้อะไรบ้าง จากรูปข้างต้นจะเห็นว่ามี user id: 1 อยู่ (อยู่ในส่วนของ TAGS) คือเราจะรู้ได้ว่าเกิด Issue กับ User ที่ id เท่ากับ 1

Issue detail
นี่ไง user id: 1 ที่พูดถึง

User Feedback

นอกจากจะ Error Tracking แล้วผู้ใช้สามารถส่ง Feedback มาที่ Sentry ได้ ซึ่งทาง Sentry จะมี javaScript ให้แปะบนเว็บของเรา (กรณี Web platform) แล้วก็เขียน Click Event นิดหน่อย ส่วนนี้ก็ใช้งานได้แล้ว

Release

จากรูปด้านบนนี้กำหนดไว้ว่า เป็น Release v0.5 ซึ่งสามารถกำหนดได้ในโค้ด แต่ถ้าไม่กำหนด จะใช้เลข Commit แทน

ซึ่งส่วนนี้ถือว่าดีเลยทีเดียว จะทำให้เรารู้ได้ว่าแต่ละ Release เรามี Issue มากน้อยแค่ไหน

Slack Integration

ตามหัวข้อเลยก็คือนำไปใช้ร่วมกับ Slack เมื่อมี Issue ก็จะ push ไปที่ Slack แต่เราก็สามารถกำหนดได้ว่า จะให้ push ไปที่ Slack เมื่อเป็น Issue แบบไหน และกำหนด Channel ที่จะ push ไปได้เช่นกัน

ตัวอย่างการ Push ไปที่ Slack ซึ่งสามารถ กด Resolve หรือ Ignore ได้ด้วย และสามารถ Assign ให้กับคน หรือทีมได้

Github Integration

เมื่อมาใช้ร่วมกับ Github แล้วก็ไม่พ้นว่าต้องเกี่ยวกับ Code หรือ Commit แน่นอน ซึ่ง ณ ปัจจุบันยัง Resolve Issue จากการแก้โค้ดไม่ได้ แต่ Resolve ได้จาก Commit message ว่าต้องมี fixes ISSUE_ID ใน Commit message เช่น [fixes SAMPLE-PROJECT-1] เมื่อ Push ขึ้นไป Issue ก็จะ Resolve ให้โดยเองอัตโนมัติ ซึ่งก็ถือว่าสะดวกสบายพอสมควรเลยแหละ

รีวิวการฝึกงานกับบานาน่า โคดดิ้ง โดย ออย (วิทยาการคอมพิวเตอร์ มหาวิทยาลัยเชียงใหม่)

ผม “ออย (Ooy)” จากภาควิชาวิทยาการคอมพิวเตอร์ (CS34) คณะวิทยาศาสตร์ มหาวิทยาลัยเชียงใหม่ครับ ^ ^

ต้องบอกก่อนว่าบริษัท Banana Coding เนี่ยเค้าเคยมีโครงการดี ๆ ที่จัดกับทางภาควิชาฯ ของผม ก็คือ โครงการ Android Application Development Workshop ซึ่งในตอนนั้นผมอยู่ปี 3 พอดี ก็เลยมีโอกาสได้เข้าร่วมด้วย ตอนแรกที่มาบริษัทนี้ เหมือนโดนตีหัวเข้าบ้านเลยครับ เพราะมาครั้งแรกก็ดูน่าอยู่มาก สะอาด บริษัทแลดูร่มรื่น ของกินเยอะ พี่ ๆ คือเอ็นจอยกับการสอนใน Workshop สุด ๆ จนทำให้เกิดความประทับใจที่จะมาลองฝึกงานที่นี้ แต่แล้วสิ่งที่ผมคิดก็เปลี่ยนไปนิดหน่อย ตอนแรกผมกะจะฝึกงานที่นี่แค่ 2 เดือน แต่วันนึงที่นอนอยู่หอ เพื่อนก็โทรมาหาว่า

A: มึง ไปสหกิจกันมะ เนี่ยอาจารย์เค้าบอกว่าไปเถอะได้ประสบการณ์ดี ได้เงินด้วย บลา ๆ ๆ ๆ ๆ

Ooy: ห๊ะ…อ๋อ โอเค ไปก็ได้ ไหน ๆ ตัวเรียนก็ครบแล้ว

จากวันนั้นทุกอย่างก็เปลี่ยนไป เพื่อนที่ชวนไปสหกิจคนนั้นก็ไม่ไป (เท) เหลือเราที่ตกลงไปแล้ว ก็เลย เอาวะ! ลองดูสักหน่อยก็ได้ ก็เลยตัดสินใจแจ้งทางบริษัทนี้ว่า จะขอเปลี่ยนจากฝึก 2 เดือน เป็นฝึก 6 เดือน ทางบริษัทก็ใจดี ยินดีเปลี่ยนให้ในทันทีเลย

เมื่อมาเริ่มฝึกงานที่นี่ มันจะมีอยู่ 2 ช่วงที่แตกต่างกันคือ ช่วงที่ไฟไหม้ บรรยากาศที่พี่ ๆ ตั้งใจทำงาน ไร้เสียงรบกวนซึ่งกันและกัน ทำเอาช่วงแรก ๆ ที่มาที่นี่รู้สึกอึดอัดเล็กน้อย กับอีกช่วงนึงที่ไฟไม่ได้ไหม้งาน พี่ ๆ เค้าก็กลับมาร่าเริง 55555 ยิ้มแป้น หยอกล้อ เล่นปาเป้า ปิงปอง พากินเลี้ยงบ้าง กินจุกจิกบ้างเรื่อย ๆ อาจจะไม่บ่อยเท่าที่อื่น แต่ที่นี่มันไม่เหมือนใคร จะหยิบขนม ออกมานั่งทำงานข้างนอกก็ได้ จะนั่งทำงานที่บ้านก็ได้ (แต่ไม่ได้ทำงานที่บ้านได้ทุกวันนะ ทำได้บ้างบางครั้ง) แถวยังมีเจ้าแมวมาคอยแจกความน่ารัก และกวนเอามาก ๆ มาคอยเล่นด้วยอยู่ตลอด สนุกดี

เรื่องความรู้ที่ได้จากที่นี่ ยิ่งไม่ต้องกลัวเลย ได้เยอะแน่นอน เพราะตั้งแต่เข้าบริษัทมา พี่เขาก็จัดเทรนการใช้งานภาษา หรือเครื่องมือต่าง ๆ ที่บริษัทจำเป็นต้องใช้ทั้งหมด เช่น GitHub, Trello, Slack, Ruby on Rails , HTML+CSS+JS, Angular+TypeScript เป็นต้น พอเสร็จจากการเทรนเครื่องมือแล้ว พี่เขาก็ให้เราทดลองทำงานจริง โดยการเข้าทำงานกับรุ่นพี่ที่มีประสบการณ์ทำงานมาแล้ว พี่เขาจะคอยช่วยเหลือเราเสมอเมื่อร้องขอ ในโปรเจคที่ตรงกับความสนใจของเรา อย่างผมก็ได้ลองเขียนแอป Android ส่วนเพื่อนอีก 2 คนก็ทำสิ่งที่เขาสนใจไป

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

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

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

รีวิวการฝึกงานกับบานาน่า โคดดิ้ง โดย พันไมล์ (วิทยาการคอมพิวเตอร์ มหาวิทยาลัยเชียงใหม่)

ผมชื่อ นาย พันไมล์ ตานุ ชื่อเล่น ไมล์ ปัจจุบันศึกษาอยู่ที่ คณะวิทยาศาสตร์ มหาวิทยาลัยเชียงใหม่ ภาควิชาวิทยาการคอมพิวเตอร์ครับ ผมได้เริ่มรู้จักกับบริษัทบานาน่าโคดดิ้ง จากการได้เข้าฟังประสบการณ์ฝึกงานของรุ่นพี่ในมหาวิทยาลัย จึงได้เริ่มมีความสนใจที่จะเข้าฝึกงานที่นี่ โดยทางมหาวิทยาลัยต้องให้นักศึกษาออกฝึกงานเป็นเวลา 2 เดือน ผมจึงได้ยื่นสมัครเข้าฝึกงานที่บริษัทแห่งนี้ แต่ก่อนจะมีการรับสมัครฝึกงาน ทางบริษัทได้มีการจัดโครงการ Android Application Development Workshop ผมจึงได้เข้าร่วมโครงการแล้วได้ความรู้ต่างๆ แล้ว ยังได้สัมผัสกับสังคมความเป็นอยู่ของบริษัท ที่ค่อนข้างจะเป็นบริษัทเล็กๆ มีทีมงานประมาณ 20 กว่าคน จึงทำให้ได้รับการดูแลจากพี่ๆ เป็นอย่างดี

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

ในช่วงแรกจะมีการสอนพื้นฐานในเรื่อง Git, Trello, HTML, CSS, Bootstrap, Ruby, Ruby on Rails , JavaScript, Typescipt, Angular 2, การเขียน Test ซึ่งเป็นความรู้ที่จะนำไปใช้ในการทำงาน โดยในแต่ละหัวข้อจะให้เวลาในการสอน 1 วันและหลังจากนั้นจะได้เริ่มทำงาน ซึ่งงานที่ได้รับมอบหมายคืองานที่จะต้องทำการส่งมอบลูกค้าจริงๆ โดยให้เข้าร่วมทีมในการพัฒนา ซึ่งการทำงานจะมีการแบ่งหน้าที่การทำงานออกเป็นส่วนๆ เป็นการฝึกการทำงานร่วมกับผู้อื่นได้เป็นอย่างดี ในการทำงานช่วงแรกๆ งานดำเนินไปค่นข้างช้า แต่เมื่อมีข้อสงสัยหรือติดขัดอะไรก็ไปถามพี่ๆ ซึ่งพี่ๆก็ช่วยแนะนำและแก้ไขปัญหาตลอด และการทำงานที่ไม่ได้ตึงเครียด ไม่ได้มีการบังคับให้ทำงานตลอดเวลา สามารถผ่อนคลายได้พักผ่อนได้ หลังจากได้ทำงานชิ้นแรกสำเร็จแล้วก็พบว่าตัวเองได้ความรู้จากการทำงานมากมาย ผมเคยได้ยินคำกล่าวที่ว่า ถ้าทำงานกับคนเก่งก็จะทำให้พัฒนาตัวเองให้เก่ง ซึ่งก็เป็นเรื่องจริง เพราะการที่เห็นคนอื่นทำได้แล้วตัวเราเองยังทำไม่ได้แสดงให้เห็นว่าเรายังพยายามไม่พอ ผมจึงได้เรียนรู้ว่าการพัฒนาตัวเองนั้นเป็นสิ่งสำคัญ ที่จะช่วยให้ประสบความสำเร็จในการดำเนินชีวิต

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

รีวิวการฝึกงานกับบานาน่า โคดดิ้ง โดย เอ็ม (วิทยาการคอมพิวเตอร์ มหาวิทยาลัยเชียงใหม่)

สวัสดีครับผมชื่อเอ็มครับ เป็นนักศึกษาชั้นปีที่ 4 จากมหาวิทยาลัยเชียงใหม่ คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ ก่อนหน้าที่ผมจะมาฝึกงานที่นี่นั้น ทางมหาลัยมีแผนให้นักศึกษานั้นต้องเลือกว่า ต้องการจะฝึกงานแบบไหนซึ่งก็คือ

1) ฝึกงานทั่วไปใช้ระยะเวลาสองเดือน

2) โครงกราสหกิจศึกษาใช้ระยะเวลาหกเดือน

ซึ่งผมก็เลือกโครงการสหกิจแบบไม่ลังเล เพราะว่าไม่อยากเรียน​ ฮ่าๆๆ หลังจากนั้นก็ต้องมาคิดหนักว่าจะต้องเลือกบริษัทไหนอีก สำหรับผมแล้วนั้นการเลือกไปฝึกงานกับบริษัทใหญ่ๆนั้นตอนนั้นก็คงเป็นเพียงแค่ความคิดเพราะว่าเกรดเฉลี่ยไม่ค่อยจะดีซักเท่าไหร่ แล้วผมก็ไม่อยากไปฝึกงานไกลๆด้วยผมจึงเลือกบริษัทที่อยู่ในเชียงใหม่ “แล้วผมรู้จักบริษัทนี้ได้ยังไงหล่ะ ?” ในตอนแรกการที่จะเลือกสหกิจศึกษาผมจะต้องเก็บชั่วโมงอบรมกิจกรรมให้ครบครับ ซึ่งในตอนนั้นผมขาดชั่วโมงอบรมและตอนนี้กิจกรรมก็เหมือนจะหมดไปแล้ว แต่ไม่นานก็ได้ยินว่าจะมีบริษัทในเชียงใหม่จะมาทำ โครงการ workshop ให้นักศึกษาที่สนใจผมจึงเข้าร่วมเพื่อจะเก็บชั่วโมงให้ครบ ผมจึงได้มีโอกาสรู้จักบริษัทนี้เป็นครั้งแรก สิ่งที่ผมประทับใจในครั้งแรกเลยสำหรับที่นี่ก็คือตอนที่บริษัทมาบรรยายเกี่ยวกับโครงการ workshop เค้าพูดว่า “เค้าไม่อยากได้คนเก่ง เค้าอยากได้คนที่ไม่เก่งแล้วทำให้เก่ง” ในตอนนั้นผมรู้สึกว่านี่แหละทางของผม ผมกับเพื่อนอีกหลายคนจึงสมัครเข้าร่วม workshop กับทางบริษัท ในช่วงของการ workshop กับทางบริษัทนั้นผมรู้สึกว่าดีจังที่ได้มา ผมได้ความรู้หลายๆถึงแม้จะเป็นช่วงเวลาๆสั้นๆ ผมรู้สึกว่าที่นี่โอเคมาก จนเริ่มคิดว่าอยากจะมาฝึกงานที่นี่ หลังจากนั้นผมจึงได้ส่งใบสมัครมาที่นี่แล้วผมไม่นานผมก็ได้อีเมลตอบว่า “ผ่าน ทางบริษัทมีความยินดีตอบรับ การขอฝึกงานกับทางบริษัท” ผมรู้สึกดีใจมาก สบายใจแล้วมีที่ฝึกงานกับเค้าแล้ว หลังจากนั้นผมก็ตั้งหน้าตั้งตารอมากที่จะมาฝึกงาน

ในช่วงเดือนแรกของการมาฝึกงานที่นี่เป็น bootcamp หรือช่วงการฝึกก่อนทำจะงานจริงๆ เป็นอะไรนี่น่าตื่นเต้นดีครับเหมือนได้ใช้ความรู้ที่เรียนมาทุกอย่างๆ ตอนฟังพี่บรรยายก็ค่อนข้างเข้าใจมากขึ้นจากเดิม บางอย่างที่เคยไม่เข้าใจก็เข้าใจมากและผมก็ยังได้เพื่อนใหม่ด้วย ได้ช่วยเหลือกันทำการบ้านส่งพี่ แต่ถึงอย่างนั้นบรรยากาศรอบข้างกลับทำให้ผมกลับอึดอัดใจอย่างบอกไม่ถูก อาจเพราะผมยังไม่ชิน เพราะรู้สึกเครียดไปกับบรรยากาศรอบตัว ทุกอย่างดูเงียบไปหมด พี่ๆต่างคน ต่างทำงานดูเคร่งเครียดกัน จนผมรู้สึกว่านี่หรอการทำงานในชีวิตจริง ผมก็คิดตลอดว่าผมอาจจะยังไม่ชินกับบรรยากาศแบบนี้ หลังจากจบการเทรนคือการเข้าโปรเจคเพื่อทำงานจริงๆผมเริ่มได้รับมอบหมายงานให้ทำ ผมก็เริ่มทำงานของผมไปจนผมก็เข้าใจว่าผมก็ไม่ต่างกับพี่ซักเท่าไหร่ เราต่างต้องใช้สมาธิในการทำงานของตัวเอง หลังจากนั้นความรู้สึกอึดอัดต่างๆก็ได้หายไป ส่วนเรื่องโปรเจคหรืองานที่ทำแน่นอนว่าเราไม่เคยทำงานจริงมาก่อน ก็ค่อนข้างติดขัดเป็นธรรมดาแหละครับ แต่ดีที่พี่ๆคอยช่วยเหลือคอยแนะนำตลอดเวลาเราที่มีปัญหา นอกเหนือจากการทำงานแล้วบางครั้งพี่ก็สอนอย่างอื่นให้ด้วย เช่นคำบางอย่างเราอาจจะเคยได้ยินมาก่อนตอนเรียนแต่ไม่ได้หรือไม่ได้เข้าใจจริงๆ ก็มาเข้าใจตอนทำงานจริงๆแหละครับ ประทับใจมาก เป็นอะไรที่หาไม่ได้จากห้องเรียนจริงๆ ผมว่าผมคิดถูกมาครับที่เลือกมาฝึกงานและก็ฝึกกับที่นี่

สุดท้ายนี้ก็อยากขอบคุณพี่ๆทุกคนมากครับตลอดเวลาที่มาได้มาฝึกงานที่นี่เต็มไปด้วยความรู้สึกดีๆมากมายขอบคุณจริงๆครับ

Build TO-DO List ASP.NET Core Web API With Angular JS

สวัสดีครับวันนี้เราจะมาสร้างเว็บแอปพลิเคชัน TO-DO List ด้วย ASP.NET Core + Angular + Angular Material กันครับ ก่อนอื่นมารู้จักกับ แอปพลิเคชัน TO-DO List กันก่อน มันคืออะไร มันก็คือ….แอปพลิเคชันที่มีไว้สำหรับจดโน้ตนั่นแหละครับ เราสามารถจดสิ่งที่เราจะต้องทำแล้วสามารถเลือกได้ว่าเราทำเสร็จแล้ว ตัวอย่างก็เช่น เวลาเราทำอาหาร 1 มื้อ เราก็ต้องวางแผนสิ่งที่เราจะต้องซื้อก่อนนั่นเอง

ส่วนโครงสร้างของเว็บแอปของเราก็จะตามภาพข้างล่าง โดยเราจะสร้าง API ด้วย ASP.NET Core 2.1 เก็บข้อมูลใน Sqlite และฝั่ง Client เราจะสร้างด้วย Angular + Angular Material

Prerequisites

  1. Visual Studio 2017 Community Version
  2. .NET Core 2.1 SDK or later (รวมอยู่ใน Visual Studio 2017)
  3. Visual Studio Code
  4. Node JS
  5. Postman
Part 1 Web API
มาเริ่มกันด้วย Web API ซึ่งเป็นส่วนของ Server ที่จะคอยรับ-ส่งข้อมูล จากฐานข้อมูลของเรา โดยเราจะสร้าง API จาก ASP.NET Core 2.1 และเก็บข้อมูลไว้ใน Sqlite
สร้างโปรเจค APS.NET Core Web Application – TodoApi เลือก ASP.NET Core 2.1, API
เพิ่ม Model Class / Database ContextClass คือ ตัวที่บ่งบอกว่า Object ของเราประกอบไปด้วยอะไรบ้าง โดย TodoItem ของเราจะประกอบไปด้วย

  • Id จะถูกสร้างขึ้นอัตโนมัติโดย Database เมื่อ TodoItem ถูกสร้างขึ้น
  • Name เป็นชื่อของ TodoItem จะเก็บเป็น string
  • IsComplete เป็นสถานะของ TodoItem จะเก็บเป็น boolean (true, false)

Install Microsoft.EntityFrameworkCore.Sqlite and Microsoft.EntityFrameworkCore.Design เปิด Command prompt แล้วชี้ไปที่โฟลเดอร์โปรเจคของเรา (ใน folder ที่มีไฟล์ TodoApi.csproj) Run command ข้างล่าง

สร้าง Clsas TodoContext และแทนที่ด้วย code ข้างล่าง โดย TodoContext จะทำหน้าที่เชื่อมระหว่าง TodoItem.cs และ Entity Framework

เชื่อม DbContext กับ Database Sqlite โดยแทนที่ code ข้างล่างใน Startup.cs โดย code ส่วนที่ทำหน้าที่นั้นก็คือ services.AddDbContext<TodoContext>(opt => opt.UseSqlite(“Data Source=TodoList.db”)); โดย TodoList.db คือชื่อ Database ของเรานั่นเอง

สร้าง Sqlite Database

Initial Database และสร้าง Database จาก code ข้างล่าง โดยรันคำสั่งใน CMD (Command Prompt) ในโฟลเดอร์โปรเจคของเรา

สร้าง Controller

New Item -> Add New Item เลือก API Controller Class template ตั้งชื่อ class TodoController และแทนที่

https://gist.github.com/cpanuphan/75263afca07f0adff30af7b014fe0361ต่อมาเราจะมาเพิ่ม method ทั้งหมด เพื่อจัดการ TodoItem ของเรา โดยจะมีทั้งหมด 5 metod คือ

API Description Request body Response body
GET /api/todo Get all to-do items None Array of to-do items
GET /api/todo/{id} Get an item by ID None To-do item
POST /api/todo Add a new item To-do item To-do item
PUT /api/todo/{id} Update an existing item To-do item None
DELETE /api/todo/{id} Delete an item None None
ต่อมาเราก็จะมาทำหน้าเว็บแอพพลิเคชั่นของเรากัน โดยวันนี้เราก็จะเลือก Angular + Angular Material กันนะครับPart 2 Web Application

ก่อนอื่นมาทำความรู้จักกับ Angular กันก่อน Angular เป็น Framework สำหรับสร้างแอปพลิเคชันในฝั่งไคลเอ็น โดยจะทำงานแบบ MVC/MVVM Framework โดยข้อดีของ Angular นั่นก็คือ มันเป็น Single Page Application (SPA) ซึ่งจะทำงานได้เร็วมาก และอีกทั้งเรายังสามารถพัฒนาได้หลายแพลตฟอร์มได้ เพราะฉะนั้นศึกษาไว้ก็ไม่เสียหายใช่ไหมครับ และเราจะตกแต่งหน้าตาเว็บแอปพลิเคชันของเราให้สวยสดงดงามได้ด้วย Angular Material โดย Angular Material นั้นจะมี Component มากมาย โดยที่เราจะนำมาใช้ในโปรเจคนี้ก็เช่น Textbox, Checkbox, Icon, Button เพื่อไม่ให้เป็นการเสียเวลา เรามาต่อกันเลยดีกว่า

Setup Development Environment

เปิด Command Prompt (CMD) ขึ้นมา เช็คว่าที่เครื่องเราได้ลง Node js รึยังโดย พิมพ์ node –v ถ้ามีแล้วก็จะขึ้นตามรูปข้างล่าง ถ้ายังไม่มีก็ให้ไปโหลด Node JS มา Install ไว้ที่เครื่อง

Install Angular CLI ซึ่งเป็นเครื่องมือแบบ command line interface ช่วยให้เราสามารถสร้างโปรเจค หรือเขียน Angular ได้ง่ายและเร็วขึ้น

Create Angular Project

เราจะมาสร้าง Angular Project ง่ายๆ ด้วยการใช้ Angular cli โดยเราจะตั้งชื่อแอปของเราว่า TodoListApp เมื่อเราพิมพ์ ng new ToListApp แล้วตัว cli ก็จะจัดการสร้างโปรเจคให้กับเรา โดยเราสามารถนั่งจิบกาแฟรอได้เลย

ส่วน ng serve –open ก็คือ คำสั่งสำหรับ run Angular App ของเรานั่นเอง โดย –open จะทำการ browseแอปพลิเคชันของเราให้อัตโนมัติแอปพลิเคชันแรกของเราหน้าตาก็จะประมาณนี้ เป็นเทพเพลทพื้นฐานที่ตัว cli สร้างขึ้นมาให้กับเรา

ต่อไปจะทำการเพิ่ม Angular Material ให้กับโปรเจคของเรา

Step 1 Install Angular Material, Angular CDK and Angular Animations

Step 2 Configure animations เพิ่ม code ข้างล่างในไฟล์ src\app\app.module.ts

Step 3 Include a theme เพิ่ม code ข้างล่างในไฟล์ src\app\styles.css

Step 5 Add Material Icons

ยินดีด้วย!! ตอนนี้เราก็มี To-do List Application ใช้กันแล้ว ส่วนรายละเอียดการสร้าง Component และการเรียก API ต่างๆ สามารถตามเข้าไปดูใน GitHub ได้นะครับ ถ้าเอามาเล่าในนี้เกรงว่าจะยาวเกินไป

ลองตามเข้าไปดู Code ต่อได้ที่

ASP.NET Core Web API TodoApi

Angular + Angular Material TodoListApp

References

รีวิวการฝึกงานกับบานาน่า โคดดิ้ง โดย อั๋น (วิทยาการคอมพิวเตอร์ มหาวิทยาลัยแม่โจ้)

“สวัสดีครับ ก่อนอื่นผมขอแนะนำตัวเองก่อนเลยละกันนะครับผมชื่อ อั๋น เพิ่งจบปี 3 คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยแม่โจ้ จ.เชียงใหม่” ซึ่งหลังจากจบปีที่ 3 ก่อนจะขึ้นปีที่ 4 นั้นก็จะต้องผ่านการฝึกงานกับบริษัทก่อน 2 เดือน ผมเลยได้ยื่นสมัครฝึกงานไปกับบริษัทประมาณ 2-3 ที่ได้ แต่ที่แรกที่ติดต่อผมกลับมาคือ Banana Coding ที่นี่ นี่เองครับ ผมจำเหตุการณ์วันที่พี่เค้าติดต่อกลับมาวันนั้นได้เลย เป็นช่วงสาย อยู่ๆ ก็มีคนโทรศัพท์เข้ามา”

ผม : ฮัลโหลครับ สวัสดีครับผม
!@#$ : สวัสดีครับ พี่โทรมาจากบริษัทบานาน่าโค๊ดดิ่งนะครับ ไม่ทราบว่าน้องยังสนใจที่จะฝึกงานบริษัทพี่อยู่รึเปล่าครับ
ด้วยความดีใจตอนนั้นผมรีบตอบกลับไปทันทีเลยว่า
ผม : ครับยังสนใจอยู่ครับ
!@#$ : ได้ครับผมเป็นอันยืนยันเน้อะ งั้นเจอกันเดือนเมษานะครับเดี๋ยวพี่จะส่งอีเมล์ให้เรื่องการเตรียมตัวต่าง ๆ
ผม : ได้ครับผม ขอบคุณมากครับ

หลังจากวางโทรศัพท์ไปเพิ่งมานั่งคิดได้ เดี๋ยวนะบริษัทนี้จำได้ว่าอยู่ไกล ไอ่เราก็ไม่แน่ใจเลยเปิดแผนที่ดู แม่เจ้า !!! 19 โล ไปกลับนี่ 38 โลเลยนะ โอ้โหหหห แย่ละ จะขับรถไหวไหมเนี่ย จะเช่าหอก็คงไม่คุ้มเพราะเราก็อยู่แค่ 2 เดือนมันไม่มีหรอกมั้งที่หอไหนจะประกันหอแค่ 2 เดือนออกได้เลย จะเอาเงินค่าประกันไปทิ้งก็ไม่น่าจะคุ้มอีก เรื่องเช่าหออยู่ใกล้ ๆ ก็ตัดไปได้เลย แถวนั้นเขตของ มช. ด้วยส่วนมากคนในบริษัทเขาน่าจะเป็นเด็ก มช. มีแต่คนเก่งๆทั้งนั้นแน่เลย ตอนนั้นคือแบบกลัวไปหมดคิดไปต่าง ๆ นา ๆ กดดันตัวเองมาก จนสุดท้ายแล้วเราก็ตัดสินใจว่า เอาว่ะ !! ไหน ๆ เราก็เลือกแล้วจะยังไงสุดท้ายแล้วเราจบเราก็ต้องทำงาน เราต้องเจออะไรอีกหลายอย่างอยู่ดี ถือว่าซ้อมละกันก่อนจะจบไปเจอของจริง หลังจากคิดไปต่าง ๆ นาแล้วสุดท้ายพอมาเจอเข้าให้จริง ๆ นี่เรียกได้ว่าคนละเรื่องเลยเริ่มจากการฝึกงานในช่วงเดือนแรกจะเป็นการเข้า Bootcamp คือการปูพื้นฐานต่าง ๆ เพื่อให้พร้อมทำงานจริง โดยพี่ ๆ จะมีเนื้อหามาสอนทุกวันเป็นเวลา 1 เดือนเต็มตัวอย่างคร่าวๆก็คือ Git, Trello, HTML, CSS, Bootstrap, Ruby, RubyOnRails , JavaScript, Typescipt, Angular 2 หรือแม้กระทั่งการเขียน Test โดยการสอนแต่ละหัวข้อก็จะมีการบ้านให้มาฝึกทำ เพื่อให้เข้าใจสิ่งที่เรียนในวันนั้น ๆ ได้ดียิ่งขึ้น แถมหัวข้อในแต่ละวันยังเปลี่ยนคนสอนด้วยนะทำให้เป็นการทำความรู้จักกับพี่ ๆ ไปในตัว

หลังจากที่ผ่าน Bootcamp แล้วจะเป็นการได้ร่วมทำ Project ต่าง ๆ ของบริษัทโดยจะมี Mentors หรือพี่เลี้ยงคอยดูแลเราหากเราติดปัญหาอะไร สามารถสอบถามพี่เค้าได้เลย ตอนแรกที่เราได้จับงานก็แบบ “เอ่อออ เราจะทำงานเค้าพังไหม เราจะทำได้ไหมเนี่ย” สุดท้ายก็ค่อย ๆ ผ่านมันไปได้ด้วยดี ด้วยความช่วยเหลือของพี่ๆ คอยแนะนำเวลาเราติดปัญหาอะไร
การมาฝึกงานของผมนั้นเหมือนเป็นการพิสูจน์อะไรหลาย ๆ อย่างในใจที่คิดเอาไว้ตอนแรกเลยก็ว่าได้ เริ่มแรกจากการเดินทาง 19 กิโลเมตรก็ไม่ได้ไกลแบบที่คิดเท่าไหร่ ขับไปกลับ 38 กิโลเมตรนี่ก็ไม่ได้โหดร้ายอะไรขนาดนั้น อย่างที่สองที่ว่า “แถวนั้นเขตของ มช. ด้วยคนในบริษัทเขาน่าจะเป็นเด็ก มช. มีแต่คนเก่งๆทั้งนั้นแน่เลย” อันนี้เรื่องจริงแหะ มีครั้งนึงได้งานมาให้เขียนฟังก์ชั่นมาเพื่อดักสิ่งที่ลูกค้าเขาไม่ต้องการ ไอ่เราก็นั่งทำ ๆไป พอเสร็จเอาไปส่งให้พี่เค้าดูเพื่อรีวิวโค๊ด เชื่อไหมฮะฟังก์ชั่นที่ผมทำพี่แกย่อให้เหลือแค่บรรทัดเดียวเองแถมยังทำงานได้เหมือนเดิมอีกต่างหาก เค้าเก่งกันจริง ๆ แต่เค้าไม่ได้แค่เก่งอย่างเดียวนะครับ พี่เค้าทุกคนที่นี่เฟรนด์ลี่เข้าหาง่าย สงสัยอะไรสามารถถามหรือคุยกันได้ทุกเรื่องเลย ไม่ว่าจะเป็นเรื่องโปรแกรม หรืออะไรต่าง ๆ นู่นนั่นนี่ ปรึกษาการลงทุนบิทคอยยังได้เลย 5555 คือคุยได้ทุกอย่างจริง ๆ ทำให้บรรยากาศในการทำงานไม่ได้ตึงเครียดเลยดูเป็นกันเองสุด ๆ
ผมได้รับประโยชน์จากการฝึกงานมากมาย  ผมได้ประสบการณ์ในการทำงานจริงกับลูกค้า  ได้เรียนรู้การทำงานเป็นทีม ได้เพิ่มความรับผิดชอบกับงานที่ตัวเองได้รับมอบหมาย ได้เจอกับสภาพแวดล้อมในการทำงานที่สบายและเป็นกันเอง ได้อะไรจากที่นี่อีกเยอะแยะเลยครับ

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

การทำ Android Application ภายใน 24 ชั่วโมง

การทำ Android application ภายใน 24 ชั่วโมง ที่ว่านี้ต้องบอกก่อนว่าไม่ได้เป็นการอดหลับอดนอนเพื่อมาทำแอปให้เสร็จภายใน 24 ชั่วโมงนะ แต่คือเราได้ทำแอปนี้ 3 วันวันละ 8 ชั่วโมงนั่นเอง โดยทีมของผมมีกันถึง 2 คน และก่อนจะทำแอปพลิเคชันขึ้นมา ก็มาคุยไอเดีย แนวคิดกันก่อนว่าจะทำแอปอะไร แอปแบบไหน และมีสโคปงานขนาดไหน ที่จำสามารถทำได้ในเวลาที่เหลือ

และต้องขอบอกอีกอย่างคือทีมของเรานี้ก็ไม่ได้ถึงขั้นระดับมือโปรที่รู้และจำได้ทุกอย่างเกี่ยวกับการเขียน Android แม้แต่ Syntax ของ Java ยังจำไม่ได้หมดเลย แต่ก็อาศัยการค้นหาเพิ่มเติมนี่แหละ อยากได้อะไรก็หา หรือบางฟังก์ชันที่เค้าเขียนมาแล้วมันโอเคก็ไปก็อบมาเลย หรือจะหา lib ต่างๆ มาช่วยก็ได้เช่นกัน

พอคุยๆ กันก็มีไอเดียเป็นแอปพลิเคชันที่เกี่ยวกับการ Generate Password ซึ่งแนวคิดนี้ก็เกิดจากการที่มีการคิดรหัสผ่านไม่ออก และสุ่มไปมั่วๆ พอถ้าเราสุ่มมั่วๆเอง ไม่นานเดี๋ยวก็ลืม หรือถ้า Generate Password มาก็อาจจะลืมได้เช่นกัน ก็เลยได้เพิ่มฟีเจอร์การจัดการรหัสผ่านมา เพื่อที่จะสามารถเก็บรหัสผ่าน ที่เราสุ่มขึ้นมาได้ทันที

หลังจากที่ได้มีการสรุปไอเดีย  และสโคป ต่างๆของตัวแอปเรียบร้อย ก็ทำการออกแบบคร่าวๆ ของโฟลการทำงาน และหน้าตาของแอป ด้วยกระดาษ กับปากกา นี่แหละเพียงเท่านี้ก็หมดแล้วสำหรับ 8 ชั่วโมงแรก

สรุปงาน 8 ชั่วโมงแรก

คือการสร้างแอปพลิเคชันตัวนึงเกี่ยวกับการสุ่มและจัดการรหัสผ่าน โดยมีฟีเจอร์ดังนี้คือ

  • สุ่มรหัสผ่าน
  • จัดการรหัสผ่าน (เพิ่ม, ลบ, แก้ไข)
  • มีการล็อกก่อนเข้าแอปพลิเคชัน
  • เปลี่ยนรหัสผ่านหน้าล็อกแอป

และได้ออกแบบ UI ร่างไว้ในกระดาษคร่าวๆ

.

.

.

วันต่อมาก็ได้เริ่มสร้างแอปพลิเคชันแล้วเย้! ซึ่งมีชื่อว่า IPassword จากนั้นก็อัพขึ้น BitBucket และแบ่งงานกับทีมโดยวันนี้จะเป็นการเขียนโค้ดทั้งหมด

ซึ่งเวลาเหลืออีก 16 ชั่วโมง จึงใช้ฐานข้อมูลภายในเครื่องของ Android เลยเพื่อที่จะเก็บข้อมูลรหัสผ่านต่างๆ  โดยเทคโนโลยีที่ใช้มีดังนี้

  • Java – เป็นภาษาที่ใช้ในการพัฒนา
  • SQLite – เป็น DBMS ที่ใช้ในการติดต่อกับฐานข้อมูล ซึ่งในการพัฒนา Android จะใช้เป็นตัวนี้อยู่แล้ว

สรุปงาน 8 ชั่วโมงที่สอง

ก็มีฟีเจอร์ที่เสร็จแล้วดังนี้คือ

  • สุ่มรหัสผ่าน
  • การเพิ่มรหัสผ่าน
  • การลบรหัสผ่าน
  • การล็อกก่อนเข้าแอปพลิเคชัน

             

.

.

.

พอถึงวันสุดท้าย ก็ทำฟีเจอร์ที่เหลือ เก็บรายละเอียดต่างๆ ติดโฆษณา แล้วเตรียมอัพขึ้น Play Store เลย!! และฟีเจอร์ที่จะทำวันนี้เหลือไม่มาก จึง Setup ต่างๆเตรียมพร้อมที่จะอัพของ Play store และออกแบบต่างๆ เช่น ไอคอนแอป และกราฟฟิกแอป เพราะต้องใช้ในการ อัพขึ้น Play Store ส่วนโปรแกรมที่ใช้ก็เป็น Photoshop นี่แหละ

ภาพต่างๆที่ใช้ในการอัพขึ้น Play store

  • ภาพหน้าจอ (อันนี้ Capture จากโทรศัพท์มาได้เลย)
  • ไอคอนขนาด 512×512
  • ภาพกราฟฟิค ขนาด 1024×500

ก่อนจะอัพขึ้นได้เนี่ยก็ต้องสมัครเป็น Android Developer ก่อนเนาะ และถ้าจะติดโฆษณาก็สมัคร Admob อีกอันนึง

เพียงเท่านี้ก็ได้ แอปพลิเคชันของเราวางอยู่บน Play strore แล้ว อ้อแต่ตอนอัพต้องรอการตรวจสอบก่อนประมาณ 10 – 30 นาทีได้

สรุปงาน 8 ชั่วโมงสุดท้าย

  • ทำฟีเจอร์ที่เหลือ
    • แก้ไขรหัสผ่าน
    • เปลี่ยนรหัสผ่านหน้าล็อกแอป
  • ทำหน้า About us เพิ่ม
  • ติดโฆษณา
  • เตรียมข้อมูลผลิตภัณฑ์ใน Store และ อัพขึ้น Play store

   

 

นี่แหละคือการทำ Android Application ภายใน 24 ชั่วโมง ที่เริ่มตั้งแต่ยังไม่มีไอเดียจนมาเป็นแอปพลิเคชันตัวนึงที่วางอยู่ใน Play Store ได้เนี่ยไม่ได้ยากอย่างที่คิดใช่มั้ยหล่ะครับ แต่แอปพลิเคชันนี้ก็ยังต้องการการพัฒนาต่อ ให้มันดียิ่งขึ้นไปอีกในภายหลัง แต่ก็แสดงให้เห็นว่า ภายในเวลา 24 ชั่วโมงนี้ก็สามารถที่จะทำแอปพลิชั่นเล็กๆ ให้สำเร็จได้นั่นเองครับผมมม

การวิเคราะห์ data จาก facebook เบื้องต้น

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

ในที่นี้จะกล่าวถึงการเก็บรวบรวมข้อมูลจาก page ของ Facebook และการนำข้อมูลมาวิเคราะห์เบื้องต้น

Facebook นั้นมีบริการที่เรียกว่า graph API ซึ่งเปิดให้ผู้ใช้สามารถดึงข้อมูลต่างๆมาเท่าที่ได้รับอนุญาตได้

การจะดึงข้อมูลนั้นต้องมี access token ซึ่งในเบื้องต้นสามารถได้มาจาก Graph Api Explorer

การดึงข้อมูลจาก Graph API Explorer

กดปุ่ม Get token แล้วระบบจะ generate access token ชั่วคราวมาให้ โดย token นี้จะมีอายุเพียง 1 วันเท่านั้น ถ้า expire ก็กดขอใหม่

นอกจากนี้ Graph Api Explorer ยังเปิดให้ทดลองดึงข้อมูลได้ เช่นในช่อง input ขนาดนี้เป็น /me?fields=id, nameเมื่อกดปุ่ม Submit ระบบก็จะส่ง id และ name ของ Login Facebook ที่ใช้งานอยู่มาให้

แต่การจะทราบถึงกระแสสังคมต่อเรื่องต่างๆนั้น ย่อมเป็นการดีกว่าที่จะดูจากจุดที่เป็นศูนย์รวมต่อเรื่องต่าง นั่นคือ page

ในที่นี้จะแสดงการดึงข้อมูลจาก page official ของ Maysa BNK48  เพราะคนเขียนชอบ

อยากแรกที่ต้องให้เลยคือ url name ของ page นั่นคือสิ่งที่ตามหลัง facebook.com/ ใน url ของ page นั่นเอง ในที่นี้คือ bnk48official.maysa

เมื่อนำมาใส่ใน Graph Api Explorer แล้ว submit ก็จะได้ชื่อและ id ของ page มาดังนี้

ถ้ารู้ id ของ page แล้วก็สามารถใช้ id ของ page (224218921376880) มาใส่แทน “bnk48official.maysa” ก็ query ข้อมูลมาได้เหมือนกัน

เติม /feed หลัง url เพื่อ query feed ต่างๆของ page มา

นอกจากนี้เรายังสามารถกำหนด field ที่ Api return กลับมาให้ได้ด้วย โดยใส่ที่ช่องด้านซ้าย หรือเติมท้าย url

โดยที่แสดงในรูปคือมี create_time, comment, รูปภาพใน post, จำนวนการแชร์ และประเภทของ post

ส่วน reaction ใน post นั้น tricky เล็กน้อย คือหากใส่ reactions ไปใน field ตรงๆเลยจะไม่มีข้อมูลมา ต้องเพิ่ม parameters ตามหลังด้วย

reactions.type(LIKE).limit(0).summary(1).as(like)

reactions.type(WOW).limit(0).summary(1).as(wow)

reactions.type(SAD).limit(0).summary(1).as(sad)

reactions.type(LOVE).limit(0).summary(1).as(love)

reactions.type(HAHA).limit(0).summary(1).as(haha)

reactions.type(ANGRY).limit(0).summary(1).as(angry)

comment ในโพสเองก็สามารถดึงได้ และ comment ใน comment หรือที่เรียกว่า reply ก็ดึงมาได้เช่นกัน

reaction ใน comment ก็ดึงมาได้ด้วยวิธีเดียวกับของโพส

ใน data ที่ return กลับมานั้น reply จะเป็น comment ที่ nested อยู่ใน comment อีกที

อย่างไรก็ตาม ในการ query 1 ครั้ง จะได้ข้อมูลมาเพียงบางส่วนเท่านั้น ลองเลื่อนช่อง output ดูด้านล่าง post สุดท้ายที่เห็นคือ 2018-01-14

post ที่เก่ากว่านี้จะอยู่อีกหน้าหนึ่ง และ query มาได้โดยใช้ string ในส่วนของ paging ในท้ายของข้อมูล

หรือก็คือเติม parameter after={string} ท้าย url นั่นเอง

หากกด link ตรง next ก็จะเป็นการ query ข้อมูลหน้าถัดไป

อย่างไรก็ดี จะมานั่งกดดูทีละหน้าก็ใช่ที่ ให้โปรแกรมเป็นคนทำงานให้ดีกว่า ในที่นี้จะแสดงตัวอย่างสคริป ruby ที่ใช้เก็บข้อมูล feed ในช่วงหกเดือนก่อนนี้ แล้วเก็บลง mongodb แต่เพื่อความรวบรัดจะขอละส่วนของ comment ไว้ก่อน

 

เก็บข้อมูลด้วย Ruby script

เหตุที่ใช้ mongodb เพราะสามารถโยน json เข้าไปได้เลย ไม่ต้องสร้าง schema ให้ยุ่งยาก

 

#!/usr/bin/env ruby

require 'json'
 require 'net/http'
 require 'mongo'

access_token = 'EAACEdEose0cBABAzbaZAnrr9F........
 page_name = 'bnk48official.maysa'

uri = URI("https://graph.facebook.com/v2.12/#{page_name}")
 fields = 'id,name,website,picture'
 params = { :access_token => access_token, :fields => fields }
 uri.query = URI.encode_www_form(params)
 res = Net::HTTP.get_response(uri)
 puts uri
 page = JSON.parse(res.body) if res.is_a?(Net::HTTPSuccess)
 puts page

 

สร้าง uri แล้วใช้ Net::HTTP ไป get respond มา

ส่วนของ feed จะใช้ uri นี้

reaction_str = 'reactions.type(LIKE).limit(0).summary(1).as(like),' +
 'reactions.type(WOW).limit(0).summary(1).as(wow),' +
 'reactions.type(SAD).limit(0).summary(1).as(sad),' +
 'reactions.type(LOVE).limit(0).summary(1).as(love),' +
 'reactions.type(HAHA).limit(0).summary(1).as(haha),' +
 'reactions.type(ANGRY).limit(0).summary(1).as(angry)'

uri = URI("https://graph.facebook.com/v2.12/#{page_name}/feed")
 feed_fields = "message,created_time,shares,#{reaction_str}"

params = { :access_token => access_token, :fields => feed_fields }
 uri.query = URI.encode_www_form(params)

res = Net::HTTP.get_response(uri)
 puts uri

ต่อ mongodb รอไว้ก่อน ในที่นี้ใช้ชื่อ db เป็น ‘fb_maysa’ และ collection เป็น ‘feed’

client = Mongo::Client.new([ config[‘mongodb_host’] ], :database => ‘fb_maysa’)
coll = client[:feed]

respond ที่ได้มานั้นจะเป็น json string ก็สามารถใช้ JSON.parse ได้เลย โดยแต่ละ post นั้นจะอยู่ใน key ‘data’

และเนื่องจากเราต้องการดึง feed มาเพียง 6 เดือนเท่านั้น เลยต้องมีการเทียบเวลาจาก field created_time ว่าเก่าเกิน 6 เดือนหรือไม่

ส่วนของ reactions นั้น จากตัวอย่างด้านบนจะเห็นว่า respond ส่วนนี้จะมี structure ที่ซับซ้อน จึงต้องแปลงให้อยู่ในรูปง่ายๆก่อน

แล้วใช้ collection.insert_one เพื่อ insert เข้า mongodb

r_j = JSON.parse(res.body)
 now = Time.now()
 r_j['data'].each do |f|

created_time = DateTime.strptime(f['created_time']).to_time
 time_diff = (now - created_time)
 month = 30*24*60*60
 pass_month = (time_diff/month).floor
 puts "passed month: #{pass_month}"

break if pass_month > 6

f['shares'] = f['shares']['count']

reaction_hash = {}
 ['like', 'wow', 'sad', 'angry', 'haha', 'love'].each do |r|
 count = f[r]['summary']['total_count']
 reaction_hash[r] = count
 f.delete r
 end
 f['reactions'] = reaction_hash

coll.insert_one(f)

end

อย่างที่กล่าวคือการ get_respond 1 ครั้งก็จะได้ข้อมูลมาเพียงบางส่วนเท่านั้น หากขะดึง feed ที่เก่ากว่านี้ก็ดึงได้จากส่วนของ paging

while r_j['paging']['next']
 uri = URI(r_j['paging']['next'])
 res = Net::HTTP.get_response(uri)
 puts uri

pass_month = 0

r_j = JSON.parse(res.body)
 r_j['data'].each do |f|

created_time = DateTime.strptime(f['created_time']).to_time
 time_diff = (now - created_time)
 month = 30*24*60*60
 pass_month = (time_diff/month).floor
 puts "passed month: #{pass_month}"

break if pass_month > 6

f['shares'] = f['shares']['count']

reaction_hash = {}
 ['like', 'wow', 'sad', 'angry', 'haha', 'love'].each do |r|
 count = f[r]['summary']['total_count']
 reaction_hash[r] = count
 f.delete r
 end
 f['reactions'] = reaction_hash

coll.insert_one(f)
 end

break if pass_month > 6
 end

เท่านี้ก็จะได้ feed ของ 6 เดือนย้อนหลังอยู่ใน database ของเราแล้ว จากนี้จะแสดงการนำข้อมูลมาสร้างกราฟง่ายๆโดยใช้ R

 

การใช้ R เพื่อวิเคราะห์ข้อมูล

ข้อมูลที่เป็นตัวเลขที่เราได้มาก็จะมี จำนวนการแชร์ และจำนวน reaction จึงจะใช้สองส่วนนี้เป็นหลัก

ขั้นแรกเลยก็คือโหลดข้อมูลจาก mongodb มาไว้ที่ R ก่อน

library(ggplot2)
 library(mongolite)
 library(chron)
 library(scales)

con <- mongo(collection = "feed", db = "fb_maysa", url = "mongodb://127.0.0.1",
 verbose = FALSE)
 mydata <- con$find()
 stat_data <- c()

dtparts <- t(as.data.frame(strsplit(mydata$created_time,'T')))
 row.names(dtparts) <- NULL
 dtparts[,2] <- sapply(dtparts[,2], function(x){
 xx <- strsplit(x, "\\+")
 return(xx[[1]][1])
 })

stat_data$time <- chron(dates=dtparts[,1],times=dtparts[,2], format=c('y-m-d','h:m:s'))

ส่วนของ Datetime นั้น R จะเห็นเป็นเพียง string จึงต้องปรับ format และแปลงให้อยู่ในรูปของ “chron” ซึ่งประกอบด้วย Date และ Time ให้  R เข้าใจก่อน

แล้วเรียงข้อมูลใหม่ จากวันที่ (stat_data$time)

stat_data$reaction <- mydata$reaction
 stat_data$reaction <- stat_data$reaction[order(stat_data$time, decreasing=FALSE),]

stat_data$shares <- mydata$shares
 stat_data$shares <- stat_data$shares[order(stat_data$time, decreasing=FALSE)]
 stat_data$comment_count <- stat_data$comment_count[order(stat_data$time, decreasing=FALSE)]
 stat_data$time <- stat_data$time[order(stat_data$time, decreasing=FALSE)]
 stat_data$sum_reactions <- rowSums(stat_data$reaction)

แปลง structure ของ data ให้เหมาะกับ ggplot2

d <- data.frame(stat_data$time, stat_data$shares, as.Date(stat_data$time))
 d <- cbind(d, "Shares")
 colnames(d) <- c('time', 'sums' ,'date', 'Total')
 d2 <- data.frame(stat_data$time, stat_data$sum_reactions, as.Date(stat_data$time))
 d2 <- cbind(d2, "Reaction")
 colnames(d2) <- c('time', 'sums' ,'date', 'Total')
 d <- rbind(d, d2)

month <- as.Date(cut(d$date, breaks = "month"))
 d <- cbind(d, month)

เพื่อให้ดูง่าย จึงควร plot graph โดยสรุปแต่ละเดือน เพื่อการนี้จึงเพิ่ม column month เข้ามา

จะได้ตารางหน้าตาแบบนี้

 

ผลลัพธ์

จำนวน share และ reaction ทั้งหมดของเพจในรอบ 6 เดือนจะมีดังนี้

“Total shares 8112”
“Total reactions 199453”

หากแยก reaction ตามประเภทก็จะได้ดังนี้

“Total like 152961”
“Total wow 1827”
“Total sad 466”
“Total angry 72”
“Total haha 8112”
“Total love 41394”

plot ด้วย ggplot2 โดยสรุปตามแต่ละเดือน

ggplot(data = d, aes(x=month, y=sums, group=Total)) +
 scale_color_manual(values=c("red", "blue")) +
 stat_summary(fun.y = sum, geom = "line", aes(color=Total)) +
 stat_summary(fun.y = sum, geom = "point", aes(color=Total)) +
 scale_x_date(labels = date_format("%Y-%m"), date_breaks = "1 month") +
 theme(legend.position="top")

ก็จะได้กราฟเส้น สีแดงคือจำนวนแชร์ สีน้ำเงินคือจำนวน reaction รวมๆ

 

Total reactions and shares in each month

จะเห็นว่ากราฟขึ้นสูงในเดือนธันวาคม นั่นคือช่วงที่มีดราม่าภาพหลุด และลดต่ำลงมาในเดือนมกราคม นั่นคือหลังจากถูกพักงานแล้ว

จากข้อมูลที่มีอาจจะ plot กราฟได้อีกหลายแบบ ลองเปรียบเทียบ reaction แต่ละแบบดู

 

Number of reactions by type per month

reaction ทั้งหมดจำนวนมากที่สุดก็คือ like นั่นเอง แต่ like ก็อาจจะตีความได้หลายความหมาย จึงอาจจะไม่มีประโยชน์เท่าไหร่นัก

ลอง plot อีกรูปโดยตัด like ออกไปดู

 

Number of reactions by type (exclude like) per month

เมื่อตัด like ออกไปแล้ว จำนวน reaction ที่มากที่สุดคือ love รองลงมาก็คือ haha

ทั้ง haha และ love เพิ่มขึ้นมาในช่วงเดือนธันวาคมซึ่งเป็นช่วงที่มีดราม่า แต่ angry ไม่ได้เพิ่มหรือลดอย่างเห็นได้ชัด  ก็อาจจะกล่าวสรุปจากตัวเลขได้ว่าคนไทยก็ไม่ได้โกรธขึ้งน้องจากกรณีดราม่าขนาดนั้น แต่ชอบหาความบันเทิงจากดราม่ามากกว่า

จบแล้วกับบทความนี้ จริงๆแล้วก็อาจจะต่อยอดได้อีกเช่นการพิจารณาข้อมูลของ comment และ reply ร่วมด้วย เนื่องจาก reaction ที่นำมาแสดงให้ดูเป็นเพียง reaction บนตัว post เท่านั้น ไม่ได้รวมถึง reaction ต่อ comment และ reply ด้วย ซึ่งหากนำมารวมด้วยแล้วก็อาจจะได้กราฟในรูปแบบที่ต่างออกไปก็ได้ อาจจะเจอ angry ในสัดส่วนที่มากขึ้นหรือเปล่า เพราะคนอาจจะแสดงความเกรี้ยวกราดลงใน  comment มากกว่าก็เป็นไปได้

 

 

วิธีการติดตั้ง Apache Spark ด้วย Docker

ในบทความนี้จะกล่างถึงใช้การสร้าง environment สำหรับทดสอบโปรแกรม Spark บน Hadoop โดยใช้ Docker

ก่อนจะเริ่มมาทำความรู้จักกับสิ่งที่ใช้ในบทความนี้ก่อนดีกว่า

Apache Spark

คือ Framework ในการเขียนโปรแกรมเพื่อประมวลผลแบบ MapReduced โดยเราเคยกล่าวถึงในบล็อค How to Installation Apache Spark with Cloudera VM ด้วย

Hadoop

คือ ซอฟท์แวร์ประเภท open source ที่จัดทำขึ้นเพื่อเป็นแพลตฟอร์มในการจัดเก็บข้อมูล ซึ่งมีกรอบการทำงานเพื่อใช้ในการจัดเก็บข้อมูลและประมวลผลข้อมูลที่มีขนาดใหญ่มากๆ ที่เราเรียกกันว่า Big Data

Docker

คือ engine ตัวหนึ่งที่มีการทำงานในลักษณะจำลองสภาพแวดล้อมขึ้นมาบนเครื่อง server เพื่อใช้ในการ run service ที่ต้องการ มีการทำงานคล้ายคลึงกับ Virtual Machine

ซึ่งตัว Docker Image ที่ใช้จะเป็น bananacoding/spark_hadoop

Read more  

วิธีการติดตั้ง Apache Spark ด้วย Cloudera VM

Apache Spark คือ Framework ในการเขียนโปรแกรมเพื่อประมวลผลแบบ MapReduce

ในบทความนี้จะกล่าวถึงการสร้าง environment สำหรับทดสอบโปรแกรม Spark โดยใช้ Cloudera Quickstart

Cloudera Quickstart คือ image ของ Virtual Machine โดยมีให้ทั้ง VirtualBox, VMWare และ Docker ในที่นี้จะแสดงการติดตั้งโดยใช้ Docker

Read more