web analytics

บันทึกการทำแอป Blognone Story (Unofficial) ตอนที่ 1

ep1-2

ฮัลโหลผู้อ่าน อย่าพึ่งตกใจกับภาพปก ที่มันออกจะมั่วๆหน่อย บล็อกนี้้มาบันทึกเกี่ยวกับแอปของผมต่อ โดยผมก็ตั้งใจไว้ว่าปี 2018 จะเป็นปีทำ Product ของผม แฮะๆ ดังนั้นบล็อกนี้จะบันทึกแอปใหม่ของผมครับ คือแอปสำหรับอ่าน Blognone จะว่าไปแล้วผมก็ติดตามข่าวไอทีจาก Blognone มาหลายปี ตั้งแต่ช่วงเรียนมหาวิทยาลัย เพราะว่า blognone เป็นเว็บข่าวที่อ่านง่ายและรวดเร็วมากๆเลย ใครไม่รู้จักก็ลองเข้าไปติดตามข่าวได้

 

ดาวน์โหลด

22

google-play-badge

 

 

เริ่มต้น

หลังจากที่ผมทำแอป BX ,TDAX,Poloniex ที่เป็นแอพเกี่ยวกับ crpyto ทำเสร็จจนอัพขึ้น store แล้ว ก็มาหาอะไรทำต่อ ที่ผมคิดไว้คืออยากทำแอปอ่าน blognone เล่นๆ ก็เลยลองหาข้อมูล ผมลอง search หาใน Play Store ด้วยคำว่า blognone ปรากฏว่ามีแอปสำหรับอ่าน blognone ประมาณ 3-4 แอป โดยมี 2 แอปที่ดูดีหน่อย แต่ผมลองโหลดมาเล่น ผมคิดว่าผมสามารถทำให้ดีกว่าได้

a1

 

จากนั้นก็เข้าไปดูรายละเอียดเกี่ยวกับการทำแอปของ blognone ที่ทาง blognone กำหนดไว้ ดูได้ที่ลิงค์นี้
https://www.blognone.com/apps

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

ต่อมา มาดูเรื่อง API พบว่าทาง blognone ไม่มี API ให้ใช้เลย มาแนวเดียวกับ Pantip แหละ แล้วมีแต่ RSS feed ที่เป็น xml ซึ่งผมรู้สึกว่าไม่ตอบโจทย์ สงสัยคงต้องใช้วิธี Scraping แล้วละ แบบเดียวกับที่ผมทำแอป Pantip Story ซึ่งพอเคยทำแอป Pantip เป็นแนวนี้มาก่อน เลยคิดว่าน่าจะง่ายขึ้นเพราะก็ใช้โค้ดเดิมบางส่วน แต่ก็ตามมาด้วยข้อเสียตัวใหญ่คือ หากเว็บมีอัพเดทเปลี่ยนแปลงอะไรเราก็ต้องมาตามแก้อัพเดทนั่นเอง

 

ลงมือทำ

เย้ พอหาข้อมูลคร่าวๆแล้วก็เริ่มทำแอปได้ วิธีการของผมไม่มีอะไรมาก ผมแค่แพลนเป้าหมายในแต่ละวันทุกอย่างไว้ในหัวแล้วเขียนออกมาจดคร่าวๆว่าวันนี้จะทำอะไรให้เสร็จบ้าง จากนั้นก็เขียนโปรแกรมเลย เริ่มจากทำไอคอนก่อนเลย เพราะผมไม่ชอบเวลาเทสแอปแล้วมันเป็นไอคอน android การทำไอคอนของผมก็ใช้ photoshop ธรรมดา ที่ใช้คำว่า bn Story ใส่สีธีมสี blognone

icon

ตั้งใจไว้ว่าจะเร่งให้เสร็จภายใน 1 อาทิตย์ ไม่รู้จะทำได้มัย คิดว่าถ้าไม่มีอะไรมาทำให้ไขว้เขวน่าจะทันนะ

ผมเริ่มเขียนจริงจังในวันที่ 16 มีนาคม 2018 และอัพขึ้น Store ในวันที่ 21 มีนาคม 2018 รวมๆก็ใช้เวลาประมาณ 6 วัน เดี๋ยวมาสรุป timeline ในแต่ละวันไว้หน่อย โดยผมเริ่มทำตอนบ่ายโมง – ตี 2 ไม่ได้ทำตลอดนะ เพราะรวมเวลากินข้าว ปั่นจักรยาน ดู netflix เล่น ROV นะ พอมาเฉลี่ยๆผมน่าจะใช้เวลาทำประมาณ 8-9 ชั่วโมงต่อวัน

16 มีนาคม 2018 – ทำไอคอน + ขึ้นโครงแอปทั้งหมด + Scraping หัวข้อข่าว  + Workplace + Features+ Interview + Jobs
17 มีนาคม 2018 – ทำส่วนเนื้อหาข่าว Scraping เนื้อหาข่าว + คอมเม้น + Tag
18 มีนาคม 2018 – ทำส่วน Saved , Favorite , Recent view , Forum
19 มีนาคม 2018 – วันนี้มีธุระต้องออกไปข้างนอกเลยทำแค่ตอนดึก คือ ทำส่วนของ Widget
20 มีนาคม 2018 – ทำระบบแจ้งเตือน + Firebase + backend
21 มีนามค 2018 – ทำส่วน Setting เก็บตก + Test คร่าวๆ + ทำปก art จากนั้นก็อัพขึ้น Store ตอนเกือบเที่ยงคืน
22 มีนาคม 2018 – เขียนข่าวใน blognone เขียนตอนเที่ยงคืน – ตี 1 นอน แล้วก็อย่างสบายใจ

