[MEAN_STACK] miniERP - Development Log 1 - Basic Structure

之前嚐試用 mean.js 來搭建想要做的 miniERP

但 mean.js 本身有點複雜，需要花一些時間去了解

不過使用 MEAN stack 來開發，也不一定要用 mean.js or mean.io

自己搭建也是可以

MEAN 代表的是 : MongoDB、Express、Angular、NodeJs

各自安裝的方式網路上都有許多資料可查，這邊就不贅述

主要就是透過 npm、bower來管理前後端套件

Mac 上還可以用 homebrew 來安裝並管理套件，例如 node、mongoDB等

I will use MEAN(MongoDB、Express、Angular、NodeJs) to build a ERP system

There are many websites illustrate how to install respectively, so I won't explain here.


使用 MEAN stack 的概念很單純

前端用 Angular 來處理

而當需要和 mongoDB 溝通的時候，就用 NodeJs 來提供 API，扮演好後端的角色

接下來就開始用出一個最簡單的初始架構

My concept to use MEAN is simple.

Angular for front-end and NodeJs for back-end.

If front-end need to access database, it will use APIs provided by back-end

source code 在此


1. 用 npm init 初始，這邊將 entry point 設定為 server.js

   Use npm init command to initiate and set entry point to server.js

2. 修正 package.json 如以下，然後 npm install 安裝所需套件

   Modify package.json as below and then use npm install command to install all the dependencies

3. 在用 bower 安裝 front-end 之前，先來定義資料夾結構

   Before using bower to install front-end packages, take a look at file structure

    miniERP : root

    

    module : 放自己寫的 back-end module (the back-end module we wrote)

    public : 靜態資料夾 (static folder)

    components : bower 存放 front-end dependencies  (bower stores front-end dependencies here)

    javascript : 放自己寫的 front-end module (the front-end module we wrote)

    views : 放 html (html files)

    routes : 放管 routing rule 的 source code (files which takes care routing)

   接下來在 root  下新創一個 .bowerrc 的檔案，內容如下

   此檔案的作用是要指定 bower 存放套件的地方

   Create a .bowerrc under root directory

   It is used to assign the installation directory to bower

    

   

    然後用 bower init 新創一個 bower.json，並增加以下 dependencies，然後 bower install 安裝

    Use bower init command to start and modify bower.json as below.

    After modification, use bower install command to install

4. 所需套件都安裝完了，接著在 root 下新創一個 server.js，內容如下

   主要就是創一個 HTTP server

   Create a server.js as below under root directory.

   The server.js builds a HTTP server

5. 在 routes 資料夾下，新創一個 routes.js 如下，用來掌管 routing rule，以及之後的 APIs

   Create a routes.js as below under routes directory.

   The routes.js takes care of routing and APIs.

6. 在 public/views 下新增 index.html，內容如下

   Create index.html as below under public/views.

   這邊做一個 navbar，並有兩個選項，其中一個是 dropdown menu

   Create a navbar and two options. One of the options is dropdown menu

 7. 啟動 server.js，node server.js or supervisor server.js (npm install -g supervisor)

    然後在 browser 訪問 localhost:3000，可以看到以下畫面

    Start server.js : node server.js or supervisor server.js (npm install -g supervisor)

    Visit localhost:3000 in browser and you will see the page as below

以上最簡單的架構已經有了

之後會加入 APIs 以及使用 Angular 來做 front-end

Now we have the basic structure.

We will construct front-end and APIs later.