/ Programing

Webアプリ入門しようよ! in AngularDart

CとHaskellしかまともに書いたことがない男、Kentaurosです。

唐突ですが、Webアプリ作れるようになりたくないですか??

Kentaurosはなりたいです。(小並感)

今回はGoogle先生イチオシの言語だとKentaurosが勝手に思っているDart公式チュートリアルを、Webアプリ初心者のKentaurosでもできるよう、適当に(本当に適当です。ごめんなさい。)日本語訳しました。

対象読者

事前準備

40秒で支度しな!さっさと始めるよ!(ラピュタの婆さん風に)

何を作るか

↓これです。
Tour of Heroes(デモ)

これをゼロ(嘘)から作り上げるのが、今回のミッションです!

せっかちなあなたのためにソースコードも早速公開してしまいましょう!
ソースコード

手順とコミットを紐付けてあるので、万が一でも躓くようなことがあれば活用してください!

モチベーションを維持するため、できるだけハイテンションで行きましょう!

ネクストッ!(jMatsuzakiさんのパクリ)

どう作るか

今回は以下の流れでWebアプリを開発していきます!

  • Part1:The Hero Editor
      1. とりあえず起動!
      1. Heroを表示!
      1. templateを別ファイルに!
      1. Heroを編集できるように!
  • Part2:Master/Detail
      1. Heroリストを表示!
      1. Heroリストの見た目を変更!
      1. クリックで詳細を表示!
  • Part3:Multiple Components/Services
      1. Heroをコンポーネント化!
      1. Heroをサービス化!
      1. HeroServiceを非同期化!
      1. HeroListをコンポーネント化!
  • Part4:Routing
      1. ボタンクリックでリストを表示!
      1. ダッシュボードを追加!
      1. 初期画面をダッシュボードにする!
      1. ダッシュボードを拡充!
      1. Hero毎の詳細画面を追加!
      1. Hero毎の画面へのリンクを各コンポーネントに追加!
  • Part5:HTTP
      1. Heroのデータをサーバーから取得する!
      1. Hero名の変更を保存する保存ボタンを追加!
      1. 新しいHeroを作成するボタンを追加!
      1. Heroの削除ボタンを追加!
      1. ダッシュボードに検索ボックスを追加!

なんかPartごとのボリューム配分おかしくね?と思っても気にしないで!

さっそく取り掛かりましょう!

ネクストッ! → Part1. The Hero Editor

Tanaka Marcus Kentauros

23歳で脱サラ?して今を生きるKentaurosです。 6次産業(農業+飲食店)をベースに村おこしする会社の起業を目指しています。

Read More