พบ mind map แนะนำสิ่งที่ web developer ควรทราบ

web development
web development

พบ mind map แนะนำสิ่งที่ web developer ควรทราบ
แชร์ลิงค์มาผ่าน FB Page “Thai programmer โปรแกรมเมอร์ไทย
https://www.facebook.com/programmerthai/photos/a.1406027003020480.1073741827.1392939564329224/1799531400336703/
แล้วพบแฟ้ม PDF ที่
https://coggle-downloads.s3.amazonaws.com/ffa893c87f6ae8a35b7343568a270942b6d1d5ffbc62301829fe2ad4dbed19e7/Web_Development.pdf
https://coggle-downloads.s3.amazonaws.com/49e5776e17045b4615af8ab87e75f5ae305779093dd574ee2044e6035316dc75/How_to_be_a_good_frontend_programmer.pdf
หรือเป็นภาพที่
ถ้าอยากเซฟเป็นไฟล์รูป png ก็ตามลิงค์ มีสองรูป
https://coggle-downloads.s3.amazonaws.com/ffa893c87f6ae8a35b7343568a270942b6d1d5ffbc62301829fe2ad4dbed19e7/Web_Development.png
https://coggle-downloads.s3.amazonaws.com/49e5776e17045b4615af8ab87e75f5ae305779093dd574ee2044e6035316dc75/How_to_be_a_good_frontend_programmer.png
ที่มา คือ https://coggle.it
ซึ่งเว็บไซต์นี้บริการเครื่องมือเขียน mind map ที่สวยงาม
แล้วผมนำไป repost
ที่ https://www.facebook.com/groups/thaiebook/734319726718848/
จากภาพ

ตรงกลาง คือ คำว่า web development
แตกเป็น 3 เส้น
1. No Matter Which Route You Take
2. Basic Front End
3. Back End

 

No Matter Which Route You Take
No Matter Which Route You Take
back end data
back end data
back end languages
back end languages
back end server management
back end server management
basic front end
basic front end
front end developer
front end developer

ได้ศัพท์จากข้อสอบอังกฤษระดับอุดมศึกษามาแปลงเป็นข้อสอบออนไลน์

ผลการทำข้อสอบ ถ้าถูกหมด
ผลการทำข้อสอบ ถ้าถูกหมด

เล่าเรื่องต่อยอดงานเดิม
เมื่อวาน (10 ธ.ค.59) แชร์ศัพท์ 200 คำ ไว้ใน blog
เพื่อให้นักศึกษาได้อ่าน ได้ท่อง เตรียมพร้อม
ก่อนการสอบ English Proficiency ในเทอมต่อไป
เพราะเชื่อว่าการเตรียมพร้อมด้วยเอกสารที่ตรง
จะทำให้การวัดผลที่เตรียมพร้อมมาตรงเป้า
จะทำให้บรรลุเป้าหมายได้เร็ว และมีพลัง
http://thainame.net/edu/?p=4259

ข้อสอบชุดที่ 12
ข้อสอบชุดที่ 12

การท่องศัพท์ก็ต้องมีการประเมินว่าท่องได้กี่ตัว
วันนี้ (11 ธ.ค.59) นำคำศัพท์มาแปรรูป (Transform)
เป็นข้อสอบ 4 ตัวเลือกแบบจับคู่ จำนวน 400 ข้อ
โดนใช้ code เก่าใน http://www.thaiall.com/quiz
แล้วเพิ่มเป็นชุดที่ 12 จึงอยู่ในหัวข้อ 3.12
ชื่อชุดข้อสอบว่า “ศัพท์อุดมศึกษาอย่างง่าย”

 

แล้วถือโอกาสปรับ /quiz
ให้เป็นแบบ responsive web design
ตามแนวโน้มชาวโลกที่จะใช้ mobile กันมากขึ้น

เคยอ่านเรื่องที่ ดร.อานนท์ พูดถึงวิทยาการคอมพิวเตอร์แล้วโดนใจ

dotcom expired
dotcom expired
ดร.อานนท์ ศักดิ์วรวิชญ์ สาขาวิชา Business Analytics and Intelligence สาขาวิชาวิทยาการประกันภัยและการบริหารความเสี่ยง คณะสถิติประยุกต์ สถาบันบัณฑิตพัฒนบริหารศาสตร์
ดร.อานนท์ ศักดิ์วรวิชญ์
สาขาวิชา Business Analytics and Intelligence
สาขาวิชาวิทยาการประกันภัยและการบริหารความเสี่ยง
คณะสถิติประยุกต์ สถาบันบัณฑิตพัฒนบริหารศาสตร์

