GeneXus17 Angularジェネレータを確認


GeneXus17にAngularジェネレータが追加されたので試してみました。

Angularジェネレータはまだベータ版なのですね。

17のアップグレードのどこかか、18で正式版という感じなのでしょうか。


Angular アプリケーションの開発

こちらの概要を見るとAngularはフロントサイド（画面系）に使用されて、

サーバー側は今までと同じようにJavaや.NETで生成・動作させる形になるようです。

スマートデバイスと同じ構成イメージだと思います。


「My first Angular application」に従って確認していきます


開発環境セットアップ


1) Node.jsをインストール

https://nodejs.org/en/

インストーラーをダウンロードしてインストール

先週はv15.14.0だったのですが、もう16がでてますね、早いな。



2) バージョン確認

インストールしたらコマンドプロンプトからバージョンを確認します


node --version



3) npm package managerのインストール

こちらはNode.jsと一緒にインストールされてますので、バージョン確認だけ


npm --version



4) Angular CLIのインストール

こちらはコマンドプロンプトからインストール


npm install -g @angular/cli



「Node.js」が実行環境で

「npm」はNode.jsのモジュールを管理するツール

「Angular CLI」はNode.jsのコマンドラインツールということでした



5) 動作テスト

試しに（GeneXusとは関係なく）Angularのプロジェクトを作成してみます


コマンドラインからプロジェクトを作成（AngularAppTestがプロジェクト名）

ng new AngularAppTest


ここにプロジェクトディレクトリが作成されました

C:\Users\syusa\AngularAppTest



次にコンパイル？サーバー起動

cd C:\Users\syusa\AngularAppTest

ng serve


ブラウザからlocalhost:4200にアクセスすると初期画面が表示されました


ここまででAnglarの開発環境セットアップが完了となります



GeneXusでAnglarアプリの作成


1) 新規KBを作成

のはずがAngularジェネレータが選べませんね。。。


とりあえずサーバーサイドはJavaにする予定なので、Javaを選択してKB作成


[設定]のKBプロパティから新しい環境を追加する形で[新規環境]を選んだら

こちらにはAngularが選択できました。



バックエンドはJava

DBはSQLServer

フロントエンドはJava（解除できない）とWeb（Angular）をチェック

[現在の環境として設定]もチェックしてOK


こうゆう構成になるようですね。

※元々のJava環境は消しました


ということはJavaのWeb画面も作成されるうえで、Angularの画面も作成されるという形になるようです



2) サンプル画面の作成①


さて、ここで少し迷いました

サンプルのトランザクション（伝票と顧客）を定義して普通にビルドして実行した所、

通常のJavaのWeb画面が表示されました。



Angularの画面はどのように作るんだろう？？


どうやらそもそも私の想定が違っていたようで、

Angularはネイティブモバイルアプリ（スマートデバイス）と同じイメージのようです

なのでPanelやMenuオブジェクト等を使用して作成するようです



3) サンプル画面の作成②


一番簡単にネイティブモバイルアプリを作る方法、

トランザクションのWorkwith for SmartDevicesにチェックを入れて作成


Menuオブジェクトも作成して、顧客と伝票画面の呼び出しを追加


これで最低限のアプリの準備が出来ました

ビルドをするとAngularのモジュールが作成されたようです。


ここまででAnglarアプリの作成が完了となりました



Anglarアプリの実行



最初にGeneXusで作成したAnglarアプリを環境へインストールするようです

コマンドプロンプトから実行

cd C:\knowlage_base\gx17\TestAngularKB_17U2\AngularJava\mobile\Angular\Menu

npm install


ここでエラーが発生しました

