Skip to content

Ionic 3 shopping list application with full CRUD functionality using firebase2 and AngularFire. The application is integrated with Firebase database to store the data.

Notifications You must be signed in to change notification settings

patilankita79/Ionic3-ShoppingListMobileApplication

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 

Repository files navigation

Shopping List MobileApplication - Hybrid Mobile Application

Ionic 3 shopping list application with full CRUD functionality using firebase2. The application is integrated with Firebase database to store the data.

Features

  • You can add an item to the shopping list
  • You can edit an item from shopping list
  • You can delete an item from shopping list
  • Material design is used

  • Screenshots

    Firebase Database Rules:
    Change the defaault firebase database rules in order to allow anybody to read and write from the database

    Firebase Database table

    Shopping List

    Firebase Database Entries

    If you want to edit or delete an item, tap on that item. Action sheet will appear

    Edit an item

    Database entries

    If you select Delete option from action sheet, database is also updated


    Adding a background image to a page in Ionic 3+

  • In assets folder, create a folder named img
  • Store the image in img folder
  • Go to app/app.scss and add the following code
  • ion-content {
        background-image: url('/assets/img/NAME_OF_THE_IMAGE_FILE.jpg');
    }
    

    Reference link: https://stackoverflow.com/questions/38566022/ionic-2-adding-a-background-image-to-a-page

    Installation:

    $npm install

    AngularFire2 is an official Angular library for Firebase.

    To install AngularFire 2
    $npm install angularfire2 firebase --save

    Serve the application to browser:

    $ionic serve

    To view application in mobile simulated platforms

    $ionic serve --l
    OR
    $ionic lab

    Adding platforms

    To add android platform

    $ionic cordova platform add android

    To add iOS platform
    $ionic cordova platform add ios

    Build an android apk

    $ionic cordova build android

    While building an APK you might yet an error => Module not found: Error: Can't resolve 'promise-polyfill'
    Refer this issue => ionic-team/ionic-app-scripts#1001

    Solution: In the project directory run the following command,

    $npm install promise-polyfill --save-exact

    and then run the command

    $ionic cordova build android

    I encountered the following issue while doing this project

    Issue 1: Ionic serve error Cannot read property 'call' of undefined

    I encountered this problem when executing command $ionic serve, everytime I changed few things in my code.
    Solution: The only solution is re-executing the command $ionic serve
    Reference link: https://forum.ionicframework.com/t/ionic-serve-error-cannot-read-property-call-of-undefined/97858/9

    About

    Ionic 3 shopping list application with full CRUD functionality using firebase2 and AngularFire. The application is integrated with Firebase database to store the data.

    Topics

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published