bareapp -Download - bareapp Source Code Download

bareapp

Anderer Quellcode

1.0.0

Herunterladen

Ionic 5/Kondensator 3 + Tailwind CSS + Auth0 + GraphQL + React + TypeScript Real-World Mobile App Demo

Eine Demo-App für Ionic 5 und Kondensator 3, die zeigt, wie eine reale plattformübergreifende App mit Authentifizierung, GraphQL und React erstellt wird. Alle ermöglichen nur kostenlose Community -Plugins.

Wahrscheinlich sind Sie hier, weil Sie kein ionisches/kondenselles Beispiel finden, das Rückenwind -CSS oder irgendetwas mit Authentifizierung verwendet. Und ja, es ist der gleiche Grund, warum ich diese Demo -App hier erstelle. Also, viel Spaß!

Merkmale

⚡ Neueste Ionic 5 + Kondensator 3
? Echtzeitdaten-Feed (Dev.TO) über GraphQL
? Sichere SSO/Passwort -Authentifizierung über Auth0
? Styling mit Rückenwindcss
? Live Reload! Codeänderungen werden automatisch in der App widerspiegelt!
⚛️ ~~Nicht eckig~~ , es reagiert!
? Alles in TypeScript!
? Single App für iOS und Android

Schneller Start

Klonen Sie einfach das Repo und starten Sie das Repository über npm install !

npm install

Führen Sie die App auf einem Simulator oder einem echten Gerät aus

npm run ios

oder

npm run android

Öffnen Sie Ihren Code -Editor und beginnen Sie mit der Codierung! Alle Quelldateien befinden sich im src -Verzeichnis.

Konfigurieren Ihrer App

Es gibt einige Dinge, die Sie ändern möchten, um Ihre App anzupassen. Zunächst möchten Sie die Werte APP_ID und AUTH0_CLIENT_ID in der Datei src/environments/environment.ts ändern.

Auch Checkout capacitor.config.ts und passen Sie es an Ihre Bedürfnisse an. Details finden Sie unter https://capacitorjs.com/docs/config

Testen Sie Ihre App wie ein Profi! ⚡⚡⚡

Das Ausführen eines mobilen Emulators auf Ihrer lokalen Maschine kann schmerzhaft langsam oder langsam sein ...? Also. Es gibt eine Möglichkeit, es zu beschleunigen: Führen Sie es auf der Cloud und noch besser auf einem echten Gerät aus !!!

Es stehen ein paar Wolkenemulatoren zur Verfügung. In meinem Fall verwende ich BrowsStack, da es Echtzeit-Tests auf einem echten Gerät bietet. Alternativ ist LambDatest auch eine gute Option mit einem günstigeren Preis, obwohl sie nur Emulatoren und keine wirklichen Geräte zur Verfügung stellen. Aber Google wird Ihnen helfen, das Beste für Sie zu finden.

Ich teile mein Setup hier, damit Sie die Erfahrung in Ihrem Anbieter replizieren können.

Richten Sie einen lokalen Tunnel an den Anbieter ein. Zum Beispiel mithilfe von BrowsStack -lokaler oder lambDatest -Tunnel.
Servieren Sie die Web -App von Ihrem lokalen Computer oder sogar in der Cloud.
Führen Sie beispielsweise npm run start:web , um die App von Ihrem lokalen Computer aus zu bedienen. (Hinweis: HOST und PORT sind in ionic:serve -Lebenszyklusskript konfigurierbar).
Stellen Sie die Servier -URL fest, die die App über den Tunnel in Umgebungsvariablen LIVE_RELOAD_URL erreichen kann, und öffnen Sie das Projekt, um das App -Paket zu kompilieren: z LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios
Unter der LIVE_RELOAD_URL geladen in capacitor.config.ts , um die relevante Live -Reload -Einstellung unten zu generieren:

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

