「時間は精神労働者の首都です。」

オノレ・ド・バルザック

多くの場合、人々は古いものや馴染みのあるものを優先し、新しいものは無視します。 そのため、私たちは長い間、要件を満たさない時間追跡システムを永続的に使用し、プログラマーから簿記まで、文字通りすべての人に絶えず問題を生み出しました。



時間の不足による時間追跡システムの一般的な苦痛（図を参照）は、システムの開発の正当な理由にはなりませんでした。 この状況は、CUBAプラットフォームの機能を実証するために実際のアプリケーションを作成するというアイデアによって保存されました。 ビジネスと喜びを組み合わせると、時間追跡システムが最初の候補になりました。



現時点では、開発が完了し、アプリケーションが当社に実装されており、すべての人と共有する準備ができています。



この記事では、限られた力（人と半人）によって短時間（1か月未満）でこのアプリケーションを開発した方法を説明します。

最初のステップ

確立された慣行に従い、システムの開発を開始し、システムに表示されるエンティティを決定するサブジェクト領域を説明します。 このアプローチにより、将来のシステムの予想される複雑さを（正確にではありませんが）事前に評価することができます。



時間追跡システムで必要なエンティティについて考えてみましょう。

• ユーザー-ユーザーがいない場所は明確です。 幸いなことに、そのようなエンティティはすでにプラットフォームに存在するので、それを使用します。
• 顧客はお金を支払う人です。
• プロジェクト-お金の支払い。
• タスクは特定の種類の作業です。
• 時間記録-ユーザーが特定の日に特定のタスクに費やした時間。

これで十分だと思われます。 これは、古いシステムにあったエンティティのセットです。 便宜上、何かを追加する必要がありました。

• プロジェクトの役割-多くのプロジェクトがあり、同じユーザーが1つのプロジェクトのマネージャーであり、別のプロジェクトの開発者であることがあります（これは私たちにも起こります）。
• プロジェクト参加者-プロジェクトとユーザー間の接続には、それらへのリンクとこのプロジェクトの役割が含まれます。
• タスクの種類-複数のタスクを組み合わせることができる機能。 たとえば、「テスト」タスクのタイプを使用すると、社内でのテストに費やした時間を把握し、さまざまなプロジェクトでこの指標を比較できます。
• アクティビティタイプ-複数の時間レコードを組み合わせることができる機能。 たとえば、モバイルアプリケーションを開発するタスクの一環として、分析、コードの作成、テストの作成、バグの修正を行います。 必要に応じて、適切なタイプのアクティビティをプロジェクトに追加すると、各アイテムに費やされた時間を追跡できます。
• 休業日-人々が間違えないように、休日のタイムシートを埋めるために、指定された休業日を使用してそのような日をシステムで強調表示します。
• タグは、タイムエントリに追加できる構造が不十分なタグです。
• タグのタイプ-特定のタグをグループ化する機能。

この記事では、各エンティティのプロパティについては説明しません。 プロジェクトコードを参照することで、自分でプロパティを確認できます。



オブジェクトモデルを決定した後、CUBAスタジオでの作業を開始しました。 まず、対応するエンティティを作成しました。 その後、スタジオでのコード自動生成の素晴らしい機会を活用し、データベースを作成するためのSQLスクリプトと、CRUDアクションを備えた標準画面（エンティティリスト画面と個々のエンティティ編集画面）を取得しました。 エンティティの80％には、十分な標準画面がありました。 改善が必要な画面は、WYSIWYG画面エディターを使用して編集しました。



次に、ユーザーが必要なエンティティに簡単にアクセスできるように、アプリケーションのメインメニューを設定します。

その時点で、アプリケーションをすでに起動して、オブジェクトモデルのエンティティを操作（作成/編集/削除）することができます。



わずか数時間で、時間追跡システムの実際に機能する完全に機能するプロトタイプを作成しました。

インターフェイスをより使いやすくする

動作するプロトタイプを入手しましたが、動作するアプリケーションとはほど遠いものでした。

達成したいことを見てみましょう：