แอปนี้ใช้วิธีการ Scraping หน้าเว็บมาแบบ Hardcore ซึ่งมันยากแค่ทำครั้งแรกเท่านั้น พอทำเสร็จช่วงแรกไปปจะใหลลื่นมาก ยิ่งผมเคยทำมาก่อนในแอป Pantip ก็ทำอะไรทำได้ค่อนข้างไว

รวมๆแล้ว บอกเลยว่าทำไปทำมาเหมือนจะไม่เยอะ มันเหนื่อยเหมือนกันนะ แต่ทำแล้วก็มีความสุขดี เวลาเอาแอปมาเขียนสรุป กับตอนทำรูปปก Art เนี่ย เอ่อภาพปกนี่ใช้ Paint ทำนะ ลากเส้น ใส่สี ฮ่าๆ

 

ผมได้ไปเขียนแนะนำแอปนี้ใน  Blognone ด้วยนะ

https://www.blognone.com/node/100871

และมาสรุปฟีเจอร์ที่ผมได้ทำในเวอชัน 1.0 หน่อย

 

การอ่านข่าว

เริ่มจากเข้าแอปมาก็จะแสดงหัวข้อข่าวล่าสุด กดเข้าไปที่หัวข้อข่าวก็จะเป็นเนื้อหาข่าว

2 3

 

ที่ท้ายข่าวจะมีปุ่ม Favorite , Share , Save
หากชอบข่าวนี้ก็กด Favorite มันก็จะไปเก็บไว้ในคลัง Favorite
ส่วน Save จะเป็นการบันทึกเนื้อหาไว้อ่านออฟไลน์

4

 

และหากเลื่อนมาด้านล่างจะแสดงรายการคอมเม้น ซึ่งตอนนี้จะยังไม่สามารถคอมเม้นได้นะ อ่านได้เท่านั้น

5

 

ข่าวไหนที่อ่านแล้วจะมีแถบสถานะบอกไว้ด้วย

1

 

หัวข้อข่าวอื่นๆ

เรื่องเกี่ยวกับ Features ,Wokplace , Interview แบบใน blognone ก็มีเหมือนกัน

7 6

 

Jobs เรื่องเกี่ยวกับประกาศรับสมัครงานก็มีนะ

9 12

 

สามารถเลือกได้ที่ Navigation Drawer ได้เลย

14 8

 

โหมดแท็บเล็ต

เมื่อใช้ในแท็บเล็ต จะแสดงเป็นโหมดแท็บเล็ต คือมีเมนูด้านซ้าย และอ่านเนื้อหาด้านขวาได้เลย

20

21

 

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

a2 a3

 

วิตเจ็ต

มีวิตเจ็ตให้ใช้งานด้วย ทำให้อัพเดทข่าวได้ง่ายๆจากหน้า Home เลย
และเมื่อกดที่ข่าวก็จะเปิดเนื้อหาข่าวนั้นมาอ่านได้เลย

19

 

การเปิดผ่านลิงค์

ฟีเจอร์นี้เรียกว่า Deep link ก็คือเมื่อเราเข้า browser แล้วเข้า url ของ Blognone จะสามารถเปิดแอปอ่านข่าวนั้นได้เลย

18

 

การตั้งค่าขนาดตัวอักษร

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

13

 

ปรับได้ 4 แบบ คือ Small , Normal , Large , Extra

16 15

 

การแจ้งเตือน

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

17

 

การอ่านข่าวจากแท็ก

หากชื่นชอบเรื่องอะไรเป็นพิเศษสามารถ เพิ่มแท็กเป็นแท็กชื่นชอบได้ และแท็กนั้นจะไปแสดงที่หน้าแรก
เมื่อกดที่แท็กจะเปิดหน้าข่าวสำหรับแท็กนั้นขึ้นมา

10 11

 

การอ่านแบบออฟไลน์

เมื่อกด save ไว้สามารถเข้ามาที่เมนู Saved topic แล้วก็อ่านแบบออฟไลน์ได้เลย

a4 a5

 

ทำให้ตอนนี้ผมมีแอปไว้อ่าน Blognone ในห้องน้ำแล้ว เย้

a7

 

 

กลุ่มสำหรับพูดคุยกับผม

หากใครได้อ่านบล็อกนี้และสนใจการใช้งานแอป เชิญร่วมพูดคุยได้ที่กลุ่มใน Facebook ครับ เป็นกลุ่มที่ผมจะคอย Support ครับ

https://www.facebook.com/groups/596554700693034/

a8

 

จบแล้ว

จบแล้วสำหรับแอป Blognone Story EP.1 รอดูว่าจะมีอะไรมาอัพเดทอีกมัยนะ ตอนนี้ยังไม่มีคนใช้เลย หวังว่าแอปจะมีประโยญชน์นะ มีคนใช้งานแค่ 10 คนต่อวันก็ดีใจแล้วละ ขอบคุณครับ