อ่านบทความเรื่อง “มหาวิทยาลัยไทยจะอยู่รอดได้หรือไม่
ที่ ดร.อานนท์ ศักดิ์วรวิชญ์ เขียนใน manager online
แล้วหัวหน้าของผมก็แชร์ให้อ่านในกลุ่มไลน์
เนื้อหาพูดถึงปัญหามหาวิทยาลัยกับอัตราการเกิดที่ลดลง
แต่มีประเด็นหนึ่งที่โดนใจจี๊ด ๆ
พบในส่วนของ “สาเหตุที่อุดมศึกษาไทยถึงทางตีบตัน
ในประการที่สอง ท่านขึ้นย่อหน้าว่า
ปัญหาใหญ่ที่สุด” เนื้อหาตอนหนึ่งชี้ว่ามีบัณฑิตไทยบางสาขาตกงานมากมาย
เช่น ด้านวิทยาการคอมพิวเตอร์ (Computer science)
ที่เปิดสอนแทบทุกสถาบัน แต่บริษัทหาคนทำงานด้านคอมพิวเตอร์
ได้ยากมาก เพราะไม่สามารถเขียนโปรแกรมคอมพิวตอร์ที่ใช้งานได้จริง
ท่านสรุปไว้ง่ายเลย คือ “เรามีปริมาณมากแต่มีคุณภาพไม่เพียงพอ

จึงเป็นที่มาของการสะท้อนคิดให้ตัวผมเอง
คิดว่า ผมสอนหนังสือนักศึกษามาหลายปี
สอนอะไรไปบ้างนะ แล้วเค้าทำอะไรเป็น และไม่เป็นอะไรบ้างนะ
http://www.manager.co.th/Daily/ViewNews.aspx?NewsID=9590000051896

การเรียนด้านคอมพิวเตอร์ไม่ได้มีเฉพาะวิทยาการคอมพิวเตอร์
และทุกสาขาถูกสังคม หรือผู้ประกอบการคาดหวังว่าต้องเขียนโปรแกรมได้
และโปรแกรมก็มีภาษาให้เลือกมากมาย
ภาษาที่ง่ายที่สุดภาษาหนึ่งคือ HTML และการเขียนได้จริง
มักต้องมีเวทีโชว์ของ โชว์พาวล์ หรือโชว์อะไรที่มีอยู่นั่นหละ
กว่า 20 ปีแล้ว
ที่จะเล่าให้นักศึกษาฟังว่าจดโดเมนไม่ยาก
มีตังไม่กี่ร้อยต่อปีก็เป็นเจ้าของได้ นี่ก็ได้รับมอบหมายจากหัวหน้า
ให้พูดเรื่องการเป็นเว็บมาสเตอร์ให้นักศึกษาฟัง
หัวข้อที่จะไปเร้าใจนักศึกษาก็คงหนีไม่พ้น
เรื่อง Domain name กับ Web hosting
ที่เป็นของจริง เพียงแต่ต้องลงทุน และมีอะไรอีกนิดหน่อย
เรื่องของ ดร.อานนท์ ได้ repost บทความ
ไว้ในเว็บเพจที่จะสอนนักศึกษา ก็หวังจะให้เขาเข้าใจ และฮึกเหิมขึ้นมา
http://www.thaiall.com/webmaster/responsive/index.html

สิ่งที่นักศึกษาต้องมีก่อนจดโดเมนมี 6 ข้อ
แต่ไม่ต้องครบก็ได้นะครับ เป็นเพียงข้อเสนอ
ได้เล่าสู่กันฟังไว้ที่ http://www.thaiall.com/article/dotcom.htm

1. เงิน(Money)
2. วิธีการ(Method)
3. เวลา(Time)
4. รีบศึกษา(Hurry)
5. ความตั้งใจ(Attention)
6. จินตนาการ(Imagination)
M.M.T.H.A.I