116 verbose stack Error: unable to resolve dependency tree
116 verbose stack     at Arborist.[failPeerConflict] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1157:25)
116 verbose stack     at Arborist.[loadPeerSet] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1134:34)
116 verbose stack     at async Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:838:11)
116 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:209:7)
116 verbose stack     at async Promise.all (index 1)
116 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:131:5)
116 verbose stack     at async Install.install (C:\Program Files\nodejs\node_modules\npm\lib\install.js:137:5)
117 verbose cwd C:\knowlage_base\gx17\TestAngularKB_17U2\AngularJava\mobile\Angular\Menu
118 verbose Windows_NT 10.0.19041
119 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
120 verbose node v15.14.0
121 verbose npm  v7.7.6
122 error code ERESOLVE
123 error ERESOLVE unable to resolve dependency tree
124 error
125 error While resolving: testangularkb_17u2@1.0.0
125 error Found: tslib@2.2.0
125 error node_modules/tslib
125 error   tslib@"^2.0.0" from the root project
125 error   tslib@"^2.0.0" from @angular/core@11.0.4
125 error   node_modules/@angular/core
125 error     @angular/core@"11.0.4" from the root project
125 error     peer @angular/core@">=6.0.0" from ngx-virtual-scroller@4.0.3
125 error     node_modules/ngx-virtual-scroller
125 error       ngx-virtual-scroller@"^4.0.3" from the root project
125 error
125 error Could not resolve dependency:
125 error peer tslib@"^1.10.0" from ngx-virtual-scroller@4.0.3
125 error node_modules/ngx-virtual-scroller
125 error   ngx-virtual-scroller@"^4.0.3" from the root project
125 error
125 error Fix the upstream dependency conflict, or retry
125 error this command with --force, or --legacy-peer-deps
125 error to accept an incorrect (and potentially broken) dependency resolution.
125 error
125 error See C:\Users\syusa\AppData\Local\npm-cache\eresolve-report.txt for a full report.
126 verbose exit 1


さっぱりわからん！

と思いましたが、どうもバージョンが違っていて合わない模様


オプションをつけて再度実行

npm install --save --legacy-peer-deps


警告は出ましたが、正常に終了しました。

C:\knowlage_base\gx17\TestAngularKB_17U2\AngularJava\mobile\Angular\Menu>npm install --save --legacy-peer-deps
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

added 1509 packages, and audited 1510 packages in 2m

