Newer
Older
SpecificationSimulatorExperiments / courseA / ST_DTRAM.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>【SimpleTwitter(DTRAM) 機能追加課題】</title>
</head>

<body>
<h1 class="title">
	【SimpleTwitter(DTRAM)】
	<br>
	機能追加課題
</h1>
<hr/>

<h2>課題概要:</h2>
<p>
	本課題では,SimpleTwitterプログラムにアカウント名を変更可能にする機能追加を行っていただきます.<br>
</p>
<hr/>

<h2>SimpleTwitter 機能追加:</h2>
<p>
    このSimpleTwitterプログラムでは,GPSの位置情報が更新されるたびに,それに合わせて地図の表示位置も自動で更新されます.しかしながら,地図アプリのユーザはいつでも自分の周辺の地図を閲覧したいわけではありません.
    例えば,電車に乗りながら目的地周辺の地図情報を確認したい場合,電車の動きに合わせて地図の表示位置が勝手に動いてしまうと困ります.<br>
</p>
<hr/>

<h2>Map のリファクタリングが必要な理由:</h2>
<p>
    現在の設計では,以下のクラス図のようにGPSの緯度情報を保持している <code>Latitude</code> オブジェクトが地図の中心位置の緯度成分を表す <code>MapLatitude</code> オブジェクトを,
    GPSの経度情報を保持している <code>Longitude</code> オブジェクトが地図の中心位置の経度成分を表す <code>MapLongitude</code> オブジェクトを,それぞれPUSH型のデータ転送で更新するようになっています.<br>
</p>
<div class="img-center">
	<img src="../img/classes/map_class_push.png", class ="before-image-size"><br>
</div>
<p>
    具体的には以下のコードのように,GPSの位置情報の変化をセンサーが検知するたびに <code>Map</code> クラスの <code>updateGPS()</code> メソッドが呼び出され,
    その中から <code>Longitude</code> クラスの <code>updateGPS()</code> メソッドと <code>Latitude</code> クラスの <code>updateGPS()</code> メソッドが呼ばれて,まずGPSの緯度と経度の情報が更新されます.
</p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<pre class="brush:java; gutter:false" id="A">
public class Map {
	  :
	private Longitude longitude;
	private Latitude latitude;
	  :
	public void updateGPS(double cur_lat, double cur_long) {
		this.longitude.updateGPS(cur_lat, cur_long);
		this.latitude.updateGPS(cur_lat, cur_long);
	}
	  :
}
</pre>
</div>
<p>
    そして,それらのメソッドの中からさらに,<code>MapLongitude</code> クラスの <code>updateLongitude()</code> メソッドと
    <code>MapLatitude</code> クラスの <code>updateLatitude()</code> メソッドが以下のコードのようにそれぞれ呼ばれて,引き続き地図の中心位置の情報も更新されます.
	これらの更新は常に連続して行われるため,このままの設計では,GPSの位置情報だけを更新して地図の中心位置は更新しないという,自動更新がOFFの状態の振る舞いを上手く実装することができません.
</p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<pre class="brush:java; gutter:false" id="B">
public class Longitude {
	private MapLongitude mapLongitude;
	private double value;
	  :
	public void updateGPS(double cur_lat, double cur_long) {
		this.value = cur_long;
		this.mapLongitude.updateLongitude(this.value);
	}
}

public class Latitude {
	private MapLatitude mapLatitude;
	private double value;
	  :
	public void updateGPS(double cur_lat, double cur_long) {
		this.value = cur_lat;
		this.mapLatitude.updateLatitude(this.value);
	}
}
</pre>
</div>
<hr/>

<h2>Map のリファクタリングの概要:</h2>
<p>
    そこで,以下のクラス図のように新たに <code>Presenter</code> オブジェクトを導入し,<code>Longitude</code> オブジェクトも <code>Latitude</code> オブジェクトも,
    必ずこのオブジェクトを経由して <code>MapLatitude</code> オブジェクトや <code>MapLongitude</code> オブジェクトを更新するように設計変更を行います.
    そうすることによって,<code>Longitude</code> オブジェクトや <code>Latitude</code> オブジェクトの状態の更新後に
    <code>MapLatitude</code> オブジェクトや <code>MapLongitude</code> オブジェクトの状態の更新をするか否かを,<code>Presenter</code> オブジェクト上で制御することができるようになります.
