Ctrl + Shift + v でプレビュー表示

visappproto

web application prototype

準備

git clone

git clone https://github.com/pppiroto/visappproto.git

• 本プロジェクト

$ cd ClientApp
$ npm install

.NET Core 6.0

https://dotnet.microsoft.com/en-us/download/dotnet/3.1

• 上記から入手しインストール

• https://qiita.com/uikou/items/40085758a596f87ecbf7

NPM

Mac

• Homebrew インストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• nodebrew インストール

brew install nodebrew

• nodebrew にパスを通す

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

• 最新バージョンをインストール

nodebrew install-binary latest

Windows

• nvm-windows https://blog.clock-up.jp/entry/2018/02/10/nodejs-manager-on-windows
• インストーラーのDownload (nvm-setup.zip) 解凍してインストール https://github.com/coreybutler/nvm-windows/releases

Angular

• https://angular.jp/
• dotnet new angular でプロジェクトにAngular CLI(ng)がインストールされるので、それを使用する場合

npm run ng --version

• Angular CLI をグローバルにインストール

$ npm install -g @angular/cli@12.2.2

Build / Run

• ClinentApp/dist が生成される

$ ng build
$ ng serve

E2Eテスト

• ng e2e Protractorを使用したエンドツーエンドテスト

Service

• https://angular.jp/tutorial/toh-pt4

$ ng g service services/Employee

.NET Core テンプレート

• テンプレート

ASP.Net with Angular

https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new-sdk-templates#spa

• カレントディレクトリにプロジェクトを生成

$ dotnet new angular -o visappproto

• テストプロジェクトの作成

$ dotnet new xunit -o visappproto_test

• ソリューションの作成とプロジェクトの追加、テストプロジェクトに参照の追加

$ dotnet new sln -o .
$ dotnet sln add visappproto
$ dotnet sln add visappproto_test
$ dotnet add ./visappproto_test/visappproto_test.csproj reference ./visappproto/visappproto.csproj 

実行(Hello world と サンプル)

$ dotnet watch run

• https://localhost:5001/

• Angular : ClinentApp/src/app/counter Sample

• Angular : ClientApp/src/app/fetch-data Sample
• ASP.NET Core : Controllers/WeatherForcastController.cs

開発

$ cd ClientApp/src/app

ng generate サブコマンド

要素	コマンド
モジュール	ng g moduole {{name}}
コンポーネント	ng g component {{name}}
ディレクティブ	ng g directive {{name}}
パイプ	ng g pipe {{name}}
サービス	ng g service {{name}}
ガード	ng g guard {{name}}
クラス	ng g class {{name}}
インターフェース	ng g interface {{name}}
列挙	ng g enum {{name}}

component 追加

• main-frame コンポーネントを追加

$ cd ClientApp
$ ng g component components/main-frame --module=app.module
CREATE src/app/components/main-frame/main-frame.component.css (0 bytes)
CREATE src/app/components/main-frame/main-frame.component.html (25 bytes)
CREATE src/app/components/main-frame/main-frame.component.spec.ts (650 bytes)
CREATE src/app/components/main-frame/main-frame.component.ts (284 bytes)
UPDATE src/app/app.module.ts (1267 bytes)

• app.module.ts に参照が追記される
• RouteModule.forRoot に追記

  imports: [
        ：
    RouterModule.forRoot([
        ：
      { path: 'main', component: MainFrameComponent },
    ])
  ],

• nav-menu.component.html にリンクを追加

          <li class="nav-item" [routerLinkActive]="['link-active']">
          <a class="nav-link text-dark" [routerLink]="['/main']"
            > Main</a
          >
        </li>

• Home画面のメニューにMainを追加

• Mainクリックで作成したコンポーネント画面に遷移

Wijmo

• https://www.grapecity.co.jp/developer/wijmo?utm_medium=link&utm_source=demo-wijm

NPM によるインストール(Angularコンポーネント)

• https://demo.grapecity.com/wijmo/docs/GettingStarted/Angular-Components
• https://demo.grapecity.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

$ cd ClientApp
$ npm install @grapecity/wijmo.angular2.all

VS Code 用 デザイナ (Wijmo Designer)

