ソフトウェア工学実習 2023年度後期(2年)

今日、やったこと REST API + Vue.js 今日のホワイトボード REST API + Vue.js 以前クライアント側をプレーンなJavaScriptで作った図書検索をVue.jsに変更。 ソースコードをあげておきます。 index.html 次回は 以上でソフトウェア工学実習、ネットワークプログラミング実習は終了です。 年明けに再試験等の案内をします。 

今日の予習 フロントエンド開発はプレーンなJavaScriptから始まり、JQuery、ReactやVue、Angularといろいろなライブラリやフレームワークを利用してきた。 これらの違いをソースコードで比較する。 1. 入力内容を表示する テキストボックスに入力するとリアルタイムに表示される。 テキストボックスのinputイベントが発生したら、入力内容を取得して表示する。 JavaScript版 JQuery版 Vue.js版 2.ボタンクリックで表示 テキストボックスに入力後ボタンをクリックすると、入力内容が表示される。 JavaScript版 JQuery版 Vue.js版 3.配列で表を作成 オブジェクト配列の内容を表形式で表示する。 JavaScript版 JQuery版 Vue.js版 4.カウンタ ボタンをクリックする毎に数字がインクリメントされる。 JavaScript版 JQuery版 Vue.js版 今日、やったこと フロントエンド、バックエンド JavaScript、JQuery、Vue.js 今日のホワイトボード フロントエンド、バックエンド フロントエンドはクライアント側。 Webブラウザを使う場合はJavaScriptで開発。iOSやAndoroid上の専用アプリならSwiftやkotlinで開発。 バックエンドはサーバー側。 JavaやC#、PHPやPythonなど選択肢はいろいろ。 図　フロントエンド、バックエンド 同期通信、非同期通信 JavaScriptがクライアントで利用されるきっかけになったのがGoogle Mapのような非同期通信。Ajaxとも呼ばれている。 図　同期通信・非同期通信 同期通信は、サーバーへリクエスト送信するとレスポンスが返ってくるまでなにもしない。 非同期通信は、サーバーへリクエスト送信しレスポンスを待たずに次の処理を実行する。 Webページ全体を書き換える場合は同期通信。 サーバーからデータを取得して、Webページ中の一部分だけを書き換える場合は非同期通信で十分。 ただ、Webブラウザには非同期通信を実現する手段はないため、JavaScriptで制御する必要が...

今日、やったこと [練習問題]REST API 従業員一覧 今日のホワイトボード クライアントからサーバーへJSONデータを送る クライアント側(JavaScript) まず、送信データのオブジェクト作成。 fetch()で送信。そのさい、送信データのオブジェクトをJSON形式に変換(json.stringify(送信データ)) してHTTPのボディ部にセット。 サーバー側(Java) 受信データ(JSON形式)からJacksonを使ってJavaクラス(Employeeクラス)のインスタンス生成。 ただし、JSON形式(JavaScriptのオブジェクト)の各プロパティとJavaクラスのフィールドを対応させるために、Javaクラスのフィールドに@JsonPropertyをつける。 図　クライアント->サーバー　データ送信 URL、パスパラメータ REST APIではリクエストするURLで呼び出すサービスを識別する。 クラス、メソッドに付ける@Path()アノテーションでURLやパスパラメータを指定する。 なお、パスパラメータは引数に付ける@PathParam()で引数にセットすることができる。 図　URL、パスクエリ なお、クライアント側からサーバーに値を渡す方法にはパスパラメータ以外にクエリパラメータもある。 [練習問題]REST API 従業員一覧 正解例をあげておきます。 index.html とくにややこしいことはないかと。 employee.js テーブルを作成するinitTable()関数にてテーブル行にボタンを追加するあたりがポイント。 ...

今日、やったこと [REST API]サンプルアプリ拡張(クライアントサイド) 今日のホワイトボード 前回作成したREST APIのサンプルアプリのクライアント側の検索機能を追加しました。 MyResourceクラスのアノテーション @Pathアノテーション リクエストのURLとメソッドを紐づける。 図　@Pathアノテーション @PathParam、@QueryParam URLのパラメータとメソッドの引数を紐づける。 図　@PathParam、@QueryParam web.xmlとURL HTMLファイル　search.htmlを追加して、リクエストしても表示されない。 web.xmlの<servlet-mapping>が下図のようになっているため。 図　web.xmlとURL この<url-pattern>だとURLが  　http://localhost:8080/jersey_sample1/ のあとになにが続いてもサーブレット(MyResourceクラス)をリクエストしてしまう。 サーブレットは以下の  　http://localhost:8080/jersey_sample1/webapi/ でリクエストするようにweb.xmlを変更。 JavaScriptからリクエスト この授業ではfetch()を使う。 図　fetch()メソッド fetch()は引数のURLをリクエストする。 レスポンスはfetch()の戻り値の中に含まれる。戻値はPromissオブジェクト。 Promissオブジェクトのth...