Angularで作るER DIAGRAM TOOL – 第一回 Cloud9へAngularをインストールする

自前で開発しているLaravel用Scaffoldパッケージが、
複雑化するとともに、JSONデータを書くのが煩雑になってきたため、
Angularの勉強もかねて、ER図作成ツールを作ることにしました。

■開発環境
IDE:Cloud9
開発言語:Typescript
フレームワーク:Angular v5.2.3
CSSフレームワーク:bootstrap、ngx-bootstrap
JSライブラリ:jsplumb Community Edition

■機能要件
・Model(Table)の作成・修正・削除
・Schema(Column)の作成・修正・削除・並び替え
・Relationship(one-to-many or many-to-many)の作成・削除
※one-to-manyの削除は、targetのSchemaを削除で実装
※many-to-manyの削除は、pivot modelの削除で実装
・JSONのエクスポート

■gitリポジトリ(随時更新)
https://github.com/dog-ears/er-diagram-tool

自分が、Angular初心者なので、
初心者にもわかりやすい解説をしようと思ってます。

では、まずCloud9へAngularをインストールしましょう。

(1)Cloud9

■cloud9
https://c9.io/

アカウントを作る、またはGithubのアカウントでログイン。
Create new workspaceする。

・templateはblankを選択
・READMEは削除

(2)nodeとnpmのアップデート

もともとのバージョン(2018/2/6現在)
node v6.11.2
npm 3.10.10

■nodeJS 公式
https://nodejs.org/

Recommended Version は 8.9.4なので、
それをインストールする。

//node アップデート

nvm install v8.9.4
nvm alias default v8.9.4

node v8.9.4に
npm 5.6.0になりました。

(3)Angularのインストール

公式に従って、AngularCLIを使用。

// Angularのインストール

npm install -g @angular/cli

// プロジェクトの作成

ng new er-diagram

ルート直下にer-diagramフォルダができるが、不要なので、階層を変更します。

shopt -s dotglob
mv er-diagram/* ./
rm -rf er-diagram

// ドキュメントルートを変更

sudo vi /etc/apache2/sites-available/001-cloud9.conf

・iで編集モードに移行。
・終了するときは、escキーを押して、:wq!で保存終了できます。

[変更]
DocumentRoot /home/ubuntu/workspace

DocumentRoot /home/ubuntu/workspace/dist

これで、
ng build
を実行すると、distフォルダが生成されます。

distフォルダ内のindex.htmlを開いて、「Run」でプレビューしましょう。
※表示されるurlは、https://***.c9users.io/dist/index.htmlで、notFoundになるため、
https://***.c9users.io/を開きましょう。

なお、作業中は、

ng build -w

を実行すれば、ファイル状況を監視するようになり、
保存するたびに自動で更新されます。

(4)githubの設定

Angular CLIでインストールした時点で、git init されてます。
なので、リモート設定して、pushします。

git remote add origin git@github.com:dog-ears/er-diagram-tool.git
git push -u origin master
git tag 0.1.0
git push origin 0.1.0

■github
https://github.com/dog-ears/er-diagram-tool/tree/0.1.0

今回はここまで。
次回は、ngx-bootstrapのインストール、google material iconの追加、ナビバーの作成を行います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする