ハンズオン - slcsol4/wyn-wiki GitHub Wiki

やること

  • 課題一覧から課題詳細画面に遷移できるようにする
  • 詳細画面が必要とするＡＰＩを３つ新規作成する
    • Get:/task/{taskId}
    • Get:/task/{taskId}/condition
    • Get:/task/{taskId}/comment/list

到達点

image

じゃ、やっていきましょ～

  • UI設計
    • 通常の開発でもUIをからイメージを膨らませることが多いと思います
    • 今回はすでに作っているので割愛ですが、参考までに宇野が作ったときの考えです image
    • ほんとはFigmaとかつかったら顧客とのコラボレートとかできるんですが、今回はエクセルで切り貼りしました
  • api設計
    • リポジトリ：wtn-if
    • ブランチ：HandsOn_START
    • IDE：VSCode
    • UI設計ができたら必要となるAPIが見えてきます。で、具体的に設計していきます
    • まずは、git checkout -bから
      • 自分のローカルリポジトリをつくりましょう
      • yyyymmdd_handson_%name%とかにしましょう
    • api-docの編集。以下３つを作りましょう
      • Get:/task/{taskId}
      • Get:/task/{taskId}/condition
      • Get:/task/{taskId}/comment/list
    • このタイミングでMockoonもつくっておきましょう
  • DB設計
    • リポジトリ：wtn-if
    • ブランチ：HandsOn_START
    • IDE：VSCode
    • apiができたら管理しなければいけない情報が見えてくるはずです（というか、UI時点で見えてる？）
    • ロジック上の考慮もわすれずに設計していきましょう
    • DDLの作成。以下を作りましょう。
      • t_task_comment
    • ローカルのMySQLで実行しちゃってください
  • UI製造
    • リポジトリ：wtn-ui
    • ブランチ：HandsOn_START
    • IDE：VSCode
    • まずは、git checkout -bから
    • 今回は各contentは作成済みです
    • 画面遷移の部分とAPI呼び出しの部分を作りましょう
    • contentは宇野の画面で解説します
  • api製造
    • リポジトリ：wtn-api
    • ブランチ：HandsOn_START
    • IDE：InteliJ
    • まずは、git checkout -bから
    • （どこからつくってもいいんですが、）model>mapper>db-lib>usecase>controller>apiの順番でいきましょうか
      • Get:/task/{taskId}
      • Get:/task/{taskId}/condition
      • Get:/task/{taskId}/comment/list
    • 作れたら、コマンドプロンプトやAPITesterからcurlコマンドで動作確認しておきましょう
  • 動作確認
    • テストしましょう