Geacher คืออะไร

Geacher คือเว็บไซต์ที่มีเป้าหมายที่จะรวบรวมข้อมูลเกี่ยวติวเตอร์ที่เปิดสอนพิเศษ ที่จบมาจากโรงเรียนกำเนิดวิทย์

Geacher เริ่มต้นจากอะไร

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

ติวเตอร์ แบบรอบรวมติวเตอร์ kvis 555

รวบ*

ก็เลยเป็นจุดเริ่มต้นของการสร้างเว็บไซต์เพื่อรวบรวมติวเตอร์ kvis

Drafts & Idea

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

• หน้าแรกส่วนแรก: มีปุ่มให้กดไปหน้าค้นหา
• หน้าแรกส่วนสอง: มีการ์ดเป็น stat ของแต่ละวิชา เช่น มีคนสอนกี่คน
• หน้าค้นหา: ค้นหาได้ แล้วก็จะขึ้นข้อมูลผู้สอนที่ตรงกันเป็นการ์ด
• หน้าผู้สอน: มีโปสเตอร์ ข้อมูลการติดต่อ

Drafts & Idea (cont.)

หลังจากได้น่าตาเว็บคร่าว ๆ แล้ว ผมก็มาคิดหลักการทำงานของเว็บต่อ

อย่างแรกคือระบบที่ให้แต่ละคนเพิ่มข้อมูลของตัวเองลงในเว็บ ซึ่งสุดท้ายแล้วก็มาลงเลยที่การใช้ google form และ google sheet (ตอนแรกจะใช้เป็น database แล้วก็ใช้ Google Sheet API มาดึงข้อมูล แต่ก็ไม่ได้ทำ 55555555) ซึ่งก็คิดไว้ว่าก็เดี๋ยว export Google Sheet เป็น csv แล้วก็เขียนโค๊ตสร้างเป็นข้อมูลในรูปแบบที่เราต้องการแล้วกัน

อีกอย่างคือระบบการเชื่อมข้อมูลกับตัวเว็บไซต์ ในส่วนนี้อย่างลองใช้ API route ของ next.js ดู

Getting Start: Designing

ตอนแรกผมว่าจะลองดีไซน์ลง Illustrator ก่อน แล้วค่อยทำเว็บตาม แต่พอดีไซน์ไปสักพักก็คิดว่า ทำเว็บเลยดีกว่า ค่อยคิดตอนนั้น ก็เลยเริ่มเขียนเว็บ

Coding Time

สำหรับเว็บไซต์นี้สิ่งที่ผมเลือกใช้ก็คือ Next.js + tailwind css ในการทำ โดยเริ่มจาก example template ที่เค้าได้ทำเอาไว้ แล้วก็เริ่มเลย

Fetching Data

สำหรับข้อมูลติวเตอร์ผมเริ่มจากการอ่านข้อมูลจากไฟล์ json ในฝั่ง server (next.js api) แล้วตัวเว็บก็มาขอข้อมูลจากตรงนี้อีกที ซึ่งตอนจะเอาข้อมูลมาใส่เว็บก็ได้ใช้ getServerSideProps มาใช้ในการดึงข้อมูล ส่วนหน้าของแต่ละคนก็ใช้ getStaticPaths กับ getStaticProps ของ next.js ในการ generate หน้าไว้ก่อน จะได้ใส่พวก metatags ต่าง ๆ ได้

จริง ๆ ก็จบแล้วครับ เขียนไว้เผื่อกลับมาอ่านเอง 555555555

Why this book ?

The main reason for picking “The little prince” to read is that I have heard many people recommend this book. I also heard that if you read this book when you’re young and grown-up, the perspective will be different. So, I would like to prove whether it is true or not.

Rating ⭐?

I would give this book a 9 out of 10. This book is marvelous fiction filled with hidden messages and morals.

Contents and Favorite part [Spoiler!]

The overall story is about the trip of the little prince. He had traveled to many planets. On each planet, he found a person with different characteristics. And the little prince learns a lesson from them.

The quotes above are two of the most famous quotes from the book and my favorite quotes from the book.

Should YOU read this book?

Absolutely yes! I really recommend this book.

A Full Review [Spoiler!]

