2019年、新年開発合宿の概要 | Overview of New Year Dev Training Days

新年、お正月休みを利用し、友人(Jと呼びます)と3日間、開発合宿を行いました。技術検証が主な狙いなので、React, Redux, Thunk, Firestoreを使っています。

初めの構想は、チャットサービスのローンチ。CIツール入れたり、AWSでオートスケーリングも…

At first, we have planned launch Chat service in 1st day. Then CI tools, AWS auto scaling…

初日で、 MVPを開発し、2日目以降、機能追加や、環境を充実させるというイメージで開始しました。 

動画とキャプチャで下に掲載していますが、結果としては、3日間で何となくチャット機能が動いてはいる…というものが出来上がったレベルでした。 

プロダクトとしては、ユーザーに満足して使ってもらえるレベルではありませんが、採用・実装した技術要素はタイトルにあるもので、先進的なものです。

今回は、数記事に渡って、やったことを記録・公開して参ります。

全体の流れ

設計&環境構築

HTML/CSSでモックアップ作成

React化

DB(Firestore)設計・実験

機能追加

ローンチ(Firebase Hosting)


大まかに書き出すとこのようなことを行いました。



完成したものはコチラです。

完成までの概要

まずチャットのUI・ワイヤフレームを作成します。

Google Presentationで枠を作るレベルです。
並行して、Jは、React、 Redux、webpackを導入してくれています。

Wireframe

コチラをベースに、HTML/CSS化したものが↓です。

これをReact経験者のJに渡し、React化してもらいまして、ベースができあがります。その後、state更新などの処理やサイドメニューを追加しました。

見た目上、あっさりと完成してそうですが、裏側でReact, Redux, Thunk, Firesotreと、触ってみたい技術を実装していく必要がありました。

↑動画にあるもの(Hapicomori)のソースを紐解きながら、1つ1つの技術要素について、書いていこうと思います。

当記事では、作ったものの紹介。要素技術の紹介までとさせていただきます。

関連記事

  1. let’s play firebase

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP