Watch ionic 6+: crear aplicaciones ios, android y pwas con angular

  • Crear aplicaciones móviles para IOS, Android, tabletas y aplicaciones web con el mismo código

  • Crear PWAs utilizando ionic

  • Subir tu aplicación a Google Play Store y/o Apple App Store

  • Dominar el framework de ionic

  • Usar recursos nativos del dispositivo

  • Comprender sobre el desarrollo web y desarrollo móvil

  • Aprender a crear aplicaciones híbridas

TOMAR ESTE CURSO

  • Una persona con conocimiento básico de Angular

  • Una persona que desee crear aplicaciones móviles

  • Una persona que quiera crear PWAs que tengan el aspecto nativo de una app móvil

  • Personas que quieran saber cómo desplegar sus aplicaciones en Google Play Store y Apple App Store

  • Es necesario conocer las bases de Angular ( Angular 2 o superior)

  • Conocimiento básico de html, css y js es necesario

  • No es necesario conocimiento previo de ionic

  • No es necesario conocer Java, Objective-C, Swift u otro lenguaje de programación

  • Es necesario poder realizar instalaciones en el equipo

  • Para desplegar aplicaciones en la Apple App Store, es necesario una Mac

TOMAR ESTE CURSO

ionic es un framework que nos permite tomar nuestro conocimiento de Angular y crear aplicaciones multiplataforma que pueden correr en Android, IOS, convertirse en una PWA o crear una aplicación web, todo con un mismo repositorio de código.

Este es un curso sumamente completo que abarca todos los temas necesarios para crear aplicaciones y desplegarlas en Google PlayStore o Apple AppStore, sin contar que también haremos PWAs y despliegues en la web de nuestras aplicaciones.

Puntualmente, estos son los temas que cubrimos en el curso:

  1. ionic framework desde cero

  2. Conceptos importantes de Angular (componentes, lazyload y módulos)

  3. Creación de aplicaciones reales

  4. Creación de PWAs

  5. Diseño adaptativo

  6. Firebase Hosting

  7. Push Notification Grupales

  8. Push Notification a usuarios en específico

  9. Uso la página de Onesignal para envío de mensajes grupales

  10. Uso de la API de OneSignal para mensajes push automáticos o controlados

  11. Explicación de la mayoría de componentes de ionic con su respectiva configuración

  12. CRUD

  13. Generación de un backend propio

  14. Manejo y creación de JsonWebTokens

  15. Subida de archivos

  16. Consumo de diversas APIS

  17. Aplicaciones verticales y horizontales

  18. Aplicaciones con diseños atractivos

  19. Uso de Mapbox para mapas

  20. Uso de Plugins de cordova

  21. ShareAPI de Google

  22. Mapbox API

  23. Compartir en Redes sociales y cualquier otra aplicación instalada en el móvil

  24. Generación de Archivos de texto y envío de los mismos

  25. Despliegue de aplicaciones en Apple AppStore

  26. Despliegue de aplicaciones en Google PlayStore

  27. Alphas y Betas de Google

  28. Test Flight de Apple

  29. Configuración de simuladores para IOS y Android

  30. Uso del DevApp

  31. Storage Nativo

  32. indexedDB

  33. Animaciones personalizadas

  34. Y muchos otros temas más

Este es un curso extenso con muchas clases y tareas, muchas aplicaciones y ejercicios para asegurar el aprendizaje del framework haciendo ejercicios prácticos y reales, todo lo haremos de cero, cada línea de código será explicada y ustedes mismos lo harán y probarán para que vean los resultados por ustedes mismos.

Es importante que deben de tener una pequeña base de Angular (Angular 2 o superior) para poder seguir el curso sin problemas.

No se olviden de ver los videos gratuitos del curso y animarlos a que se inscriban a este curso super cargado de ionic!

TOMAR ESTE CURSO

Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more here.

Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator.

First, on the iOS device, enable Web Inspector from Settings > Safari > Advanced.

Next, open Safari on a Mac then enable Show Develop menu in menu bar under Safari > Preferences > Advanced.

Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug.

Within Safari, select Develop in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on localhost. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device.

Use Google Chrome's DevTools to debug an app when it is running in the browser using the ionic serve command, deployed to an emulator, or on a physical device.

To inspect a physical device, first you need to have developer mode enabled. Connect your Android device to the computer then go to Settings > About scroll to Build Number and tap that 7 times. This will activate a new option in the Settings menu called Developer Options.

Next, go to Settings > Developer Options and ensure that the developer options switch is toggled on. Scroll down to USB Debugging and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator.

Open the Chrome browser and navigate to the URL chrome://inspect/#devices. Your connected Android device should show up in the list of Remote Targets.

On your device, open the Ionic app that you would like to debug using Chrome.

With your app running on the device, head back to Chrome and click on inspect under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.

Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.

To do this, run your app in the browser using ionic serve. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code.

In the far-left vertical menu within VS Code, click on the run icon. If you are configuring this for the first time in your project, click on the option to create a launch.json file. Select Chrome from the environment options dropdown. This will automatically generate a launch.json file with configurations for launching Chrome against localhost.

Make sure that the port used in the url property of your launch.json file matches the port that you observed earlier when you ran ionic serve. Using an incorrect port number will not work.

In the debug target dropdown menu, select Launch against Chrome, then click run. This will open a new instance of the Chrome browser and VS code will attach to it. You can set breakpoints and use the other debugging tools within VS Code while your app is running in Chrome.

Visual Studio Code has a dedicated plugin for debugging apps that run in an Android WebView.

The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the editor.

In order to use this plugin to debug your Ionic apps, first install it then start your app in the Android emulator or connect your Android device and run the app. You may need to enable USB debugging on your Android device.

In the root of your Ionic project, create a folder called .vscode and inside that folder create a file called launch.json. Inside launch.json, enter the following code to configure the plugin to debug Ionic apps:

{
"version": "0.2.0",
"configurations": [
{
"type": "android-webview",
"request": "attach",
"name": "Attach to Android WebView",
"webRoot": "${workspaceFolder}/www",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:/*": "${workspaceFolder}/*"
}
}
]
}

Next, launch the debugging process, selecting your device and Ionic app. VS Code will attach to both the Android device and Ionic app and you can now debug your app, which includes setting breakpoints.