53155bd95cf6834766000144_logo.png BETA

Intro to MEAN Stack

ในคอร์สนี้จะสอนการเขียนเว็บแอพพลิเคชั่น โดยเริ่มจาก Node.js ซึ่งเป็นแพลตฟอร์มการเขียน JavaScript บนฝั่ง server รวมทั้งปูพื้นฐาน JavaScript ที่ควรรู้ จากนั้นจะเข้าสู่ Express ซึ่งเป็น Web Framework โดยจะสอนการสร้างโครงสร้างเว็บแบบ MVC รวมถึงการใช้งาน Mongoose เพื่อเชื่อมต่อการทำงานกับ MongoDB ซึ่งเป็นระบบฐานข้อมูลแบบ NoSQL และเพื่อให้เว็บแอพพลิชั่นสามารถ login ด้วย Facebook / Google ได้ จะมีการสอนใช้ Passport ซึ่งเป็น Module ที่ช่วยในการจัดการ Authentication หลังจากนั้นจะเข้าสู่ Front-end Framwork คือ Angular ซึ่งพัฒนาโดย Google เพื่อสร้างเว็บไซต์แบบ Single Page Application (SPA) เมื่อปูพื้นฐานเสร็จจะเริ่มเข้าสู่สอนการใช้เครื่องมือเพื่อช่วยในการพัฒนา คือ git เพื่อทำการควบคุมเวอร์ชันโค้ด และ Yeoman ซึ่งประกอบด้วย Yo สำหรับสร้างโครงสร้างโฟลเดอร์และไฟล์เริ่มต้นอัตโนมัติ Bower สำหรับการจัดการ dependency ฝั่ง front-end และ grunt เพื่อช่วยในการ build อัตโนมัติ แล้วจะเข้าสู่การทำโปรเจคคือ Twister ซึ่งเป็นการ clone เว็บไซต์ Twitter ขึ้นมาใช้งานเอง และปิดท้ายด้วยการสอน OpenShift และ Heroku ซึ่งเป็น Platform-as-a-Service (PaaS) สำหรับนำเว็บแอพพลิเคชั่นขึ้นไปทำงาน

Free
เข้าสู่ระบบ

เนื้อหาหลักสูตร

