PROJECT REPORT

On
Recipe book

Guide: Summer Trainee:

Mr. Ashish Saxena Priyank Kumar
(Maharaja Agrasen
Institute of Technology)
Project Report Approval Sheet

It is certified that the Project entitled,”RECIPE

BOOK” was completed by Mr.Priyank Kumar
under the guidance during the period w.e.f
14/06/2018 to 06/08/2018.The same is hereby
approved.

Ashish Saxena
Chief Manager
GAIL (INDIA) Limited
 ACKNOWLEDGEMENT

It gives me great pleasure to place on record my

sincere thanks to my teachers for having
generously providing necessary guidance,
encouragement, and moral support during the
course of the project preparation.

To my parents, who were always positive about

my output, were always with me in thick and thin
and always pushing me further whenever I screwed
up.

To my seniors and my friends, who helped me

with exploring the things, language of this report
and the interface colors and images.

-Priyank Kumar
Abstract/ Executive Summary

This project is aimed at developing a responsive single-

page applications with one of the most modern JavaScript
frameworks out there.In this project a reactive single page
application is created which uses components.A
component in Angular 6 provides the basic building blocks
of the Angular app. When the Angular CLI is used in the
creation of the project, it creates a single component.For
the backend firebase is used.Firebase has a lot of
services but in this project the only service used was the
Realtime Database.The Realtime Database service
provides application developers an API that allows
application data to be synchronized across clients and
stored on Firebase's cloud.
 Index
Title
Abstract/Executive Summary

Chapter-1
Introduction To Project

Chapter-2
Introduction To Angular

Chapter-3
Introduction To Firebase

Chapter-4
Introduction To Bootstrap

Chapter-5
References / Bibliography
 Introduction To Project

Aim: The aim of the project is to create a platform someone can get the recipes of
various dishes and can also create your own recipes with the help of an integrated
feature of creating your own shopping list based on your choice of recipe of the dish.

This project basically comprises of 2 major components :

1. Recipe component
2. Shopping list component

Components:

Recipe components:
In this component we are concerned with our recipes so this component has a list of
recipes.
So, we can select a particular recipe and read about all the details and ingredients.
You can perform various activities like :

1. To shop list
2. Edit recipe
3. Delete recipe

You can add your own recipes .this recipe component also comprises of sub
components which are:
1. Start: it is the default sub component,which opens along the recipe
component and it displays the user to select a specific recipe.
2. List: this component contains the list of all the recipes,it has a sub component
named recipe list items,which on selection opens the details component of
that particular recipe.
3. Detail: it contains all the details about the recipe that the user has added and
also contains the actions that are being performed.
4. Edit: edit component is used for editing the details of the selected recipe.

Shopping list components:

This component stores all the ingredients which are sent to the shopping list by the
recipe component. User can also add items according to their wishes user also the
ability to update this shopping list using shopping list edit subcomponent which
allows us to update, edit and delete various shopping list items.

This shopping list maintains the name and the quantity of the ingredients present in
the list which are mandatory fields.

Routing:

This app navigates among its components and sub components using a special
feature of angular 6 “routing”.Each component is assigned with a route and this
route uniquely identifies which component is to be used or navigated .
all the routes are maintained in a special class app-routing.module.ts to reduce the
complexity of the app.module.ts file.

Services:

For interaction between different components and for sharing of resources among
various different components , we created services
❖ In shopping list :

1. Functions:
● addIngredients: multiple ingredients were added to the shopping list.
● addIngredient: only a single ingredient was added to the shopping list.
● getIngredients: fetching multiple ingredients .
● Getingredient: fetching only a single ingredient.
● updateIngredient: whenever a change is made the shopping list.
● deleteIngredient: whenever an article is deleted from the shopping list this
function comes into play

2. Arrays of recipes:
● Ingredient: an array is made accordingly to the quantity and the articles
required in the recipe.

3. Events:
● ingredientsChanged:
● startedEditting:

❖ In Recipe:

1. Functions:
● getRecipes: when multiple recipes are required.
● getRecipe: when only a single recipe is required.
● addIngredientsToshoppingList: ingredients can be added to the shopping list
● addRecipe: recipe can be added by making this selection.
● updateRecipe: whenever a change is made to the recipe, then it is used.
 ● deleteRecipe: removal/deletion of the selected recipe
