Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomendez/ionic-5-crud-todo-with-firestore
Simple CRUD with ionic 5 and firestore, TODO app
https://github.com/jomendez/ionic-5-crud-todo-with-firestore
crud-sample firestore-database ionic5 todoapp
Last synced: 5 days ago
JSON representation
Simple CRUD with ionic 5 and firestore, TODO app
- Host: GitHub
- URL: https://github.com/jomendez/ionic-5-crud-todo-with-firestore
- Owner: jomendez
- Created: 2020-04-14T18:49:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T06:12:39.000Z (over 1 year ago)
- Last Synced: 2024-03-18T05:10:55.994Z (8 months ago)
- Topics: crud-sample, firestore-database, ionic5, todoapp
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 12
- Watchers: 2
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Simplistic CRUD ionic 5 firestore TODO app example
This is a very simplistic CRUD (Create, Read, Update, Delete) Created with ionic 5 and firestore (database).
Note:
I used this design as inspiration: [https://dribbble.com/shots/4782162-To-Do-App-Concept-Minimal](https://dribbble.com/shots/4782162-To-Do-App-Concept-Minimal)
The idea here is to illustrate how to create a simple CRUD with firestore.
##Installation
My advice is that you install nvm (to manage your node versions), here is [tutorial](http://www.jomendez.com/2018/06/03/install-multiple-versions-node-using-nvm/) step by step.
After you install nvm run the following commands:
```bash
nvm install 12
```
If everything went well you'll have installed node 12.0.0
Now you'll need to install ionic cli:
```bash
npm install -g @ionic/cli
```
Now is time to download the project and install it's dependencies.
```bash
git clone https://github.com/jomendez/ionic-5-crud-todo-with-firestore.git
cd ionic-5-crud-todo-with-firestore
npm install
```
Next step it to create a config file that will contain your firebase config keys here:
`src/app/config/firebase.ts`
If you are on bash you can use the following command:
```bash
touch src/app/config/firebase.ts
```
Assuming that you are familiar with firebase and already have an account, paste your configuration info into the firebase.ts file, it should looks something like this (This is just and example), If you are not familiar with firebase or doesn't have an account, I'll provide more information on how to do it bellow
Example of configuration:
```javascript
export const firebaseConfig = {
apiKey: "AIzaSwERfdilPYtcNDfvFR6x944EowerdfghfSDFsfg",
authDomain: "crud-456657.firebaseapp.com",
databaseURL: "https://crud-456657.firebaseio.com",
projectId: "crud-456657",
storageBucket: "crud-456657.appspot.com",
messagingSenderId: "10130122343423",
appId: "1:1013012342277:web:sd9f8sd8fs8dfs89df89s",
measurementId: "G-3FGJ34GFGJK"
};
```
## How to get your firebase configuration
Go to [https://firebase.google.com/](https://firebase.google.com/) and login with your account or create a new one.
### Click on create a web app (This is the screen that you'll see the first time you create a projects):
### Or add a new project (If you have already other projects created):
### Enter the name of your project, accept the terms, and finish the other two steps on the wizard:
### Next you'll see something like this, from here you can grab the configuration key
### If you missed the previous screen you can always go to the cog wheel on the left side panel, and click on project settings.
Now scroll down to the Your App section and click on config radio button, and copy the code highlighted on the image bellow, and paste it on the firebase.ts file
