牛農家のためのソフトウェアの構築週0.

導入

ヶ月前に私は作成し、基本的なAndroidアプリを発表した.HERE , これは基本的に牛の農夫が牛の狩りの間に子牛(赤ちゃんの牛)を追跡するために使用できる単純なcrudアプリケーションです.私たちが話すように、それは私が最初にそれを念頭に置いて私のお父さんと一緒に構築を考慮してかなりクールな5つのダウンロードがあります.

しかし、私は今、次の論理的なステップは、モバイルアプリケーションを話すことができるWebベースのアプリケーションを作成することを信じています.このシリーズは毎週、私は毎週、Webアプリケーションを構築する進捗状況が含まれます

このブログ記事のYouTube版

製品レビュー

まず最初に、私たちはこの製品が実際に何であるかについて話すべきです.ビジョンは、個人ベースの料金を毎月の料金を支払うためにサインアップし、ソフトウェア製品へのアクセスを取得するアプリケーションベースのSaaS製品を作成することです.

バージョン1は、AWS beanstalkに公式に配備されて、見つかりますHERE .バージョン1は、場所の所有者として機能し、サイトの将来の意図の誰に通知するためのものですシンプルなデザインです.私はまだドメイン名やセキュリティ証明書を購入していないので、URLが少し奇妙に見える理由です.

ページに関して

約3ページのリストが表示されます.

サポート層

毎月のサブスクリプションは、ここでは、個人ごとに、プロジェクトの現在および将来の状態についての電子メールを介して毎週更新を受け取ることができるでしょう.

農家層

毎月のサブスクリプションは、ここで25ドル/月の個人は、モバイル版と同期されます私のcaltingトラッカーのWebベースのバージョンへのアクセスを取得します.また、生産する将来のソフトウェア製品へのアクセスも許可します.

パートナーティア

毎月のサブスクリプションは、どこで100ドル/月の個人のアクセス内部のAPIを取得し、牛の価格についての生のデータセットへのアクセスは、ローカルオークションのマートから廃棄されます.しかし、プロジェクトのこの部分は最終目標です、そして、すぐにいつでも完成しません.

ロードマップページ

これは、人々がソフトウェア開発サイクルプロセスのどこにあるのかを理解するためのものです.最終的には、できるだけ透明にしようとしています.

ソフトウェア製品ページ

現在配備されている製品を明確に視覚的に表現するためのものです.私は1つの製品を作成しているので、1つだけの項目が表示されます.モバイルアプリケーションの現在のデモですが、それはライブです.

開発者レビュー

そこのどんな仲間のdevsのためにでも、このセクションは私の技術スタックの簡単な概要であるでしょう、私が直面している問題のいくつか、そして、私が最も将来有望になる問題.

技術スタック

使用中React フロントエンド用.Spring Boot バックエンドとJavaのモバイルアプリケーションのためのAndroidと.私はこの技術のスタックを使用するための特別な理由はありません.I like JavaScript and I like Java .

フロントエンドの詳細

私は、機能的なコンポーネントとstyled-components CSSのライブラリを扱うライブラリ.だけでなくreact router dom クライアント側のルーティングを扱うライブラリ

フロントエンド問題

1 )ライブラリ:私が直面した最初の問題はライブラリ、特にUIライブラリです.非常に多くの、彼らは非常に設定するには混乱している.私のソリューションは、できるだけ少ないライブラリとして使用することです.はい、これは開発時間を遅くします、そして、私のUIは確かにそれのために苦しむでしょう.しかし、私がスケールアップするように、私は実際にスケールするソフトウェアの作成に対処することを余儀なくされます.これは、バージョン管理、テスト、devops、ソフトウェア開発の本当の厳しいものを意味します.

2)フォーム:フォームの作成とフォームの検証は私にとって非常に特別な頭痛でした.フォームの作成に対処するために、私は反応のコンポーネント合成を支持しました.フォームの検証のために、私はカスタムフックにすべてのロジックを抽象化しました.しかし、将来的には、それがますます脆くなっているので、検証コードを再評価する必要があります.

3 ) SVGは私のフォームを作成する際に、エラーの簡単なアイコンを持っていました.しかし、私は1つの単純なアイコンのためだけにライブラリ全体をダウンロードしたくなかった.私は自分自身を創造することを決めた.

- 1) find picture on unDraw : 私はお勧めしますunDraw 閉じるこの動画はお気に入りから削除されています.捜索するalert . その後、SVGとしてお好みの画像をダウンロードすることができます.
- 2) Sign up for figma : 次にfigma そして、無料のアカウントのサインアップ.次に、SVGをドラッグ＆ドロップします.最後に、あなたが望むようにそれを編集し、SVGとしてエクスポートします.
- 3) Turn SVG into react component : 通常の反応コンポーネントを作成し、コンポーネントにSVGタグを置きます.今すぐ反応は、それは名前空間のようなものをサポートしていないと言って、あなたに怒鳴る.これはOKです、そして、ちょうどそれが支持しないと言うことを削除してください.現在、あなた自身の再利用可能なSVGアイコンを持っています.どちらが涼しい

