เข้าสู่โลก MEAN STACK ครั้งแรกกัน

เกริ่นก่อนว่าทำไมสนใจ

มันเริ่มมาจากได้ยินพวกๆในแก๊งพูดกัน ถึง MEAN STACK ก็แอบๆฟัง

ชาวแก๊งพูดประมาณว่า MEAN STACK มันเป็นระบบที่ไว้ทำ Web Application ได้ครบวงจรโดยใช้ภาษา JavaScript ล้วนๆ เราได้ยินก็เออ น่าไปลองศึกษาดู

วันนี้ฤกษ์งามยามดี ได้มีโอกาสได้ลองทำความรู้จัก กับสิ่งที่เรียกว่า MEAN STACK ก็ไปสืบสาวราวเรื่อง ได้ประมาณว่า

อย่างที่ชาวแก๊งพูดกันว่า MEAN STACK เนี่ยเป็นระบบที่ถูกจัดมาไว้ทำ Web Application ได้ครบวงจรโดยใช้ภาษา JavaScript นั่นเอง

โดย MEAN STACK จะประกอบไปด้วย

  • M — MongoDB: ฐานข้อมูลแบบ NoSQL ที่รองรับการทำงานกับ JavaScript
  • E — Express: เป็น Framework ที่มาจัดการในฝั่ง Back-end เช่น พวก Route, Web Request ต่างๆ รวมถึงการเรียกใช้พวก Middleware อื่นๆ
  • A — AngularJS: Front-end Framework จาก Google มารับหน้าที่ทางฝั่ง Client ซึ่งจะทำให้ Front-end มีชีวิตที่ง่ายขึ้นเยอะ
  • N — NodeJS: เรียกได้ว่าเป็น Bread And Butter กันเลยทีเดียว เพราะว่ามันคือตัว Runtime ของ JavaScript และมันก็ยังประมวลผลได้เร็วอีกด้วย

เป็นไงละครับ ความหมายมันพอได้รู้ละก็มาเริ่มลองใช้มันกัน แต่ก่อนจะใช้ได้เราต้อง Setup กันก่อน

Setup MEAN Stack (Ubuntu 14.04)

MEAN นั้นจะใช้ git เป็น version control ต้องตรวจสอบดูก่อนว่ามีหรือไม่

$ git

ถ้าเจอ “command not found.” error ต้อง install git ก่อน

$ sudo apt-get install git

เริ่มกันที่ Install MongoDB

  • import pubilc key ไว้เข้าถึง mongodb repository ก่อน
$ sudo apt-key adv — keyserver hkp://keyserver.ubuntu.com:80 — recv 0C49F3730359A14518585931BC711F9BA15703C6
  • เพิ่ม apt repository url ไว้ที่ /etc/apt/sources.list.d/mongodb-3.4.list.
$ echo “deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu “$(lsb_release -sc)”/mongodb-org/3.4 multiverse” | sudo tee /etc/apt/sources.list.d/mongodb-3.4.list
  • หลังจากเพิ่ม apt repository url แล้วใช้ command ด้านล่างนี้ install mongodb โดยมันจะไปเอา dependent packages ทั้งหมดที่ต้องการมาให้
$ sudo apt-get update
$ sudo apt-get install mongodb-org
  • install เสร็จตรวจสอบดูว่า mongodb มันอยู่ในเครื่องเรายัง จากการดู mongodb version
$ mongod --version
db version v3.4.2
git version: 3f76e40c105fc223b3e5aac3e20dcd026b83b38b
OpenSSL version: OpenSSL 1.0.1f 6 Jan 2014
allocator: tcmalloc
modules: none
build environment:
distmod: ubuntu1404
distarch: x86_64
target_arch: x86_64

Install Nodejs

  • Nodejs จะ install คล้ายๆกับ mongodb เลย โดยจะต้องเพิ่ม apt repository และใช้ apt command แต่มันจะง่ายกว่าเพราะว่า nodejs ได้ทำ script เอาไว้แล้ว รันโดยใช้ command ด้านล่าง
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

NOTE:ถ้าอยากเห็นว่า script เป็นยังไง ไปดูที่ url https://deb.nodesource.com/setup_6.x

  • จากนั้นเราก็ใช้ apt-get install
$ sudo apt-get install -y nodejs
  • เอาละครับ เราจะได้ Nodejs บนเครื่องแล้ว แต่ยังไม่จบแค่นั้น เราต้อง install package build-essentials ด้วย เนื่องจากจะมี npm packages บางตัวใช้ครับ

$ sudo apt-get install build-essential

Install packages: npm และ bower

คนทำ Web application จะต้องรู้จัก framework และ library เช่น JQuery หรือ Bootstrap แน่นอน เพราะมันจะทำให้ชีวิตง่ายขึ้น โดยถ้าเป็น application ใหญ่ๆ ละก็จะต้องวุ่นวายกับการจัดการกับ library ต่างๆอย่างแน่นอน แต่ไม่ต้องกังวนไป เพราะ nodejs มีเครื่องมือที่ทำให้เราสามารถจัดการกับเรื่อง package ต่างๆ นั่นคือ npm และ bower

  • Install npm ถ้าเรา install nodejs ไปแล้ว npm ควรที่จะมีอยู่ด้วย ตรวจสอบได้จากการดู version
$ npm -v
  • bower นี่เป็นตัวจัดการกับ package ที่สำหรับทำ Font-End หรือ Client เช่น jQuery หรือ Bootstrap วิธี install เราจะใช้ npm ตาม command นี้
$ sudo npm install -g bower

NOTE: -g คือ option ที่จะทำให้เราสามารถใช้ bower ได้ทุกที่เครื่อง แต่ถ้าต้องการให้ใช้กับ directory ปัจจุบัน ให้เราลบ -g ออก

Install gulp

gulp เป็นเครื่องมือที่จัดการ task ต่างๆ ที่แต่เดิมเราจะต้องทำ task เหล่านั้นเอง เพียงแค่ใช้ gulp เราก็สามารถรัน task ทั้งหมดได้ เช่น สั่ง start server หรือแปลง sass/less เป็น css

  • install gulp ได้จาก npm
$ sudo npm install -g gulp

Install mean command line

mean command line จะเป็นตัวที่รวม package ต่างๆที่กล่าวด้านบน สามารถติดตั้งโดยใช้ npm

$ sudo npm install -g mean-cli

บทความหน้าเรามาสร้าง App แรกจาก MEAN Stack กัน

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.