アンプ＆バックエンド

このチュートリアルでは、完全なスタックアプリケーションを構築する方法について説明します.
我々がするものは、Aをつくるために一歩ずつ行くことですTodos あなたのフロントエンドとあなたのバックエンドのための増幅のための反応を使用してアプリケーション.
あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !

目次

ステップ1 -新しいアプリを作成する

ステップ2 -エンティティを作成する

ステップ3 -ロールを作成する

ステップ4 -アクセス許可を割り当てる

ステップ5 -バックエンドを構築する

ステップ6 -バックエンドを実行する

ステップ7

ステップ1 -新しいアプリを作成する

うまくいけば、あなたはチャンスを増幅アカウントを作成するが、していない場合は、フレットしないでください!訪問https://app.amplication.com/ ログイン画面に指示されます.ここでは、既存のアンプのアカウントにログインしたり、1つを作成するには、githubアカウントで署名します.あなたは10時に終わるはずですNew App あなたがそれを得ることができるならばhere .

をクリックしますNew App 右上隅にあるボタン.

絹篩で篩うたようStart from Scratch そして、アプリのために数秒待って生成される.

あなたは、アプリケーションのエンティティに指示されます.エンティティは、NoSQLデータベースのコレクションまたはリレーショナルデータベースのテーブルと等価です.

既定では、ユーザーエンティティが作成されます.このエンティティは最終的に認証を処理するのに役立ちます.しかし、まず、バックエンドに対処しましょう.

ステップ2 -エンティティを作成する

メインエンティティは、ユーザーが作成したタスクを格納するために使用されます.

クリックAdd entity .

時New entity モーダル表示Task 入力フィールドにCreate Entity . 作成したエンティティを使用すると、タスク要素のフィールドを定義します.

左側のパネルでは、Fields このエンティティには、フィールドが追加されるオプションがあります.

最初のフィールドはText . 入力するAdd field 入力とヒットenter . 新しいフィールドが作成され、いくつかのオプションが表示されます.

ドロップダウンに注意してくださいData Type このフィールドのSingle Line Text . それは、タスクの文字列入力されるように完璧です.フィールドにはさまざまなデータ型の増幅が適用できます.

ここで必要とされる唯一の変更は必須のフィールドです.を切り替えるRequired Field スイッチ.変更が自動的に保存されます.

前と同様に新しいフィールドを作成しますCompleted . このフィールドは必須フィールドでもありますが、データ型を変更します.をクリックしますData Type ドロップダウンし、このフィールドをBoolean .

作成する必要のある最後のフィールドはUID . このフィールドは、タスクをユーザーに関連付けるために使用されます.必須のフィールドとしてマークします.にData Type ドロップダウン選択Relation to Entity .

The Related Entity ドロップダウンが表示されますUser . タスクとユーザの間の関係を作成するよう要求するモーダルが表示されます.クリックCreate リレーションシップを作成するにはエンティティ関係についてもっと知るためには、Docshere .

ステップ3 -ロールを作成する

増幅は、バックエンドの異なるエンティティ内のエントリを作成、読み取り、更新、および削除する粒状許可を可能にします.
ユーザーの誰がタスクを作成し、読み取り、およびそのタスクを更新し、他のことを行うことを防ぐために特定のアクセス許可を付与する必要がありますToDoアプリでタスクを作成されます.

をクリックしますRoles 左側のパネルのアイコン.

その後、プロパティのように、我々はTask エンティティと呼ばれるロールを作成するTodo User .

ステップ4 -アクセス許可を割り当てる

ToDoアプリケーションのユーザーのための役割を作成すると、我々は特定のアクセス許可を割り当てる必要がありますTodo User 役割

をクリックしますEntities 左側のパネルのアイコン.

既定では、すべてのロールはCRUD(CREATE、READ、UPDATE、DELETE)のすべてのエンティティにアクセスします.それは私たちのTODOユーザーの範囲を制限することが重要です.

選択User エンティティのリストからのエンティティ、および左側のパネル選択Permissions . あらゆる種類のコマンドをAll Roles . ユーザーとUser or Todo User ロールは、User エンティティ.これは危険です.バックエンドによって作成された既定の管理アカウントはロールを持っていますUser , それで、我々はそれで混乱したくありません.私たちが最終的にすることは、すべての新しいユーザーが割り当てられるようにそれを持っていますTodo User そして、特定のコマンドへのアクセスを制限します.