1. 時間を埋めるスピードと容易さ
2. 簡単なシステム設定
3. いいね

週ごとのタイムシートの入力

最初に必要だったのは、1週間の便利な時間の埋め合わせでした。 古いシステムにはこのような画面があり、私たちは同様の画面を作成することにしました。 それが私たちが得たものです。







覚えているかもしれませんが、オブジェクトモデルには「週次レポート」エンティティがありません。 エンティティにバインドせずにこの画面を実装することも可能ですが、データベースに直接接続されていない中間の非永続エンティティを作成する方がはるかに便利ですが、コンポーネントのセット全体が通常のエンティティと同様に機能します。 この手法により、データベース構造から抽象化し、ユーザーがより理解しやすい画面を作成できます。 このようなエンティティは非常に単純に見えます。

@MetaClass(name = "ts$WeeklyReportEntry") public class WeeklyReportEntry extends AbstractNotPersistentEntity { ..... @MetaProperty(mandatory = true) protected Project project; @MetaProperty(mandatory = true) protected Task task; ..... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、WeeklyReportEntryはテーブルの1行です。



曜日ごとに時間を入力する方が便利になるように、テーブルを編集可能にしました。 さらに、列に時間のカウントを追加し、誤って入力された可能性のある日を強調表示しました。 次に、ユーザーの要求に応じて、プロジェクトおよびタスクごとにテーブル内のレコードをグループ化する機能を追加しました。 これはすべて、CUBAプラットフォームの標準メカニズムを使用して行われました。

カレンダーからタイムシットを入力する

次に重要な画面は、カレンダーからタイムシットを入力することでした。 残念ながら、現時点ではプラットフォームに「カレンダー」コンポーネントはありません。 ただし、それはWebクライアントのレンダリングに使用するVaadinフレームワークにあります。 継承し、わずかに変更（以下で説明）したので、アプリケーションで使用しました。 カレンダーでは、不正確に埋められた可能性のあるタイムシットの検証も追加し、休日と週末を強調し、週と月ごとに時間を追加しました。

プロジェクトとタスクのセットアップ

私たちにとってのもう1つの目標は、プロジェクトとタスクの設定の容易さです。 基本的なプロジェクト画面とタスクがあるにもかかわらず、チンキを簡単に楽しくする特別な画面を作成することにしました。 重要な要件は次のとおりです。プロジェクトをすばやく切り替える機能、さまざまなプロジェクトに人とタスクをすばやく追加する機能。 プロジェクト、タスク、およびプロジェクト参加者の3つの関連テーブルの形式で画面を作成することが決定されました。



プロジェクトを選択すると、このプロジェクトに対応するレコードがタスクテーブルと参加者テーブルに表示されます。 CUBAプラットフォームを使用すると、テーブルに関連するデータソースを作成できるため、特別なコードは必要ありません。 実際、3つの標準画面（プロジェクトのリスト、タスクのリスト、プロジェクト参加者のリスト）から、3つすべてを置き換えるものを組み立てました。

コマンドライン

私たちが実装することを決めた別の革新は、いわゆるコマンドラインでした。 簡単なテキストコマンドを入力することで、1週間または1か月のタイムシートに記入できます。 次のようになります。







また、AceEditorと呼ばれるVaadinコンポーネントを使用して、ヒントを作成する方法をコマンドラインに教えました。 これについては以下で説明します。



Everhourシステムでこの素晴らしいコンセプトを探り 、ニーズに合わせて少し変更したことに注意してください。

迅速な開発

当然、これらの画面のすべてが一度に開発されたわけではありません。

いつものように、UIを念頭に置くには、最初のオプションを作成するよりもはるかに時間がかかりました。 ここでは、CUBAプラットフォームに実装されたサーバーへの変更のホットローディングメカニズムが非常に役立ちました。 そのおかげで、UIの約90％（〜）でサーバーを再起動する必要はありません。 さらに、この方法でコアロジック（サービスとBean）をリロードすることもできます。 このメカニズムについては、 記事で詳しく説明しています 。

クライアント側コンポーネントの拡張

カレンダーを追加

上記のように、カレンダーが必要でした。 幸いなことに、これはVaadinコンポーネントリストで発見されました。 次に、どのように追加したかを説明します。



VaadinはGWT上に構築されていますが、Vaadinコンポーネントはクライアントとサーバーの両方に存在します。 通常、クライアントとサーバーの通信に使用される中間部分もあります。 したがって、カレンダーを拡張するには、サーバーとGWTコードの両方で作業する必要があります。



カレンダーの状態はcom.vaadin.shared.ui.calendar.CalendarStateです。 とりわけ、休日と見なされる日（これはシステムで構成されます）と休日を状態に保存する必要があります。 これを行うために、このクラスを継承します。