Laden Sie den Build (a .ipa für iOS oder apk für Android) in Ihren Anbieter hoch.
Führen Sie die App auf einem Cloud -Gerät aus und haben Sie Spaß!

Beachten Sie derzeit, dass die App nur auf iOS und Android getestet wird.

Entwicklungsnotizen

Live Reload

Es gibt einige Tutorials, die darauf hindeuten, dass Sie Ihre externe IP -Adresse manuell an capacitor.config.ts einstellen, um Live -Reload zu verwenden.

Während es wahr ist, dass eine Konfiguration benötigt wird, um eine Verbindung zu einem externen Webserver herzustellen, um die Web -App zu laden, wird diese Konfiguration automatisch geladen, wenn Sie LIVE_RELOAD_URL angeben.

Sie müssen es nicht manuell für die Entwicklung hinzufügen oder für einen Produktionsbau entfernen.

Authentifizierung

Auth0 -Konfiguration

Weitere Informationen finden Sie in der Anleitung bei Auth0

Konfigurieren Sie Callback -URLs. Eine Callback -URL ist eine URL in Ihrer Anwendung, bei der Auth0 den Benutzer nach dem Authentifizieren umleitet.

Die Callback -URL für Ihre App muss in den zulässigen Callback -URLs -Feld in Ihren Anwendungseinstellungen whitelistet werden. Wenn dieses Feld nicht festgelegt ist, können sich Benutzer nicht bei der Anwendung anmelden und erhält einen Fehler. Your_package_id: // your_domain/cordova/your_package_id/callback

Konfigurieren Sie erlaubte Origins (CORS) Fügen Sie die Datei als zulässiger Herkunft in das Box Ders Eusfound Origins (CORS) hinzu.

file://*

Wenn Sie die App in einem Browser über npm run start:web oder den äquivalenten ionic serve testen, beachten Sie, dass die Einstellung für die Allowed Origins und Callback URLs möglicherweise unterschiedlich sein kann. Standardmäßig sollte es von http://localhost:8100 stammen.

App -Konfiguration

Um die App aus einem benutzerdefinierten Schema zu öffnen, müssen Sie das System zuerst registrieren. Unter der Annahme custom.scheme://<url> dass Ihr benutzerdefiniertes Schema custom.scheme ist.

Weitere Informationen finden Sie unter https://capacitorjs.com/docs/apis/App.

Für iOS,

In ios/App/App/Info.plist Fügen Sie etwas Ähnliches hinzu::

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

Wichtige Änderung custom.scheme zu Ihrem benutzerdefinierten Schema.

Für Android,

In android/app/src/main/AndroidManifest.xml im Bereich Aktivitätsabschnitt Folgendes fügen Sie Folgendes hinzu:

< 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 >

Dann ändern Sie in android/app/src/main/res/values/strings.xml den Wert von custom_url_scheme in Ihr benutzerdefiniertes Schema.
Schließlich fügen Sie in android/app/src/main/res/xml/config.xml das Folgende hinzu, damit nur eine Instanz Ihrer App gestartet wird, und daher wird nach der Authentifizierung der Rückruf immer an die richtige App geliefert.

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

Tiefe Links

Mit tiefen Links können Sie jemandem einen Link senden, der in der App geöffnet wird, die er auf seinem Telefon installiert hat. Folgen Sie hier den offiziellen Leitfaden hier https://capacitorjs.com/docs/guides/deep-links

FAQ

Wie führe ich die App auf einem Gerät aus?
Öffnen Sie XCode oder Android Studio mit dem folgenden Befehl und wählen Sie das Gerätestiel vor dem Ausführen aus.

npm run open ios

oder

npm run open android

Credits

Besonderer Dank geht an OneGraph https://www.onegraph.com für die Bereitstellung der Demo -Daten. Sie sind ein Dienst, der mit vielen anderen verbunden ist wie Stripe, Github, Twitter usw. alle in einem. Überprüfen Sie sie.