MEANのプロジェクトをAngular4でCMS作成する⑥

Node.jsのディレクトリの方にmodels, routesっというフォルダを追加する。

そして、それぞれにpage.jsを作成する。

Cursor_and_workspace5____Documents_workspace5__-_____nodecmsproject_routes_page_js__workspace5_

そして、modelフォルダのpage.jsにはDBの定義を作成

routesフォルダにはのpage.jsには

app.jsは以下のような感じ

 

 

↓のコードを追加した。

// set routes
var pages = require(“./routes/pages.js”);
app.use(“/pages”, pages);

 

 

適当にMongoDBにレコードを追加してみる。

nodecmsproject____Documents_workspace5_nodecmsproject__-_mongo_cmsproject_pages

そうすると。。

http://localhost:3000/pages

にブラウザで接続。

localhost_3000_pages

で、OK。

 

 

MEANのプロジェクトをAngular4でCMS作成する⑤

Node.jsのAPIのフォルダを仮にnodecmsprojectっとして作成して、

そのフォルダに移動し、npm init

packageの名前を聞かれるのでそこだけapp.jsっとして、ほかはリターンですすんでいく。

次に

Expressフレームワーク,Mongoose,Body-parserをインストール。

をインストール。

Expressとは、Node.jsでの王道的な開発をスピードアップするためのフレームワーク

Mongooseは、MongoDBを操作するためのライブラリ。

Body-parserは、ExpressでPOSTで値を受け取る場合のミドルウェア。

/nodecmsproject/app.jsを作成してそこにコーディングを開始、必要なパッケージをインポートしていく。

 

/nodecmsproject/config/database.js

を作成。

。。DBがまだ作っていないので、MongoDBの作成をする。

まず昔にmongodbをインストールした記憶があるので、それを確認。

 

っということで接続情報を確認。

接続先は127.0.0.1:27017とわかる。

PHPStormのMongoExpressPluginを使う。

↓みたいな感じでMongoDBのGUIを設定。

Add_a_Mongo_Server_and_Preferences_and_workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

↓みたいな感じでPHPStorm開発環境に表示される。

workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

mongoのコマンドライン上で、このプロジェクト用のDBを作成

DB作成という目的のためだけのコマンドは存在しない。

新規のDBを使用するっとコマンドすると同時に新規にDBが作成される。

続いて、DB内にコレクションを作成する

ここで初めてDBが作成される。

workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

ここで

/nodecmsproject/config/database.js

の作成に戻って、

/nodecmsproject/app.jsは以下のようにコーディングしてみる。

 

で、とりあえず走らせてみる

 

っとなればOK。

Node.jsのソースが変えられるたびに自動で反応しサーバをリロードさせるようにnodemonをインストール

 

OK.

 

MEANのプロジェクトをAngular4でCMS作成する④

レイアウトのベースとしてBootstrapの公式ページから適当なサンプルを拾ってくる。

https://getbootstrap.com/docs/3.3/examples/starter-template/

このbodyの中身だけをsrc/app/app.component.htmlにコピペ

 

 

ブラウザで確認。

Cmsproject

ちょっと変だけど、まぁとりあえずOK。

 

 

 

 

MEANのプロジェクトをAngular4でCMS作成する③

ナビゲーションバーを作成したい。

そのためのコンポーネントを取得する。

app_component_html_-_cmsproject_-____Documents_workspace5_cmsproject_

src/app/componets/navbar/navbar.component.html

のファイルを開いてみると

 

といった状態。

本体の

src/app/app.component.html

を内容を全部消して、以下のように書き直す。

そしてリフレッシュして確認。

Cmsproject_and_app_component_html_-_cmsproject_-____Documents_workspace5_cmsproject_

OK

 

MEANのプロジェクトをAngular4でCMS作成する②

次にjQueryとBootstrapもインストールしておく。

