React Nativeを使ったモバイルアプリの作り方を学ぶハンズオン(Zoom開催)

シンギュラリティ・ラボ

2021.3.6 13:00 2021.3.6 17:00

Googleカレンダーに登録

「TechPlay」で掲載されています

サービス/プロダクトの開発に欠かせないアプリ開発を体験してみませんか?
全3回にわたってサービス/プロダクトの開発に欠かせないアプリ開発を体験するハンズオンを開催します!
初心者向けではなく、ある程度開発経験がある方を対象にしたハンズオンになります。 Webアプリケーションやハンズオンで扱わない他のフレームワークを使ったSPA、REST API、モバイルアプリの開発経験があり、日頃からプログラミングしている方が理解を深めやすい内容になっています。
開催時期
ハンズオン
説明
1/9(土)

開催済み
SPA
SPAの作り方を学びます。

Reactを使ってプログラミングを行い、フロントエンド開発への理解を深めます。

キーワード:React、TypeScript
2/20 (土)
開催予定
REST API
SPAのバックエンドとなるREST APIの作り方を学びます。
Nablarchを使ってプログラミングを行い、REST API開発への理解を深めます。
キーワード:Nablarch
3/6(土)
モバイルアプリ
モバイルアプリの作り方を学びます。
React Nativeを使ってプログラミングを行い、クロスプラットフォーム開発への理解を深めます。
キーワード:React Native、Expo
今回は第3回目となるモバイルハンズオンの参加者を募集します。
各ハンズオンは独立しているため、ご興味のあるハンズオンのみにご参加頂いて大丈夫です。
過去に開催したサービス開発エンジニア体験(全4回)の追加開催分になります。
過去の開催時のアンケート結果等から、ハンズオンで使用する言語とフレームワークの基礎知識があるとハンズオンを通した学びが多くなる傾向にあります。開催日までにハンズオンで使用する言語とフレームワークの基礎知識を習得してから参加するようにお願いします。
内容
React Nativeを使ってモバイルアプリを作成します。
スタッフが実演⇔参加者が作業といったかたちでステップバイステップで進めます。
次のような内容を学びます。
Open APIの活用 (クライアントコードの生成、モックサーバの起動)
画面遷移とナビゲーション(React Navigationライブラリ)
ログイン、ログアウト、一覧画面(GET/POSTを使用したAPIアクセス、イベントハンドラの使用、コンテクストの使用)
カメラの制御(ImagePickerライブラリ)
Fintanではモバイルアプリのノウハウとしてモバイルアプリケーションのセキュリティと認証を公開しています。ハンズオンの内容を発展させて実務でアプリを作成する際にご活用ください。
FintanはTISがこれまでの開発で培ったノウハウを公開しているサイトになります。 公開しているコンテンツはどなたでも無償でご利用頂けますのでぜひ一度アクセスしてみてください。
開催方法
Zoomで開催します。
Zoomのアクセス先は当日までに参加者の方に連絡します。
タイムスケジュール
時間
内容
12:50~13:00
参加受付@Zoom
13:00~16:00
ハンズオン@Zoom
16:00~17:00
懇親会@Zoom(自由参加)
※懇親会は各自で飲み物(アルコール可)や食べ物をご用意ください。
参加条件
TypeScriptの基本的な文法が分かること。
TypeScript の概要の内容が何となく分かるようなレベルです。
Reactの基本的な文法が分かること。
1. Hello Worldから始まるMAIN CONCEPTSの内容が何となく分かるようなレベルです。
PCでZoomに繋げる環境があること。
ZoomのカメラをONにして顔出しできること。
相手の顔が見えない状態での進行が辛いためご理解をお願いします。
ハンズオン終了後の改善目的のアンケート(10問程度)に回答できること。
ハンズオンの当日までに事前準備(下に記載)ができること。
ご連絡
下記についてご理解頂いた上で参加申し込みをお願いします。
当日の内容およびスケジュールは変更する場合があります。
オンライン開催のため、ネットワークの状況等により進行が中断する可能性があります。
本イベントや参加レポートをSNSやブログ等で発信頂いても大丈夫です。
ハラスメントにつながらないようにお願いしますm(__)m
事前準備
React Nativeの環境構築
React Nativeの開発環境を準備します。
次の記事を見てExpoを使ってスマホでアプリを動かす方法を確認してください。 スマホで動かして開発しなくてもよい場合はブラウザで動かすところまで実施してください。
React Native Expo CLI で始めるクロスプラットフォーム開発 はじめの一歩編
Visual Studio Codeのインストール
開発時に使用するエディタをインストールします。
エディタは使い慣れたものなら何でもよいですが、何もインストールしていなければ、今回のハンズオンで使用するコードに対応できるVisual Studio Codeをインストールします。公式サイトの案内に沿って、インストールしてください。
エディタが既に整っている場合は、この手順をスキップしてください。
Docker(Docker Compose)のインストール
開発時にコンテナを使用するため、DockerとDocker Composeをインストールします。
公式サイトの案内に沿って、使用しているOSに対応するDockerとDocker Composeをインストールしてください。 Docker Engineは18.06.0以上をインストールしてください。
WindowsとMacでのDocker利用方法はいくつかありますが、本ハンズオンではDocker Desktopをインストールしてください。(参考:Install Docker Desktop on Windows、Install Docker Desktop on Mac)
使用する環境が既に整っている場合は、この手順をスキップしてください。
本ハンズオンでは、Dockerコンテナ起動時にローカルディレクトリをマウントします。Docker Desktop for WindowsやDocker Desktop for Macでローカルディレクトリをマウントするためには事前にファイル共有を許可しておく必要があります。Docker DesktopのSettings→Resources→FILE SHARINGから、本ハンズオンのプロジェクトを配置するドライブやディレクトリを共有可能に設定しておいてください。(参考:Docker Desktop for Windows user manual、Docker Desktop for Mac user manual)
Docker(Docker Compose) & マウントの確認
以下の手順で確認します。
Windowsを前提として手順を記載しておりますので、他のOSの方は適宜読み替えてください。
勉強会当日に使用する作業用フォルダを作成します。 ここでは c:work を作成したとします。
以下の内容で、 c:workdocker-compose.yml ファイルを作成します。
(書式の都合上versionの前に空白文字が存在するようにみえますが無視してください。)
version: ‘3.7’ services: mounttest: image: ubuntu:18.04 volumes: – ../work/testdir:/testdir command: cat /testdir/testfile.txt
以下の内容で、 c:worktestdirtestfile.txt ファイルを作成します。
Mount is successful.
以下のコマンドを実行します。
$ cd C:work $ docker-compose up
実行結果に以下のように Mount is successful. という文字列が含まれていることを確認してください。
Creating network “mounttest_default” with the default driver Pulling mounttest (ubuntu:18.04)… 18.04: Pulling from library/ubuntu 171857c49d0f: Pull complete 419640447d26: Pull complete 61e52f862619: Pull complete Digest: sha256:646942475da61b4ce9cc5b3fadb42642ea90e5d0de46111458e100ff2c7031e6 Status: Downloaded newer image for ubuntu:18.04 Creating mounttest_mounttest_1 … done Attaching to mounttest_mounttest_1 mounttest_1 | Mount is successful. ※このように「Mount is successful.」が含まれるログが出力されたら成功 mounttest_mounttest_1 exited with code 0
以下のコマンドを実行し、動作確認に使用したコンテナを削除してください。
$ docker-compose down
お問い合わせ
事前準備等で困った場合はconnpassの「イベントへのお問い合わせ」からご連絡ください。

2021.3.6 13:00 2021.3.6 17:00

Googleカレンダーに登録

「TechPlay」で掲載されています

関連するウェビナー