แล้ว webpage หน้านี้ก็ปรับเป็น Responsive Web Design แล้ว
แล้วนักศึกษาด้านคอมพิวเตอร์ทุกคน
ก็คงต้องรู้จัก CSS ไม่มากก็น้อย แต่ถ้าบอกว่าไม่รู้จักเลย
ก็คาดได้ว่าไม่คิดจะทำงานด้านเว็บโปรแกรมมิ่งเป็นแน่

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

นักศึกษาด้านไอทีอย่างน้อยต้องทำ responsive เป็น

นักศึกษาด้านไอทีอย่างน้อยต้องทำ responsive เป็น

เว็บมาสเตอร์
เว็บมาสเตอร์

ถือว่าเป็นสิ่งจำเป็น
ที่นักศึกษาต้องรู้ว่าตัวเองเป็นใคร
Who am i?
เพราะไม่ใช่นักเรียนที่จะไปเข้า #ค่ายค้นหาตัวตน
แล้วหาว่า ตนเหมาะกับอาชีพใด
ถ้าเป็นนักศึกษาก็แสดงว่าเลือกแล้ว
ไม่ใช่กำลังจะเลือก
ตอนนี้มาได้ครึ่งทางแล้วที่จะไปสู่อาชีพที่คาดหวัง
ทุกหลักสูตรมีวิชามากมายต้องเรียนเชื่อมต่อกันเป็น jigsaw
กว่าจะได้ภาพสวยผืนใหญ่ ใส่กรอบ โชว์
ก็ใช้เวลาหลายปี ระหว่างทางต้องทบทวนเป็นระยะ
ว่าทำอะไร เรียนอะไร รู้อะไรไปแล้วบ้าง
หัวข้อต้องรู้มีมากมาย
แต่อย่างน้อยต้องรู้ว่าเรา ทำอะไรเป็นบ้าง
ในสายไอทีก็มีเรื่องเว็บเพจ (webpage)
โดยสิ่งที่ควรรู้ คือ Responsive web design
เพราะแนวโน้มชาวโลกจะขยับไปหา mobile device
ดังนั้นหัวข้ออบรมความรู้เบื้องต้น
เสนอว่าให้นักศึกษาเขียนเว็บเพจด้วย html
จำนวน 3 หน้า ตัวตน ผลงาน และตนเอง
คือ index.html project.htm aboutme.htm
แต่แสดงผลได้ในอุปกรณ์ขนาดต่าง ๆ ได้เหมาะสม

 

ฝากไว้กับ firebase.com หรือ wordpress หรือ facebook ก็ได้

เกี่ยวกับเรา
เกี่ยวกับเรา

http://www.thaiall.com/webmaster/responsive

โครงการ (project)
โครงการ (project)
หน้าแรก (index) เป็นสารบัญ ดัชนี หรือบทนำ
ที่ฉายภาพรวมความเป็นตัวเรา
แต่ไม่ลึกเท่าโปรเจค หรือเกี่ยวกับเรา
หน้าแรกของนักศึกษาน่าจะมีเนื้อหา
ที่มุ่งขายตัวเรา ตัวอย่างหัวข้อดังนี้
- คนต้นแบบมืออาชีพที่ประทับใจ
- กลุ่มที่สนใจที่เราติดตามประจำ
- บทความ ประเด็น หรือข่าวสำคัญ
- เว็บไซต์ที่แนะนำ
- รายการผลงานเด่นที่สะท้อน skill
- ข้อมูลการติดต่อ หรือ อวตารของเรา

 

หน้าโครงการ หรือโปรเจค (Project)
เป็นการขายตัวเรา (ถ้ามี linkin จะดีมาก)
ที่ผ่านมาสวมบท "นักศึกษา" แล้วทำอะไรไปบ้าง
มีงานอะไรที่เราทำส่งอาจารย์แล้วประทับใจ
เทอมหนึ่งเรียน 6 วิชา ๆ ละ 1 งานก็ปีละ 12 งาน
เลือกนำมาแบ่งปัน เพราะนั่นสะท้อนให้เห็น skill 
เว็บเพจหน้านี้จะบ่งบอกอัตลักษณ์ของเรา
ผลงานต้องเป็นที่ประจักษ์ อยู่ในความทรงจำไม่ได้
แนะนำว่าผลงานทุกชิ้นให้เขียนเป็นบล็อก
จะทำเอง ร่วมกัน หรือฟังเขามาก็เขียนบล็อกได้
แต่ถ้านักศึกษาไอทีจะต้องมีโฮมเพจเป็นของตนเอง
แล้วเชื่อมทุกอย่างเข้ากับ social media + blog
เนื้อหาในหน้านี้ มีรายละเอียดผลงานที่ครบถ้วน
มีที่มา เนื้อหา สรุป และลิงค์ดาวน์โหลดจะดีมาก
ทั้งหมดในหน้านี้ก็จะสะท้อน skill เพื่อขายตัวเรา

 

