Скачать bareapp - загрузка исходного кода bareapp

bareapp

Другой исходный код

1.0.0

Скачать

Ionic 5/Compacitor 3 + Tailwind CSS + AUTH0 + GRAPHQL + React + TypeScript Real World Mobile Demo

Демо-приложение для Ionic 5 и конденсатора 3, которое показывает, как создать реальное кроссплатформенное приложение с аутентификацией, GraphQL и React. Все делают возможным только бесплатные плагины сообщества.

Вероятно, вы здесь, потому что вы не можете найти пример ионного/конденсатора, который использует Tailwind CSS или что -то в этом роде с аутентификацией. И да, это та же причина, по которой я создаю это демонстрационное приложение здесь. Итак, повеселитесь!

Функции

⚡ Последний Ionic 5 + емкость 3
? Подача данных в режиме реального времени (dev.to) через graphql
? Защита SSO/Аутентификация пароля через Auth0
? Стиль с Tailwindcss
? Живой перезагрузка! Изменения кода автоматически отражаются в приложении!
⚛ ~~Не угловой~~ , это реагировать!
? Все в TypeScript!
? Одиночное приложение для iOS и Android

Быстрый старт

Просто клонируйте репо и загрузите репозиторий с помощью npm install !

npm install

Запустите приложение на симуляторе или реальном устройстве

npm run ios

или

npm run android

Откройте редактор кода и начните кодирование! Все исходные файлы находятся в каталоге src .

Настройка вашего приложения

Есть несколько вещей, которые вы можете изменить, чтобы настроить ваше приложение. Во -первых, вы захотите изменить значения APP_ID и AUTH0_CLIENT_ID в файле src/environments/environment.ts .

Кроме того, Checkout capacitor.config.ts и настройте его в соответствии с вашими потребностями. Для получения подробной информации см. Https://capacitorjs.com/docs/config

Проверьте свое приложение как профессионал! ⚡⚡⚡

Запуск мобильного эмулятора на местной машине может быть мучительно медленным орзом ...? Хорошо. Есть способ ускорить его: запустите его в облаке, и даже лучше, на реальном устройстве !!!

Есть пара облачных эмуляторов. В моем случае я использую BrowserStack, потому что он предлагает тестирование в реальном времени на реальном устройстве. В качестве альтернативы, LambDatest также является хорошим вариантом по более дешевой цене, хотя они предоставляют только эмуляторы, а не реальные устройства. Но Google поможет вам найти лучшего для вас.

Я делюсь здесь своей настройкой, чтобы вы могли повторить опыт своего провайдера.

Установите местный туннель для поставщика. Например, используя локальный или хриплый туннель Browesstack.
Подавайте веб -приложение с локальной машины или даже в облаке.
Например, запустите npm run start:web для обслуживания приложения с вашей локальной машины. (Примечание: HOST и PORT настраиваются в сценарии жизненного цикла ionic:serve ).
Установите URL -адрес, который приложение может достичь через туннель в переменной среды LIVE_RELOAD_URL и открыть проект для компиляции пакета приложений: например, LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios если вы следуете настройке default для тестирования Lampda.
Под капюшоном LIVE_RELOAD_URL загружен на capacitor.config.ts .

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

Загрузите сборку (A .ipa для iOS или apk для Android) своему поставщику.
Запустите приложение на облачном устройстве и получайте удовольствие!

Примечание в настоящее время приложение тестируется только на iOS и Android.

Примечания к разработке

Живая перезагрузка

Есть несколько учебных пособий, которые предлагают вам вручную поместить ваш внешний IP -адрес на емкость. capacitor.config.ts для использования Live Reload.

Несмотря на то, что для подключения к внешнему веб -серверу для загрузки веб -приложения требуется конфигурация, чтобы подключиться к внешнему веб -серверу, если вы используете мою настройку, эта конфигурация автоматически загружается при подаче LIVE_RELOAD_URL .

Вам не нужно вручную добавлять его для разработки или удалять его для производственной сборки.

Аутентификация

Конфигурация Auth0

Для получения более подробной информации, проверьте руководство на Auth0

Настройка URL -адреса Callback URL -адрес обратного вызова - это URL в вашем приложении, где Auth0 перенаправляет пользователя после того, как он аутентифицирует.

URL -адрес обратного вызова для вашего приложения должен быть в белом списке в поле разрешенных URL -адресов в настройках вашего приложения. Если это поле не установлено, пользователи не смогут войти в приложение и получит ошибку. Your_package_id: // your_domain/cordova/your_package_id/обратный вызов

Настройка разрешенных Origins (CORS) Добавить файл в качестве разрешенного происхождения в поле «Разрешено Origins» (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,

В 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 добавьте следующее в root, чтобы был запущен только один экземпляр вашего приложения, и, следовательно, после аутентификации обратный вызов всегда будет доставлен в правильное приложение.

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

Глубокие ссылки

Глубокие ссылки позволяют отправлять кому -то ссылку, которая будет открыта в приложении, которое они установили на своем телефоне. Чтобы настроить его, следуйте официальному руководству здесь https://capacitorjs.com/docs/guides/deep-links

Часто задаваемые вопросы

Как запустить приложение на устройстве?
Откройте Xcode или Android Studio с командой ниже и выберите цель устройства перед запуском.

npm run open ios

или

npm run open android

Кредиты

Особая благодарность OneGraph https://www.onegraph.com за предоставление демо -данных. Это одна услуга, соединяющая многие другие, такие как полоса, GitHub, Twitter и т. Д. Все в одном. Проверьте их.