53182bf95f4401906700029d_icon.png
1
แนะนำ MEAN Stack และเครื่องมือ
531707b447c3fe1d28000820_arrow.png
MEAN Stack คืออะไร
531707b447c3fe1d28000820_arrow.png
แนะนำเครื่องมือที่ต้องใช้ในการพัฒนา
53182bf95f4401906700029d_icon.png
2
Node.js & npm
531707b447c3fe1d28000820_arrow.png
แนะนำและติดตั้ง Node.js
531707b447c3fe1d28000820_arrow.png
ทำความเข้าใจการเขียนโปรแกรมแบบ event-driven
531707b447c3fe1d28000820_arrow.png
ทบทวน JavaScript: First-class function
531707b447c3fe1d28000820_arrow.png
ทบทวน JavaScript: Closure
531707b447c3fe1d28000820_arrow.png
Closure กับการเขียนโปรแกรมแบบ event-driven
531707b447c3fe1d28000820_arrow.png
รู้จักกับ Node Module และ CommonJS
531707b447c3fe1d28000820_arrow.png
ประเภทของ Node Module
531707b447c3fe1d28000820_arrow.png
การติดตั้งและใช้งาน npm เพื่อใช้ third-party module
531707b447c3fe1d28000820_arrow.png
เริ่มพัฒนาเว็บแอพพลิเคชันด้วย Node.js
531707b447c3fe1d28000820_arrow.png
รู้จักกับ Connect module และการสร้าง connect middleware เพื่อดัก request
531707b447c3fe1d28000820_arrow.png
การ Mount พาธ ของ Connect
53182bf95f4401906700029d_icon.png
3
Express
531707b447c3fe1d28000820_arrow.png
แนะนำและติดตั้ง Express
531707b447c3fe1d28000820_arrow.png
ทดลองสร้าง Express แอพพลิเคชัน
531707b447c3fe1d28000820_arrow.png
application, request, response object
531707b447c3fe1d28000820_arrow.png
ทบทวนเว็บแอพพลิเคชั่นแบบ MVC
531707b447c3fe1d28000820_arrow.png
สร้าง MVC เว็บแอพพลิเคชั่น : Controller และ Routing
531707b447c3fe1d28000820_arrow.png
สร้าง MVC เว็บแอพพลิเคชั่น : Config และสร้างแอพพลิเคชั่น
531707b447c3fe1d28000820_arrow.png
ทบทวนขั้นตอนการสร้าง MVC เว็บแอพพลิเคชั่น
531707b447c3fe1d28000820_arrow.png
ทำ MVC ไปเพื่อ? (ตัวอย่างประโยชน์ของ MVC)
531707b447c3fe1d28000820_arrow.png
การคอนฟิกค่าสำหรับ Express แอพพลิเคชัน
531707b447c3fe1d28000820_arrow.png
การเรนเดอร์ view ด้วย Jade template engine
531707b447c3fe1d28000820_arrow.png
Jade syntax overview
531707b447c3fe1d28000820_arrow.png
การเรียกใช้ static file
531707b447c3fe1d28000820_arrow.png
การใช้ Sass และคอมไพล์เป็น CSS
531707b447c3fe1d28000820_arrow.png
การรับค่าจาก form
531707b447c3fe1d28000820_arrow.png
การ validate ค่าจาก form
531707b447c3fe1d28000820_arrow.png
การใช้งาน cookie-session
531707b447c3fe1d28000820_arrow.png
การใช้งาน session กับ session store
53182bf95f4401906700029d_icon.png
4
MongoDB
531707b447c3fe1d28000820_arrow.png
ติดตั้ง MongoDB
531707b447c3fe1d28000820_arrow.png
CRUD: Create database/collection/document ด้วยคำสั่ง use และ insert
531707b447c3fe1d28000820_arrow.png
CRUD: Read ด้วยคำสั่ง find (Part I)
531707b447c3fe1d28000820_arrow.png
CRUD: Read ด้วยคำสั่ง find (Part II)
531707b447c3fe1d28000820_arrow.png
CRUD: Update ด้วยคำสั่ง update
531707b447c3fe1d28000820_arrow.png
CRUD: Delete ด้วยคำสั่ง remove
531707b447c3fe1d28000820_arrow.png
การ Backup ข้อมูลด้วย mongodump
531707b447c3fe1d28000820_arrow.png
การ Restore ข้อมูลด้วย mongorestore
53182bf95f4401906700029d_icon.png
5
Mongoose
531707b447c3fe1d28000820_arrow.png
แนะนำและติดตั้ง Mongoose และเชื่อมต่อเข้ากับ MongoDB server
531707b447c3fe1d28000820_arrow.png
การสร้าง Schema และ data model และการสร้าง Index
531707b447c3fe1d28000820_arrow.png
CRUD: Create document จาก model ด้วยคำสั่ง save
531707b447c3fe1d28000820_arrow.png
CRUD: Read document ด้วย find และ findOne
531707b447c3fe1d28000820_arrow.png
CRUD: Update ด้วยคำสั่ง put และ update
531707b447c3fe1d28000820_arrow.png
CRUD: Delete document ด้วยคำสั่ง delete
531707b447c3fe1d28000820_arrow.png
กำหนดค่า default และการใช้ modifier
531707b447c3fe1d28000820_arrow.png
การทำ Model Validation
531707b447c3fe1d28000820_arrow.png
การใช้ DBref เพื่อสร้าง reference
53182bf95f4401906700029d_icon.png
6
การทำ Authentication ด้วย Passport
531707b447c3fe1d28000820_arrow.png
แนะนำ ติดตั้ง และคอนฟิก Passport
531707b447c3fe1d28000820_arrow.png
ทำความเข้าใจ Passport Strategy และการใช้ Local Strategy
531707b447c3fe1d28000820_arrow.png
สร้าง view สำหรับ หน้า Index ใหม่ และหน้า Sign up
531707b447c3fe1d28000820_arrow.png
สร้าง route และ controller สำหรับ Sign up
531707b447c3fe1d28000820_arrow.png
แสดง Flash message ด้วย connect-flash module
531707b447c3fe1d28000820_arrow.png
สร้าง ​Log in ด้วย passport.authenticate
531707b447c3fe1d28000820_arrow.png
สร้าง Log out ด้วย passport req.logout
531707b447c3fe1d28000820_arrow.png
Set up การ authenticate ด้วย OAuth Strategy
531707b447c3fe1d28000820_arrow.png
Facebook Strategy - คอนฟิกค่า
531707b447c3fe1d28000820_arrow.png
Log in ด้วย Facebook
531707b447c3fe1d28000820_arrow.png
Google Strategy - คอนฟิกค่า
531707b447c3fe1d28000820_arrow.png
Log in ด้วย Google
53182bf95f4401906700029d_icon.png
7
AngularJS
531707b447c3fe1d28000820_arrow.png
แนะนำ AngularJS และติดตั้งด้วย Bower
531707b447c3fe1d28000820_arrow.png
รู้จัก Angular Global Object และทดลองสร้าง Module
531707b447c3fe1d28000820_arrow.png
รู้จักกับ 2-way data binding
531707b447c3fe1d28000820_arrow.png
ทำความเข้าใจ Dependency Injection (DI)
531707b447c3fe1d28000820_arrow.png
Dependency Injection ใน Angular
531707b447c3fe1d28000820_arrow.png
รู้จักกับ Directive และ Core Directive
531707b447c3fe1d28000820_arrow.png
Automatic Bootstrap และ Manual Bootstrap
531707b447c3fe1d28000820_arrow.png
สร้าง Module บนโครงสร้างโฟลเดอร์ MVC
531707b447c3fe1d28000820_arrow.png
AngularJS View
531707b447c3fe1d28000820_arrow.png
สร้าง Controller และ Filter
531707b447c3fe1d28000820_arrow.png
Routing ด้วย UI-Router และการติดตั้ง
531707b447c3fe1d28000820_arrow.png
รู้จักกับ state และสร้าง state ด้วย angular.config()
531707b447c3fe1d28000820_arrow.png
สร้างลิงค์ไป state ด้วย ui-sref/Redirect path อื่น และการใช้ #! hashbang เพื่อแก้ปัญหา SEO
531707b447c3fe1d28000820_arrow.png
สร้าง Form และผูกกับ $scope model
  