หน้าเกี่ยวกับเรา (About me)
ความเป็นส่วนตัวสำคัญมาก 
แต่การอยู่ในสังคมก็ต้องลดความเป็นส่วนตัวลงบ้าง 
และไม่เปิดเผยอะไรที่ไม่มีวัตถุประสงค์ที่ชัดเจน 
เราต้องเป็นนักประชาสัมพันธ์ตนเองอย่างมีเป้าหมาย
นักศึกษาต้องบอกว่าตนเอง
มี skill อะไร
มี project อะไรผ่านมือมาบ้าง
มี avatar ให้ว่าที่นายจ้างไปติดตามที่ไหน
มี experience กับอะไรที่เป็นงานอดิเรก 
มี interested กับอะไรที่เป็นแผนในอนาคต
แต่ถ้าทำงานในองค์กรเมื่อใด ระดับความเป็นส่วนตัว
จะแปรผันตามนโยบายขององค์กรทันที

15 ข้อผิดพลาดที่พบได้ใน UI Website จึงต้องระวัง

ui webpage
ui webpage

Julia Blake เขียนเมื่อ 13 พฤษภาคม 2015
เรื่อง 15 Worst UI Design Features to Watch Out For and Overcome
1. มีปุ่ม Reset อยู่ติดปุ่ม Submit ทำให้กดพลาดได้
2. มีปุ่ม Cancel อยู่ติดปุ่ม Back สำหรับกรอกหลายหน้า ทำให้กดพลาดได้
3. มีปุ่ม X ทำให้เข้าใจผิดว่า ปิดอะไร ซึ่งไม่ชัดเจน สื่อสารผิดพลาดได้
4. มีหน้า Chat เด้งขึ้นมาคุยกับเรา เมื่อเปิดเว็บไซต์ คงไม่ดีแน่
5. มี *** ขณะพิมพ์รหัสผ่าน ทำให้สับสน เพราะมองไม่เห็น
6. สไลด์ภาพอัตโนมัติ เป็นการบังคับให้ต้องดูข้อมูล
7. การเลื่อนข้อมูลให้เลือกแบบ Carousel เหมือนกงล้อ เห็นแล้วเชย
8. เมนูแบบตกลง ไม่เหมาะกับข้อมูลปริมาณมาก
9. ป้ายแบบทับข้อมูลตามมุม น่ารำคาญ
10. ถ้าคลิ๊กโลโก้ก็ต้องกลับไปหน้าแรก อย่าลืม
11. แถบนำทางขนาดใหญ่บนจอภาพ ใช้งานยาก
12. ให้เลือกว่าจะใช้ mouse หรือ keyboard เลื่อนข้อมูล
13. อย่าใช้สีฉูดฉาด
https://alison.com/courses/Colour-Theory-for-Artists-and-Designers
http://www.sessions.edu/certificate-programs/course-color-theory
14. ตัวอักษรเล็กเกินไป
15. ใช้ Captcha ตรวจสอบว่าเป็นมนุษย์หรือไม่
https://idxw.net/2015/05/27/15-%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A-ui-webs/
http://www.onextrapixel.com/2015/05/13/15-worst-ui-design-features-to-watch-out-for-and-overcome/

การติดตาม monitor โฮมเพจหรือเว็บไซต์ได้เช่นเดียวกับคน

website-analysis
ประเมินเว็บไซต์
http://www.check-domains.com/website-analysis/website-analyzer.php

ตัวเราเองก็มักจะประเมินตนเอง หรือมีคนประเมินตัวเราเสมอ
เช่น ได้เกรดอะไร น้ำหนัก ความดัน เบาหวาน
หรือผลสอบแข่งขันต่าง ๆ ว่ามีประสิทธิภาพหรือไม่
http://www.thaiall.com/webmaster/
การทำเว็บไซต์ก็เช่นกัน สามารถติดตามประสิทธิภาพของเว็บไซต์
ได้หลายประเด็น
1. พฤติกรรมการเข้าเว็บไซต์ บริการจากภายนอก
เช่น http://truehits.net/stat.php?login=thaiall
หรือ https://www.stats.in.th/?cmd=stats&sid=47&list=m&y=2016
หรือ https://www.google.com/analytics/