• https://marketplace.visualstudio.com/items?itemName=GrapeCityinc.gc-wijmo-designer

Demo

• https://demo.grapecity.com/wijmo/demos/

ASP.NET Core

• チュートリアル

• サンプルのダウンロード

コントローラー

• https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/older-versions-1/controllers-and-routing/aspnet-mvc-controllers-overview-cs
• クラス名は「Controler」で終わらなければならない
• dotnet watch run で起動時、Web API用のポートが用意される(proxy.conf.js)

ルーティング

• ルーティング

Action

• Progmra.cs 参照

ユニットテスト

• コントローラーのユニットテスト

• xUnit

• [Fact] 属性で、テスト ランナーによって実行されるテスト メソッドを宣言

• テストプロジェクトフォルダから、以下を実行

$ cd visappproto_test
$ dotnet test

• フィルタをかける

$ dotnet test --filter AutoCompleteControllerTest

Mock ライブラリの導入

$ dotnet add package Moq --version 4.16.1

Logger

Logger

• https://github.com/serilog/serilog-aspnetcore
• https://github.com/serilog/serilog-extensions-logging
• https://www.claudiobernasconi.ch/2022/01/28/how-to-use-serilog-in-asp-net-core-web-api/
• https://minato128.hateblo.jp/entry/2017/09/12/232155
• https://qiita.com/panda728z/items/7638c84d0e07a9f85ec3
• https://ichiroku11.hatenablog.jp/entry/2018/12/05/232457

dotnet add package Serilog.AspNetCore --version 5.0.0-dev-00259

Data Access

Oracle 19c

• SQL Developer 接続
• Connection文字列は、/Models/VisAppProtSettings.cs に記述したものをDI

DataAccess Package

• https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core

$ dotnet add package Oracle.ManagedDataAccess.Core --version 3.21.50

Oracle Data Providor直接利用

• /Controllers/SimpleDataAccessController.cs

MySQL

$ dotnet add package MySql.Data --version 8.0.28

OR Mapper(Dapper)

• 概要
• QueryFirstチュートリアル
• 応用

$ dotnet add package Dapper --version 2.0.123

Sample

• ClientApp/src/app/orm-data-access
• Controllers/OrmDataAccessController.cs

UI

Bootstrap

• Bootstrap

ngx-bootstrap

• ngx-bootstrap
• ngx-bootstrap npm
• Bootstrapのラッパー
• Bootstrapの機能をコンポーネント、ディレクティブとして呼び出すことができる

$ ng add ngx-bootstrap

Angular Material

• https://material.angular.io/
• カスタムテーマ

$ ng add @angular/material

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Components

• Toolbar

Theme

• https://www.creative-tim.com/product/material-dashboard-angular2
• Angular Material でカスタムカラーを使う
• カラーパレット生成
• カラーシステム
• Angular Materialのカスタムテーマを設定
• Angular Material _palette.scss

Modal

• https://valor-software.com/ngx-bootstrap/#/components/modals?tab=overview

Grid

• FrexGrid
• visappproto/ClientApp/src/app/components/employees

• 無限スクロール
• フォーム

Angular Sample App

• https://angular.jp/start
• StackBlitzサンプルプロジェクト

Windows

NVM

• https://github.com/coreybutler/nvm-windows/releases

Deploy

IIS

• IISの構成及び、ASP.NET Core Runtime 6.0.1 Hosting Bundle のインストール
• ASP.NET Core Runtime 6.0.1 Hosting Bundle

発行

• アプリケーションの発行
• 本体プロジェクト直下
• 発行されたら、IISのサイトにコピー

$ dotnet publish
visappproto -> ~/Workspaces/visappproto/visappproto/bin/Debug/net6.0/publish/

トラブルシュート

error : initial exceeded maximum budget

• EXEC : error : initial exceeded maximum budget. Budget 1.00 MB was not met by 171.82 kB with a total of 1.17 MB.
• angular.json

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "5mb",
    "maximumError": "10mb"
  },

SPAサーバーループで起動しない原因が掴めない

• dotnet watch run ではなく、以下いずれかで直接起動する

npm start
ng serve

Error: error:0308010C:digital envelope routines::unsupported

• Node バージョン下げる