Showing posts with label npm. Show all posts

Saturday, January 16, 2021

แนะนำ 15 ไลบรารี ของ React ที่น่าใช้ในปี 2020

1. สร้าง QRCode แบบง่าย ๆ ลองตัวนี้

.
2. สร้าง rich text editor ง่าย ๆ ด้วย React Quill
▸ https://zenoamaro.github.io/react-quill

.
3. ครอบตัดรูปภาพด้วย React Image Crop
▸ https://github.com/DominicTobias/react-image-crop

.
4. drag and drop รูปภาพ เพื่อเตรียมอัปโหลดด้วย react-dropzone
▸ https://react-dropzone.js.org/

.
5. สร้างปฏิทินกิจกรรม หรือ events calendar ด้วย react-big-calendar
▸ https://github.com/jquense/react-big-calendar

.
6. จัดการข้อมูลรูปแบบตารางสวยๆ ด้วย react-bootstrap-table2 (สำหรับคนใช้ Bootstrap)
▸ https://react-bootstrap-table.github.io/react-bootstrap-tab…

.
7. Datepicker ไว้สำหรับ input ข้อมูลแบบปฏิทิน
▸ https://github.com/Hacker0x01/react-datepicker

.
8. ทำ notification สวยๆ ปรับได้หลายแบบ ด้วย React-Toastify
▸ https://github.com/fkhadra/react-toastify

.
9. สร้าง Chart สวยๆ ด้วย Recharts
▸ https://github.com/recharts/recharts

.
10. พรีวิว pdf ด้วย React PDF viewer
▸ https://github.com/phuoc-ng/react-pdf-viewer

.
11. custom ส่วน head ของ html ง่ายๆ ด้วย React Helmet
▸ https://github.com/nfl/react-helmet

.
12. ตัวนี้สำหรับทำ drag and drop รายการต่างๆ
▸ https://github.com/atlassian/react-beautiful-dnd

.
13. ทำ input mask ด้วย React IMask Plugin
▸ https://github.com/…/imask…/tree/master/packages/react-imask

.
14. สำหรับคนที่ใช้ Redux สามารถจัดเก็บข้อมูลแบบ persist ได้ง่ายๆ เช่น localStorage เป็นต้น ด้วย Redux Persist (ไม่ต้องเขียน set, get เอง)
▸ https://github.com/rt2zz/redux-persist

.
15. สร้างตัวอย่างรอโหลดสวยๆ ด้วย react-loading-skeleton
▸ https://github.com/dvtng/react-loading-skeleton

source : https://codingthailand.com/blog/%e0%b9%81%e0%b8%99%e0%b8%b0%e0%b8%99%e0%b8%b3-15-%e0%b9%84%e0%b8%a5%e0%b8%9a%e0%b8%a3%e0%b8%b2%e0%b8%a3%e0%b8%b5-%e0%b8%82%e0%b8%ad%e0%b8%87-react-%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b8%99%e0%b9%88/

สรุป 14 คำสั่ง NPM ที่ใช้บ่อย สำหรับสาย Node.js

npm

• npm init
เริ่มต้นใช้งาน และช่วยให้เราสร้าง และใส่รายละเอียดเกี่ยวกับโปรเจคของเรา (package.json)

• npm install module_name
ติดตั้ง module

• npm install -g module_name
ติดตั้ง module ในระดับ global

• npm install module_name –save
ติดตั้ง module และเพิ่มมันเข้าไปในไฟล์ package.json (ข้างใน dependencies)

• npm install module_name –save-dev
เหมือนกันกับข้างบน ติดตั้ง module และเพิ่มมันเข้าไปในไฟล์ package.json (ข้างใน dependencies) และบอกว่าจะนำมาช่วยในส่วนของนักพัฒนา

• npm list
แสดงรายการ modules ทั้งหมดที่ติดตั้งไปแล้วในโปรเจคของเรา

• npm list -g
แสดงรายการ modules ระดับ global ทั้งหมดที่ถูกติดตั้งบน OS ของเรา

• npm remove module_name
uninstall module ออกจากโปรเจคของเรา

• npm remove -g module_name
uninstall module ระดับ global

• npm remove module_name –save
uninstall module ออกจากโปรเจคของเรา พร้อมทั้งนำออกจาก attribute dependencies ด้วย (ในไฟล์ package.json)

• npm remove module_name –save-dev
เหมือนกันกับด้านบน uninstall module ออกจากโปรเจคของเรา พร้อมทั้งนำออกจาก attribute dependencies ด้วย (ในไฟล์ package.json)

• npm update module_name
update เวอร์ชัน module ให้ใหม่ล่าสุด

• npm update -g module_name
update เวอร์ชัน module ให้ใหม่ล่าสุด ในระดับ global

