Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Ionic Framework with VueJS: Build a CRUD App Using SQLite
Rating: 4.4 out of 5(10 ratings)
167 students

Ionic Framework with VueJS: Build a CRUD App Using SQLite

Get you VueJS App running on IOS and Android Using Capacitor & Sqlite Plugin
Created byAaron Saunders
Last updated 2/2021
English
English [Auto],

What you'll learn

  • Using Ionic & Capacitor to Deploy VueJS Apps to Native Devices
  • Working With SQLite Database
  • Deploying VueJS App to Mobile Device with Capacitor
  • Anyone who wants to create a cross platform mobile application with Ionic, Capacitor and SQLite

Course content

4 sections19 lectures2h 59m total length
  • Introduction2:58
  • Install Plugin, Run IOS Simulator4:38
    • walk thru app scaffolding

    • install sqlite plugin

    • install capacitor for ios

    • build and launch on ios

  • Create First Table In SQLite7:09
  • Create First Database Insert16:31
    • 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

  • Create a Input Page For Adding Contacts14:04
    • Adding New Route

    • Creating A New Component

    • Using Plugin to Add A Contact To The Database

  • Add Query To Create Contact and Reload Data10:23
    • Add Query to insert the user

    • Refactor to show SQL Errors

    • reload the data after contact is added

    • using ionic vue lifecycle methods

  • IonList and Delete Contact8:10
    • Add IonList to show items

    • Allow user to delete the contact from the list

    • Reload Data after deleting contact

  • Editing And Existing Contact20:45
  • Android Configuration - Video Overview7:33

    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.

  • Android Configuration Code0:11
    • Walkthrough setting up your environment to work with androud

Requirements

  • You should have NodeJS and the Ionic CLI installed
  • You should have a basic understanding of VueJS
  • Android Studio or XCode Installed

Description

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

Who this course is for:

  • Anyone who wants to create a cross platform solutions with Ionic, VueJS and SQLite