エンティティのコマンドのパーミッションをGranular とトグルUser 役割今すぐアクセスできる唯一のユーザーUser アカウントにはUser ロールは管理者アカウントにのみ属します.

に戻るEntities ページを選択Task エンティティ.クリックPermissions . を切り替えるDelete コマンドにGranular にアクセスし、User 役割両方User sと管理者Todo User s(アプリの定期的なユーザー)を作成し、読み取り、およびタスクを更新できるようになりますでも、User sはタスクを削除することができます.

ステップ5 -バックエンドを構築する

新しいタスクエンティティを作成し、ユーザーとの関係を作成します.我々は今バックエンドを構築する準備が整いました.
右側のパネルにはPending Changes where the changes to Task and User が表示されます.

クリックCommit changes & build 変更を終了し、バックエンドのインスタンスをサンドボックス環境に展開します.

ページの下部には、テキストとステータスボタンがありますPreparing sandbox environment... . をクリックすると、バックエンドのログに記録されます.

これは数分かかるが、一度完了するとOpen Sandbox environment , しかし、我々はtodoアプリのサンドボックスを使用されません.
既定での増幅は、すべての要求が認証される必要がある安全な環境を作成します.このユースケースのために、我々はそれらの保護のいくらかを楽にしたいです.Amplicationの拡張性のおかげで、我々は我々のために生成されたすべての上に構築することができます.

バックエンドをダウンロードすることから始めましょう.ページの右下には、ダウンロードボタンが表示されます.をクリックしてダウンロードする.zip バックエンドを実行するすべてのコードを含むファイル.

zipファイルを展開し、README.md ) の根にamplication-react プロジェクト

ステップ6 -バックエンドを実行する

The admin-ui and server 増幅によって生成されるフォルダは、設定する必要がある2つの新しいノードプロジェクトです.両方とも必要なのは依存関係です.にpackage.json 更新postinstall スクリプト

"postinstall": "npm ci --prefix web && npm ci --prefix admin-ui && npm ci --prefix server"

新しい端末を開き、以下のコマンドを実行します.このコマンドはすべてのサブフォルダの依存関係をインストールします.このコマンドのもう一つの有用な側面は、あなたがGithubにこのプロジェクトをプッシュし、あなたが実行するときにrepoをクローン化した場合ですnpm install このスクリプトは、インストール後にサブフォルダの依存関係を自動的にインストールします.

npm run postinstall

コードとのいくつかの小さな衝突がありますcreate-react-app 私たちのために作成され、コードの増幅は私たちのために作成.これは簡単に修正する必要があります.インストールcross-env and npm-run-all 以下のようにdev依存性として:

npm install -D cross-env npm-run-all

更新start スクリプトpackage.json と同様にスクリプトを追加します.これを行うことによって、TODOアプリのUIは、現在のポート上で実行されます5000 開発の間、それはサーバーのためのアンプのデフォルトポートと衝突しません3000 ).
また、フロントエンドとバックエンドのコードを同時に実行するスクリプトを開始します.

"start": "npm-run-all -p start:frontend start:backend",
"start:frontend": "cross-env PORT=5000 npm --prefix web start",
"start:admin": "npm --prefix admin-ui start",
"start:backend": "npm --prefix server start",

サーバーを起動する前にいくつかの追加の手順が必要です.読めるserver/README.md for directions to:

クライアントを作成する

Dockerでデータベースを起動する

データベースを初期化する

これらの手順が完了すると、次のコマンドが実行されます.

npm run start

ステップ7

TODOアプリのフロントエンドはhttp://localhost:5000/ , バックエンドはhttp://localhost:3000/ .
訪問http://localhost:3000/ ウィルであなたを迎えます404 エラーです.代わりに、訪問http://localhost:3000/api/ バックエンドのすべての終点を見て、我々の残りのエンドポイントがどのように見えるかを見るために.
バックエンドが作成され、ローカルで実行されているので、フロントエンドにリンクする準備ができています.まず、コードに追加を加える必要があります.
次の週のステップ3のチェック、またはAmplication docs site 今すぐフルガイド!
この手順の変更を表示するにはvisit here .