bareapp

離子5/電容器3 +尾風CSS + auth0 + GraphQl + React + Typecript現實世界移動應用程序演示

一個用於離子5和電容器3的演示應用程序，該應用顯示瞭如何使用身份驗證，GraphQL和React構建現實世界的跨平台應用程序。僅使用免費的社區插件就可以實現。

可能您在這裡，因為您找不到使用尾風CSS或任何具有身份驗證的任何離子/電容示例。是的，這是我在這裡構建此演示應用程序的原因。所以，玩得開心！

特徵

• ⚡最新離子5 +電容器3
• ？通過GraphQL實時數據feed（dev.to）
• ？通過auth0保護SSO/密碼身份驗證
• ？用尾windcss進行造型
• ？現場重新加載！代碼更改會自動反映在應用程序中！
• ⚛️不角度，這是反應！
• ？打字稿中的所有內容！
• ？ iOS和Android的單個應用程序

快速開始

1. 只需克隆回購，然後通過npm install來引導存儲庫！

npm install

2. 在模擬器或真實設備上運行該應用程序

npm run ios

或者

npm run android

3. 打開您的代碼編輯器並開始編碼！所有源文件都在src目錄中。

配置您的應用

您可能需要更改一些內容以自定義您的應用程序。首先，您需要在src/environments/environment.ts文件中更改APP_ID和AUTH0_CLIENT_ID值。

另外，請簽名capacitor.config.ts並自定義以適應您的需求。有關詳細信息，請參見https://capacitorjs.com/docs/config

像專業人士一樣測試您的應用！ ⚡⚡⚡

在本地計算機上運行移動模擬器可能會痛苦地慢速orz ...？出色地。有一種方法可以加快速度：在雲上運行它，甚至更好，在真實的設備上！ ！ ！

有幾個雲模擬器可用。就我而言，我使用Browserstack，因為它在真實設備上提供了實時測試。另外，Lambdatest也是價格便宜的一個不錯的選擇，儘管它們僅提供仿真器，而不是真正的設備。但是Google將幫助您找到最適合您的。

我在這里分享我的設置，因此您可以在提供商上複製體驗。

1. 將本地隧道設置為提供商。例如，使用Browserstack Local或Lambdatest隧道。

2. 從您的本地計算機甚至雲上使用Web應用程序。

   例如，運行npm run start:web用於從本地計算機服務該應用程序。 （注意： HOST和PORT在ionic:serve生命週期腳本）。

3. 設置該應用程序可以通過環境變量LIVE_RELOAD_URL到達的服務URL，並打開項目以編譯應用程序包：EG LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios如果您遵循ios：遵循ios of ins of if to def def for Lambda test lambda Test。

   在引擎蓋下， LIVE_RELOAD_URL加載在capacitor.config.ts中，以生成相關的實時重新加載設置：

{
  "server" : {
    "url" : " <LIVE_RELOAD_URL> " ,
    "cleartext" : true
  }
}

4. 將構建（用於iOS的.ipa或apk for Android）上傳到您的提供商。

5. 在雲設備上運行該應用程序，並玩得開心！

注意當前，該應用僅在iOS和Android上進行測試。

開發說明

現場重新加載

那裡有一些教程，建議您手動將外部IP地址放到capacitor.config.ts ，以便使用實時重新加載。

確實需要配置才能連接到外部Web服務器以加載Web應用程序，但是如果您使用我的設置，則當您提供LIVE_RELOAD_URL時，將自動加載此配置。

您無需手動添加它即可開發或將其刪除以進行生產。

驗證

Auth0配置

有關更多詳細信息，請在Auth0上查看指南

1. 配置回調URL一個回調URL是您應用程序中的一個URL，在用戶身份驗證後，Auth0將其重定向。

您的應用程序的回調URL必須在應用程序設置的允許回調URL字段中列入白色。如果未設置此字段，則用戶將無法登錄應用程序，並且會遇到錯誤。 your_package_id：// your_domain/cordova/your_package_id/callback

2. 配置允許的原始（CORS）將文件作為允許的原始原點添加到允許的起源（CORS）框。

file://*

如果您通過npm run start:web或等效的ionic serve ，請注意， Allowed Origins和Callback URLs的設置可能不同。默認情況下，它應該來自http://localhost:8100 。

應用程序配置

為了能夠從自定義方案打開應用程序，您需要先註冊該方案。假設您的自定義方案是custom.scheme ，以便該應用程序可以打開任何custom.scheme://<url>鏈接，請按照以下指令為兩個平台的說明。

請查看https://capacitorjs.com/docs/apis/app，以獲取更多詳細信息。

對於iOS，

1. 在ios/App/App/Info.plist中添加與以下幾個類似的內容：

< key >CFBundleURLTypes</ key >
< array >
  < dict >
    < key >CFBundleURLName</ key >
    < string >custom.scheme</ string >
    < key >CFBundleURLSchemes</ key >
    < array >
      < string >custom.scheme</ string >
    </ array >
  </ dict >
</ array >

重要的更改custom.scheme 。

對於Android，

1. 在android/app/src/main/AndroidManifest.xml中，在活動部分中，添加以下內容：

< intent-filter >
    < action android : name = " android.intent.action.VIEW " />
    < category android : name = " android.intent.category.DEFAULT " />
    < category android : name = " android.intent.category.BROWSABLE " />
    < data android : scheme = " @string/custom_url_scheme " />
</ intent-filter >

2. 然後，在android/app/src/main/res/values/strings.xml中，將custom_url_scheme的值更改為您的自定義方案。

3. 最後，在android/app/src/main/res/xml/config.xml中，添加以下內容，以便啟動您的應用程序的一個實例，因此在身份驗證後，回調將始終交付到正確的應用程序中。

< preference name = " AndroidLaunchMode " value = " singleTask " />

深層鏈接

深層鏈接使您可以向某人發送一個將在他們在手機上安裝的應用程序中打開的鏈接。要設置它，請在此處遵循官方指南https://capacitorjs.com/docs/guides/deep-links

常問問題

1. 如何在設備上運行該應用程序？

   使用下面的命令打開XCode或Android Studio，然後在開始運行之前選擇設備目標。

npm run open ios

或者

npm run open android

學分

1. 特別感謝OneGraph https://www.onegraph.com提供了演示數據。它們是連接與Stripe，Github，Twitter等許多其他人的一項服務。檢查一下。

其他很酷的演示和開始者

• NextJS-Tailwind-Inic-capacitor-Starter：類似的帶有tailwindcss的演示，但僅通過Next.js和JS實現。

執照

版權所有©2021，Alvis Tang。根據MIT許可發布。