let's COOK

Description

A fully functional recipes manager mobile application written in Ionic 3 and Angular 4 using Google Firebase as a backend.

The application provides fully integrated email and password authentication process, with signup, login and password reset functionalities.

Once, logged in, a user can browse existing recipes, edit personal account info (changing name, email, password, image), create own recipes.

When browsing recipes the user can add to favorites a recipe. All favorite recipes are available inside the “Favorite Recipes” menu entry.

The application has several CRUD operation examples: adding to lists, removing from lists, querying lists.

Besides firebase functionality examples, there is an example on how to build a custom directive. The custom directive is used to generate an avatar for a user that has no image uploaded.

Also, the application uses multiple ionic components, like lists, slides, search-bar, camera, etc.

The app is built using Ionic v3 and Angular 4 and it can be used on Android, iOs, or Windows platforms. Starting and running the app After downloading and unpacking the files, simply navigate to the app’s folder and “npm install” to get all dependencies. Don’t forget to add your desired platform using the “ionic cordova platform add ” command. Using your own firebase After installing all dependencies, and before serving up the app, make sure you ADD YOUR FIREBASE DETAILS inside the ‘app.components.ts’ file. To get your firebaseConfig details, after creating a firebase project and navigating to your Firebase’s Console, open your apps dashboard

On your firebase app dashboard just pick Add Firebase to your webapp, and copy the needed details from the popup.

Also, you have to set the rules for the database in order to work properly with the application settings. Just go to your application Database section and click on the Rules tab. Here, change the existing rules to the following: { “rules”: { “userProfile”: { ”$uid”: { ”.read”: “auth != null”, ”.write”: “auth != null” } }, “recipes”: { ”.read”: “auth != null”, ”.write”: “auth != null”, ”.indexOn”: [“name”, “category”, “userID”, “likes”] } } }

Now you can test your app running ionic serve, or ionic lab, if you want to preview it on multiple platforms. Issues you may encounter There is a chance, that when trying to emulate the app on iOS platform you get an error like Cannot read property ‘replace’ of undefined. To fix this, just navigate to your platforms/ios/cordova folder and run npm install ios-sim. After this, you can go back to your app root and emulate the app on iOS.

let's COOK

Description

Categories

Tags

Products of the Week.