React Native：創建無與倫比的多人井字遊戲

Contents

使用 Expo、Typescript 和 AWS Amplify GraphQL API 創建、發佈單人機器人和多人井字遊戲( Tic-Tac-Toe )並從中獲利

從這 23 小時的課程，你會學到

了解 Typescript 及其用途。
了解 Expo 以及 Expo 和 Vanilla React Native 之間的區別。
在物理設備、Android 模擬器和 iOS 模擬器上安裝和運行 Expo 應用程式。
了解如何在 Expo 中使用 Typescript。
整合 ESLint、Prettier 和 Husky 以獲得更好的工作流程。
通過 Typescript 整合有效地使用 React Navigation。
創建單人井字遊戲。
實施 Minimax 演算法以創建具有不同難度（從容易到無與倫比）的井字遊戲機器人。
在我們的遊戲中使用音效和觸覺反饋。
為程式碼重用性創建自定義 React Hooks。
使用 Animated API 創建簡單動畫
使用 React Context 和 AsyncStorage 創建持久 App 設置。
了解 AWS Amplify 及其用途。
使用 AWS Amplify 和 AWS Cognito 將身份驗證添加到我們的 App。
使用 AWS Amplify、AWS AppSync 和 AWS Lambda 函數創建 GraphQL API。
使用 GraphQL API 創建實時多人井字遊戲。
了解如何使用 Expo 和 Lambda 函數發送推送通知。
使用 Google AdMob 通過你的遊戲獲利。
建構你的 App 並將其發佈到 iOS App Store 和 Google Play Store。

要求

需要 JavaScript (ESNext) 知識。
Typescript 基礎知識優先。
需要 React 知識。
至少需要一些 React Native 基礎知識（我不會討論 React Native 基礎知識，如 Views 和 Styles）。
需要 GraphQL 基礎知識（當我們使用 GraphQL 時，我會提供你可以觀看/閱讀的快速免費材料的鏈接）。
一些 AWS（亞馬遜網路服務）知識不是必需的，但會有所幫助。
macOS 設備是必需的，但僅當你想使用 iOS 模擬器並將應用程式發佈到 App Store 時。
多人遊戲部分需要 AWS 帳戶。你必須輸入信用卡信資訊才能創建帳戶。由於你每月免費使用，因此你可能不會僅僅通過學習本課程而被收費。
如果你想在 Apple App Store 上發布應用程式，則需要 Apple 開發者帳戶（99 美元/年）。
如果你想在 Google Play 商店上發布應用程式，則需要 Google 開發者帳戶（25 美元）。

課程說明

在本課程中，我們將使用 React Native (Expo) 創建一個井字遊戲。雖然井字遊戲很簡單，但我們的專案不會很簡單。我們將在專案中使用 Typescript。 Typescript 是一種添加 JavaScript 語言類型的工具。除了許多其他好處之外，擁有類型還可以讓我們避免代碼中的某些錯誤。

我們的應用程式將包含一個單人遊戲。為此，我們將使用一種稱為 Minimax 的演算法來創建具有不同難度的機器人。除此之外，我們還將推出多人遊戲。在多人遊戲中，我們將創建一個 API 並使用名為 AWS Amplify 的服務管理身份驗證。 AWS Amplify 允許我們輕鬆構建將在遊戲中使用的 GraphQL API。

讓我們分解每個章節將討論的內容：

第 1 節

對於沒有或僅有有限 Typescript 知識的學生，這是一個可選部分。我們將快速介紹 Typescript。我們將討論諸如基本類型( types )、類型、介面和泛型之類的東西。

第 2 節

在本課程中，我們將使用一個名為 expo 的工具。 Expo 是一種使用 React Native 簡化建構 App 的工具。我們將看到 expo 和一般的 React Native 有什麼區別。然後我們將安裝 expo，創建一個新的 expo 專案並在實體設備、Android 模擬器和 iOS 模擬器上執行。

第 3 節

在本節中，我們將設置一些對我們的工作流程非常有幫助的工具。首先，我們將安裝 Typescript 進行類型檢查。然後我們將使用 Prettier 自動格式化我們的程式碼。我們還將使用 ESLint 來執行 JavaScript 規則。 Husky 確保我們在將程式碼提交到 git 之前運行所有這些工具。我們最終將安裝一個模組解析器，以使在我們的專案中輸入檔案和組件變得更加容易。

第 4 節

在本節中，我們將為我們的應用程式進行一些常規設置。包括加載字體( fonts )、創建自定義文本組件、設置導航等等。

第 5 節

在本節中，我們將構建我們的單人遊戲。這包括 UI、機器人播放器、添加聲音和觸覺、創建設置頁面以選擇難度和其他選項，以及使用 React 上下文(context) 和 AsyncStorage 在手機上保存設置。

第 6 節

本節將僅介紹 AWS Amplify 和一些 AWS 概念，例如 IAM。我們還將安裝 Amplify 並在我們的專案中完成設定。

第 7 節

在這裡，我們將使用 Amplify 附帶的服務 AWS Cognito 在我們的 App 中添加身份驗證。這包括登錄、註冊、otp 確認、重新發送密碼、重置密碼、忘記密碼等。

第 8 節

本節將介紹使用 Amplify 為多人遊戲創建 GraphQL API。我們將學習如何在我們的資料庫中創建一個模型，並為這個模型添加授權規則，以根據授權方法限制 API 對其的訪問。我們將為我們的玩家和我們的遊戲創建模型並將這些模型連接在一起。除此之外，我們將創建多個 lambda 函數來處理遊戲中的不同部分，例如開始新遊戲和下棋，我們將了解如何使用我們的 API 觸發這些函數。我們還將創建必要的 GraphQL 訂閱來監聽每個遊戲的變化，以便我們能夠獲得實時體驗。

第 9 節

完成多人遊戲的 API 後，我們將開始建構我們的 UI。這包括列出遊戲、分頁遊戲、搜索玩家、開始新遊戲和處理實時更新遊戲。在使用我們的 API 時，我們將學習如何使用 amplify 為我們的查詢、突變和訂閱生成 typescript types，以獲得出色的開發體驗。

第 10 節

本節完全致力於使用 expo 發送推送通知。發送通知可能看起來很簡單；但是，我們將在本節中發現很多需要處理的東西。最終，當玩家被邀請參加新遊戲時，我們將能夠向他發送通知。

第 11 節

這個簡短的部分將向你展示使用整合在 expo 中的 AdMob 在遊戲中添加廣告是多麼簡單。

第 12 節

在最後一節中，我們將發現使用 expo 建構和發佈你的 App 可以多順利。我們將為 Android 和 iOS 建構我們的 App，並將其發佈到 App 和 Play 商店。

目標受眾

具有一定 React Native 知識並希望創建全端複雜專案的學生。
幾乎沒有 Typescript 經驗的 React Native 開發人員，他們想了解如何使用 Typescript 和 React Native 創建一個大專案。
有興趣了解 AWS Amplify 並將其與 React Native 整合的 React Native 開發人員。
React Native 開發人員有興趣使用 Expo 創建一個完整的應用程式，包括推送通知、建構和部署。

講師簡介

Ali Alaa 前端 Web 開發人員

嘿！我是前端 Web 開發人員 Ali Alaa。幾年前，我發現自己對 Web 開發很感興趣，尤其是前端。我開始探索從 HTML/CSS/JS 到 WordPress 主題和 JS 框架的領域。我作為前端開發人員已經工作了 8 年多了。經過這麼多年，我決定開始在 udemy 上創作並與你分享我的知識。