• npm -v
แสดงเวอร์ชันปัจจุบันของ npm

ป.ล. module_name คือ ชื่อ module/library ที่เราต้องการติดตั้งครับ

source : https://codingthailand.com/blog/%e0%b8%aa%e0%b8%a3%e0%b8%b8%e0%b8%9b-14-%e0%b8%84%e0%b8%b3%e0%b8%aa%e0%b8%b1%e0%b9%88%e0%b8%87-npm-%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%9a%e0%b9%88%e0%b8%ad%e0%b8%a2/

แนะนำ Sails.js MVC Framework สำหรับ Node.js

แนะนำ Sails.js MVC Framework สำหรับ Node.js ที่ครบเครื่อง ใช้งานง่าย และมี features ครบถ้วน ครับ

จุดเด่น
1. เหมาะสำหรับทำ RESTful APIs มาก เพราะมีตัว genereate โค้ดอัตโนมัติภายในบรรทัดเดียว!
2. เหมาะสำหรับงานแบบ Realtime โค้ดที่ใช้เขียนง่าย และสั้นมาก! (เขียนครอบ socket.io อีกที)
3. มี ORM ให้ใช้ สามารถติดต่อฐานข้อมูลได้หลายตัว เช่น MySQL, PostgreSQL, MongoDB, SQLite3, Redis เป็นต้น (ใช้ Waterline ORM)

————————
เว็บไซต์
http://sailsjs.org/

https://goo.gl/2Krndf

สอนใช้งานบน Youtube
https://goo.gl/OwtRIR

โค้ดตัวอย่าง
https://github.com/sails101

ใครที่เคยเขียนแนว MVC อยู่แล้วคงจะชอบมาก ลองใช้ดูได้ครับ

Source : https://codingthailand.com/blog/%e0%b9%81%e0%b8%99%e0%b8%b0%e0%b8%99%e0%b8%b3-sails-js-mvc-framework-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-node-js/

สร้าง RESTful API แบบไม่ต้องเขียนโค้ดเลยสักบรรทัด

เห็นเฟรมเวิร์คตัวนี้ผ่านตามาสักพัก ก็เพิ่งเคยได้ลอง แล้วพบว่า เออเฟรมเวิร์กดี ชีวิตดีจริง ๆ สำหรับใครที่เคยปวดหัวกับการสร้าง RESTful API บทความนี้จะช่วยให้ท่านเสียเวลากับมันน้อยลง (รึเปล่า 55)

รู้จักกับ Sails.js

Sails.js มีคอนเซปต์มาจาก Rails (หากเขียน Rails เป็น ก็จะรู้ว่ามันคล้าย ๆ กัน) เพียงแต่การทำงานของมัน พัฒนามาจาก Node.js เท่านั้นเอง
Sails.js สามารถเขียนตั้งแต่ต้น จนจบ ครบแบบ Full-Stack เพราะมี Design Pattern ที่เป็นแบบ MVC แม้กระทั่งมือใหม่ ที่ยังไม่รู้จะเริ่มต้นตรงไหน ก็สามารถเริ่มต้นจากเจ้านี่ได้ไม่ยาก
Sails.js สามารถทำงานแบบ Real-Time ก็ได้ (เขียนครอบ Socket.io) ติดต่อ DB ก็สะดวก รวมถึงการทำ RESTful API ที่โคตรง่าย

Getting Started

ก่อนจะออกไปรบ ก็ต้องมีอาวุธกันก่อน เริ่มที่ …

Node.js ใช้เฟรมเวิร์กของ Node.js ก็ต้องมี Node.js
Postman ชิล ๆ ด้วยการใช้ Postman ยิงไปก็พอ
Sails.js มาถึงพระเอกของเรา ติดตั้งผ่าน npm ง่าย ๆ ด้วยคำสั่งคอมมานด์

npm install sails -g

ตรวจดูว่าใช้ได้ไหม ด้วยคำสั่ง

sails -v

เรือเล็กควรออกจากฝั่ง

หลังจากติดตั้งอาวุธครบเรียบร้อย ก็ได้เวลาเริ่มต้นโปรเจคของเรากันแล้ว เย้ ~

sails new simple-api-sailjs

ขึ้นหน้าจอแบบนี้ ก็เลือกอันที่ 2 โลดดด ส่วนใครที่อยากลองเล่นโปรเจคแบบเสร็จสรรพ สามารถเลือกข้อที่ 1 ได้เลย

ขั้นตอนต่อไปเป็นการติดตั้ง dependencies ที่ค่อนข้างกินเวลานิดนึง ส่วนถ้าใครอยากข้ามขั้นตอนนี้ ก็เพิ่ม --fast ตามคำแนะนำได้เบยแจ้