● setRecipe: the selected recipe is displayed

2. Arrays of recipes:
● Ingredient: an array is made accordingly to the quantity and the articles
required in the recipe.

3. Events:
● recipeSelected: it notifies whenever a recipe is selected and displays the
selected recipe.
● recipeChanged: when another recipe is selected ,the other recipe is
displayed.

Model: Here encapsulation is taking place i.e wrapping up of data as a single unit.
We have two models in this project ,namely:
1. Recipe:
● Name
● Desc
● Imagepath
● ingredients

2. Ingredients:
● Name
● Amount

Cloud :

The cloud services are used in this project for either Fetching the data or saving the
data .
The firebase console is used in the project which takes the file as json which makes it
highly efficient.In case of fetching the data the data will be fetched from the
firebased accordingly to all the updates made the user.In case of saving, whenever a
new recipe is added or items are added to the shopping list the data should be saved
so that whenever the data is fetched the next time, all the tasks can be done
accordingly.
Screenshots
 Introduction to Angular

Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a

TypeScript-based open-source front-end web application platform led by the Angular
Team at Google and by a community of individuals and corporations. Angular is a
complete rewrite from the same team that built AngularJS.

Differences between Angular and AngularJS

Angular was a ground-up rewrite of AngularJS.

● Angular does not have a concept of "scope" or controllers, instead it uses
a hierarchy of components as its primary architectural characteristic.
● Angular has a different expression syntax, focusing on "[ ]" for property
binding, and "( )" for event binding
● Modularity – much core functionality has moved to modules
● Angular recommends the use of Microsoft's TypeScript language, which
introduces the following features:
● Class-based Object Oriented Programming
● Static Typing
● Generics

● TypeScript is a superset of ECMAScript 6 (ES6), and is backwards

compatible with ECMAScript 5 (i.e.: JavaScript). Angular also includes ES6:
● Lambdas
● Iterators
● For/Of loops
● Python-style generators
● Reflection

● Dynamic loading
● Asynchronous template compilation
● Iterative callbacks provided by RxJS. RxJS limits state visibility and
debugging, but these can be solved with reactive add-ons like ngReact or
ngrx.
History
Naming

Originally, the rewrite of AngularJS was called "Angular 2" by the team, but this led to
confusion among developers. To clarify, the team announced that separate terms
should be used for each framework with "AngularJS" referring to the 1.X versions and
"Angular" without the "JS" referring to versions 2 and up.

Version 2.0.0

Angular 2.0 was announced at the ng-Europe conference 22-23. October 2014. The
drastic changes in the 2.0 version created considerable controversy among
developers.On April 30, 2015, the Angular developers announced that Angular 2
moved from Alpha to Developer Preview. Angular 2 moved to Beta in December
2015, and the first release candidate was published in May 2016.The final version
was released on September 14, 2016.

Version 4.0.0

On 13 December 2016 Angular 4 was announced, skipping 3 to avoid a confusion due

to the misalignment of the router package's version which was already distributed as
v3.3.0. The final version was released on March 23, 2017. Angular 4 is backward
compatible with Angular 2.
Angular version 4.3 is a minor release, meaning that it contains no breaking changes
and that it is a drop-in replacement for 4.x.x.
Features in version 4.3
● Introducing HttpClient, a smaller, easier to use, and more powerful library
for making HTTP Requests.
● New router life cycle events for Guards and Resolvers. Four new events:
GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the
existing set of life cycle event such as NavigationStart.
● Conditionally disable animations.

Version 5.0.0

Angular 5 was released on November 1, 2017. Key improvements in Angular 5

include support for progressive web apps, a build optimizer and improvements
related to Material Design.
Version 6.0.0
Angular 6 was released on May 4, 2018. This is a major release focused less on the
underlying framework, and more on the toolchain and on making it easier to move
quickly with Angular in the future, like: ng update, ng add, Angular Elements, Angular
Material + CDK Components, Angular Material Starter Components, CLI Workspaces,
Library Support, Tree Shakable Providers, Animations Performance Improvements,
and RxJS v6.

Future releases

Angular 7 release will be showing up in September or October 2018. Each version is

expected to be backward-compatible with the prior release. Google pledged to do
twice-a-year upgrades.

Architecture

Architecture of an Angular application. The main building blocks are modules,

