Phát Triển NodeJS cùng Practice Angular FullStack

Phát Triển NodeJS cùng Practice Angular FullStack

tháng 8 19, 2017
    Việc tổ chức, phân bố xây dựng lên một cấu trúc tiên cho việc phát triển ứng dụng là rất cần thiết . Thời điểm ban đầu mới làm việc với NodeJS mình đã rất băn khoăn với việc tổ chức ứng dụng sao cho phù hợp, dễ quản lý cũng như bảo trì và quan trọng hơn hết là các anh em trong team của mình dễ hiểu và dễ hình dung nhất 🤔. Vậy là mình đã ra đi và tìm các practice riêng để phát triển ứng dụng cho team mình 😆. Ở bài viết này mình sẽ giới thiệu tới các bạn một trong số các practice mình đã sử dụng là practice Angular Fullstack. Đây là practice khai thác khá triệt để về việc tổ chức các component api. Trọng phạm vi này mình chỉ giới thiệu sơ lược qua về cách tổ chức thư mục của nó một cách basic nhất cho các bạn newbie có thể dễ dàng apply vào project mình đang sử dụng. Giờ thì mình bắt tay đi tìm hiểu nó coi sao nhé. Bài viết mình sẽ đi qua những phần chính sau đây
  1. Giới thiệu và cài đặt môi trường phát triển
  2. Tổ chức cây thư mục server
  3. Tổ chức cây thư mục client


1. Giới thiệu và cài đặt môi trường phát triển

a. Giới thiệu về practice Angular- Fullstack
- Đại loại thì nó là sự kết hợp của 4 công nghệ chính là:
         Mongodb- ExpressJS- AngularJS- NodeJS
- Nói tới đây thì nhiều bạn liên tưởng ngay tới MEAN-Stack. Tuy nhiên thằng này không phải MEAN đâu nhé, điểm khác biệt từ cách tổ chức component API của nó có đôi chút khác biệt. Khác biệt như nào thì xuống dưới mình có viết nhé :D.
b. Cài đặt project
- Cái này thì không thể thiếu rồi. Mặc định là bạn phải cài đặt nodejs nhé. Tiếp theo bạn làm theo các bước dưới đây
Bước 1: Cài đặt yeoman toàn cục (thằng này giúp tạo ra các cấu trúc project có sẵn, ngoài ra giúp tạo các component api và component front nhanh hơn)
  • npm install -g yo
Bước 2: Cài đặt bộ generate ứng dụng cho Practice Angular Fullstack
  • npm install -g gulp-cli generator-angular-fullstack
Bước 3: Tạo thử project angular-fullstack. Ở đây mình lây tên project là angular-fullstack-sample luôn nhé. Trên cửa sổ command cd tới thư mục tạo project và gõ vào
  • yo angular-fullstack-sample
Giờ thử xem qua structure project có những gì nhé
  • Client: sử dụng Angular 1 (Cái này trong practice này mình ko dùng. Tuy nhiên nếu làm về Angular 1 thì áp dụng nó cũng khá hay, vì giờ mình làm React với Angular 4 rồi)
  • Server: đây là phần cần quan tâm nhất phân chia nhất. Tớ sẽ đi rõ nó xuống bên dưới
  • E2e: thư mục chứa file test => Thời điểm bạn đầu bạn không cần quan tâm chi tiết tới nó. Tập chung phát triển trước đã, sau này oke rồi hãy quan tâm tới thu mục này
  • Another-File: Các file cấu hình khác (package.json, gulp.babel.js, eslint ..... vv): Hiện tại chỉ cần quan tâm tới file app và package.json là oke. (Các file này mình sẽ giới thiệu qua nó tới các bạn ở phần bên dưới)
 Rồi giờ thì ta cùng nhau đi chi tiết vào từng section này nhé

2. Tổ chức cây thư mục server

