นี่คือแอป Android ที่สามารถค้นหาตั๋วเครื่องบินภายในประเทศและทำการจองผ่านเว็บไซต์ของสายการบินได้โดยตรง
โดยส่วนตัวผมเดินทางไปเที่ยวเกาะเชจูค่อนข้างบ่อย
ระหว่างที่พยายามหาตั๋วเครื่องบินราคาถูกได้อย่างสะดวกและรวดเร็ว
ก็เกิดไอเดียขึ้นมาและได้ทำแอปนี้ขึ้นมา
[ ฟีเจอร์หลัก ]
- ค้นหาและเปรียบเทียบตั๋วเครื่องบิน
- สามารถจองตั๋วเครื่องบินได้โดยตรงบนเว็บไซต์ของสายการบิน
[ สิ่งที่คำนึงถึง ]
- ทำให้แอปมีขนาดเบา เพื่อให้ใช้งานได้บนสมาร์ทโฟนสเปกไม่สูง
- หากมีแอปของสายการบินเดิมอยู่แล้ว ก็สามารถเปิดผ่านแอปนั้นได้
[ ความแตกต่างจากแอปอื่น ]
- ไม่มีค่าธรรมเนียม
- ผู้ใช้สามารถจองตั๋วเครื่องบินได้ด้วยตนเองผ่านแอปนี้
- ไม่ขอข้อมูลส่วนบุคคล ไม่ต้องล็อกอิน
[ เทคโนโลยีที่ใช้ ]
- Android : WebView, java
- Frontend : Vanilna JS, CSS, Webpack, Swagger API
หากมีคำถามเกี่ยวกับการพัฒนา ก็สอบถามมาได้ครับ ผมจะตอบให้
เนื่องจากทำเป็นงานอดิเรก จึงยังมีหลายจุดที่ขาดไป
หากให้ฟีดแบ็กในเรื่องนี้จะขอบคุณมากครับ
16 ความคิดเห็น
คุณวิเคราะห์ API ของเว็บไซต์สายการบินอย่างไร?
ผมทำแบบดิบ ๆ เลยครับ -_-
ทั้ง Korean Air, Asiana, Jin Air, Jeju Air, T'way Air, Air Seoul, Air Busan, Eastar
รวมถึง Google Flights, Naver Air, Webtour, Interpark Air ฯลฯ
ผมเข้าไปที่เว็บไซต์ของสายการบินที่เปิดให้บริการในประเทศ
แล้วเปิดทั้งหน้าดีบักเกอร์และจับแพ็กเก็ตเครือข่ายทีละเจ้า
เพื่อวิเคราะห์ว่าพวกเขารับส่งข้อมูลกันอย่างไร
พอวิเคราะห์ไปเรื่อย ๆ ก็เริ่มมองเห็นทาง(?) ครับ
ผมก็อยากลองวิเคราะห์ดูเหมือนกัน แต่พอดูแล้วมีหลายอย่างที่มองไม่ค่อยออกเลย T_T พอจะแนะนำทิปเล็กๆ น้อยๆ ได้ไหมครับ..?
แล้วก็...
ระบบชำระเงินของแต่ละสายการบินแตกต่างกันมาก
ดังนั้นถ้าพยายามชำระเงินผ่าน WebView
ก็จะเกิดข้อผิดพลาดสารพัดแบบ
อธิบายง่าย ๆ ก็คือ
เหมือนเวลาทำธุรกรรมธนาคารบนพีซีที่ต้องติดตั้งโปรแกรมความปลอดภัย
บางที่ก็ต้องติดตั้งโปรแกรมความปลอดภัยสำหรับ Android ก่อนถึงจะชำระเงินได้
เพราะแบบนี้
ถ้าสายการบิน 1 แห่งมีโมดูลชำระเงิน 5 แบบ
ถ้ามีสายการบิน 8 แห่งก็ต้องทดสอบประมาณ 40 แบบ
ให้บุคคลทั่วไปทำเองนั้นลำบากครับ
ผมเลยลองถามในคอมมูนิตี้อื่นแบบง่าย ๆ ว่าปกติเขาจองตั๋วเครื่องบินกันอย่างไร...
คำตอบคือค้นหาราคาอย่างเดียวจาก Naver, Interpark หรือ Google Flights
แล้วการจองจริงก็มักทำผ่านแอปของสายการบิน
แอปที่ผมทำขึ้นมา เดิมทีตั้งใจก็คล้าย ๆ แบบนี้ครับ
คือค้นหาแล้ว... ไม่เปิดแอปสายการบิน แต่ย้ายไปยังหน้าผลการค้นหาบนเว็บไซต์ของสายการบิน
เพื่อชำระเงินได้ทันที..
ขอแนะนำว่า...
มีเบราว์เซอร์สำหรับนักพัฒนาอย่าง Firefox อยู่
เครื่องมือนักพัฒนาของ Chrome ก็ดีเหมือนกันนะ
แต่มีความต่างกันเล็กน้อย
โดยปกติ API จะถูกเรียกแล้วค่อย redirect ไปหน้าถัดไป..
เลยไม่ง่ายที่จะหาว่า API จริง ๆ ถูกเรียกอย่างไร
จะใช้วิธีบ้าน ๆ อย่างหยุดเว็บก่อนที่ redirect จะข้ามไปก็ได้..
หรือไม่ก็..
เปิดโปรแกรมดักจับแพ็กเก็ตเครือข่ายทิ้งไว้
แล้วคอยมอนิเตอร์ ก็จะหา API ตัวสุดท้ายเจอได้
ถึงจะหา API เจอแล้วก็ตาม..
ถ้า authentication key, ข้อมูลคุกกี้, ข้อมูลเซสชันที่เกี่ยวข้องไม่ตรงกัน
ต่อให้เรียก API นั้นก็จะเกิดข้อผิดพลาด
แต่ละสายการบินก็มีลักษณะเฉพาะของตัวเอง
เรียกว่าต้องมีทริกจริง ๆ -_-
ที่ยากที่สุดคือ Korean Air!! เพราะใช้ Angular
เลย reverse ได้ยากมาก
เคยคิดจะเลิกทำอยู่เหมือนกัน...
แต่ก็งมอยู่ราว ๆ 2 ปีเลยครับ ฮ่าๆๆ เพราะหัวไม่ค่อยดี.. ก็เลยต้องเหนื่อยลงแรงมากหน่อย...
ตอนนี้ผมกำลังลองกับ Jin Air ก่อนเป็นอันดับแรก อยากขอถามได้ไหมครับว่าจัดการค่า
x-csrf-tokenกับค่า cookie กันอย่างไรบ้าง...? สายการบินอื่นผมยังจับทางไม่ค่อยได้ แต่ของ Jin Air ผมหาวิธีส่งคำขอได้แล้ว ทว่าสองค่านี้นี่แหละที่เป็นปัญหา T_Tถ้ากด F12 ใน Chrome หรือ Firefox หรือ Edge
เครื่องมือสำหรับนักพัฒนาจะเปิดขึ้นมา
จากนั้นเลือกแท็บ Debugger.. แล้วดูหน้าต่าง Source ทางซ้าย
พอเลือกแท็บ Storage ก็จะมีรายการ Local Storage, Session Storage, Cache Storage, IndexedDB, Cookies ทางซ้าย
อยู่.. ลองตรวจดูสิ่งเหล่านี้ก่อน...
จากนั้นเลือกแท็บ Network.. แล้วดูว่าเวลาเปิดหน้าเว็บมีแพ็กเก็ตวิ่งไปมาระหว่างกันอย่างไร
พอพอจะจับทางได้แล้ว
ก็ไปตั้ง breakpoint ในแท็บ Debugger
แล้วในสถานะนี้ต้องค่อย ๆ ตรวจดูทีละจุดว่าเว็บเพจคุยกับเซิร์ฟเวอร์อย่างไร
Jin Air จัดว่าเป็นเคสที่ง่ายหน่อย^^;;; ช่วงหลังมีการปรับหน้าจอให้สวยขึ้นก็จริง
แต่ลอจิกภายในแทบไม่ต่างจากเดิมเลย (แทบไม่เปลี่ยนจากเมื่อ 2 ปีก่อน)
ถ้า token ที่สร้างจากเซิร์ฟเวอร์ถูกส่งมาที่ไคลเอนต์
ลองเช็กดูว่ามันถูกเก็บไว้ตรงไหนใน storage ภายในเว็บเบราว์เซอร์
ในกรณีของผม ใช้แค่ข้อมูลผู้ใช้กับข้อมูลวันที่อย่างง่าย ๆ
แล้วพาไปยังหน้าจอนั้นให้ได้ก่อน..
จากนั้นก็เลื่อนหน้าจอไปยังตำแหน่งของเวลานั้นแล้วจบ
ตรงนี้จะให้กดราคาแล้วล็อกอินต่อก็ทำได้
แต่ส่วนนี้มันขึ้นกับแต่ละเคสมาก ๆ เลย..
ก็เลยปล่อยให้ผู้ใช้จัดการต่อได้อย่างอิสระ
ถ้าจะอธิบายให้ง่ายกว่านั้น
คือให้ผู้ใช้ไม่ต้องเปิดแอปสายการบิน
แต่ใช้เว็บเบราว์เซอร์ที่นิยมบนสมาร์ตโฟนอยู่แล้วเลย (Chrome, Samsung Internet ฯลฯ)
เข้าเว็บไซต์ของสายการบินเพื่อค้นหา
ล็อกอิน แล้วก็ชำระเงิน
แต่ถ้าทำด้วย WebView
ข้อจำกัดจะเยอะมากจนทำให้พัฒนาได้ไม่สมบูรณ์
เพราะแต่ละสายการบินทำไว้ด้วยลอจิกแปลก ๆ ต่างกันไปมาก..
ขนาด Jin Air เองก็น่าจะมีระบบชำระเงินอยู่หลายแบบ
ซึ่งทั้งหมดนี้ต้องไปทดสอบการเชื่อมต่อกันให้ครบ...
ผมก็เห็นโพสต์นี้แล้วกำลังจะลองเน้นสายการบินของเส้นทางที่ผมขึ้นบ่อยเหมือนกัน แต่ดูท่าว่าผมก็คงต้องลองผิดลองถูกเยอะแน่เลย 5555
ขอบคุณครับ
เป็นโปรเจกต์ที่ยอดเยี่ยมมากเลยครับ!! เสียดายที่ไม่มี Android T_T จะรอติดตาม iOS หรือหน้าเว็บอยู่นะครับ!!
เพราะเป็นเว็บแอป... จริง ๆ ก็ทำเป็นหน้าเว็บได้เหมือนกันครับ...^^
แต่ขี้เกียจดูแลเซิร์ฟเวอร์ -_-
เลยอัปโหลดไฟล์สำหรับหน้าเว็บทั้งหมดไว้ในโทรศัพท์ไปเลย
ในมุมของผู้ใช้ก็ไม่ต้องเชื่อมต่อกับเซิร์ฟเวอร์..
เลยตอบสนองได้เร็วด้วย..
พอเป็นแบบนั้น...
ก็มีข้อจำกัดด้านความปลอดภัยและปัญหาการชนกันที่เกี่ยวข้องค่อนข้างเยอะ
ตอนพัฒนาเลยลำบากพอสมควร
โดยเฉพาะโมดูลชำระเงินนั้น
ของแต่ละสายการบินแตกต่างกันมาก และยังมีระบบชำระเงินสารพัดแบบพ่วงเข้ามา
เพิ่งมารู้ก่อนเปิดตัวไม่นาน
เลยเหนื่อยกับการทดสอบมากครับ
ผมก็เคยทำครอว์เลอร์ไว้ค้นหาราคาต่ำสุดเวลาจะซื้อเป็นครั้งคราวเหมือนกัน คิดว่าน่าจะมีประโยชน์นะครับ 555
มีเรื่องที่สงสัยอยู่ครับ ใน Skyscanner มีหลายอย่างที่ไม่แสดงใช่ไหมครับ?
เว็บไซต์ค้นหาตั๋วเครื่องบินต่างประเทศอย่าง skyscanner รองรับการค้นหาแบบทั่วโลก
พูดคือ เน้นการเดินทางระหว่างประเทศให้ได้ราคาถูกที่สุด จึงไม่ค่อยเหมาะกับการใช้งานภายในประเทศนัก
สำหรับในประเทศ ผมแค่อยากทำให้สามารถดูสายการบิน วันที่ และเวลา ที่ต้องการได้ง่าย ๆ ในครั้งเดียว
นี่คือแนวทางการพัฒนาในช่วงแรกครับ...
ตอนแรกตั้งใจจะค้นหาอัตโนมัติ(?) แล้วจับคู่สายการบิน เวลา และราคาในวันที่กำหนด
เพื่อส่งการแจ้งเตือนให้ แต่ฟีเจอร์นี้ขอพับเก็บไว้ก่อน...
จึงทำให้ค้นหาได้เหมือนแอปตั๋วเครื่องบินทั่วไป กรองผลลัพธ์ได้ง่าย และไปยังเว็บไซต์ของสายการบินได้ทันที
เพื่อทำการจองครับ
คุณสร้างบริการที่ยอดเยี่ยมมากครับ
ไม่ได้ใช้ screen scraping ครับ
ไม่ได้ใช้แคช
ข้อมูลที่สายการบินส่งมายังเว็บเพจของผู้ใช้
ผมค่อย ๆ parse เองภายในทีละส่วน (-_-) แล้วดึงมาเฉพาะข้อมูลที่จำเป็น
เพื่อสร้างข้อมูลราคา...
ตอนแรกกะว่าจะทำบนเซิร์ฟเวอร์..
แต่เพราะค่าใช้จ่ายของเซิร์ฟเวอร์...
เลยจัดการทุกอย่างบน webview แทนครับ
ว้าว เจ๋งมากครับ มีแผนทำเวอร์ชัน iOS ไหมครับ?
ผมซื้อ Mac mini มาแล้วเพื่อจะทำเวอร์ชันสำหรับ iOS ครับ ^^