2. พฤติกรรมการเข้าเว็บไซต์ ติดตั้งไว้ภายในเครื่อง
– รวมสคริ๊ปสำหรับนำไปติดตั้ง
http://www.hotscripts.com/category/scripts/php/scripts-programs/web-traffic-analysis/
– วัด web application
http://oracle-java.blogspot.com/2007/08/web-application-jmeter.html
– ภายในเครื่องบริการเว็บก็มี access.log หรือ error.log ที่นำมาวิเคราะห์ได้

3. ประเมินเว็บไซต์ หรือเว็บเพจ
มีหลายมุมให้พิจารณา
http://www.check-domains.com/website-analysis/website-analyzer.php
http://validator.w3.org/check/referer
http://jigsaw.w3.org/css-validator/check/referer
https://developers.google.com/speed/pagespeed/insights/

4. Browser
กด Ctrl-Shift-I มีบริการ Inspector เว็บเพจได้
ว่ารองรับ responsive web design กับอุปกรณ์ต่าง ๆ หรือไม่

5. บริการเสริม
เช่น facebook.com ก็จะมียอด like ยอดแชร์
สามารถ plugin เข้ามาใน webpage ได้
หรือ youtube.com ก็จะมี plugin เช่นกัน
หรือ 4share.com หรือ box.com ก็แชร์แฟ้มให้ดาวน์โหลดได้

บทความที่ esarn.com น่าสนใจ
http://www.esarn.com/%E0%B8%A7%E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B2%E0%B8%B0%E0%B8%AB%E0%B9%8C%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C/
เรื่อง ทำไมต้องวิเคราะห์เว็บไซต์ มี 4 วัตถุประสงค์
1. เพื่อศึกษาพฤติกรรมการใช้งานบนเว็บไซต์ของคุณ
2. เพื่อนำมาต่อยอดในการวางแผนทางการตลาดให้กับธุรกิจ
3. เพื่อวางแผนการใช้งานคนและงบประมาณ
4. เพื่อเป็นข้อมูลในการปรับปรุงแก้ไขเว็บไซต์ของเรา

ปรับความสูงของ site-header หรือระยะห่างต่าง ๆ ใน wordpress

style css
style css

แฟ้ม style.css ของ Theme: Twenty sixteen
ใน wordpress มีกำหนดไว้เยอะมาก
ตัวหนึ่งที่ใช้กำหนดความสูงของ header คือ site-header

inspector chrome
inspector chrome

การกำหนดให้ padding: เป็น 0em และ 0%
ทำให้ส่วนของ header มีขนาดเล็กลง
ไม่ต้องมีขอบกินพื้นที่ของเนื้อหา

inspector firefox
inspector firefox

การตามแก้ไข css ใช้ inspector ของ browser
ทั้ง firefox และ chrome ช่วย developer ได้มาก
หาตำแหน่งได้ง่ายขึ้นมาก โดยกด ctrl-shift-i
จากนั้นคลิ๊ก inspector
เมื่อทราบว่าตำแหน่งใดที่กำหนด css ผ่านตัวใด ก็เข้าแก้ไขได้
เช่น

ลดขนาด margin-top หรือ padding เป็น 0em เป็นต้น
ลดขนาด margin top กับ left ของ site เหลือ 2px
ลดขนาด padding ของ site-content
จาก padding: 0 4.5455%; เป็น padding: 0 1%;
เพิ่มขนาด width: 71.42857144%; เป็น 80%
ของ body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content
ลดขนาด width: 21.42857143%; เป็น 10%
ของ body:not(.search-results) article:not(.type-page) .entry-footer

ปรับแฟ้ม header.php ของ Theme: Twenty sixteen ใน wordpress

 

wp banner in header
wp banner in header