เสร็จสิ้นขั้นตอนการติดตั้ง ก็จะเห็นโครงสร้างของโฟลเดอร์ ที่ทาง Sails.js จัดสรรมาให้ อย่าง view, model, controller เรียกว่า เริ่มต้นกับ MVC ได้แบบง่าย ๆ เลยทีเดียว

โดยอธิบายส่วน View กันแบบคร่าว ๆ ก่อนที่เราจะไม่พูดถึงมัน ในบทความนี้ 555

View — เป็นส่วนแสดง User Interface ของหน้าเว็บ โดยจะเห็นว่าเป็น .ejs จริงๆ ก็สามารถเขียน Syntax html ธรรมดาลงไปได้เลย จะมี 2 ส่วนหลัก ๆ คือ …

layouts/layouts.ejs ที่เปรียบเสมือนศูนย์กลาง เอาไว้แสดงผลลัพธ์จากไฟล์อื่น ของหน้าวิว รวมถึงเอาไว้อิมพอร์ต lib ต่าง ๆ ใครอยากอิมพอร์ต JS, CSS ก็มาเขียนอยู่ในไฟล์นี้ (Sails เขียนคอมเมนต์สัดส่วนต่าง ๆ ได้ชัดเจนมาก ว่าอะไรควรจะอยู่ตรงไหน ลองเปิดศึกษากันดูได้)
pages/pages.ejs อันนี้เป็นส่วน <body> ของตัวเว็บ มีอะไรก็มาเขียนลงในนี้ได้ หรือจะสร้างเป็นไฟล์ใหม่ ชื่ออื่น โฟลเดอร์อื่น นอกโฟลเดอร์ ฯลฯ ก็ทำได้หมด แต่อย่าลืมไปเซต routes ใน config/routes.ejs ด้วยนะจ้ะ

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

แล่นเรือกันหน่อย

ติดตั้งกันไปเรียบร้อย ก็ลองเล่นดูโดยใช้คำสั่ง…

sails lift

จากนั้นเซิร์ฟเวอร์จะรันผ่านพอร์ต 1337 เข้าได้ตามนี้ http://localhost:1337/

อย่างที่ได้บอกกันไปต้นบทความ ว่าในบทความนี้เราจะทำส่วนของ API เพราะฉะนั้นส่วนของ View จะขอตัดออก โดยย้อนกลับไปในขั้นตอนแรก

นั่นก็คือ … ตัด Front End ออก โดยใส่ Option เพิ่ม หรือใครจะใช้โปรเจคแรกก็ตามสะดวกแจ้

sails new simple-api-sailjs --no-frontend

แท่นแท๊นนน ~ เราก็จะได้โปรเจคที่ไม่มี views, assets, tasks ดูรายละเอียดเพิ่มเติมได้ที่ Document ด้านล่าง …

sails new

without - Used to generate a Sails app without the specified feature(s). The supported "without" options are: 'lodash'…

sailsjs.com

เริ่มลุย API

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

GET /products แสดงรายการสินค้าทั้งหมด
GET /products/1 แสดงรายการสินค้าของไอดีที่ 1
POST /products เพิ่มรายการสินค้า
PUT /products/1 แก้ไขรายการสินค้าของไอดีที่ 1
DELETE /products/1 ลบรายการสินค้าของไอดีที่ 1

เมื่อเรารู้แล้วว่าจะสร้างอะไรบ้าง ก็มาถึงขั้นตอนการสร้าง ด้วยคำสั่ง

sails generate api products

รันปุ๊บ จะมี 2 ไฟล์ปรากฏขึ้นมา ในโฟลเดอร์ของ api นั่นคือ …

controllers/ProductsController.js
models/Products.js

ทดลองยิง API ด้วย Postman

มาพิสูจน์ความง่ายของมัน โดยเริ่มรันเซิร์ฟเวอร์ จากคำสั่งด้านล่างกันก่อน

sails lift

เครื่องมือสำคัญที่ขาดไม่ได้ในการทดสอบ คือ Postman เป็นตัวช่วยที่เอาไว้ใช้ทำ API Request ที่ดีมาก ๆ ลองเล่นกันเลยดีกว่า

> เพิ่มรายการสินค้า

เนื่องจากเรายังไม่มีรายการสินค้าใด ๆ เพราะฉะนั้นก็ต้องเพิ่มกันก่อน
เดี๋ยวในส่วนอื่นจะดูไม่ว้าว … 555

เลือก Method POST พิมพ์ http://localhost:1337/products
พร้อมส่ง Request Body แบบ JSON ของรายการสินค้าไป จากนั้นกด Send

ไม่จำเป็นต้องสร้างคอนโทรลเลอร์ใด ๆ ในโค้ดก่อน ยิง Postman แบบเพียว ๆ + คอมมานด์ไลน์ 1 คำสั่งเท่านั้น กดส่งปุ๊บ ก็สร้างให้ทันที เหมาะกับชาวขี้เกียจแบบเรา ๆ จริง ๆ โคตรง่ายเลยเห็นมะ ?