531707b447c3fe1d28000820_arrow.png
Angular Form Property สำหรับการทำ validation
  
531707b447c3fe1d28000820_arrow.png
สร้าง Controller สำหรับ Authentication
  
531707b447c3fe1d28000820_arrow.png
แสดง Error message ด้วย ngShow
  
531707b447c3fe1d28000820_arrow.png
รู้จักกับ Service และการเรียกใช้
  
531707b447c3fe1d28000820_arrow.png
สร้าง Authentication Service
  
531707b447c3fe1d28000820_arrow.png
สร้าง Authentication Service (ต่อ)
  
53182bf95f4401906700029d_icon.png
8
การใช้ Yeoman Workflow
531707b447c3fe1d28000820_arrow.png
แนะนำ yeoman, bower, grunt
  
531707b447c3fe1d28000820_arrow.png
Scaffolding ด้วย Yo และ Generator
  
531707b447c3fe1d28000820_arrow.png
จัดการ Dependency ด้วย Bower
  
531707b447c3fe1d28000820_arrow.png
Build ด้วย Grunt
  
53182bf95f4401906700029d_icon.png
9
การใช้งาน Git เบื้องต้น
531707b447c3fe1d28000820_arrow.png
แนะนำและติดตั้ง git
  
531707b447c3fe1d28000820_arrow.png
สร้าง repository (git init, git clone)
  