20 พ.ย.59 วันนี้เห็นว่าภาพ Banner ใน Header ของ Blog
ได้สุ่มภาพขึ้นมาแสดง ผ่านคุณสมบัติของ Theme
พบว่า คลิ๊กแล้วอยู่ที่หน้าเดิม คือ http://www.thaiall.com/blog
จึงคิดว่าน่าจะคลิ๊กแล้ว พาออกไปข้างนอก Blog ปัจจุบัน
นั่งคิดแป๊ปนึง ก็คิดได้ว่าที่ http://www.thaiall.com/km
มีเนื้อหาเกี่ยวกับ “การจัดการความรู้”
แล้ว Blog เองก็เป็นเครื่องมือหนึ่งสำหรับการจัดการความรู้ที่ดีมาก

ขั้นตอนการแก้ไขแฟ้ม header.php
1. เปิดแฟ้ม header.php
2. มองหาบรรทัดที่ 276 แบบด้านล่างนี้
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”>
เปลี่ยนเป็น
<a href=”http://www.thaiall.com/km” rel=”home”>
3. ทดสอบ view ดูหน้า blog ว่าคลิ๊กแล้ว
ไปหน้า KM (Knowledge Management) หรือไม่

อีกเหตุผลหนึ่ง ที่ลิงค์จาก Banner ใน Blog
ไปยัง KM Page คือ ยอด Pageview ของหน้า KM
ติด TOP ในเว็บเพจทั้งหมดของเว็บไซต์ thaiall.com
ใจจริงแล้วอยากลิงค์ไปยัง http://www.thaiall.com/handbill
เพราะมีเนื้อหาของ Handbill เรื่องภาพยนตร์ ที่สอดคล้องกับ Banner
อาจต้องใช้เวลาปรับเว็บไปอีกระยะหนึ่ง เพื่อปลุก Handbill ขึ้นมา
ถึงจะพาจาก Movie Banner ใน Blog ไปยังหน้า Handbill ได้

ใคร ๆ ก็มี พอสมัคร firebase เสร็จ ก็สร้าง project กันเลย

 

ใคร ๆ ก็ใช้ firebase เป็น webserver ของตนเอง
แต่การเริ่มต้นทำได้ด้วยการสร้าง project
เรามาเริ่มต้นสร้าง project กันเถอะ

01 firebase
01 firebase

ขั้นตอน
1. เริ่มต้นสมัคร gmail.com ก็จะได้บัญชี google.com
แล้วเข้า firebase.com จะพบหน้า “ยินดีต้อนรับกลับสู่ Firebase”
เห็นข้อความนี้เพราะเข้าไปหลายรอบแล้ว

02 project
02 project

2. ถ้ายังไม่มี project หรือโครงการ
จะพบปุ่ม “สร้างโครงการใหม่”
ระบุชื่อโครงการ “myproject1”
ระบุประเทศ “ไทย”

 

03 hosting
03 hosting

3. พบหน้า project สามารถเลือกได้
ว่าจะ
เพิ่ม Firebase ไปยังแอป iOS ของคุณ
เพิ่ม Firebase ไปยังแอป Android ของคุณ
เพิ่ม Firebase ไปยังแอปของคุณ
ถ้ายังไม่ถนัดการเขียนแอป ก็ยังไม่ต้องคลิ๊กเข้าไป “เพิ่ม”
จึงแนะนำให้ไปฝึกใช้ Storage กันก่อน
เพราะส่งแฟ้มเข้าไปแล้ว
สามารถแชร์เว็บเพจออกมาได้เลย
แต่เป็น .htm หรือแฟ้มมัลติมีเดียร์ที่ไม่ลิงค์กันนะครับ

04 node.js
04 node.js

4. คลิ๊ก “hosting” เพื่อการสร้างเว็บโฮสติ้งเผยแพร่เรื่องราว
คลิ๊ก “เริ่มต้น”
จะพบคำแนะนำให้ใช้ $ npm install -g firebase-tools
จะทำได้ต้องติดตั้ง Node.js ในเครื่องก่อน
โดยเข้า https://nodejs.org/en
download รุ่น V6.9.1 LTS เมื่อ 19 พ.ย.59
ได้แฟ้ม node-v6.9.1-x86.msi ขนาด 10.9 MB
จากนั้นก็คลิ๊กติดตั้งให้เรียบร้อย เพื่อใช้ Node.js

5. รายละเอียดอีกเยอะ
อ่านเพิ่มเติมที่ http://www.thaiall.com/blog/burin/7733/
ผลการใช้งาน ได้เว็บนางสาวแกรด์ 76 จังหวัด
ที่ https://missgrand2016th.firebaseapp.com