components, templates, metadata, data binding, directives, services and dependency
injection.
 Introduction to Firebase
Firebase is a mobile and web application development platform developed by
Firebase, Inc. in 2011, then acquired by Google in 2014.Firebase frees developers to
focus crafting fantastic user experiences. You don’t need to manage servers. You
don’t need to write APIs. Firebase is your server, your API and your datastore, all
written so generically that you can modify it to suit most needs. Yeah, you’ll
occasionally need to use other bits of the Google Cloud for your advanced
applications. Firebase can’t be everything to everybody. But it gets pretty close.

History

Firebase evolved from Envolve, a prior startup founded by James Tamplin and
Andrew Lee in 2011. Envolve provided developers an API that enables the integration
of online chat functionality into their websites. After releasing the chat service,
Tamplin and Lee found that it was being used to pass application data that weren't
chat messages. Developers were using Envolve to sync application data such as game
state in real time across their users. Tamplin and Lee decided to separate the chat
system and the real-time architecture that powered it. They founded Firebase as a
separate company in April 2012.
Firebase Inc. raised seed funding in May 2012. The company further raised Series A
funding in June 2013. In October 2014, Firebase was acquired by Google. In October
2015, Google acquired Divshot to merge it with the Firebase team. Since the
acquisition, Firebase has grown inside Google and expanded their services to
become a unified platform for mobile developers. Firebase now integrates with
various other Google services to offer broader products and scale for developers. In
January 2017, Google acquired Fabric and Crashlytics from Twitter to join those
services to the Firebase team. Firebase launched Cloud Firestore, a Document
Database, in October 2017.

Stability

● Crash Reporting creates detailed reports of the errors in the app. Errors are
grouped into clusters of similar stack traces and triaged by the severity of
impact on app users. In addition to automatic reports, the developer can log
custom events to help capture the steps leading up to a crash.Before
acquiring Crashlytics, Firebase was using its own Firebase Crash Reporting.
● Firebase Performance provides insights into an app's performance and the
latencies the app's users experience.
 ● Firebase Test Lab for Android and iOS provides cloud-based infrastructure for
testing Android and iOS apps. With one operation, developers can initiate
testing of their apps across a wide variety of devices and device
configurations. Test results—including logs, videos, and screenshots—are
made available in the project in the Firebase console. Even if a developer
hasn't written any test code for their app, Test Lab can exercise the app
automatically, looking for crashes.Test Lab for iOS is currently in beta.

Services
● Firebase Analytics is a cost-free app measurement solution that provides
insight into app usage and user engagement.
● Formerly known as Google Cloud Messaging (GCM), Firebase Cloud
Messaging (FCM) is a cross-platform solution for messages and notifications
for Android, iOS, and web applications, which currently can be used at no
cost.
● Firebase Auth is a service that can authenticate users using only client-side
code. It supports social login providers Facebook, GitHub, Twitter and Google
(and Google Play Games). Additionally, it includes a user management system
whereby developers can enable user authentication with email and password
login stored with Firebase.
● Firebase provides a realtime database and backend as a service. The service
provides application developers an API that allows application data to be
synchronized across clients and stored on Firebase's cloud. The company
provides client libraries that enable integration with Android, iOS, JavaScript,
Java, Objective-C, Swift and Node.js applications. The database is also
accessible through a REST API and bindings for several JavaScript frameworks
such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the
Server-Sent Events protocol, which is an API for creating HTTP connections for
receiving push notifications from a server. Developers using the realtime
database can secure their data by using the company's server-side-enforced
 security rules. Cloud Firestore which is Firebase's next generation of the
Realtime Database was released for beta use.
● Firebase Storage provides secure file uploads and downloads for Firebase
apps, regardless of network quality. The developer can use it to store images,
audio, video, or other user-generated content. Firebase Storage is backed by
Google Cloud Storage.
● Firebase Hosting is a static and dynamic web hosting service that launched on
May 13, 2014. It supports hosting static files such as CSS, HTML, JavaScript
and other files, as well as dynamic Node.js support through Cloud Functions.
The service delivers files over a content delivery network (CDN) through HTTP
Secure (HTTPS) and Secure Sockets Layerencryption (SSL). Firebase partners
with Fastly, a CDN, to provide the CDN backing Firebase Hosting. The
company states that Firebase Hosting grew out of customer requests;
developers were using Firebase for its real-time database but needed a place
to host their content.
● ML Kit is a mobile machine learning system for developers launched on May
8, 2018 in beta during the Google I/O 2018 . ML Kit API's feature a variety of
features including text recognition, detecting faces, scanning barcodes,
labelling images and recognising landmarks. It is currently available for iOS or
Android developers. You may also import your own TensorFlow Lite models, if
the given API's aren't enough. The API's can be used on-device or on cloud.
 Bootstrap