— The little prince is a novel written by Antoine de Saint-Exupéry. This book was written in French. The prevalence of this book is manifested as approximately 140 million copies are sold worldwide. For the rating, this book has a 4.31/5 average rating from 1,468,810 ratings on www.goodreads.com. Therefore, this book is thought-provoking and attempting to read.

— The story starts with a childhood memory of a pilot. It is about two versions of a drawing of a boa constrictor swallowing an elephant. Then the story tells about an unfortunate event, the crash of his plane in the middle of the desert, where he met the little prince. After they’ve met each other, the story focuses on the little prince. The book begins to tell the story of the spectacular journey of the little prince on different planets.

— In my opinion, this book is a wonderful novel. I love the journey of the little prince on each planet that he has traveled. The story from each planet can be related to the real-world situation. Therefore, I recommend this book.

👉 ลองค้นหาคำไวพจน์ (thai-synonym.vercel.app) 👈

What is it?

thai-synonym.vercel.app เป็นเว็บแอพพลิเคชั่นที่ช่วยอำนวยความสะดวกในการแต่งกลอนภาษาไทยที่มักจำเป็นต้องใช้คำไวพจน์บ่อย ๆ

How does it work?

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

How to add more words/contribute?

ไปอ่านได้ที่นี่เลยย : itzmeowww/thai-synonym: Synonym browser for Thai language (github.com)

Enjoy it?

Support : https://ko-fi.com/itzmeowww

How come?

จุดเริ่มต้นของไอเดียนี้ก็คือ น่าจะเป็นช่วงโควิด กับทานาบาตะพี่นนเลยมาชวนทำ อย่างที่รู้ ๆ กันว่าวันทานาบาตะคือวันที่ 7 กรกฎาคม และใช่ครับ พี่นนมาชวนให้ทำวันที่ 6 กรกฎาคมช่วงเย็น และก็ทำเสร็จประมาณช่วงหลังเที่ยงคืน (จำเวลาเป๊ะ ๆ ไม่ได้) ของวันที่ 7 กรกฎาคมนั่นเอง!

How to make a wish?

ปกติแล้วเราจะทำการอธิษฐานโดยการเขียนข้อความบนกระดาษสี แล้วเอาไปติดบนต้นไผ ่แต่สำหรับ website ของเรานั้นแล้ว เราจะทำการกรอกฟอร์ม ตามรูปด้านล่าง

แล้วพอเรากด Make a wish คำอธิษฐานของเราก็จะอยู่บนต้นไม้

How to view the wish?

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

How does it work?

อันนี้เขียนจาก html , JavaScript, CSS ธรรมดาเป็นแบบเว็บไซต์เฉย ๆ เลย ไม่ได้ใช้พวก React หรืออะไรพวกนั้น เพราะตอนนั้นยังไม่รู้จัก 5555

แล้วก็ framework ที่เอามาใช้ก็จะเป็น jQuery ที่ใช้ในการอำนวยความสะดวก กับ Google Firebase ที่ใช้ในการเก็บข้อมูล!

หลักการทำงานก็คือ พอมีคนเขียนคำอธิษฐาน ข้อมูลก็จะเก็บไว้ที่ Google Firebase แล้วพอกดที่ต้นไผ่ ก็จะทำการอ่านข้อมูลจาก Google Firebase จบปิ๊ง!

How can I visit?

ถ้าอยากลองเข้าไปดู กดได้จากลิงก์ด้านล่างเลย !
Make a wish on Tanabata day (itzmeowww.me)

HNY 2021!

วันนี้ก็ขอลาเพียงเท่านี้นะครับ หวังว่าจะได้พบกันเร็ว ๆ นี้ ✨

Menu Memo เป็นไลน์บอทที่สามารถถามเมนูอาหารในแต่ละวันได้

Functions

สำหรับเจ้า Menu Memo เราก็มี 4 ฟังชั่นหลัก ๆ คือ

1. Hungry : Menu Memo จะบอกรายการอาหารในมื้อถัดไป
2. Menu : Menu Memo จะบอกรายการอาหารในวันนี้
3. Week : Menu Memo จะบอกรายการอาหารถัดไปในอีก 7 วัน
4. Help : บอกฟังชั่นทั้งหมดที่มี

