
walk thru app scaffolding
install sqlite plugin
install capacitor for ios
build and launch on ios
Add contact to the database using the plugin command
Use VueJS Provide/Inject to get access to the database anywhere in the mobile app
Query the Database from the Home.vue component
Render the results in the Home.vue Component
Adding New Route
Creating A New Component
Using Plugin to Add A Contact To The Database
Add Query to insert the user
Refactor to show SQL Errors
reload the data after contact is added
using ionic vue lifecycle methods
Add IonList to show items
Allow user to delete the contact from the list
Reload Data after deleting contact
Configure android for the ionic app by importing and registering the plugin, updating the gradle, and running a cold boot to deploy on the android emulator.
Walkthrough setting up your environment to work with androud
Adding IonToast for confirmation after a contact is added and when a contact is updated
Adding prompt to confirm before deleting
Adding comments in the Home component
discussing options for refactoring to better architecture
Why refactor?
Creating the database service
Testing database service with the application initialization
Remove all of the places where we were injecting the database
Complete the sqlite service by moving all functions from the Home.vue and ContactForm.vue into the service
running the application through the process to ensure that it is all still functioning on android
The new Ionic Framework VueJS Web Components are a great way to leverage your javascript skills with VueJS to build professional looking Mobile Applications and PWAs efficiently.
This course, including the final source code, is to get you prepped for the more advanced course that I have provided here on the Udemy platform. We are not expecting you to have a deep knowledge of Vue3 and Ionic Framework, but if you get stuck, don't worry, there is great documentation provided on the Ionic Framework Website
Create a CRUD Application with Ionic VueJS and Capacitor SQLite Plugin
Create the project and get the basic structure created
Capture data using ionic input elements
Learn CRUD actions ( Create, Delete ) for the data
Create an IonList to view the content
Use IonItem, IonLabel, and IonInput to manage forms
Use Ionic Lifecycle Methods
Use Vue Provide Inject to access the database
Learn to use Capacitor SQLite Plugin to query and update the database
Test and run application on native devices using Ionic Framework Capacitor live reload
Aaron Saunders is the CEO Clearly Innovative Inc web and mobile development firm I started 10 years ago. I have been working in the software development industry as a development, manager, and executive for over thirty years. I have taught at the university level and run an apprenticeship program within my company
At Clearly Innovative Inc, we have built solutions for large and small business and have been using Ionic Framework since version 1