> แสดงรายการสินค้า

สร้างรายการสินค้าไปแล้ว มาดูกันดีกว่าว่าสินค้าถูกเพิ่มจริงรึเปล่า

เลือก Method GET พิมพ์ http://localhost:1337/products แล้วกด Send

รายการสินค้าทั้งหมดแสดงขึ้นมาแล้ววว ไหนลองแสดงเฉพาะรายการที่ 1 ซิ

พิมพ์ http://localhost:1337/products/1 แล้วกด Send

> แก้ไขรายการสินค้า

มาแก้ไขรายการสินค้าของรายการที่ 1 กัน เนื่องจากชื่อมันไม่โกอินเตอร์เลยอ่ะ

เลือก Method PUT พิมพ์ http://localhost:1337/products/1 พร้อมส่งชื่อที่เราต้องการจะแก้ไขลงไป แล้วกด Send

ถ้าไม่มั่นใจว่ารายการสินค้าถูกอัพเดตจริงรึเปล่า ก็เรียก GET /products ต่อได้เลย

> ลบรายการสินค้า

ก็ชื่อรายการที่ 1 มันโกอินเตอร์ไปอ่ะ นายออกจากแก๊งค์เราไปเรย ถ้าไม่ใช้ภาษาไทย

เลือก Method Delete พิมพ์ http://localhost:1337/products/1 แล้วกด Send

ตรวจดูสักหน่อยก่อนจาก ผ่าน GET /products แล้วกด Send อีกครั้ง

ขับไล่ออกจากแก๊งค์เรียบร้อยแล้ว เย้ ๆ

ข้อมูลอยู่ไหน ?

ทำการเพิ่มรายการต่าง ๆ ไปแล้ว และข้อมูลมันอยู่ที่ไหนกันนะ

คำตอบก็คือ … มันเก็บข้อมูลไว้ในโฟลเดอร์ชื่อ .tmp (สร้างหลังจากที่เราทำการ POST /products โดยในนั้นก็จะบอกว่า เราได้ทำการสร้างข้อมูลอะไรไป หรือลบข้อมูลอะไร จริง ๆ ก็เปรียบเหมือนการเก็บข้อมูลลง JSON นั่นแหละหลักการเดียวกัน

อยากลองเล่น Json-Server ก็จัดไป (ขอบคุณพี่ Phuwasit สำหรับบทความเจ๋ง ๆ)

สร้าง REST API อย่างรวดเร็วด้วย JSON Server

JSON Server เป็นอีกหนึ่งเครื่องมือที่ช่วยงานของฝั่ง front-end ได้มากเลยทีเดียว เพราะจะช่วยทำ REST API กับ mock data…

blog.appsynth.net

ทำไมมันสร้างง่ายจัง ?

Sails.js มีตัวที่เรียกว่า Blueprint API ที่คอยอำนวยความสะดวกให้กับโปรแกรมเมอร์ฝึกหัดอย่างเรา ๆ ด้วยการลดขั้นตอนในการเขียนโค้ดให้น้อยลง เพียงแค่เราสร้างคอนโทรลเลอร์กับโมเดล เตรียมไว้ จากนั้นก็สามารถสร้างข้อมูลใด ๆ โดยไม่ต้องเขียนโค้ดเลยสักบรรทัดตามที่กล่าวไปเลย เริ่มหลงรักกันแล้วใช่ไหมล่ะ < 3

แต่ !! ….

ถ้าจะพัฒนากันแบบจริง ๆ จัง ๆ การที่เราสามารถยิง API ไปสร้างข้อมูลได้มันคงจะไม่ปลอดภัยถูกมะ ก็สามารถเข้าไปปิด Blueprints ง่าย ๆ ใน config/blueprints.js

actions: false,
shortcuts: false,
rest: false

หรือปิดแค่บางคอนโทรลเลอร์ก็ย่อมได้นะ

> ทิ้งท้าย <

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับใคร ที่อยากเริ่มต้นมาสายนี้ หรืออยากลองทำ API แต่ปวดหัวกับมันเหลือเกิน 555 ถ้าคราวหน้ามีเวลา จะมาลุยแบบ Full-Stack กันเนาะ

ส่วนใครสนใจอยากลุยล่วงหน้า ก็เข้าไปอ่าน Documention ของ Sails.js ได้เลย เอกสารอ่านง่ายมั่ก แต่ถ้ามีฟีเจอร์ค้นหา จะดีต่อใจกว่านี้ เอาเป็นว่า วันนี้พอแค่นี้ บับบายจ้าา

IT Knowledge