 public class TimeSheetsCalendarState extends CalendarState { ..... public Set<Integer> weekends = new HashSet<>(); public Set<String> holidays = new HashSet<>(); .... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、サーバークラスcom.vaadin.ui.Calendarを継承して、新しいプロパティを設定する必要があります。

 public class TimeSheetsCalendar extends Calendar { .... public TimeSheetsCalendar(CalendarEventProvider eventProvider) { super(eventProvider); getState().weekends = getWeekends(); } @Override public void beforeClientResponse(boolean initial) { super.beforeClientResponse(initial); getState().holidays = getHolidays(); } .... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、com.vaadin.client.ui.VCalendarウィジェットを継承し、休日かどうかに応じてセルスタイルを変更することができます。

 public class TimeSheetsCalendarWidget extends VCalendar { protected Set<Integer> weekends = new HashSet<Integer>(); protected Set<String> holidays = new HashSet<String>(); protected boolean isWeekend(int dayNumber) { return weekends.contains(dayNumber); } protected boolean isHoliday(String date) { return holidays.contains(date); } @Override protected void setCellStyle(Date today, List<CalendarDay> days, String date, SimpleDayCell cell, int columns, int pos) { CalendarDay day = days.get(pos); if (isWeekend(day.getDayOfWeek()) || isHoliday(date)) { cell.addStyleName("holiday"); cell.setTitle(date); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスcom.vaadin.client.ui.calendar.CalendarConnectorを展開するだけで、休日と週末のデータを状態からウィジェットにコピーします。

 @Connect(value = TimeSheetsCalendar.class, loadStyle = Connect.LoadStyle.LAZY) public class TimeSheetsCalendarConnector extends CalendarConnector { @Override public TimeSheetsCalendarWidget getWidget() { return (TimeSheetsCalendarWidget) super.getWidget(); } @Override public TimeSheetsCalendarState getState() { return (TimeSheetsCalendarState) super.getState(); } @Override public void onStateChanged(StateChangeEvent stateChangeEvent) { getWidget().setWeekends(getState().weekends); getWidget().setHolidays(getState().holidays); super.onStateChanged(stateChangeEvent); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、CUBAプラットフォームで作成された任意の画面にTimeSheetsCalendarを追加できます。

 public class CalendarScreen extends AbstractWindow { @Inject protected BoxLayout calBox; protected TimeSheetsCalendar calendar; .... protected void initCalendar() { .... calendar = new TimeSheetsCalendar(dataSource); .... AbstractOrderedLayout calendarLayout = WebComponentsHelper.unwrap(calBox); calendarLayout.addComponent(calendar); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「コマンドライン」にツールチップを追加します

ユーザーが「コマンドライン」を使用しやすくするために、入力オプションのプロンプトを表示することを決定しました。



Vaadinには、これを実行できるAceEditorコンポーネントがあります。 プラットフォーム（WebSourceCodeEditor）で使用され、JPQLクエリのヒントを提供します（たとえば、レポートでクエリを編集するとき）。

私たちは人生を簡素化することに決め、AceEditorに基づいて新しいコンポーネントを作成する代わりに、WebSourceCodeEditorを拡張しました。



まず、RPCサービスを登録することでorg.vaadin.aceeditor.SuggestionExtensionを拡張しました。RPCサービスはコマンドラインの使用を処理する必要があります。