92 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (3 low, 3 moderate, 1 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


コマンドプロンプトはそのままに、サーバー起動

ng serve -o

※-oオプションは、ブラウザを自動的に開いてhttp：// localhost：4200 /に移動します


こんな画面が出てきました

データの表示、更新、削除などは一通りできました。



まとめ


出てきた画面があまりにも簡素だったので正直拍子抜けしてしまいました。。。

素のGeneXusのデザインはやはりこうなってしまうのですね。

デザインシステムを使って他のテーマを利用するのが一番良いのだと思います。


Angularがネイティブモバイルアプリと同じで、Panelオブジェクトを使うのは少々意外でした。

モバイル向けのジェネレータの方向性なのですかね。

そういえばどこかでそんな話を聞いたような気もします。



※※バージョン違いのエラーについてですが、

Angularジェネレータはv12.17辺りのNode.jsで作られたぽいので、Node.jsはv12を使うと良いのかもしれません。


コメント

コメントを投稿

このブログの人気の投稿

Tomcatの設定３：8080ポート以外で動作させる

Tomcatで運用する場合で、いくつか考慮した方が良い設定・情報を記載します。 Tomcatのデフォルトではポート8080で動作します。 URLがhttp://localhost:8080/xxxxx/servlet/xxxxxという形になりますね。 こちらをポート80（http）で動作するようにすると、 URLからポートの記述を省略することができます。 http://localhost:8080/xxxxx/servlet/xxxxx ↓↓↓ http://localhost/xxxxx/servlet/xxxxx http://localhost:80/xxxxx/servlet/xxxxx と同じ 同じように、SSLを使ってhttpsにする場合はTomcatのデフォルトは8443ですが、 443（https）ポートで動作するようにすると、こちらも省略できます。 https://localhost:8443/xxxxx/servlet/xxxxx ↓↓↓ https://localhost/xxxxx/servlet/xxxxx https://localhost:443/xxxxx/servlet/xxxxx と同じ ＜設定方法＞ ※Apacheと連携する場合はApacheが80ポートで動作しますので、 以下の設定方法は、”Tomcatのみ”で動作させる場合の設定方法となります。 Tomcat\conf\server.xmlを修正します。 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" /> ↓↓↓ <Connector port=" 80 " protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" /> 以上です。 SSL（https）を設定済みの場合は8443と記載の個所を443に変...
Read more »

IVS文字・サロゲートペア文字の注意

システムの中で文字数を取得する際には IVS文字・サロゲートペア文字 に注意が必要です。 IVD/IVSとは | 文字情報基盤整備事業 https://mojikiban.ipa.go.jp/1292.html サロゲートペア入門：CodeZine（コードジン） https://codezine.jp/article/detail/1592 例えば、エラーチェックで指定した「文字数」で固定する場合 最大「文字数」を超えているかチェックする場合 GeneXusでは&変数.Length()か、またはLen(&変数)で文字数を取得することが出来ます。 但し、上記のIVS文字・サロゲートペア文字の場合は、 見た目の１文字が１文字として算出されません。 試した環境：GeneXus15U10 通常文字　：辻 ＩＶＳ文字：辻の点が１つの文字 このLengthを求めると、以下の結果となります。 通常文字　：１文字 ＩＶＳ文字：３文字 --------- 通常文字　　　　　：叱 サロゲートペア文字：叱（環境依存） このLengthを求めると、以下の結果となります。 通常文字　　　　　：１文字 サロゲートペア文字：２文字 ※IVS文字とサロゲートペア文字を試したい場合は、Windowsの設定を変更する必要があります。 　Microsoft IMEの場合 　　・IMEのプロパティから[詳細設定] 　　・[変換]タブの[詳細設定] 　　・変換文字制限に 　　　　　変換文字制限をしない 　　　　　IVSを含む文字を制限する 　　　　　サロゲートペアを含む文字を制限する 　　　といった候補が出ますので、[変換文字制限をしない]をチェックしてください。 　　　これで変換候補にIVS文字とサロゲートペア文字が出てきます。 　　※※※ 　　　　試した後は、戻しておいた方が良いです。 　　　　メールなどで送ってしまうと相手に迷惑ですので。 ちなみにBytecount()を使用してバイト数（文字コードはUTF-8）を取得すると 以下の結果となります。 通常文字　：辻 ＩＶＳ文字：辻の点が１つの文字 ↓↓↓ 通常文字　：３バイト ＩＶＳ文字：７バイト ---------...
Read more »

Tomcatの設定５：メモリ調整と起動モード

イメージ
Tomcatで運用する場合で、いくつか考慮した方が良い設定・情報を記載します。 Tomcatのデフォルトでは初期メモリが128MB、最大が256MBとなっています。 市販のパソコンでもメモリは4GBや8GBは有りますので、初期値は非常に小さいです。 Linuxの場合は、Tomcatの起動オプションで、設定してください。 WindowsのTomcatの場合は設定コンソールから設定します。 サーバーのスペックや構成に合わせて必ず調整した方が良いものは以下の内容になります。 １．メモリ（ヒープ領域） -Xms ：Initial memory pool -Xmx ：Maximum memory pool Tomcat起動時に初期メモリが確保され、不足したら拡張を繰り返す形となります。（最大値まで） 個人的にはどうせ拡張するのであれば、初期メモリの時点である程度確保しておいた方が良いと考えてます。 その方が拡張の際の処理動作コストも軽減されますので。 どの位の設定が良いのかは一概には言えず、 私の経験則からの例ですが、総メモリが8GBで、TomcatとPostgreSQLが同居したサーバーの場合であれば、初期2GB、最大3GB位の設定にしますね。 ２．起動モード Tomcatには起動モードが2種類あり、「クライアントモード」と「サーバモード」があります。 ＜クライアントモード＞ 起動時間を短縮し、メモリサイズを縮小するように調整されている。 起動時に「-client」オプションを付けて実行する。 ＜サーバーモード＞ プログラム実行速度が最大になるように設計されている。 起動時に「-server」オプションを付けて実行する。 運用時にはサーバーモードで動作させるようにしましょう。 ３．メモリ（Permanent領域） -XX:PermSize ・・・ Permanent 領域の初期値 こちらは運用中の影響ではなく、Tomcatが起動できるかどうかという設定です。 プログラムが大量にある場合、Tomcat起動時にロードしきれずにエラーになったり、 起動が遅かったりしますので、その際には拡張した方が良いです。 サーバーモードの初期値は64MBです。 システムの規模がそこそ...
Read more »

画面の初期表示や画面遷移で妙に時間がかかる、サーバー側のイベントの実行結果が怪しい場合

重めの画面を表示するのに、想定以上に時間が掛かっていることはありませんか。 画面遷移する際に、想定以上に時間が掛かっていることはありませんか。 そして、サーバー側の処理をデバッグすると、Start/Refreshが2回以上実行されていることはありませんか。 そんな場合は、この問題が発生している可能性があります。 GeneXusの[Web User Experience]プロパティで、Smoothモードを使用している場合に WebPanelのサーバー側処理で5秒以上経過すると必要以上のオペレーションが発生してしまう https://sac.genexus.jp/viewtr_saclist.aspx?39076 ※こちらは初期画面表示や画面遷移（GETによるアクセス）の場合に発生するようでして、 １画面内のボタンイベント（POSTによる処理）の場合は発生しないようです。 記載の中の「規定の挙動」というのは何のメリットがあるのでしょうね？？ リトライすることで何かメリットがあるなら納得も行くのですが、 普通のシステムであればとくにメリットが無いように感じるのですが、、、 まあ、5秒だと重めの画面で不意に発生してしまうことも有りそうですので、 config.gxに設定して、上限値を上げておいた方が良いですね。 config.gxの適用手順 ①対象のナレッジベース直下にconfig.gxという名前のファイルを作成します。 ②config.gxをテキストエディタで開いて、以下のテキストを編集して保存します 　以下は10分（600秒）の設定 SPAHttpRequestTimeout = 600000 ※もし他の設定値がある場合は改行して編集してください。 SPAHttpRequestTimeout = 600000 EncryptDynCalls=SITE ③GeneXusで対象のナレッジベースを開きなおし、「すべてリビルド」を実行
Read more »

GeneXusのオプション設定、起動時オプション

イメージ
GeneXusをインストールした後に、私が 必ず行う設定 を紹介します。 GeneXusの[ツール][オプション] ①KBエクスプローラーにディスクリプションを表示 これが こうなる ②ダイアグラムにディスクリプションを表示 これが こうなる ③ビルドオプション ・インスタンスの同時生成 ・インスタンスの同時分析 これはビルド時にCPUを何コア使うかの設定です。 良いPCを使っている場合は、こちらの設定を確認した方が良いです。 GeneXusは基本1オブジェクトが1ソースとなります。 1ソースに割り当たるコアは一つだけです。 なので、1オブジェクトが大きい場合のビルド時間はCPUの個数ではなく速さに依存します。 ただ、複数オブジェクトをビルドする場合やリビルドする場合には 並列で処理が行われるので、かなりの差が出てきます。 ビルドは分析（Specify）と生成（Build）に分かれており、分析は割と早く終わります。 これに割り当てるのが「インスタンスの同時分析」です。 生成（Build）が実際のJavaソースや.NETのソースの生成です。 物理的にファイルを作るので時間が掛かります。 これに割り当てるのが「インスタンスの同時分析」で、時間が掛かる場合は大体こちらです。 全部のCPUコアをあててしまうとOSが止まるでしょうから、最適な数値を設定するのが良いでしょう。 複数の同時生成処理と分析処理のインスタンス http://wiki.genexus.jp/hwiki.aspx?%E8%A4%87%E6%95%B0%E3%81%AE%E5%90%8C%E6%99%82%E7%94%9F%E6%88%90%E5%87%A6%E7%90%86%E3%81%A8%E5%88%86%E6%9E%90%E5%87%A6%E7%90%86%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9, ・ナビゲーション詳細 こちらをTrueにすると、トランザクション画面をビルドした後のナビゲーションで Rulesに指定した内容の実行順序が出てきます。 トランザクション画面を利用...
Read more »

Tomcatの設定２：アクセスログの活用

Tomcatで運用する場合で、いくつか考慮した方が良い設定・情報を記載します。 Tomcatはデフォルトでアクセスログが出力されます。 インストールフォルダのTomcat\logs\localhost_access_log.YYYY-MM-DD.txtです。 こちらの設定がTomcat\conf\server.xmlで調整できます。 <!-- Access log processes all example.      Documentation at: /docs/config/valve.html      Note: The pattern used is equivalent to using pattern="common" --> <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"      prefix="localhost_access_log" suffix=".txt"      pattern="%h %l %u %t &quot;%r&quot; %s %b %D" /> 少々バージョンが古いですが、設定内容は以下のURLが参考になります。 Tomcatのアクセスログを出力する http://www.m-bsys.com/code/tomcat-accesslog デフォルトが日付毎のローテートですし、出力内容としても特に問題はないと思いますが、 追加で「処理時間(sec)」を出力するようにしておくと、 リクエストに時間が掛かったアクセスを分析することが出来て良いかと思います。 分析方法は「アクセスログ分析ソフトやサービス」といったものが色々とありますので、 そちらを使っていくのだと思いますが、そこまでは私も実施したことが無いです。
Read more »