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许可发布。