</p>
<div class="img-center">
	<img src="../img/classes/map_class_push_CFD.png" class ="after-image-size"><br>
</div>
<p>
    具体的に変更後の設計の中では,以下のように <code>Map</code> クラスの <code>updateGPS()</code> メソッドは,
    <code>Longitude</code> クラスと <code>Latitude</code> クラスの <code>updateGPS()</code> メソッドの代わりに <code>Presenter</code> クラスの <code>updateGPS()</code> メソッドを呼び出すようにします.
</p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<pre class="brush:java; gutter:false" id="C">
public class Map {
	  :
	private Presenter presenter;
	  :
	public void updateGPS(double cur_lat, double cur_long) {
		this.presenter.updateGPS(cur_lat, cur_long);
	}
}
</pre>
</div>
<p>
    そして,<code>Presenter</code> クラスの <code>updateGPS()</code> メソッドは,
    <code>Longitude</code> オブジェクトや <code>Latitude</code> オブジェクトの状態の更新と,
    <code>MapLatitude</code> オブジェクトや <code>MapLongitude</code> オブジェクトの状態の更新を,以下のように切り離して実行するようにします.
    そのため,この <code>updateGPS()</code> メソッドを書き換えることによって,自動更新のON/OFFを制御することができるようになります.
</p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<pre class="brush:java; gutter:false" id="D">
public class Presenter {
	private Longitude longitude;
	private Latitude latitude;
	private MapLongitude mapLongitude;
	private MapLatitude mapLatitude;
	  :
	public void updateGPS(double cur_lat, double cur_long) {
		double longitude = this.longitude.updateGPS(cur_lat, cur_long);
		double latitude = this.latitude.updateGPS(cur_lat, cur_long);
		this.mapLongitude.updateLongitude(longitude);
		this.mapLatitude.updateLatitude(latitude);
	}
}</pre>
</div>
<hr>
<h2>Map のリファクタリング課題の作業手順:</h2>
<p>
	本課題では,リファクタリングに要した時間を測っていただきますので,お手元に時計をご用意ください.
	時間計測にあたって,急いで作業していただく必要はまったくありません.
	最初の課題から最後の課題まで一定のペースを保てるよう, <span style="color: red; ">正しくリファクタリングを行うこと</span>を意識してください.
	課題に着手する前に開発環境を立ち上げて現状のソースコードの確認をしていただいて構いませんが,実際のソースコードの変更は時間計測の準備ができるまで行わないで下さい.<br>
</p>
<p>
	作業に着手する前に,<strong>main</strong> ブランチから,メッセージでお伝えした自分専用のブランチ(<strong>user??Refactor</strong>)を新規作成して,一度 push を行ってください.<br>
	push を行った後,開発環境の準備ができれば,<span style="color: red; ">時間計測を開始</span>してください. 時間計測はできる限り,30秒以内の単位での計測をお願いします. <br>
	ソースコードの変更作業は上記「Map のリファクタリングの概要」にしたがって進めてください.<br>
	テストプログラム<strong>TestGPSUpdate.java</strong>が正しく動作するまでは作業完了とは見なされないので注意してください.
</p>
<p>
	リファクタリングの作業が完了したら作業時間を記録し,その後,作業結果を自分専用のブランチに commit & push してください.<br>
	ただし,<span style="color: red; "><strong>main</strong> ブランチには決して merge をしないように,また自分専用のブランチを決して削除しないように</span>注意してください. <br>
	push 後に,以下のアンケートにお答えください.<br>
	<strong>
		<a href="https://docs.google.com/forms/d/e/1FAIpQLSf9q6nV6QeOgQoArCy-0TUx2xGHWhABn8hiLAHsFOyBpFAWIw/viewform?usp=sharing" target="_blank" rel="noopener noreferrer">
			アンケートフォーム (別タブが開きます)
		</a>
	</strong>
</p>

<hr>
<br>
<a href="OperationA1.html">【Map ツール課題】へ</a>


</body>
</html>

<style>
	.title{
		text-align: center;
	}
	.links-manual-A{
		display: flex;
		flex-direction: column;
	}
	.img-center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
	.before-image-size{
		max-width: 100%;
		height: auto;
	}
	.after-image-size{
		max-width: 100%;
		height: auto;
	}
</style>