Downloaded 10 times
![AngularJS route
module pairs.search {!
!angular.module('pairs.search', [!
! !'ui.router',!
! !'ipCookie',!
!]).config([!
! !'$stateProvider', !
! !'$urlRouterProvider', !
! !'$locationProvider', !
! !states!
!]).service('SearchService', [!
! !'HttpService', !
! !'$q', !
! !'ipCookie', !
! !SearchService!
!]).controller(controller)!
!.directive(directive);!](https://image.slidesharecdn.com/megusta20150513-150514033624-lva1-app6891/85/pairs-AngularJS-x-TypeScript-x-e2e-1-73-320.jpg)
Uploaded byTakuma Morikawa
pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1
2015年5月13日 目黒スタートアップ勉強会#1 での発表資料となります。
![[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE](https://cdn.slidesharecdn.com/ss_thumbnails/observabilityconference2022311newspickssre-220310143345-thumbnail.jpg?width=640&height=640&fit=bounds)
pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1
- 1. 第一回 目黒スタートアップ勉強会 Takuma Morikawa/ eureka, inc. Copyright © 2009-2015 eureka, inc. All rights reserved.
- 2.
- 3. Copyright © 2009-2015eureka, inc. All rights reserved. なまえ Takuma Morikawa しょぞく たんとう （Go, JS, たまにインフラ） じこしょうかい
- 4.
- 5. 株式会社エウレカ 専門分野以外の領域 でも活躍できる エンジニア! 50人 非エンジニア! 25人 事業内容 自社サービスの企画・開発・運営 ・オンライン・デーティング・サービス「pairs」 ・ カップル専用アプリ「Couples」 海外拠点 ・ 唯麗家股份有限公司（台湾） ・ EUREKA SG Pte. Ltd.（シンガポール） 社員数: 75名 インターン・業務委託含む
- 7. オンライン・デーティング・サービス「pairs」 12年9月 13年3月 13年9月14年3月 14年9月 15年3月 225万 ｡ﾟ+＼200万会員突破/／+.ﾟ リリース 2012年 10月 会員数 210万人 プラットフォーム PC/SP/iOS/Android 135万 45万 90万 190万 2年で 200万人
- 9. カップル専用アプリ「Couples」 ｡ﾟ+＼200万DL突破/／+.ﾟ リリース 2014年 5月 DL数210万DL プラットフォーム iOS/Android 14年5月 14年10月 15年3月 215万 170万 130万 85万 45万 国内 No.1
- 10.
- 11. pairs golang developmentfrom scratch Go言語でいかにして新しいpairsを作っているのか
- 12. pairs golang developmentfrom scratch Go言語でいかにして新しいpairsを作っているのか
- 13.
- 14.
- 15.
- 16. ・おそらく採用の第一候補に上がるJS FW ・元々pairsでも使っていた - メンバーはみんな書ける（はず） ・状態遷移が非常に楽 -pairsと相性が良い ・SPAにしたい - アクション増加 => マッチング数増加 Why AngularJS?
- 17.
- 18.
- 19.
- 20. あるよく晴れた日の午後… one day, verysunny day afternoon…
- 21.
- 22.
- 23.
- 24.
- 26.
- 27.
- 28.
- 30.
- 31.
- 32. $ jshint hoge.js: line17, col 187, Line is too long. hoge.js: line 25, col 174, Line is too long. hoge.js: line 27, col 126, Line is too long. hoge.js: line 31, col 126, Line is too long. hoge.js: line 145, col 124, Line is too long. hoge.js: line 22, col 42, Expected '===' and instead saw '=='. hoge.js: line 24, col 44, Expected '===' and instead saw '=='. hoge.js: line 306, col 11, Missing semicolon. … Why TypeScript?
- 33. $ jshint |wc -l Why TypeScript?
- 35.
- 36.
- 37.
- 38.
- 39. ʕº̫͡ºʔ（私=森川） （ボス）ʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢ WhyTypeScript?
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71. ・ディレクトリ構成 ↓を参考にしています Best Practice Recommendationsfor Angular App Structure AngularJS
- 72. app/ - 機能群/ - ログイン/ -検索/ - controller/ - service/ - directive/ - routing.ts - 共通ライブラリ/ - e2eテスト/ AngularJS directory structure
- 73. AngularJS route module pairs.search{! !angular.module('pairs.search', [! ! !'ui.router',! ! !'ipCookie',! !]).config([! ! !'$stateProvider', ! ! !'$urlRouterProvider', ! ! !'$locationProvider', ! ! !states! !]).service('SearchService', [! ! !'HttpService', ! ! !'$q', ! ! !'ipCookie', ! ! !SearchService! !]).controller(controller)! !.directive(directive);!
- 74. AngularJS route !function states(! !!$stateProvider: ng.ui.IStateProvider,! ! !$urlRouterProvider: ng.ui.IUrlRouterProvider,! ! !$locationProvider: ng.ILocationProvider! !) {! ! !$stateProvider! ! ! !.state('search', {! ! ! ! !url: '^/search/:type/{page:int}',! ! ! ! !controllerAs: 'ctrl',! ! ! ! !controller: controller.SearchController,! ! ! ! !templateUrl: '/search/hoge'! ! ! !});! !}
- 75. ・ロジックは、ほぼ書かない前提 ・ディレクティブ用のshared controllerな感じ => RIPcontroller in Angular2 AngularJS controller
- 76.
- 77.
- 78.
- 79. ・ベーシックにKarma & Jasmine AngularJSunit testing
- 80. ・ベーシックにKarma & Jasmine（の予定） AngularJSunit testing
- 81. ・ベーシックにKarma & Jasmine（の予定） =>実はまだ整っていない… AngularJS unit testing
- 82. ・ベーシックにKarma & Jasmine（の予定） =>実はまだ整っていない… ・TSコンパイルは通るけど、karma実行時にTSエラーになる ・駄目だったらJSで書く予定 AngularJS unit testing
- 83. ・ベーシックにKarma & Jasmine（の予定） =>実はまだ整っていない… ・TSコンパイルは通るけど、karma実行時にTSエラーになる ・駄目だったらJSで書く予定（来週のタスク） AngularJS unit testing
- 84.
- 85.
- 86.
- 87. 【ディレクトリ構成】 - 機能テスト/ //単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 88. 【ディレクトリ構成】 - 機能テスト/ //単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 89.
- 90. AngularJS page object varLoginPage = function() {! !// ログインボタンのエレメント! this.loginButton = element(by.id('login'))! ! !// ログインページを開く! this.open = function(){! browser.get('/#/login');! }! ! !// ログインボタンを押下する! this.clickLoginButton = function(){! var loginButton = new LoginPage().loginButton;! return browser.wait(function(){! return loginButton.isPresent();! }).then(function(){! return loginButton.click();! });! };! };! module.exports = new LoginPage();
- 91. 【ディレクトリ構成】 - 機能テスト/ //単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 92. AngularJS helper // time_helper.js! ! varTimeHelper = function(){! !// 現在のUNIXTIMEを取得する! !this.getCurrentUnixtime = function(){! ! !return Math.floor(new Date/1000);! !};! !! };! ! module.exports = TimeHelper;
- 93. AngularJS helper // helper.js! ! varHelper = function(){};! ! // 外部で定義したヘルパー関数をHelperへ詰め込む（mixin的な？）! require('./time_helper').call(Helper.prototype);! require('./selectbox_helper').call(Helper.prototype);! require('./hoge_helper').call(Helper.prototype);! ! module.exports = new Helper();
- 94. AngularJS page objectw/ helper // login.po.js! ! var LoginPage = function() {! // load helper! !var helper = require('../helper');! !// 都道府県のセレクトボックス ! this.stateSelect = element(by.model('vm.state_id'));! ! !// セレクトボックスから指定した都道府県を選択する! this.selectStateByName = function(name){! var el = new LoginPage().stateSelect;! helper.selectDropdownByText(el, name);! }! };! ! module.exports = new LoginPage();
- 95.
- 96.
- 97. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる -非常に困る AngularJS e2e w/ CI
- 98. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる -非常に困る ・なんで失敗するのか AngularJS e2e w/ CI
- 99. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる -非常に困る ・なんで失敗するのか - e2eがタイムアウトしてる - Angular以外のページ AngularJS e2e w/ CI
- 100. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる -非常に困る ・なんで失敗するのか - e2eがタイムアウトしてる - Angular以外のページ => Facebookのログインポップアップ AngularJS e2e w/ CI
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113. ・複数のテストタスクをgulpに登録する => 違うテストタスクとして起動させる - ブラウザが起動し直される -ちゃんとCookie削除されます AngularJS e2e w/ CI
- 114. AngularJS e2e w/CI // circle.yml! ! test:! override:! !# Goのテスト! - gvm use stable; ginkgo -tags=tests -r . -cover! !# メインのe2e! - gulp e2e! - sleep 2! !# ログインページ その1! - gulp e2e:login_success! - sleep 2! !# ログインページ その2! - gulp e2e:login_error1! - sleep 2! !# ログインページ その3! - gulp e2e:login_error2
- 115. AngularJS e2e w/CI （e2e失敗のデモ）
- 116.
- 117.
- 118.
- 119. 「世界で愛されるサービス」を一緒に作りませんか？ セグメントNo1 サービス グローバルビジネス Business! pairs Goフルスクラッチ Engineering! マッチングアルゴリズム BigData! ✕ ハイブリッドエンジニア 大規模行動データ解析
- 120.