bareapp
1.0.0
Um aplicativo de demonstração para o Ionic 5 e o Capacitor 3 que mostra como criar um aplicativo de plataforma cruzada do mundo real com autenticação, graphQL e reação. Todos possibilitam apenas com plugins comunitários gratuitos.
Provavelmente você está aqui porque não consegue encontrar um exemplo iônico/capacitor que use o CSS do Tailwind ou qualquer coisa com autenticação. E sim, é a mesma razão pela qual eu construo este aplicativo de demonstração aqui. Então, divirta -se!
npm install ! npm installnpm run iosou
npm run androidsrc . Há algumas coisas que você pode querer mudar para personalizar seu aplicativo. Primeiro, você deseja alterar os valores APP_ID e AUTH0_CLIENT_ID no arquivo src/environments/environment.ts .
Além disso, check -out capacitor.config.ts e personalize -o para atender às suas necessidades. Para detalhes, consulte https://capacitorjs.com/docs/config
Executar um emulador móvel em sua máquina local pode ser dolorosamente lento ORZ ...? Bem. Existe uma maneira de acelerar: execute -o na nuvem e ainda melhor em um dispositivo real !!!
Existem alguns emuladores de nuvem disponíveis. No meu caso, eu uso o BrowSerstack porque oferece testes em tempo real em um dispositivo real. Como alternativa, o Lambdatest também é uma boa opção com um preço mais barato, embora eles forneçam apenas emuladores, não dispositivos reais. Mas o Google ajudará você a encontrar o melhor para você.
Estou compartilhando minha configuração aqui, para que você possa replicar a experiência no seu provedor.
Configure um túnel local para o provedor. Por exemplo, usando o Browserstack Local ou Lambdatest Tunnel.
Sirva o aplicativo da web da sua máquina local ou mesmo na nuvem.
Por exemplo, execute npm run start:web para servir o aplicativo da sua máquina local. (Nota: HOST e PORT são configuráveis em ionic:serve Script de ciclo de vida).
Defina o URL de servir que o aplicativo pode alcançar através do túnel na variável de ambiente LIVE_RELOAD_URL e abrir o projeto para compilar o pacote de aplicativos: por exemplo LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios Se você segue o cenário default para o teste de batalha.
Sob o capô, LIVE_RELOAD_URL carregado em capacitor.config.ts para gerar a configuração relevante de recarga ao vivo abaixo:
{
"server" : {
"url" : " <LIVE_RELOAD_URL> " ,
"cleartext" : true
}
} Carregue a compilação ( .ipa para iOS ou apk para Android) para o seu provedor.
Execute o aplicativo em um dispositivo em nuvem e divirta -se!
Nota Atualmente, o aplicativo é testado apenas no iOS e Android.
Existem alguns tutoriais por aí, sugerindo que você coloque manualmente seu endereço IP externo no capacitor.config.ts para usar o recarga ao vivo.
Embora seja verdade que uma configuração é necessária para se conectar a um servidor da Web externo para carregar o aplicativo da Web, se você usar minha configuração, essa configuração será carregada automaticamente quando você fornece LIVE_RELOAD_URL .
Você não precisa adicioná -lo manualmente para o desenvolvimento ou removê -lo para uma construção de produção.
Para mais detalhes, consulte o guia em auth0
O URL de retorno de chamada para o seu aplicativo deve estar na lista de permissões no campo URLs de retorno de chamada permitido nas configurações do seu aplicativo. Se esse campo não estiver definido, os usuários não poderão fazer login no aplicativo e receberão um erro. Your_package_id: // your_domain/cordova/your_package_id/retorno de chamada
file://*
Se você estiver testando o aplicativo em um navegador via npm run start:web ou o ionic serve equivalente, esteja ciente de que a configuração para as Allowed Origins e Callback URLs pode ser diferente. Por padrão, deve ser de http://localhost:8100 .
Para poder abrir o aplicativo a partir de um esquema personalizado, você precisa registrar o esquema primeiro. Supondo que seu esquema personalizado seja custom.scheme para que o aplicativo abra qualquer link custom.scheme://<url> , siga as instruções abaixo para as duas plataformas.
Confira https://capacitorjs.com/docs/apis/app para obter mais detalhes.
Para iOS,
ios/App/App/Info.plist adicione algo semelhante ao seguinte: < key >CFBundleURLTypes</ key >
< array >
< dict >
< key >CFBundleURLName</ key >
< string >custom.scheme</ string >
< key >CFBundleURLSchemes</ key >
< array >
< string >custom.scheme</ string >
</ array >
</ dict >
</ array > Alteração importante custom.scheme para seu esquema personalizado.
Para Android,
android/app/src/main/AndroidManifest.xml , dentro da seção de atividades, adicione o seguinte: < 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 > Em seguida, no android/app/src/main/res/values/strings.xml , altere o valor de custom_url_scheme para o seu esquema personalizado.
Finalmente, no android/app/src/main/res/xml/config.xml , adicione o seguinte na raiz para que apenas uma instância do seu aplicativo seja lançada e, portanto, após a autenticação, o retorno de chamada sempre será entregue ao aplicativo certo.
< preference name = " AndroidLaunchMode " value = " singleTask " />Os links profundos permitem que você envie a alguém um link que será aberto no aplicativo que eles instalaram no telefone. Para configurá-lo, siga o guia oficial aqui https://capacitorjs.com/docs/guides/deep-links
Como executar o aplicativo em um dispositivo?
Abra o Xcode ou Android Studio com o comando abaixo e selecione o destino do dispositivo antes de começar a executar.
npm run open iosou
npm run open androidCopyright © 2021, Alvis Tang. Liberado sob a licença do MIT.