Materials

สิ่งที่ใช้ในการสร้างเจ้าไลน์บอทนี้ก็มี

1. Google Sheets : เป็น database ของเมนูอาหารที่โรงเรียนทำไว้อยู่แล้ว
2. LINE : ใช้สร้างเจ้าบอทนี่แหละ
3. Heroku : ใช้เป็นตัว server เหมือนสมองของบอท คอยอ่านเมนูจาก Google Sheets

How does it work?

หลายคนอาจจะสงสัยว่า เจ้า Menu Memo ทำงานยังไง เดี๋ยวจะอธิบายง่าย ๆ ให้ฟังนะครับ

การทำงานก็จะประกอบไปด้วย 3 ส่วน ก็คือ 1. Google Sheets 2. Line 3. Heroku

ถ้าจะอธิบายง่าย ๆ คือ เจ้าตัว Heroku (สีม่วง ๆ) จะไปอ่านข้อมูลรายการอาหารจาก Google Sheets มาเก็บไว้ แล้วพอมีข้อความส่งมาให้บอท LINE จะส่งข้อความมายัง Heroku ซึ่งทำหน้าที่เป็น server หรือ สมอง ของบอทนั่นเอง หลังจากนั้น Heroku จะทำงานตามคำขอ เช่น หาเมนูอาหารในวันนี้ แล้วทำการส่งเมนูกลับไปที่ LINE

FAQ

ใช้ภาษาอะไรเขียน ?

ใช้ JavaScript เขียนครับ

ใช้อะไรเปิด server?

ใช้ node.js ครับบ

อ่านข้อมูลจาก Google Sheets ยังไง?

Google Sheets มันมีตัว API ให้ เราสามารถส่งคำขอไป แล้วมันจะส่งข้อมูลกลับมาให้เราเลยครับ

ส่งข้อความใน LINE แบบนั้นยังไง?

ใช้ flex message ครับ

FYI

อันนี้เป็น fact เกี่ยวกับ Menu Memo

ชื่อ Menu Memo มาจากไหน?

ชื่อ Menu Memo เพื่อนบัวเป็นคนคิดให้ แต่ก่อนจะได้ชื่อนี้ ก็มีคนมาแนะนำหลายชื่อ เช่น Menu Mood Mood (ซึ่งก็ไม่เข้าใจความหมายเหมือนกัน 55555)

รูปโปรไฟล์มาจากไหน?

ในส่วนของรูปโปรไฟล์ ก็ได้เพื่อนมี่มาช่วยวาดให้ ขอบคุณมากเลยครับบ 🙏

Features จะมีอะไรบ้าง ?

web app ของเนี่ยเราจะใช้ html, javascript, css แล้วใช้ Google Firebase เป็นฐานข้อมูลเพื่อความง่าย !

web app ของเราจะมี 2 พาร์ท
1. ขอคำใบ้ : เริ่มแรกให้ user login ด้วยเมลล์ (ในโปรเจกต์นี้ให้ user ใช้เฉพาะเมลล์องค์กร เพื่อกันการ spam) เสร็จแล้วเนี่ย ก็ดูว่า user ได้รับคำใบ้ไปหรือยัง ถ้ายังก็สุ่มคำใบ้ให้ใหม่
2. แก้ไขคำใบ้ : ให้เฉพาะ admin แก้ไขคำใบ้

ใช้อะไรเก็บข้อมูลบ้าง ?

ข้อมูลที่จะเก็บก็จะมี 2 ส่วน คือ
1. ข้อมูล user [เก็บคำใบ้, สถานะการได้รับคำใบ้, ชื่อสายรหัส] จะใช้ Realtime Database เก็บ

2. ข้อมูลคำใบ้ [ชื่อสายรหัส,คำใบ้,สถานะการถูกเลือก] จะใช้ Firestore เก็บ

Host website ยังไง ?

เราจะใช้ github page ในการ hosting ครับ สะดวกดี

โปรเจ็คหน้าตายังไง ?

ไป code ดูได้ที่นี่เลยย

ปล. อาจจะเขียนงงๆ หน่อย ถ้าสงสัยอะไรทักมาได้เลยนะะ