テキストによるエクササイズの続きです。5.3 データのクエリとウィジェットのエクササイズ（OutSystems セルフトレーニング） Part 1: Create a reusable Action 淡々と進めます
Part 2: Convert Action to a Function こうして作ったユーザアクションは、基本的には、ステートメントとしてのみ呼び出すことができる、方法はアクションフローへのドラッグ&ドロップ。
FunctionにすることでExpressionの中で呼ぶこともできるようになる。
やることはプロパティを変えるだけ
Part 3: Test calling an Action and a Function できるけど、分かったような分からないような（分かっていない）
テキストによるエクササイズの続きです。4.4 画面のライフサイクル: インタラクションのエクササイズ（OutSystems セルフトレーニング） Part 1: Add participants to a movie アクションからの「New Web Screen」で自動的には名前はつけてくれなかった。（Mac版だから？）
「Link」のプロパティの設定は、Widget Treeで「Actions」の中ににあるリンクを選択。
タイトル欄にExpressionを追加したのち、ムービータイトルを表示させるようにするための設定は、下記の図のような形でダブルクリックにより指定できる。
Windows環境とMac環境両方で開発している場合、すなわち、複数人で開発している場合、モジュール（今回でいうとOSMDb_Core）が変更された場合の再読み込みはそれぞれで行う必要がある（当たり前といえば当たり前）。
再読み込みを行なったいないために、データタイプにPersonMovieRoleが表示されなくて悩んだ。
Part 2: Test the ‘add participants’ to a movie ここまで順調にきたわけですが、ついにエラー発生。よりによって実行時エラー。開発環境側にはエラーはない。
こうなってしまうと、何をすれば良いか分からない。
が、もう少し冷静になって考えてみると、画面を開く時点でエラーになっているので、preparation が怪しいと考えられる。見てみると、赤ではないが黄色の波線。
SQLを実行してみるとエラー。ピリオドとカンマ！
ということで修正したら動きました。
SQL書いたらその場でテストしましょう。
Part 3: Display the participants of a movie ではPersonエンティティを取得した上で、PersonMovieRole もソースとして追加し、PersonMovieRoleへのフィルタとして、MovieId とActor を指定しようとしています。
しかし、このActor のフィルタ追加で、PersonRole はないよと言われています。正解は、PersonalRole。 その後Group By の設定をしますが、若干表現が異なります。
そして、それをやった後の画面も相当異なります。
Group By の設定を、テキストの画像にあるように、▽ボタンを押して行うのではなく、右クリックで行なったら、近い形になったので、こちら右リック推奨です。
Part 4: Search and filter the list of movies 淡々と進める
テキストによるエクササイズの続きです。4.2 リレーションのモデリングをしてみよう（OutSystems セルフトレーニング） Part 1: Add the ‘Edit Movie’ feature テキスト通り進められます。
途中で、Movieの中にGenreIdが表示されなくて、追加し忘れていたかと思ったら、追加はしたけど表示更新していなかったということでした。
とりあえず、テキストボックスをドラッグして幅を広げる際のデザイナの表示がかっこいい。こういうの待ってたよ！
Part 2: Add the ‘New Movie’ feature 最初に「＜＞」タブをクリックすると書かれていますが、現在のバージョン11では「Widget Tree」タブですね。
そしてテキストでは「Layout_London」が指定されていたのを今知る・・・
まあ、そのまま進めます。（後から変えられるのかな・・・）
Part 3: Test the creation and update of movies 動作確認
ちゃんと動いています
Part 4: Add the ‘Edit Person’ feature そのまま進めます
Part 5: Add the ‘New Person’ feature 衝撃の事実？
実はここまでにも若干気になっていたのですが、
People とPerson Detail が、結構出来上がっている。
フォームを自動的に作ってくれるので、ある程度上記でやってきたSaveボタンとかは自動的に作ってくれるのかなと思ったりしていたのですが、ちょっとできすぎじゃない？という気が・・・更新後のメッセージとか、このあと作るんじゃないの？みたいなのまでできている。
まさか、小人が作ってる？
そうじゃないとすると、他の人と被って更新している？同じ名前だとそんなことが起きうる？ちょっと変な感じ。
Modeling Data Relationships Exercise
https://www.outsystems.com/learn/lesson/859/modeling-data-relationships-exercise/
3.3、3.6に続き、テキストをやってみます。3.6 ウィジェットを使ってみよう（OutSystems セルフトレーニング） Part 1: Create a foreign key between Entities テキスト通り
外部キーを追加する際に、カラムの型はデータ自体の型を指定するのではなく、データIdentifierを指定する、というのが面白い
Part 2: Create the junction Entities テキスト通り、関連テーブルのエンティティを作成
Part 3: Create an Entity Diagram リレーションの線が自動的に描画されるはずが、最初描画されずに、あれ？と思いましたが、画面をクリックすると表示されました。
Part 4: Publish the application module Management Dependencies画面は若干変わっている。
Widgets I Exercise
https://www.outsystems.com/learn/lesson/876/widgets-i-exercise/
3.3と同様3.3 データのモデリングをしてみよう（OutSystems セルフトレーニング） テキストを進めます。
Part 1: Add a new module to the application まず「Responsive」ではなく「Web Responsive」になっている、ちょっと気になる。
また、ワークスペースの画面状態も、初期コンテントがない状態、ちょっと気になる。
Part 2: Reference Entities from core module 書いてある通り
Part 3: Retrieve and display the movie list テキストでは、既存のHomescreenの名前を変えることになっているが、新しくscreenを作る。
テンプレートはとりあえず「Empty」。名前は最初から「Movies」。
スクリーンの準備としてアグリゲートの指定をする。そこにエンティティを指定することでデータの取得処理が作られる。
スクリーンのコンテントにテーブルレコードを指定して、そのデータソースとして準備で取得したデータを指定する。
という流れですね。これで画面も表示されました。
Part 4: Retrieve and display a movie’s details 詳細画面の表示のさせ方＝画面へのデータの連携のさせ方は同様ですが、フィルタをかけて１件を表示対象とするということ。
なので、Input Parameter を設定する。
Widthを「8 col」に指定する、というところの画面説明がないですが、Stylesの中。
フォームの名前が自動的に変わると言われても、どこで確認できるか分かりませんでしたが、Widget Tree で見ることができました。
モデルの項目をドロップすると画面を構成してくれるのは大変助かります。
その際、テキストではラベルと入力域が左右に並ぶ形になっていますが、今回は縦に並ぶ形になってしまいました。
Part 5: Add a Screen to the top Menu そのまま
Modeling Data Exercise
https://www.outsystems.com/learn/lesson/875/modeling-data-exercise/
Lesson Materialsをダウンロードすると、その中にテキストPDFが入っているので、それを見て進めます。
テキストはバージョン10ベース、現在の最新環境は11のため、所々違うところが出てくると思われます。
Part 1: Create the application いきなり、Blank module templateを使うようにとなっていますが、それが見当たらない。（先を進めると、このことを言っているのではなく、最初のモジュールを作る時にBlankを選択するのだと分かりますが）
何かテーマを選んでみるか。
参考：http://annatokugawa.blog.fc2.com/blog-entry-45.html
とも思いましたが、またハマると嫌。
出来上がりイメージはトップメニューの形のようなので、「TOP MENU」テンプレートを選択します。
それ以降は、テキストの通り。
Part 2: Create Entities Mandatoryとは「必須」の意味。
で進めていってたら、キーボード入力を受け付けなくなった。mac版で進めるのはやはりリスキーだな・・・
一回終了したら正常化されました。なお、終了する際は、Uploadします。Saveではない、すなわち、これは実は全てサーバ管理になっているということですね。
Part 3: Create Static Entities データを追加していくのみ
Part 4: Publish the application module クリックするのみ。
ただ、「Template_TopMenu」が見つかりませんというメッセージ。
むう・・・テンプレートを選ばないこともできたのだろうか。
さらにタイムアウトになったりしましたが、再度ボタンを押すと成功します。
ただ、NOTEとして書かれている通り、この時点ではUIがないので、「Wrong URL address – this module does not contain a default entry.」というエラーメッセージが表示されるのみです。
OutSystemsもおもしろうそうなので、早速、WebAPIのデータを表示させるアプリを作ってみようかと思います。
その際、mac版を使ったところ、読み込み時にエラーになってしまう。Windows版では成功したということは、やはりmac版は多少不安定な面がるかもしれません。
そして、呼び出しはできる（WebAPI読み込みコンポーネントのようなものは作れる）ものの、それを画面のListに表示させる方法がいまいちわからない。
もう少し勉強しようということで、こちらをしばらくやってみたいと思います。
OutSystems セルフトレーニング
http://www.bluememe.jp/outsystems/outsystems_support/self_training.html
（しばらくこのページを随時更新していく形になります）
1 コースイントロダクション 日本語字幕あり（しばらくあるようなので、特筆しない限りは以降、日本語字幕ありです）
各セッションの概要
どういうアプリを作っていくか
映画管理
ホテル予約
試験制度
どんな問題が出るか
2 OutSystemsの基礎知識 2.1 OutSystems概要 development
quality
production
プラットフォームサーバ
コンパイル
デプロイ
管理
service studio
integration studio
service center
2.2 Service Studioとは ここで使われているのはバージョン10
基本的なIDE機能は概ね予想通り
最後にソースの競合、マージの説明
ソース管理ツールも統合されているイメージ
3 ウェブアプリ開発の基礎 3.1 画面のライフサイクル Webアプリケーションとは何か
ブラウザは何をするのか
静的リソースと動的コンテンツ
Preparationという概念を使用しており、その中でデータ取得等を行う
3.2 データのモデリング Entity→テーブルの行
Attribute→列
Service Studioのデータレイヤーで作成
名前からデータ型を推測してテーブルを作る！
例：Amount→Currency
3.3 データのモデリングをしてみよう これから行うExerciseの説明。（ビデオなし）
movie databaseのwebアプリケーションを作ります。
継続的に拡張、公開、テストを行います。
行う内容は
1.アプリケーション作成
2.最初のモジュールの作成
3.エンティティとbootstrapデータの作成
4.静的エンティティとレコードの作成
5.Outsystems webサーバでの公開
先ほど色々システム構成図の画像をアップした中に、OutSystemsのものがあります。
OutSystemsとは 日本公式サイトだと、「コードレス開発」を謳っていますが、「ローコード開発」とか、色々言い方はあるようで。ソース生成型のツールで、いざとなったらソースいじることもできるようなので、「ローコード開発」の方がよいのでは。
http://www.bluememe.jp/outsystems/product/product-devops-dev.html
ASP.NETかJavaのソースを出力してくれるそうです。あまり何も考えずにチュートリアルをやってみたら、ASP.NET＋SQL Serverの環境を作ってくれたようです。
チュートリアルをやってみて 以前、Glide をやってみた時、Glideの味わい方〜オープンデータを活用しよう これは、本当に何もしないんだな、まさにコードレスだなと思いましたが、かなり近いところまで行っているようにも思います。
画面テンプレートを選択すると、サンプルデータで動く形までできていて、EXCELデータを指定すると、それをDBに登録して、そちらを参照するように変更してくれる、というのはスマートな作りだと思います。
このような画面を作るのですが、リスト用のデータと、グラフ用のデータをそれぞれ指定するだけでここまでできてしまいます。リストから詳細ページへの流れも、詳細画面は勝手にそれっぽく作ってくれるという点で、Glideと同様の発想かと思います。
.NETと言っているのでWindows版だけかと思ったら、technical previewとしてはmac版も提供されていました。
https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/OutSystems_Service_Studio_for_Mac
個人用フリー版が用意されているのもうまいと思います。私も、もう少し使ってみたいと感じました。
先日行ってきた、AWS Summit Tokyo 2019 と、Interop Tokyo 2019 でゲットしきた資料のシステム構成図色々。
こういうの参考にしたくなること多いですよね。
前回からの続きぬるさく画面に再チャレンジ 固定値による画面表示はできたので、実際にapiからデータを取得しようとしました。しましたが、ハードル上げすぎて失敗したので、一旦ハードルを下げようと思いますが、まず失敗の記録をしておきます。
ページ、および、それに伴うストア等の分割 やろうとしていることは、
Pagesの中に、boookフォルダと、todoフォルダを作って、それぞれのアプリを作った状態で、さらに、wineフォルダを作って、その中でぬるさく本のアプリを作ろうということです。
pages |--Lauter | |--index.vue |--README.md |--book | |--books | | |--_id.vue | |--index.vue |--index.vue |--login.vue |--todo | |--index.vue |--wine | |--index.vue | |--result.vue store |--README.md |--book.ts |--counter.ts |--index.ts |--modules | |--todoTypes.ts | |--todos.ts | |--userTypes.ts | |--users.ts |--root.ts |--todo.ts |--wine.ts ただ、すでに作成しているtodoは一部きれいに分けきれずに、indexの中にtodo固有のものが残ってしまっています。
また、wineについても、本の説明は、indexとして作っているサンプルがベースなので、まあ色々ハマりました。
本の該当箇所は、「4.7 API に投げるために Vuex を実装しよう」のあたりです。やりたいのは、「v-for=”i in 11″」を「-for=”wineAttr in wineAttributes”」にする、ということです。
apiについては、「http://0.0.0.0:5432/api/wine_attributes」が動いているのが前提です。
最初はこの辺のエラー対応です。
commons.app.js:21599 [vuex] unknown getter: GET_WINE_ATTR const gettersはexport const gettersにしないといけないのではないでしょうか。actionsも。自信はないですが、これにより呼ばれるようにはなりました。
また、本では触れられていませんが、githubのソースでは、index.d.ts で@nuxtjs/axios の記述があります。しかしそれをやると、