Mình rất thích cách tổ chức component của server với thư mục api. Nó tuân theo đúng định hướng component. mỗi đối tượng là 1 component api (bao gồm cả model và service). Như nào thì bạn xem tiếp bên dưới nhé
  • api: Trong này là thư mục tổ chức viết các component api (các điều hướng tới các trang web ko nằm ở đây). Mỗi component api đều triển khai như 1 mô hình mvc cụ thể. Ví dụ api cho mục user => path root/server/api/user.
    • index.js (file này sẽ import và defind api cho component api hiện tại- ở đây chính là user)
    • user.controller.js (check choác các kiểu data đầu vào ở đấy và tiến hành call service ở user.service . Chú ý là có thể call cả service ở cả thằng khác nữa)
    • user.service.js (defind service call từ database)
    • user.model.js (defind model cho user)
  • auth: Sử dụng Middleware authen ở đây nhé. Các practice tốt cho việc authen hay được apply có
    • Có 1 file duy nhất auth.service.js: File này cấu hinhf các middlerware authen, thời gian xác thực và thời gian hết hạn, decode- verify token .... Chi tiết có thẻ edit file này ra xem
    • Sử dụng jwt: cái này thì luôn luôn rồi
    • Sử dụng passport chứng thực cho hầu hết tất cả các mạng xã hộ bây giờ
  • component: Thư mục này chứa tất các các componen xử lý chung cho hệ thống, nó có thể bao gồm
    • Thư mục error: thư mục này chứa các hàm xử lý, các middleware lỗi
    • Thư mục service: Lưu các servicr xử lý common. Chẳng hạn như upload từ amazon, charge tiền từ Paypal- stripe .., UtilService ...
  • config: Thư mục này hay này (cấu hinhf express cho ứng dụng nằm trong này, phân tách môi trường cungx nằm trong này luôn, .... ) => Chi tiết thì như sau
    • file express.js: chứa cấu hình của ưngs dụng express (bao gồm nạp các thư viện sử dụng ở đây)
    • socket.io: Nếu có
    • thư mục environment: chưas cấu hình môi trường
      • test.js: chứa cấu hình để switch qua môi trường test
      • production.js: tương tự nhưng với môi trường production
      • development.js: với môi trường develop
      • index.js: chứa cấu hình config chung và nó sẽ hợp cấu hình chung đó với file biến môi trường khi chạy (các file này chinh là các file test.js, production.js ... ở trên). Nghĩa là khi chạy project mình sẽ chayj nó dưới 1 môi trường chỉ định và nó sẽ dựa theo môi trường này để tiến hành config ưgs dụng dựa trên file index và có 1 hàm merge các config của file index + file [environment].js (file environment nêú chạy dưới cờ test => merge file test .... tương tự vơis các cờ còn lại ...)
  • dbConnection:
    • Nếu là mongodb thì tạo file config với mongo => mongo.conf.js:
    • Nếu là Sql, Mysql ... thì tạo tên tương ứng csdl.conf.js
  • Router: (thư mục điều hướng ứng dụng): Cũng giống như api, có điều router chỉ làm nhiệm vụ riêng điều hương tơi các link website hoặc render page (không phải res json api như thằng api). Nếu project chỉ làm api không thì ko cần quan tâm tới thằng này.
  • File app.js: ngang hàng vơi các thu mục ở trên. Edit file này dễ thấy sử dụng để định nghĩa, khởi chạy server
  • File index.js: do sử dụng babel để viêt project bằng ES67 -> Tạo file babel config require babel và đồng thời nạp luôn file app.js ở trên vào, và hơn hết đây cũng chính là file điểm khởi chạy của ứng dụng.

3. Client và tổ chức cây thư mục

    Đây là thành phần xử lý front-end của practice này. Hiện tại practice này xử dụng AngularJS là framework chính để phát triển project cho ứng dụng client. Có thể hơi cũ kỹ chút nhưng nếu bạn thích thì vẫn có thể sử dụng Angular2-4 hoặc React hay Vue vào phần này đều được, tuy nhiên phần cấu hình sẽ hơi khác hơn so với bình thường đôi chút. Bạn nào thích thì inbox hoặc yêu cầu mình sẽ làm bài viết thêm với nó nhé
    Hiện tại thì practice Angular Full-Stack sử dụng Angular phiên bản > 1.6. Tuy nhiên phiên bản này có câu trúc lai component giống như Angular 2 nhưng lại bị cộng đồng phản đối rất nhiều. Vì vậy bạn không nhất thiết phải sử dụng phiên bản > 1.6 mà hay chọn phiên bản ổn định của A1 để phát triển. Nó có thể là 1.5 hoặc 1.4
    Còn về cây thư mục chi tiết thì bạn clone thêm về để biết thêm chi tiết nhé :D!.