Bootstrap is a free and open-source front-end framework (library) for designing
websites and web applications. It contains HTML- and CSS-based design templates
for typography, forms, buttons, navigation and other interface components, as well
as optional JavaScript extensions. Unlike many web frameworks, it concerns itself
with front-end development only.
Bootstrap is the second most-starred project on GitHub, with more than 126,000
stars.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and
Jacob Thornton at Twitter as a framework to encourage consistency across internal
tools. Before Bootstrap, various libraries were used for interface development, which
led to inconsistencies and a high maintenance burden. According to Twitter
developer Mark Otto:

"A super small group of developers and I got together to design and build a new
internal tool and saw an opportunity to do something more. Through that process,
we saw ourselves build something much more substantial than another internal tool.
Months later, we ended up with an early version of Bootstrap as a way to document
and share common design patterns and assets within the company."

After a few months of development by a small group, many developers at Twitter

began to contribute to the project as a part of Hack Week, a hackathon-style week
for the Twitter development team. It was renamed from Twitter Blueprint to
Bootstrap, and released as an open source project on August 19, 2011.It has
continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core
developers, as well as a large community of contributors.

On January 31, 2012, Bootstrap 2 was released, which added a twelve-column

responsive grid layout system, inbuilt support for Glyphicons, several new
components, as well as changes to many of the existing components.On August 19,
2013, Bootstrap 3 was released, which redesigned components to use flat design,
and a mobile first approach.

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in

development.The first alpha version of Bootstrap 4 was released on August 19, 2015.
The first beta version was released on 10 August 2017. The stable version of
Bootstrap 4 was released on January 18, 2018 basically improving print styles, border
utilities and provides more control over the flexbox.
Features
Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE8
and the latest Firefox Extended Support Release (ESR).

Since 2.0, Bootstrap supports responsive web design. This means the layout of web
pages adjusts dynamically, taking into account the characteristics of the device used
(desktop, tablet, mobile phone).Starting with version 3.0, Bootstrap adopted a
mobile-first design philosophy, emphasizing responsive design by default.
Version 4.0 added Sass and flexbox support.

Version 4.0
On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development.On
September 6, 2016, Mark suspended work on Bootstrap 3 in order to free up time to
work on Bootstrap 4. Over 17,500 commits have been made to the Bootstrap 4
codebase so far.
Bootstrap 4 is almost a complete rewrite from Bootstrap 3. Significant changes
include:

● Switched from Less to Sass.

● Dropped IE8, IE9, and iOS 6 support.
● Added flexbox support and then dropped non-flexbox support.
● Switched from pixels to root ems.
 ● Increased global font-size from 14px to 16px.
● Dropped the panel, thumbnail, and well components in favor of cards.
● Rewrote almost all components, jQuery plugins and documentation.

Structure and Function

Bootstrap is modular and consists of a series of Less stylesheets that implement the
various components of the toolkit. These stylesheets are generally compiled into a
bundle and included in web pages, but individual components can be included or
removed. Bootstrap provides a number of configuration variables that control things
such as color and padding of various components.
Since Bootstrap 2, the Bootstrap documentation has included a customization wizard
which generates a customized version of Bootstrap based on the requested
components and various settings.
As of Bootstrap 4, Sass is used instead of Less for the stylesheets.
Each Bootstrap component consists of an HTML structure, CSS declarations, and in
some cases accompanying JavaScript code.
Grid system and responsive design comes standard with an 1170 pixel wide grid
layout. Alternatively, the developer can use a variable-width layout. For both cases,
the toolkit has four variations to make use of different resolutions and types of
devices: mobile phones, portrait and landscape, tablets and PCs with low and high
resolution. Each variation adjusts the width of the columns.
 Bibliography

 Google.
 Wikipedia.
 Udemy. Angular 6 (formerly Angular 2) - The Complete
Guide