531707b447c3fe1d28000820_arrow.png
ตั้งค่าการใช้งาน repository (git config, .git-ignore)
  
531707b447c3fe1d28000820_arrow.png
การเพิ่มข้อมูลเข้าสู่ repository (git status, git add, git commit)
  
531707b447c3fe1d28000820_arrow.png
การกลับไปแก้ไขข้อผิดพลาด (git revert, git reset, git checkout)
  
53182bf95f4401906700029d_icon.png
10
การใช้งาน Github
531707b447c3fe1d28000820_arrow.png
การสร้าง remote repository บน GitHub
  
531707b447c3fe1d28000820_arrow.png
การเชื่อมต่อ GitHub ผ่าน ssh url
  
531707b447c3fe1d28000820_arrow.png
การ synchronize ข้อมูลจาก remote repositry (git push, git pull)
  
531707b447c3fe1d28000820_arrow.png
การแก้ไข conflict
  
53182bf95f4401906700029d_icon.png
11
Twitter Clone Project
531707b447c3fe1d28000820_arrow.png
แนะนำ Twitter
  
531707b447c3fe1d28000820_arrow.png
Setup project ด้วย MeanJS Generator
  
531707b447c3fe1d28000820_arrow.png
แก้ไขไฟล์ package.json เพื่อแก้ไข error ของ MeanJS Generator
  
531707b447c3fe1d28000820_arrow.png
พรีวิวโค้ดจาก MeanJS Generator
  
531707b447c3fe1d28000820_arrow.png
แก้ไขปัญหาการสั่งให้เริ่มทำงานไม่ขึ้น
  
531707b447c3fe1d28000820_arrow.png
การแก้ไขปัญหา front-end library มาไม่ครบด้วย bower
  
531707b447c3fe1d28000820_arrow.png
พรีวิวตัวอย่างหน้าตา Twitter Clone (Twister)
  
531707b447c3fe1d28000820_arrow.png
เปลี่ยน template engine จาก swig เป็น jade
  
531707b447c3fe1d28000820_arrow.png
แก้ไขปัญหาการหา css, javascript ไม่เจอ
  
531707b447c3fe1d28000820_arrow.png
ใช้งาน grunt เพื่อช่วยในการ restart server อัตโนมัติ
  
531707b447c3fe1d28000820_arrow.png
การสร้างส่วน header ของเว็บโดยใช้ ng-include
  
531707b447c3fe1d28000820_arrow.png
แก้ไข express ให้รองรับ partial render ของไฟล์ jade
  
531707b447c3fe1d28000820_arrow.png
สร้าง tweet module
  
531707b447c3fe1d28000820_arrow.png
config routing state สำหรับหน้า me และ remove home state
  
531707b447c3fe1d28000820_arrow.png
สร้าง view สำหรับหน้า me และ reply modal
  
531707b447c3fe1d28000820_arrow.png
ปรับ view ให้เรียกค่าจาก $scope ที่เชื่อมกับ controller
  
531707b447c3fe1d28000820_arrow.png
สร้าง MeController
  
531707b447c3fe1d28000820_arrow.png
สร้าง feed state และ view สำหรับแสดงหน้า feed
  
531707b447c3fe1d28000820_arrow.png
สร้าง FeedController
  
531707b447c3fe1d28000820_arrow.png
สร้างฟังก์ชันสำหรับการ Post Tweet
  
531707b447c3fe1d28000820_arrow.png
สร้างฟังก์ชันสำหรับ reply โดยใช้ modal
  
531707b447c3fe1d28000820_arrow.png
ทดสอบผลลัพธ์ modal และทบทวนการใช้งาน
  
531707b447c3fe1d28000820_arrow.png
เพิ่มค่าจำนวน tweet หลังจาก tweet
  
531707b447c3fe1d28000820_arrow.png
สร้างหน้า Sign up
  