4. Các file tập tin khác

- gulp.babel.js: file cấu hình sử dụng task runner là gulp. Đây là file config task runner chính cho ứng dụng. Các task minify js, html, css. Các task optimize ảnh, thiết lập chạy server dưới các môi trường khác nhau ... sẽ được defind cấu hình trong này. Ngoài ra trong này còn có thiết lập để build hết ứng dụng server code es6 sang es5
- kamar .. mochai .. : các file cấu hình test cho ứng dụng
- webpack ... (.prod, .test ...) : cấu hình module loader cho ứng dụng. Giúp cấu hình gộp, minify các task ở client.
- eslint: file cấu hình đê check convention các mã bạn đã viết (ban cũng có thể sử dụng jshint để thay thế). Đại loại thằng này define các luật để bạn phải tuân theo, kiểu như là phải tuân theo chuẩn convention mà thằng eslint này define. File này kết hợp với task runner gulp config ở bên trên để check syntax cho ứng dụng
- package.json: tập tin này thì mình cũng không biết 😁.. Nhờ các bạn code node chỉ bảo dùm.
- .gitignore: lưu lại đường dẫn các tập tin không muốn đẩy lên server
- .editorconfig: một số cấu hình chuẩn để viết mã tuân theo. Khi bạn dùng các ide như webstorm hay phpstorm thì các thiết lập của các ide sẽ bị thiết lập trong file này chiếm quyền cao hơn. Chẳng hạn như bạn cấu hinh code tab 4 khoảng trắng trong ide, nếu bạn sử dụng file .editorconfig này thiết lập 2 khoảng trắng chẳng hạn thì khi bạn format code nó sẽ tuân theo chuẩn của file .editorconfig .... đương nhiên trong này cũng có khá nhiều thiết lập đang cần bạn khám phá thêm :) !
- 1 số file khác thêm không cần quan tâm nhiều đên nó quá. Có thời gian thì bạn tìm hiểu thêm rùi chia sẻ với ae nhé

    Chú ý: Tuy là yeoman (yo) bạn cài lúc đầu có hỗ trợ tạo các component và generate bằng các lệnh cli tuy nhiên mình khuyến khích các bạn không lên sử dụng lệnh này mà hãy tự tạo bằng tay. Mình chỉ tận dụng cấu trúc sẵn có của practice này để làm base và phát triển lên mà thôi
Bonus thêm cho các bạn 1 số pratice tốt khi sử dụng làm việc với nodejs
  • Sử dụng các ORM quản lý: Mongodb với Mongoose, MySql Potgress .. có Sequelize
  • Sử dụng các supper set library để làm việc nhanh hơn: Lodash (Xử lý mảng, object thằng này thì max ba le), Moment (Xử lý datetime max ro na do), Async (Xử lý bất đồng bộ query db > Tuyệt lên dùng)
  • Các tool sử dụng làm việc tốt hơn: Webstorm, PhpStorm hoặc IntelJ (Tốt nhất là webstorm). Visual Studio Code là một sự lựa chọn hoàn hảo cho trình Editor với rất nhiều Plugin
  • Lên sử dụng ES6-7 để làm viết code và dùng babel để transfer về ES5. Code ES6-7 rất tường mình, đẹp, cú pháp trong sáng
  • => Khuyến khích sủ dụng luôn nodes phiên bản mới nhất để tận dụng được một số cú pháp đổi mới từ nó.
    Cuối cùng thì phần giới thiệu nó cũng chưa thể hoàn thiện hết. Vì nó còn khá nhiều câu hình thừa thãi mà bạn có thể cài đặt về và tự trải nghiệm cho bản thân mình. Bạn cũng có thể comment bên dưới về các cấu hình mà bạn chưa rõ để mình giải đáp bạn nhé. Ở các bài viết tiếp mình sẽ giới thiệu với các bạn một số practice khác cung được áp dùng khá nhiều khi phát triển ứng dụng nodejs, các bạn ủng hộ và đón đọc nhé :) !!!.

Thông Tin

Chỉ đơn giản là chia sẻ chút kiến thức ít ỏi. Mình biết khi mình viết blog này cũng là lúc mình nhìn nhận lại kiên thức học tập và làm việc của mình và mình được mọi người góp ý sửa sai cho mình!!

Đăng ký: Đăng Nhận xét (Atom)