Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

ionic-firestore-crud-example

Simple CRUD (Create, Read, Update and Delete) using ionic 3 and Cloud firestore

image

In this project we are going to create the most simplest ionic CRUD (Create, Read, Update and Delete) using Cloud firestore.

You can find the full tutorial here

At the end of the tutorial above you'll be able to:

  • Setup a firebase account.
  • Configure firestore database permissions.
  • Create an ionic app using ionic cli (command line tool).
  • Create, Read, Update and Delete to a firestore database from an ionic app.

Run the ionic CRUD project.

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal. Follow the Android and iOS platform guides to install required tools for development. For more info go here: https://ionicframework.com/getting-started.

npm install -g cordova ionic

Now lets create the ionic app

git clone https://github.com/jomendez/ionic-firestore-crud-example.git
cd ionic-firestore-crud-example
npm install
ionic serve

What is cloud firestore?

firestore youtube

Lets set up a firebase account.

Go to https://console.firebase.google.com and login with your google account or create one.

firebase new project

Enter the name of the project and click on Add Firebase to your web app.

firebase configuration

We are going to use this data to configure our project, this will allow us to connect to firebase.

Insert the config variable on the app.module.ts for that lets add the firebase dependency.

...
import * as firebase from 'firebase';
 
const config = {
  apiKey: "<your key>",
  authDomain: "<your key>",
  databaseURL: "<your key>",
  projectId: "<your key>",
  storageBucket: "<your key>",
  messagingSenderId: "<your key>"
};
firebase.initializeApp(config);
 
...

Next step is to configure Cloud Firestore, follow the following steps in the image, and start in test mode for now, to keep it simple.

configure firestore database

For more rules you can visit here: https://cloud.google.com/firestore/docs/security/rules-query

Before we get into the ionic part, lets see how a firestore database structure looks like:

cloud firestore content

This example was taken from the ionAppFull4Pro ionic starter. In this example you can see that the firestore data model is based on collections and documents, and you can nest collection within documents:

firestore structure

for more details you can visit here https://firebase.google.com/docs/firestore/data-model.

About

Simple CRUD (Create, Read, Update and Delete) using ionic and Cloud firestore

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.