[リニューアル] グルメマップアプリ作り (React Native & NestJS)
Kyo
React Nativeを使って自分だけのグルメ記録アプリを開発し、リリースする過程を学ぶことになります。デザインからフロント・バックエンド開発、デプロイまで全過程を準備しました。
중급이상
React Native, TypeScript, NestJS
最小限の時間内にリアクトネイティブを学ぶことができます。不要な部分は入れませんでした。

React Native
Firebase
Expo
React Native Deck Swiper
React Navigation
ContextAPI
Tailwind CSS
リアクトネイティブ+ファイアベース
4時間以内にコアだけ早く学ぶアプリ開発!
リアクトネイティブとファイアベースを使って、実際のアプリに沿って実装し、本番モバイルアプリの開発感覚を育ててみてください。
Reactまたは
React Native
することを知っている人
React Native
初めて
Reactユーザー
React Native 基礎のみ
学んだ状態で
実際のプロジェクト体験
したい方
%20%EB%A1%9C%EA%B7%B8%EC%9D%B8%20-%20%ED%85%8C%EB%91%90%EB%A6%AC%20-2.gif)
1) ログイン画面
EXPO GOOGLE AUTHを通じて会員登録とログイン機能を実装する方法を学びます。
%20%ED%94%84%EB%A1%9C%ED%95%84%20%EC%9E%85%EB%A0%A5%20-%20%ED%85%8C%EB%91%90%EB%A6%AC.gif)
2) プロフィール画面
ユーザー情報をファイアベースに入力して保存する方法を学びます。
%20%EC%8A%A4%EC%99%80%EC%9D%B4%ED%95%91%20%EB%A7%A4%EC%B9%AD%20-%20%ED%85%8C%EB%91%90%EB%A6%AC.gif)
3) ホームスクリーン
React Native Deck Swiperによるスワイプ機能を学ぶことができます。
ファイアベースを介してリアルタイムでプロファイル登録されたユーザーをレンダリングする方法まで一緒に学びます。
%20%EB%A9%94%EC%84%B8%EC%A7%80%20%EB%B3%B4%EB%82%B4%EA%B8%B0%20-%20%ED%85%8C%EB%91%90%EB%A6%AC.gif)
4) メッセージ画面
Firebaseを使ってリアルタイムでメッセージを送受信する方法を学ぶことができます。
学習のため、これまで様々な講義を受講してきており、今も受講しています。ところが時間はありませんが、余りに不要な部分に時間を割く講義が多かったです。本質的なものだけを教えてくれれば、5~6時間以内に出ることができますが、10時間、20時間を越える講義をスキップして聞くのが大変でした。それで、4時間以内にリアクトネイティブを学ぶことができるように、短いがずっしりとした講義を作りました。
実用的に使えて、実戦で使われる知識だけが詰まっていました。
膨大な理論を学んだのですが、これをどのように本番プロジェクトで使うのか分からない場合が多いです。理論に焦点を当てて、どのような状況でこのコードを使用するのかわからない場合は、意味のない勉強に過ぎません。実際のプロジェクトを通じて直接コーディングをしてみるときだけ、実際の自分のもので体得できます。
オリジナルのReact Nativeを使用するには、オペレーティングシステムに応じてAndroid StudioまたはXcodeの設定を行う必要があります。この初期設定が行われると、スマートフォンシミュレータをラップトップにビルドできます。しかし、それほど単純な部分ではないので、最初にReact Nativeに入ることは困難です。
しかし、この講義ではExpoを使って、お持ちのスマートフォンにExpo GoというアプリだけをダウンロードすればQRコードを撮るだけでもアプリ開発ができます。そのため、初めてReact Nativeを起動しても、気軽にコーディングを開始できます。
React Native フロントエンドだけを学びたい方があり、React NativeでFirebaseをどのように適用するが見たい方もいらっしゃるでしょう。そこで、受講生の皆さんの時間を最大限に節約するために、必ず必要な部分だけを正確に受講できるように講義を構成しました。
セクション1ではフロントエンドを、セクション2ではFirebaseバックエンドに分けました。今私に必要な部分に集中して便利に学習してみてください。
2年間スタートアップでフルスタック開発者として働いています。
現在は、アイビーリーグやFANG出身(Facebook、Apple、Netflix、Google)開発者たちと一緒に、Eコマースで使用するダッシュボードを制作するスタートアップで働いており、フロントエンド部分を主に引き受けています。
私の経験に基づいて、今回の講義がReact Nativeを学びたい方に役立つことを願っています!
Q. 初期設定がどの程度まで必要ですか?
まず、ReactあるいはReact Nativeの初期設定をしておいた方なら、Visual Studio CodeとNode.jsがインストールされているはずですが、その二つがあれば十分です!
Q. XCodeやAndroid Studioを初期設定する方法を教えてください。
いいえ。最小限の時間内にReact Nativeを学ぶことが今回の講義の目的であるため、Expoを選択することになりました。シミュレータを設定しなくても、スマートフォンでExpo GoというアプリケーションだけをダウンロードしてQRコードを撮ると、スマートフォンでもアプリビルドになるので、このレッスンでは扱わないでしょう。
Q. 環境設定はどの程度まで準備しなければなりませんか?
ノートパソコン(PC)は、Visual Studio Code、Node.js、Expo CLIまでインストールすれば十分です!また、スマートフォンにExpo Goというアプリケーションをダウンロードする必要があります。
その後、追加で可能な方はOSによってAndroid StudioもしくはXCode設定までしていただければと思います。 (必須ではないので心配しないでください)
学習対象は
誰でしょう?
リアクトを学んだ後、モバイルアプリの開発を学びたい開発者
リアクトネイティブ基礎を超えて実際のプロジェクトをやりたい開発者
前提知識、
必要でしょうか?
JavaScript
リアクト
全体
20件 ∙ (3時間 53分)
講座資料(こうぎしりょう):
1. ログイン画面(1)
04:26
2. ログイン画面(2)
16:27
3. ホームスクリーン(1) - ヘッダ
08:45
4. ホームスクリーン(2) - ボディ
21:36
5. プロフィール画面
12:40
6. マッチスクリーン
12:59
7. チャット画面
20:00
8. メッセージ画面
23:01
9. FB)ファイアベース設定
12:15
12. FB)プロフィール画面
17:20
16. FB)チャットスクリーン
07:16
全体
2件
¥9,341
同じ分野の他の講座を見てみましょう!