EntityFrameWorkを使って SQLserverをコードファストで作って crud
TL;DR
.NET core を使ったWebAppで やっぱりDBを使ったサービス作りたいよね
社内サービスでは「強い人が」ぱぱっと やっちゃってよくわからなかったから
自分で組み立てるよって話
この記事の目的
初期データ.csvがあって DB(SQLserver)にそのデータをInsertして反映させる
前提知識
- ASP.NET core の基礎
- Visual Studio を使えること
- コードファストという言葉の意味
開発環境
- Visual Studio 2017
- Windows 10
- .netcore 2.2 wepapp
- SPA React
課題
- CSVをインポート
- SQL Server に登録できるようにする
- webAPI使ってInsert,Update
- webAPI使ってCはやらないよ（できるの？）
再現手順
ソリューションの直下にModelsフォルダを（なければ作る）
モデルの下にclasshogehoge.csを作る
hogehoge.csに
using System.Collections.Generic; using Microsoft.EntityFrameworkCore;
を追加
１つのDBを作成するにはDbContextクラスをを利用します。 複数のDBを作成するには複数DbContextクラスが必要になります（基本的には）
DbContextクラスを通じてそのDBに付属する テーブルを操作します。
Dbcontextの記載は同一hogehoge.csに書いてもOKですが、 別ファイルにした方がいいかもしれません （今回は同一ファイルに書きました。）
(hogehoge225.cs)
別ファイルにするなら DbContext.csとして 分けたほうがいいでしょう
テーブルはhogehoge.csに追加 例：テーブル名がclass カラムに変数
初期のDBとテーブル作成は パッケージマネージャーコンソール に
Add-Migration InitialCreate Update-Database
でDBが作られます。
残った課題
WebAPIを使ったデータのinsert csvのインポート etc
最後に
長くなりましたので次回へ続きます。
Visual Studio のビルド待ちが長いから バックエンドと フロントエンドを分離した
TL;DR
プロジェクトが肥大化したので、ビルド待ちが長すぎて辛くなってきた。 ASP.NETCOREのコンパイルはすぐ終わるので フロントエンドのコンパイル待ちはつらいから分離した
開発環境
バックエンド ASP.NET core 2.2(C#) フロントエンド node.js react
課題
build debug 開始できるまでの時間が長い
再現手順
ASP.NET core MVC は VisualStuio でDebug モードで起動すると IIS express server が立ち上がります
自動的にブラウザが立ち上がる仕組みになっています。
フロントエンドが肥大化するにつれ node.js + react + typescript の起動が遅くなっている問題がありました。
C#側のデバッグを開始するにしても、フロントエンドの起動に時間を引っ張られるので、 分離を行いました。
課題解決方法
①
C#側のコードを spa.UseProxyToSpaDevelopmentServer を使って着信応急をSPAサーバーの転送する
ASP.NET Core で React プロジェクト テンプレートを使用する | Microsoft Docsdocs.microsoft.com
② node.js側の設定で pakage.jsonに 開発側のアドレス 例：port 8080 プロパティ
"proxy": "http://localhost:8080",
を追加する
採用
今回は①を採用しました startup.csの最後あたりに
// コメントアウト
// spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
を書き換える （例：SPAサーバーが "http://localhost:3000" とする。）
これで フロントエンド VisualStudioの デバッグモードでは バックエンドに分離できます。
フロントエンドと連結する際は ClientApp 以下で npm start コマンドを打って
ブラウザが立ち上がったら、URLのポートを手打ちで8080に設定すればOKです。
残った課題
Visual Studio 2017 .netcore dev立ち上げ時にSwaggerのページを表示したいのだが Webappのプロパティの変更から 立ち上げ時にswagger ページを指定しようとすると うまくいかず泥沼にはまりました
家のvisual studio 2019で再挑戦します休み中に
プロダクト紹介
TL;DR
ころちゃんhttps://twitter.com/corocnと会話してて やはりエンジニアたるものblogでアウトプットせねばならぬ と自分の中で湧き上がるものがあったので
今回は自分の作っている（趣味）プロダクトを紹介します
この記事の目的
- 現状を把握するため
- プロダクトのあるべき姿の差を見つめるため
前提知識
- WEB系の知識は業務で約半年
- HTML (一般的なタグは理解できる)
- Javascript (ES2016 でなんおかなる程度)
- .net core MVC REACT
- EntityFramework でdatabaseを使える
基本的なWEBアプリを作れる程度です
開発環境
VisualSudio rksoftware.hatenablog.com docs.microsoft.com
を使って、.NET core + React のアプリで作りました。
Treemapというchartを使いたかったのでフリーのgoogle chartを使いました
実際のアプリ
http://nikkei225.herokuapp.com
毎日の日本の会社の時価総額を出しているサイトです なお毎日自動で更新する機能がまだついてません・・・・
機能としては、見ればわかる程度です
左タブで、いろいろな条件分けソートをだす。 及び視覚的にわかりやすいサイトを作ってきたいです
これから実装したいこと
1日1回の日データの入手（有料サービスから） DBに自動でinsertする DBから情報を反映 ソート条件を変更する
実装しようとしたけどおくわからないこと
treemapで見やすいライブラリは有料が多い もっと見てる人にわかりやすい表示方法はないか 携帯端末からの見やすさをどうしたらよいか 主にグラフ図
最後に
WEBエンジニアに代わって半年 結構年食っても新人として頑張って言ってますので Twitter廃人っぷりをブログで生かしてしていこうと思います。
