GDSC Summer Hackathon Flutter & VS Code Setup

Transcript

1. Flutter & VS Code Setup Speaker: Yujiro Kisu GDSC Tokyo Metropolitan University 18:00 ~ 20:00 (早く終わる可能性高い) 開始までしばらくお待ちください 18:00 ~ 20:00 (probably finishing earlier) Stay tuned till we start! @yuyu_lab_tmu
2. VS Code • VS Codeとは ◦ 便利なテキストエディタ ◦ 色々な拡張機能がある ◦ 自分の好きなテーマにカスタマイズできる • 今回の用途 ◦ Gitを簡単に使える ◦ Flutter・Dartの拡張機能を使用
3. VS Code • What is VS Code? ◦ Useful text editor ◦ Many extension packages ◦ Customizable with a favorite theme • Uses in this event ◦ Using Git easily ◦ Using Flutter (Dart) extensions
4. インストール手順 1. サイトにアクセス (https://code.visualstudio.com/do wnload) 2. 該当のファイルをダウンロード 3. ファイルの解凍 4. (セキュリティの許可) 5. アプリの起動 6. (日本語拡張機能をインストール ) VS Code拡張機能ボタンをクリック →
5. Installation process 1. Access this site (https://code.visualstudio.com/downlo ad) 2. Download an appropriate file 3. Unzip the file 4. (Allow security check) 5. Run VS Code app 6. (Install a Japanese package) VS Code extension button ->
6. hoorayyy
7. Q&A
8. Git • Gitとは ◦ バージョン管理ツール ◦ 複数人での開発で重宝 • 今回の用途 ◦ Flutter SDKのインストール ◦ ワークショップの記録 ◦ ハッカソンのチーム開発
9. Git • What is Git? ◦ Version control tool ◦ Useful for development with multiple people • Uses in this event ◦ Installing Flutter SDK (explained later) ◦ Managing codebase for workshops & this hackathon
10. パワーアップ (みたいな感じ) !!!
11. Power up (sort of) !!!
12. 1. サイトにアクセス (https://git-scm.com/downloads) 2. Homebrewをインストール (https://brew.sh/) a. Terminalを使用 3. このコマンドをうつ a. brew install git インストール手順 1. サイトにアクセス (https://git-scm.com/downloads) 2. 自分のOS＆システムに合ったものを ダウンロード 3. パッケージを開く 4. デフォルトの設定でインストール Windows Mac
13. 1. Access this site (https://git-scm.com/downloads) 2. Install Homebrew (https://brew.sh/) a. Use Terminal　　　　　　 3. Run this command: a. brew install git Installation process 1. Access this site (https://git-scm.com/downloads) 2. Download one suitable for your OS & system (32-bit or 64-bit) 3. Open the package 4. Install with the default settings Windows Mac
14. Flutter • Flutterとは ◦ UI 開発の便利ツール (SDK) ◦ Dart 言語を使う ◦ Googleが作った ◦ マルチプラットフォーム対応 • 今回の用途 ◦ アプリの骨組み ◦ 迅速なアプリ開発の体験 ◦ ハッカソンの必須項目
15. Flutter • What is Flutter? ◦ Tool for UI development (SDK) ◦ Uses Dart language ◦ Made by Google ◦ Multi-platform framework • Uses in this event ◦ Framework for an app ◦ Experience robust/quick app development ◦ Requirement in this hackathon
16. 1. ワークショップ用フォルダ作成 2. Flutter拡張機能をVS Codeにインストール 3. ワークショップ用のフォルダをに ドラッグ＆ドロップ 4. ⌘ + shift + p (Mac) ctrl + shift + p (Windows) Flutter SDKインストール
17. 1. Create a folder for a workshop 2. Install Flutter extension on VS Code 3. Drag & drop the folder onto VS Code opened 4. ⌘ + shift + p (Mac)　　　 ctrl + shift + p (Windows) Install Flutter SDK with
18. Q&A
19. Congratulation!! Image: https://www.reddit.com/r/ProgrammerHumor/comments/mj6y2a/visual_studio_code/
21. お疲れさまでした 🙌
22. Next up … Day3 Git & VS Code