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。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

meteorの覚え書き

METEORにMaterializeというCSSフレームワークを適用する。

ユーザログインを実装

マルチリンガルを実装

 

 

 

 

 

meteorを使ってみる

最近、躍進してきている雰囲気のあるMeteorを使ってみる。

MEANスタックと違いこれは、一つのプラットフォームです。

MEANはMongoDBとExpressとAngularJSとNode.jsを合体させた複合体であるが、

これはMeteorで完結している。

なので、学習コストがあまりかからない。

ユーザフレンドリー、この場合は開発者なのでデベロッパーフレンドリーっといった感じがします。

まだ、現時点で発展途上ですが、MEAN.IOあたりと比べればかなり安定して運用されています。

導入でかなりの試行錯誤を強いられたMEAN.IOと違って一瞬で導入できました。

ちなみに、公式ホームページはここ

iOSでインストールの場合

で、プロジェクトを作りたい場所に

設置されたプロジェクトに移動して

ブラウザでlocalhost:3000を開けば完了。

 

 

 

新しくなったMEAN.IOを試してみる

今年の2月からmean.ioのFACEBOOKのリリースで

Too much technology to play (graphQL, apollo, yarn, redux, angular2 so I have to do it as part of the next generation of mean…
But that means the Mean 1 – rc1 is out and we will (finally) release the 1.0 version
https://github.com/linnovate/mean/releases/tag/v1.0rc1
I changed the initial look and feel to be a bit more rellevent – simpler and hopefully friendlier…

っということで、今後はVer2っということです。

今までのものは、Ver1として

https://github.com/linnovate/mean/releases/tag/v1.0rc1

からGitできます。

でインストールして、スタートできるみたいです。

ただ私の環境からは単純には行かなくて、

こんなエラーがでてしまう

なので、

そして初めて

です。

Angular2_Webpack_Starter_by__gdi2290_from__AngularClass

こんな感じです。

 

 

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

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

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

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

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

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

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