 public class CommandLineSuggestionExtension extends SuggestionExtension { protected Runnable applyHandler; public CommandLineSuggestionExtension(Suggester suggester) { super(suggester); registerRpc(new CommandLineRpc() { @Override public void apply() { if (applyHandler != null) { applyHandler.run(); } } }); } public void setApplyHandler(Runnable applyHandler) { this.applyHandler = applyHandler; } public Runnable getApplyHandler() { return applyHandler; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、プラットフォームクラスcom.haulmont.cuba.web.gui.components.WebSourceCodeEditorが登場しました。

 public class WebCommandLine extends WebSourceCodeEditor implements CommandLine { @Override public void setSuggester(Suggester suggester) { this.suggester = suggester; if (suggester != null && suggestionExtension == null) { suggestionExtension = new CommandLineSuggestionExtension(new CommandLineSourceCodeEditorSuggester()); suggestionExtension.extend(component); suggestionExtension.setShowDescriptions(false); } } protected class CommandLineSourceCodeEditorSuggester extends SourceCodeEditorSuggester { } public CommandLineSuggestionExtension getSuggestionExtension() { return (CommandLineSuggestionExtension) suggestionExtension; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、クライアント側のクラスはorg.vaadin.aceeditor.client.SuggesterConnectorです。

 @Connect(CommandLineSuggestionExtension.class) public class CommandLineSuggesterConnector extends SuggesterConnector { protected CommandLineRpc commandLineRpc = RpcProxy.create( CommandLineRpc.class, this); @Override public Command handleKeyboard(JavaScriptObject data, int hashId, String keyString, int keyCode, GwtAceKeyboardEvent e) { if (suggesting) { return keyPressWhileSuggesting(keyCode); } if (e == null) { return Command.DEFAULT; } if (keyCode == 13) {//Enter commandLineRpc.apply(); return Command.NULL;//ignore enter } else if ((keyCode == 32 && e.isCtrlKey())) {//Ctrl+Space startSuggesting(); return Command.NULL; } else if ((keyCode == 50 && e.isShiftKey())//@ || (keyCode == 51 && e.isShiftKey())//# || (keyCode == 52 && e.isShiftKey())//$ || (keyCode == 56 && e.isShiftKey())) {//* startSuggestingOnNextSelectionChange = true; widget.addSelectionChangeListener(this); return Command.DEFAULT; } return Command.DEFAULT; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その中で、エディターの動作を再定義しました。@、＃、$、*（プロジェクト、タスク、タグ、アクティビティの種類のツールチップ）を押すと、Ctrl-Spaceを除いてツールチップが表示されます。 Enterキーを押すと、コマンドラインが適用されます（タイムシットを入力します）。

プラットフォーム機能の拡張

覚えているかもしれませんが、プラットフォームが提供するUserクラスを使用することにしました。 ユーザーレコードに、週あたりの必要な労働時間数を保存できるようにしたかったのです。 これは、入力されたデータを検証するために必要です（人がタイムシールド内で必要以上または以下を示した場合）。 システムユーザーを参照する新しいエンティティを作成するか、プラットフォームエンティティを展開するかを選択しました。 労力を節約するために、このメカニズムは（使用に関して）非常に単純であり、正常に機能するため、拡張することにしました。 次に、この拡張機能の実装方法を示します。



最初に、com.haulmont.cuba.security.entity.Userクラスの継承者を作成し、そこに新しいフィールドを追加する必要がありました。

