bareapp
1.0.0
認証、GraphQL、およびReactを使用して、実際のクロスプラットフォームアプリを構築する方法を示すIonic 5およびコンデンサ3のデモアプリ。無料のコミュニティプラグインのみで可能になります。
おそらくあなたはここにいるので、テールワインドCSSまたは認証のあるものを使用するイオン/コンデンサの例を見つけることができないからです。そして、はい、ここでこのデモアプリを構築するのと同じ理由です。だから、楽しんでください！
npm installを介してリポジトリをクローンしてリポジトリをブートストラップするだけです！ npm installnpm run iosまたは
npm run androidsrcディレクトリにあります。 アプリをカスタマイズするために変更したいことがいくつかあります。まず、 src/environments/environment.tsファイルでAPP_IDおよびAUTH0_CLIENT_ID値を変更する必要があります。
また、Checkout capacitor.config.tsとニーズに合わせてカスタマイズします。詳細については、https：//capacitorjs.com/docs/configを参照してください
ローカルマシンでモバイルエミュレータを実行することは、痛みを伴うことがあります...？良い。スピードアップする方法があります。クラウドで実行し、さらに良いデバイスで実行してください!!!
いくつかのクラウドエミュレータがあります。私の場合、実際のデバイスでリアルタイムテストを提供するため、BrowserStackを使用しています。あるいは、LambDatestもより安い価格の良いオプションですが、実際のデバイスではなくエミュレーターのみを提供します。しかし、Googleはあなたがあなたに最適なものを見つけるのに役立ちます。
ここでセットアップを共有しているので、プロバイダーでエクスペリエンスを再現できます。
プロバイダーにローカルトンネルをセットアップします。たとえば、browserstack localまたはlambdatestトンネルを使用します。
ローカルマシンまたはクラウドからWebアプリを提供します。
たとえば、 npm run start:webは、ローカルマシンからアプリを提供するためのWeb。 （注： HOSTとPORT 、 ionic:serve ）。
アプリが環境変数のトンネルを介して到達できるサービングURLを設定し、 LIVE_RELOAD_URL開き、アプリパッケージをコンパイルするためにプロジェクトを開きます。EGLIVE_RELOAD_URL LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios lambdaテストのデフォルトの設定に従う場合。
ボンネットの下で、 capacitor.config.tsにロードされたLIVE_RELOAD_URLは、以下の関連するライブリロード設定を生成します。
{
"server" : {
"url" : " <LIVE_RELOAD_URL> " ,
"cleartext" : true
}
}プロバイダーにビルド（iOS用の.ipaまたはapk for android用）をアップロードします。
クラウドデバイスでアプリを実行して楽しんでください！
現在、アプリはiOSとAndroidでのみテストされています。
ライブリロードを使用するために、外部IPアドレスをcapacitor.config.tsに手動で配置することを示唆するチュートリアルがいくつかあります。
Webアプリをロードするために外部Webサーバーに接続するために構成が必要であることは事実ですが、私のセットアップを使用する場合、この構成はLIVE_RELOAD_URL提供するときに自動的にロードされます。
開発のために手動で追加したり、生産ビルドのために削除する必要はありません。
詳細については、Auth0のガイドをご覧ください
アプリのコールバックURLは、アプリケーション設定の許可コールバックURLSフィールドでホワイトリストに登録する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが発生します。 your_package_id：// your_domain/cordova/your_package_id/callback
file://*
npm run start:webまたは同等のionic serveて、 Allowed OriginsとCallback URLsの設定が異なる場合があることに注意してください。デフォルトでは、 http://localhost:8100からのものです。
カスタムスキームからアプリを開くことができるようにするには、最初にスキームを登録する必要があります。カスタムスキームがcustom.schemeであると仮定して、アプリが任意のcustom.scheme://<url>リンクを開くようにすると、2つのプラットフォームについて以下の命令に従ってください。
詳細については、https：//capacitorjs.com/docs/apis/appをご覧ください。
iOSの場合、
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の場合、
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 >次に、 android/app/src/main/res/values/strings.xmlで、 custom_url_schemeの値をカスタムスキームに変更します。
最後に、 android/app/src/main/res/xml/config.xmlで、ルートに次のものを追加して、アプリの1つのインスタンスのみが起動されるため、認証後にコールバックは常に正しいアプリに配信されます。
< preference name = " AndroidLaunchMode " value = " singleTask " />ディープリンクを使用すると、電話にインストールしたアプリに開かれるリンクを誰かに送信できます。セットアップについては、公式ガイドを参照してくださいhttps://capacitorjs.com/docs/guides/deep-links
デバイスでアプリを実行する方法は？
以下のコマンドを備えたXcodeまたはAndroidスタジオを開き、実行を開始する前にデバイスターゲットを選択します。
npm run open iosまたは
npm run open androidCopyright©2021、Alvis Tang。 MITライセンスの下でリリースされました。
