特別編 Amplify Studio ハンズオン

読了時間(目安): 1 分
記事の文字数: 3904 文字
Page content

AWS エバンジェリストシリーズ AWSの基礎を学ぼう

特別編 Amplify Studio ハンズオン

Figma

私自身はデザイン界隈を詳しくないのですが、
Figmaについて調べるとよくAdobe XDに関する記事が出てきます。
このあたりはデザイナーさんのスキル、好みになるのかなと思います。

AWS Amplify , AWS Amplify Studio

Handson

(トラブルシューティング)Node Package のインストール不足

  • エラーメッセージ例
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! amplify-homes@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the amplify-homes@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2-user/.npm/_logs/2022-03-26T05_03_07_321Z-debug.log
An error occurred during the publish operation: Unknown error occurred.

(トラブルシューティング)Amplify Studio管理画面が白く表示

  • 対応としては利用ブラウザのローカルストレージのクリア localStorage.clear()
    • Google Chrome Screenshot 2022-03-26 14.44.14.png
    • Microsoft Edge Screenshot 2022-03-26 14.42.48.png
    • Mozilla Firefox Screenshot 2022-03-26 14.48.44.png

まとめ

フロントエンドが弱い私のようなエンジニアでも、
イメージさえ出てくれば、ReactのWebページを作成することができます。

また、Reactの設定についても自動で変換してくれるので、
モックを作成するだけでも立ち上げるのに、時間を要さない(30分〜1時間)で環境ができる体験も良いと思います。

また、私はそういった現場の経験はありませんが、
デザイナー(Figmaで見た目を作る人)とコーダー(デザインをコードに書き起こす人)、エンジニア(コードを取り込んで実装する人)という環境が合った場合に、
デザイナーからエンジニアに直接渡すことができるのでコミュニケーションコストも下がり、修正も容易になり、
体験としては向上するのではないかなと思いました。

Share on:
comments powered by Disqus