531707b447c3fe1d28000820_arrow.png
ฝัง user object เพื่อใช้ตรวจสอบการเข้าสู่ระบบ
  
531707b447c3fe1d28000820_arrow.png
สร้างหน้า Sign in
  
531707b447c3fe1d28000820_arrow.png
ป้องกันการเข้าถึงหน้าต่างๆถ้ายังไม่ได้ Sign in
  
531707b447c3fe1d28000820_arrow.png
เปลี่ยนปุ่มบน header ตามสถานะการ log in
  
531707b447c3fe1d28000820_arrow.png
รองรับ Facebok Sign in
  
531707b447c3fe1d28000820_arrow.png
แสดง name และ screenName จากข้อมูลจริง
  
531707b447c3fe1d28000820_arrow.png
ออกแบบ data model สำหรับข้อความ tweet
  
531707b447c3fe1d28000820_arrow.png
เพิ่มให้ API Endpoint รองรับการเก็บ post tweet ลงฐานข้อมูลจริง
  
531707b447c3fe1d28000820_arrow.png
ปรับปุ่ม tweet ให้ post ข้อมูลลงฐานข้อมูลจริง
  
531707b447c3fe1d28000820_arrow.png
เพิ่ม API Endpoint เพื่อเรียกดู tweet ขอตัวเองในหน้า me
  
531707b447c3fe1d28000820_arrow.png
แสดงข้อมูลหน้า feed ด้วยข้อมูลจริงจากฐานข้อมูล
  
531707b447c3fe1d28000820_arrow.png
ปรับลิงค์แบนเนอร์ และลิงค์ me ด้วย ui-sref
  
531707b447c3fe1d28000820_arrow.png
เพิ่ม API Endpoint เพื่อเรียกดู tweet ของ user อื่น
  
531707b447c3fe1d28000820_arrow.png
สร้างหน้า user timeline
  
531707b447c3fe1d28000820_arrow.png
สร้าง usertimeline state และ UserTimelineController
  
531707b447c3fe1d28000820_arrow.png
ออกแบบ data model สำหรับ following และ follower
  
531707b447c3fe1d28000820_arrow.png
สร้าง API Endpoint เพื่อเรียกดูสถานะ friendship
  
531707b447c3fe1d28000820_arrow.png
แก้หน้า usertimeline ให้แสดงปุ่ม follow/unfollow ตามสถานะ friendship
  
531707b447c3fe1d28000820_arrow.png
สร้าง API Endpoint เพื่อรองรับการ follow
  
531707b447c3fe1d28000820_arrow.png
แก้ไขหน้า usertimeline ให้รองรับการกดปุ่ม follow
  
531707b447c3fe1d28000820_arrow.png
สร้าง API Endpoint เพื่อรองรับการ unfollow
  
531707b447c3fe1d28000820_arrow.png
แก้ไขหน้า usertimeline ให้รองรับการกดปุ่ม unfollow
  
531707b447c3fe1d28000820_arrow.png
แบบฝึกหัด 1
  
531707b447c3fe1d28000820_arrow.png
แบบฝึกหัด 2
  
531707b447c3fe1d28000820_arrow.png
แบบฝึกหัด 3
  
53182bf95f4401906700029d_icon.png
12
การ Deploy Application บน Cloud Platform
531707b447c3fe1d28000820_arrow.png
Deploy Application บน Heroku
  
531707b447c3fe1d28000820_arrow.png
Deploy Application บน OpenShift
  
ภายในคอร์ส

จำนวนบทเรียน : 143 บทเรียน
ความยาววีดีโอ : 0 นาที

coursecreek-teacher
ศุภเสฏฐ์ ชูชัยศรี
Larngear Tech & Streaming Co-Founder


coursecreek-teacher
อานุภาพ วิรัตนภานุ
Larngear Tech & Streaming Co-Founder


ผู้ลงเรียนคอร์สนี้

และสมาชิกอีก 240 คนเรียนคอร์สนี้