MVC5, Twitter Bootstrap , Knockout.js SIngle Page Application

1. MVC5+BOOTSTRAPで作るSPA
WITH OFFICE365アカウント
(+GOOGLE, FB, TWITTERアカウント)
2014/01/27 RIAに代わる技術、実用的SPA(Single-page Application)

2. プロフィール
 野呂清二
 ㈱エクシード・ワン
 http://www.facebook.com/seiji.noro
 Microsoft MVP for Office365
 趣味
 最近HTML5にはまってる。
 ブログ
 http://tech.exceedone.co.jp/
 http://www.appsforoffice.net/
 このスライド
 http://www.slideshare.net/seijinoro/20140127-ria-spa

3. 概要とデモ
MVC5+Bootstrap+Knockout.js

4. MVC5+BOOTSTARP+KNOCKOUT.JS
最初にアプリのデモ
SPAなので、
CURD全部,Single Pageで。

5. MVC5+BOOTSTARP+KNOCKOUT.JS
このデモの構成
System.Web.Mvc.dll
EntityFramework.dll(O/Rマッパー)
サイト
サービス
HTML(MVC)/JS/CSS
WebAPI
HTML, JS/CSS
Data

6. いいところ
MVC5+Bootstrap+Knockout.jsなら

7. IPHONE, ANDROID, WIN PC の各種ブラウザー
で同じソースで動きます！！

8. 環境構築は簡単です。
NUGETから追加、依存関係も大丈夫！

9. 統合環境 (VISUAL STUDIO)で
サーバ・クライアントともデバック簡単！
JS/CSS
MVC

10. 独自認証,各種アカウントとも連携簡単！ 1/3
FB, etc
Office365

11. 独自認証,各種アカウントとも連携簡単！ 2/3
 IdentityConfig.cs(管理クラス, 自動作成)
 Web.config (設定、自動で記入される)
 <configuration>
 <appSettings>
 <add key="ida:FederationMetadataLocation"
value="https://login.windows.net/exceedone.onmicrosoft.com/Fe
derationMetadata/2007-06/FederationMetadata.xml" />
 <add key="ida:Realm"
value="https://exceedone.onmicrosoft.com/WebApplication3" />
 <add key="ida:AudienceUri"
value="https://exceedone.onmicrosoft.com/WebApplication3" />
 </appSettings>

12. 独自認証,各種アカウントとも連携簡単！ 3/3
 Startup.Auth.cs
 app.UseMicrosoftAccountAuthentication(
clientId: "00000000XXXXXXX",
clientSecret: “ZZZZZZZZZZZZZZZZZZZZZZZZ");
 app.UseTwitterAuthentication(
consumerKey: “XXXXXXX",
consumerSecret: “YYYYYY");
 app.UseFacebookAuthentication(
appId: “XXXXXXXXXXXXXX",
appSecret: “YYYYYYYYYYYYYY");
 app.UseGoogleAuthentication(); デモ

13. WEBサーバスケールアウトもワンクリック！

14. デプロイもワンクリック！

15. 参考

16. MS系のSPAについての
基礎はこちらを参考に！
 Visual Studio 2013 の Single Page Application (SPA) テ
ンプレートを使った開発 (Knockout.js)
 http://blogs.msdn.com/b/tsmatsuz/archive/2013/11/01/visualstudio-2013-asp-net-single-page-application-spa-knockout.aspx
 ASP.NET シングル ページ アプリケーション (SPA) 詳
説 ［スライド＆動画］
 http://www.buildinsider.net/hub/bioff/c3