将来の問題

フロントエンドとの私の最大の問題は、フォームとフォームの検証になります.これらのアプリケーションは、非常に重い形になりそうです.私は、複数の検証要件を処理するのに十分に柔軟で移植性の高いコードを設計することができる必要があります.この問題を解決するために、いくつかの小さなオープンソース形式の検証ライブラリを見つけて、コードベースを見てから学ぶことができます.

Backenの仕様

私はビルドツールとしてMavenでバックエンドでスプリングブートを使用しています.

バックエンドの問題

1)データベーススキーマ:データベースのデザインは、私にとって難しいトピックでした.特に、考慮すべきことがたくさんあるからです.しかし、私は関係に対処し、今のところ最適化について心配しないことにしました.データベース関係マッピングでたくさん助けてくれた本ですPro JPA 2 by Mike Keith and Merrick Schnicariol . これはかなり大きな本ですが、私は4章では、データベーススキーマとどのようにデータベースの関係を実装を扱うに焦点を当てた.

2)春のセキュリティ:これまでのところ、これは最も混乱し、それを扱う実際に私は2回すべて削除します.しかし、本Spring Security in Action by Laurentiu Spilca 絶対金鉱山です.認証とフィルタに対処しようとするとき、私に無数の時間を節約しました.
3 )JARファイル:バックエンドを1つのjarファイルにしてフロントエンドをパッケージ化することは非常に混乱していました.つのMavenプラグインを使用してソリューションを見つけました.最初のプラグインはfrontend-maven-plugin どれが私たちのフロントエンドが必要として、ビルドコマンドを走らせるすべてをロードします.番目のプラグインはApache Maven Resources Plugin プロジェクトリソースのコピーを出力ディレクトリに扱います.これらの2つのプラグインの組み合わせは、コマンドを実行する能力を与えるmvnw clean package 出力ディレクトリに実行可能なjarファイルを持っています.
4)春のブートを作成し、ルータの作業を反応:前の手順で我々のバックエンドアプリケーションのスタティックフォルダーに我々の反応アプリケーションをパッケージしている.基本的には、スプリングブートがインデックスを提供することを意味します.HTMLファイルとクライアント側のルーティングを無視します.それで、このあたりを得るために、我々は少しハックを得ることができて、すべての要求をして、デフォルトインデックスを返すコントローラをつくります.HTMLは、反応ルータが動作することができることを意味します.コントローラは以下のようになります.

@Controller
public class ReactAppController {

    @RequestMapping(value = { "/", "/{x:[\\w\\-]+}", "/{x:^(?!api$).*$}/*/{y:[\\w\\-]+}","/error"  })
    public String getIndex(HttpServletRequest request) {
        return "/index.html";
    }

}

5)展開:現時点では、単一のモノリシック展開であり、弾性ビーンの茎に理想的ではない.将来、私は本当にGithubアクションとすべてのファンシーデプスのものとクールなDockerベースの展開パイプラインを作成したい.展開のために、ちょうどあなたのスプリングブートのためのポートが5000に設定されていることを確認し、デフォルト8080ではありません.AWSは5000ポートを探します.

将来の問題

私が選択することを決めたために、購読サービスを統合することStripe . 主に多くのクールな開発リソースを持っているからです.ありがたいことに、私はストライプによってgithubチュートリアルを見つけました.HERE , フロントエンドとバックエンドのサブスクリプションを作成する方法.

開発者のYouTubeチャンネルを見つけることができます

また、データベース移行とdevopsはおそらく私の将来の問題の最大の源になるでしょう

移動仕様

これは私が最も不足している場所は、モバイルアプリケーションとは非常に多くのことが残っている.しかし、私はサブスクリプションサービスを作成するまで、私はモバイルアプリケーションで動作しません

モバイル問題

1)kotlinに移動するか?Androidのモバイルコミュニティは、モバイル開発のためのKotlinを支持するためにシフトしました.GoogleはJavaの上で公式にKotlinを推薦さえします、しかし、それはすぐにいつでもJavaを支持するのを止めません.スマートな動きは、Kotlinに切り替えることです.しかし、Javaに固執することにしました.私はJavaが好きで、Javaとうまくなりたいので、Javaと一緒にいます.
2)ウェブサーバにフックアップする:私はどのようにこれを行うつもりかわからないが、それは確実に可能です.私は、Webクライアントとの同期を同期することができるし、同時に同じアカウントを使用して複数のユーザーを許可する.

将来の問題

将来の展開に対する私の最大の懸念は、無料のペイズドバージョンです.私はいつも私のアプリケーションの無料版があると、まったく同じ機能をしたい.唯一の違いは、payed加入者がウェブサーバにアクセスして、記憶のために彼らの電話記憶に頼る必要がないということです.

結論

私のこのブログ記事を読むためにあなたの日の時間を割いていただきありがとうございます.あなたが質問または懸念があるならば、下でコメントしてください、さもなければ、私に連絡してください.