$ npm install jquery bootstrap@3 –save
+ jquery@3.3.1
+ bootstrap@3.3.7
added 2 packages from 2 contributors and audited 38986 packages in 15.177s
found 0 vulnerabilities

そして、angular.jsonにインストールしたファイルを組み込む。

“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/cmsproject”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “src/tsconfig.app.json”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“src/styles.css”,
“node_modules/bootstrap/dist/css/bootstrap.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”
]
},

 

赤色は追加した部分。

もう一度サーバを立ち上げ直してみる。

 

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-02T14:01:14.518Z
Hash: c343c06bcd8a1fb9b97f
Time: 9685ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 341 kB [rendered]
chunk {styles} styles.js, styles.js.map 165 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.

 

赤色の部分を見てもらうと、バンドルされたスクリプトの容量が増加していることがわかる。

localhost:4200をもう一度ブラウザで見る。

Cmsproject

変化していることが分かります!

 

MEANのプロジェクトをAngular4でCMS作成する①

MEANのプロジェクトをAngular4で作成する。

まずは、AngularCLIをインストールする。

AngularCLIとは、AngularJS用のコマンドラインインターフェースのこと、

Angularを中心にプロジェクト開発をする上で使うことになるので、

まずインストール

 

そして、プロジェクトのベースを作成。

 

っと思ったらこんなことを言われてしまった。

Node.jsのバージョンが低くてAngular CLIでサポートされてないっということで、アップデートしてください。っということです。

ということで、Nodeのバージョン管理をするnをインストール

それで↓のバージョンをインストールする。

Node.jsのホームページでは↓のバージョンが一番使われてるっとあったので。

 

Node_js

 

そして再度コマンド。

 

生成したディレクトリはこんな感じ

cmsproject_-____Documents_workspace5_cmsproject_

ここまで来たら初めて

では、サーバを開始してみる

 

っと言った感じでサーバが開始。

localhost:4200をブラウザで開いてみるっと。

Cmsproject

といった感じで表示が出ればOK。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ブラウザ自動化処理、最終的にChromyにした

ブラウザ作業を自動化するためにいろんなパッケージで悩んだが、

最終的にChromyを使用することにした。

Chromyはnightmareとほぼ同じだが、Chromeのブラウザで扱うことが出来る。

そして、nightmareはSeleniumベースなので、つまりChromyもSeleniumベース。

で簡単にインストールできる。

非同期処理を行うのでvoも入れておく

 

selenium-webdriverブラウザ定番作業自動化

なんだかんだ、ブラウザ

 

selenium-webdriverでブラウザ定番作業を自動化する。

インストール

Chromeで自動操作をさせたいので、Chromeのドライバーもインストール

コードは、例えば以下のような感じです。

ただこれは、、一回一回実行するために、Chromeのインスタンスが開始する。

新たに開かずにChromeを操作するために

を追加する必要がある。

ユーザデータディレクトリを確認する。

chromeのURLに「chrome://version/」を入力するっと。

表示される内容の「Profile Path」の項目の内容がユーザデータディレクトリ。

 

PHPStormでJSCS: Please path to ‘JSCS’ packageの警告

JSCSとは、Javascriptのコーディングの見た目を統一するためのJavascriptの一つのライブラリのことです。

PHPStorm/WebStormでこのJSCSが求められる場合があります。

「JSCS: Please path to ‘JSCS’ package」っと警告のメッセージ。

まずは、JSCSをインストールする必要があります。

PHPStrom->Preference->Language&Frameworks->Javascript->Code Quality Tools->JSCS

のダイアログで「JSCS package」にjscsのパッケージのディレクトリを指定する。

例えば、「/usr/local/lib/node_modules/jscs」。

PHPStrom->Preference->Editor->Code Style->Javascript

のダイアログで歯車アイコンをクリック、Import Scheme->JSCS config file

でjscsの設定ファイルを指定すればいい。

ただ、単純に今回は、

PHPStrom->Preference->Language&Frameworks->Javascript->Code Quality Tools->JSCS

をEnableにして終了。