 @Inheritance(strategy = InheritanceType.SINGLE_TABLE) @DiscriminatorValue("Ext") @Entity(name = "ts$ExtUser") @Extends(User.class) public class ExtUser extends User { .... @Column(name = "WORK_HOURS_FOR_WEEK", nullable = false) protected BigDecimal workHoursForWeek; public BigDecimal getWorkHoursForWeek() { return workHoursForWeek; } public void setWorkHoursForWeek(BigDecimal workHoursForWeek) { this.workHoursForWeek = workHoursForWeek; } .... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ユーザーの編集画面を拡大する画面を作成し、システムに登録しました。

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <window xmlns="http://schemas.haulmont.com/cuba/window.xsd" caption="msg://editCaption" class="com.haulmont.timesheets.gui.extuser.ExtUserEdit" extends="/com/haulmont/cuba/gui/app/security/user/edit/user-edit.xml" messagesPack="com.haulmont.timesheets.gui.extuser" xmlns:ext="http://schemas.haulmont.com/cuba/window-ext.xsd"> <layout> <groupBox id="propertiesBox"> <h4></h4> <grid id="propertiesGrid"> <rows> <row id="propertiesRow"> <fieldGroup id="fieldGroupRight"> <column> <field id="workHoursForWeek" caption="msg://com.haulmont.timesheets.entity/ExtUser.workHoursForWeek" ext:index="5"/> </column> </fieldGroup> </row> </rows> </grid> </groupBox> </layout> </window>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、Userエンティティの代わりに、ExtUserがシステムに存在し、編集画面にworkHoursForWeekフィールドが含まれています。



これは、機能を拡張する最も簡単な例です。拡張機能について詳しく知りたい場合は、 記事をご覧ください 。

自分で配布する

当初から、このシステムを他の人が使用する製品にすることを計画していました。 システムのインストールと起動を簡単にするために、配布キットのようなものを作成することにしました。



「配布」は、Tomcatサーブレットコンテナとシステムを起動/停止するスクリプトを含むフォルダーを含むzipファイルです。



Gradleはプラットフォーム上でプロジェクトを構築するために使用されるため、このような「配布」を構築することは難しくありません。

 def distribDir="./distrib" def scriptsDir="./scripts" task cleanTomcatLogs << { def dir = new File(tomcatDir, '/logs/') if (dir.isDirectory()) { ant.delete(includeemptydirs: true) { fileset(dir: dir, includes: '**/*') } } } task copyTomcat(type: Copy, dependsOn: ['setupTomcat',':app-core:deploy', ':app-web:deploy', ':app-web-toolkit:deploy', 'cleanTomcatLogs']) { from file("$tomcatDir/..") include "tomcat/**" into "$distribDir" } task copyLoriScripts(type: Copy) { from file("$scriptsDir") include "*lori.*" into "$distribDir" } task copyTomcatScripts(type: Copy, dependsOn: 'copyTomcat') { from file("$scriptsDir") include "*classpath.*" into "$distribDir/tomcat/bin/" } task buildDistributionZip(type: Zip, dependsOn: ['copyLoriScripts', 'copyTomcatScripts']) { from "$distribDir" exclude "*.zip" baseName = 'lori' version= "$artifactVersion" destinationDir = file("$distribDir") } task distribution(dependsOn: buildDistributionZip) << { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

唯一の問題はTomcatにありました。 JAVA_HOMEシステム変数が設定されていないシステムでは、彼は必死に起動したくありませんでした。



この変数が存在しないことを彼に無視させるには、スクリプトsetclasspath.shとsetclasspath.batをより単純なものに置き換える必要がありました。

おわりに

時間を追跡するための製品は多数あるため、おそらく疑問が生じます。なぜ別の製品を作成したのでしょうか。 いくつかの理由があります。 主なもの-私たちの活動分野（ソフトウェア開発）で、製品ができる限り正確で便利であることを望んでいました。 さらに、他のシステムとの統合を容易にし、プロセスの変更を改善する必要がありました。 最後に、CUBAプラットフォームでの開発の良い例となる便利なアプリケーションを作成したいと考えました。



アプリケーションは無料で、そのコードはgithubで入手できます。 Lori Timesheetsを変更するには、アプリケーションがプレミアムアドオンを使用するため、 CUBA Studioの商用ライセンスが必要です。



Lori Timesheetsが私たちだけでなく、他の誰かにも利益をもたらすことを願っています。 オープンソースと拡張メカニズムにより、アプリケーションを自分用に簡単に適合させることができます。