1.

INTRODUCTION

While there is always a debate over Hybrid Vs Native, we chose Hybrid because it meets our need
and the exiting app features was developed using Hybrid.
Business Feasibility: This app is already existing, and we had upgrade to a newer version of
Angular and add new features. So, it would cost a lot more to get it done all over again.
Technical Resource: It is easier to find and hire a technical resource with a Web Development
skill and utilize the same for App Development
Write Once: Run on iOS and Android: This saves time and cost. In a Native approach we will
have to have 2 teams and each developing its own code.
The challenges and its solutions and workarounds will differ for each
As mentioned earlier, this was purely a choice of suitability to use Hybrid. The project scope did
not involve anything that is exclusive to Native

1.1 Scope

Mobile Apps have changed the world in unpredictable ways and its use in innovative ways
continue to change the civilization in unimaginable ways and its use is most disruptive.
One such application of mobile apps is DIGITAL MEMBERSHIP CARD.
The organization namely New Life AG gives memberships to its regular participants. In the move
to get digital and remove paper work, it is now preparing a module in the app that takes the
Membership via app and tells the status of application.
This module walks us through different frameworks ,visual languages easing the implementation
of transforming a membership form to a digital card that comes handy in all real time applications
today.

1.2 Existing System

Cedar IT has developed a Web Based CRM for Membership and Relation Management of Client’s
Members.
Cedar has expertise in CRM and has developed it for its customer Gideons International. Gideons
International is a US based organization with its presence in over 150 countries.
Based on this experience Cedar has developed a CRM based App for its Client NLAG.

1
1.3 Proposed System

Currently it is in use as a Web App and Mobile App avaiable in Play Store and App store. The
current app is built on AngularJS.
The new version is being developed with Angular7 and Ionic 4
a. Phase 1 UI and UX Development
Stage 1: - The interns will participate and contribute to UI Designing in stage.
Stage 2: - Prototype Development.
To do this, interns will have to work on the technologies mentioned in “Technologies to be used
section”
Interns who do not have the required skills may have to learn these to proceed.
Stage 3: - Testing.
Stage 4: - Get End user feedback.
Stage 5: - Implement End User feedback.
Stage 6: - Redo Stage 1 to 5 until a satisfactory prototype is ready.
b. Phase 2: Move to production.
Stage 1: - Monitor performance and manage issues.
Stage 2: - Implement fixes and updated Play Store.
c. Phase 3: End User Feedback
Out of scope for the current plan.
Redesign the UI and improve UX.
Make the CRM scalable on AWS cloud.

2
 2. SYSTEM ANALYSIS
This System Analysis is closely related to requirements analysis. It is also "an explicit formal
inquiry carried out to help someone (referred to as the decision maker) identify a better course of
action and make a better decision than he might otherwise have made."This step involves breaking
down the system in different pieces to analyze the situation, analyzing project goals, breaking
down what needs to be created and attempting to engage users so that definite requirements can
be defined.

2.1 Functional Requirement Specification

The System after careful analysis has been identified to be present with the following modules.
• Objective to learn working with various frameworks in designing a hybrid mobile
application
• Outcome-developing digital membership card module of a live project using various
frameworks.
• Resources-angular,ionic framework implemented through visual studio code.

TECHNOLOGIES USED:

This is primarily a Hybrid App. The project will continue to be in Hybrid app if no blockers
are encountered, which is very unlikely.
For this, we shall use AngularJS. If needed, we may upgrade to current version or defer it
until an imperative need arises

1. Angular 7-
The project will soon adopt Angular 8
2. Ionic
The project now uses Ionic 4
3. HTML
HTML 5
4. CSS
We use CSS, while there is support for SCSS too.
5. Bootstrap
The project uses Bootstrap 4, which makes the appearance responsive and modern
6. Material Design
While Bootstrap is good enough, the advent of Material design is more appealing.

3
2.2 Performance Requirements:

Performance is measured in terms of the output provided by the application. Requirement

specification plays an important part in the analysis of a system. Only when the requirement
specifications are properly given, it is possible to design a system, which will fit into required
environment. It rests largely with the users of the existing system to give the requirement
specifications because they are the people who finally use the system. This is because the
requirements have to be known during the initial stages so that the system can be designed
according to those requirements. It is very difficult to change the system once it has been designed
and on the other hand designing a system, which does not cater to the requirements of the user, is
of no use.
The requirement specification for any system can be broadly stated as given below:
 The system should be able to interface with the existing system
 The system should be accurate
 The system should be better than the existing system
The existing system is completely dependent on the user to perform all the duties.

2.3 Software Requirements:

Visual Studio Code

Angular version 7,
Ionic Framework version 4
Android SDK
JDK 1.8
Gradle 5.4

2.4 Hardware Requirements:

Windows 10,
Ubuntu 16.04
Processor: Core i5 or i7,
RAM : 8GB

4
 3.SYSTEM DESIGN

Systems design is the process of defining the architecture, components, modules, interfaces, and
data for a system to satisfy specified requirements. One could see it as the application of and
systems theory to product development. Object-oriented analysis and design methods are and
becoming the most widely used methods for computer systems design.

3.1 Architecture Design:

START

FILL THE FORM

PUSH THE
DETAILS

GENERATE THE
CARD

END

Fig No.01

5
3.2 Modules

The System after careful analysis has been identified to be present with the following modules.

1 .FILL THE FORM

This is first step that we need to do. We need to fill the form with the details required and click
on the submit button. In this we have to fill the important details specially, Full Name, Phone
number, Choosing start date, uploading a photo. Form is the shape, visual appearance, or
configuration of an object. In a wider sense, the form is the way something is or
happens. Form may also refer to: Form(document), a document (printed or electronic) with
spaces in which to write or enter data.

2. PUSH THE DETAILS

This is the second and most important task that we need to perform. In this step we push the details
that we have entered in the form onto the digital card by clicking on the submit button.
Prove your age, Anonymously prove you are under or over 18, Verify people you meet online,
Prove who you are to businesses, log in to websites without passwords through this appilication
by pushing the given details

3. GENERATE DIGITAL CARD

On clicking the submit button, our details are pushed onto the card and hence we can view our
digital card by shifting from APPLY tab to CARD (STATUS) tab. A digital identity is an online
or networked identity adopted or claimed in cyberspace by an individual, organization or electronic
device. These users may also project more than one digital identity through multiple communities.
In terms of digital identity management, key areas of concern are security and privacy.

6
 4. SYSTEM IMPLEMENTATION

The implementation stage of any project is a true display of the defining moments that make a
project a success or a failure. The implementation stage is defined as the system or system
modifications being installed and made operational in a production environment. The phase is
initiated after the system has been tested and accepted by the user. This phase continues until the
system is operating in production in accordance with the defined user requirements.

NLAG has several facilities which it lets out on rent or for free.

Current Problem:
Cost: It costs to print physical Cards

Time: It takes time to process the paper form

Resources: It takes up staff resources to process it.

Validity: The card printed can be misused. We cannot call back the card. There are a lot of
frameworks available in tthis domain of Hybrid Mobile App Development. The choice of Angular
over other frameworks like React was based on how easy it is to move from a Web Framework to
Mobile App.
The following factors were considered to choose angular:
Difficulty to Learn: Angular is comparatively not easy learn. The learning curve of Angular is
more than that of React. However, the framework provides a neat and scalable pattern.
TheEcosystemof Angular is smooth. In the beginning the Angular was in version 1 and known as
AngularJS. AngularJS was supported by Ionic Frameworkwhich made it a smooth transition from
Web to Mobile
Since it first version Ionic has caught the developer’s attention. Ionic provides its own set of
components.

7
Appearance Matters: Customized components for Mobile Apps made the Hybrid Apps look
more like a Mobile App instead of a Web Page.
Simplicity Matters: Ionic uses Cordova under the hood. However, it hardly lets developers to
interface with it. Ionic has simplified the development process.
Publishing Ease: Ionic makes it easier to make builds to publish on Google Play Store and Apple’s
App Store.
Regular Updates: Ionic has moved from version 1 to version 2, and currently at the time of this
documentation it is at version 4
Just when the AngularJS, which is JavaScript has a fundamental change in a major upgrade to use
TypeScript, the Ionic Framework release Ionic 2.
Ionic 4 now comes with Support for Angular 7 and 8- which is the latest version of Angular.
Framework Agnostic: Ionic 4, the current version now support React too. And thus it is
Framework Agnostic
This idea of filling the membership form online ,pushing the details to card and digitally
verifying and validating customers details helps organizations and firms deal in the most
efficient and in a sophisticated manner.

Conventional method of filling the membership forms burdens the customer to go for the most
specific details which may or may not be conveyed properly to the organization. This can be
eliminated by allowing the user to fill the details specifically required by the organization,
limiting the details to the needs of them and not providing unnecessary or confidential
information.

The technologies used suffice the needs of every kind of customer. This application has been
formulated as a hybrid application so that it can be dedicated to specific devices as well can be
operated through a web browser. Debugging operations have been performed to make it error
free and user friendly.

8
 5.OUTPUT SCREENS:
CODE:

“ionic serve –devapp” is the command used to open the application on desktop

9
“code .” is the command used to open the code in Visual Studio Code
HTML File

10
11
Typescript File:

12
13
OUTPUT:

Fig No.5.1 .Desktop view of the application

Fig No.5.2 Form that has to be filled

14
Fig No.5.3.Details of a customer are filled

Fig No.5.4 After clicking the submit button, customer details are viewed on the card this way,
hence digital card is generated

15
Home page in mobile phone:

Fig No.5.5

16
Menu card view:

Fig No.5.7

17
Membership Form:

Fig No.5.7

18
FILLING THE FORM:

Fig No.5.8

19
Membership card generated:

Fig No.5.9

20
 6. CONCLUSION:

By this app we would like to conclude that,benefits of this application can be toned to a greater
level . This domain what we learnt has actually given an opportunity in creating a real-time
application through our personal interet.Mobile application gives a very fruitful platform ,where
various domains like machine-learning,artificial-intelligence,natural-language processing etc can
brought at one place.this application can be developed its long run with special features.
Mobile phones and devices have become such a ubiquitous part of our everyday lives that it’s
difficult to imagine going through an entire day without one.

Mobile applications can be developed across a range of platforms--from iPhone, Android, iPad to
Windows mobile amongst others. The scope of mobile application development has grown so
explosively not only because of the number of development platforms but because of the nearly
limitless range of ways it enhances our lives.

As the scope of mobile application development continues to grow, it places new strains on
businesses in order to remain competitive in their own market. But, for those who handle their
mobile application development properly, it can open doors and create opportunities for growth
and expansion of their company and brand that simply would not have been possible without it.

To conclude, this application of new life AG organization stands as a platform dedicating itself
to various frameworks in providing-
 Bulletin list of all the important events of the organization as a remainder
 Videos of all the meetings that gives an overview of the organization.
 List of all the events conducted by the organization
 Giving’s of the customers to the organizations fund
 Feedback form as a review to its functionality.
 Member services provided to all the members of the organization
 Live streaming of all the meetings and events and important curriculum.
 Digital membership card provided to the trusted customers of the organization.

In this way, the application serves all the needs of the organization by merely setting up a
platform for the users who can avail the services of the organization efficiently through effective

21
 6. FUTURE SCOPE:

Advancements can be made by frequent implementation of the appilication,thus can understand

more of its loop holes in various situations.As this app will give us assurance in reduction of paper-
work and time-work,we can implement in our day-to-day life on tip of our hands.In future we can
develop this appilication in various levels,as to make our living easier,because it gives many fruits
rather than loopholes in our daily life.
Native apps can provide optimized performance and take advantage of the latest technology
compared to web apps or mobile cloud apps developed to be generic across multiple systems.

Full integration of the device

Native apps come with many functionalities offered by mobile devices. For instance, a camera,
GPS, calendar and a microphone. These apps help the developers build fully enjoyable
experiences.

Work without an Internet connection

Native apps can also work without an internet connection. This is a huge advantage. There are a
lot of challenges doing so with hybrid apps.

Excellent performance

The native apps are designed or developed for the specific operating system so they provide
excellent performance.

Look and feel of native applications

The look and feel of the native apps are eye-catching and inspiring — allowing users to connect
easily and quickly to the icons and buttons.

Better user experience

The native applications are developed for a particular platform (iOS and Android). They follow
specific UX/UI guidelines for developers and are similar across apps providing an easy to
understand and similar user experience while navigating the apps.

More secure and safe

These apps are more secure and safe to use as they are accessible through the app stores. All the
apps are fully tested and reviewed by the app store approval team and then featured in the stores
for the users to download. This provides a certificate of reliability and assurance.

22
 7.BIBLIOGRAPHY

[1] www.geekofgeeeks.com

[2] www.wikipedia.org

[3]www.w3schools.com

[4] www.javascript.info

23
 8.APPENDIX

HTML
Hypertext Markup Language (HTML), the languages of the world wide web (WWW),allows

users to produces web pages that included text, graphics and pointer to other web pages

(Hyperlinks).

HTML is not a programming language but it is an application of ISO Standard 8879, SGML
(Standard Generalized Markup Language), but specialized to hypertext and adapted to the Web.
We can navigate through the information based on out interest and preference. A markup language
is simply a series of items enclosed within the elements should be displayed.

Hyperlinks are underlined or emphasized works that load to other documents or some portions of
the same document.
Html can be used to display any type of document on the host computer, which can be
geographically at a different location. It is a versatile language and can be used on any platform or
desktop.
HTML provides tags (special codes) to make the document look attractive.
HTML provides are not case-sensitive. Using graphics,fonts,different sizes, color, etc. can enhance
the presentation of the document. Anything that is not a tag is part of the document itself.
Basic Html Tags:
<! -- --> Specific Comments.
<A>………</A> Creates Hypertext links.
<B>………</B> Text is changed to bold
<Body>……. </Body> Contains all tags and text in the Html-document
<DD>………. </DD> Definition of a term.
<TABLE>……</TABLE> Creates table
<Td>………. </Td> Indicates table data in a table.
<Tr>………. </Tr> Designates a table row
<Th>………. </Th> Creates a heading in a table.

Advantages:
24
  A HTML document is small and hence easy to send over the net. It is small because it
does not include formatted information.
 HTML is platform independent.
 HTML tags are not case-sensitive.

Java Script

JavaScript is among the most powerful and flexible programming languages of the web. It powers
the dynamic behavior on most websites. JavaScript is a compact, object-based scripting language
for developing client and server internet applications. Netscape Navigator 2.0 interprets JavaScript
statements embedded directly in an HTML page. and Livewire enables you to create server-based
applications similar to common gateway interface (CGI) programs. In a client application for
Navigator, JavaScript statements embedded in an HTML page can recognize and respond to user
events such as mouse clicks formInput, and page navigation. For example, you can write a
JavaScript function to verify that users enter valid information into a form requesting a telephone
number or zip code. Without any network transmission, an Html page with embedded Java Script
can interpret the entered text and alert the user with a message dialog if the input is invalid or you
can use JavaScript to perform an action. The functions can run after the web page has loaded
without communicating with the server.
CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes up
each web page.CSS is easy to learn and understood but it provides powerful control over the
presentation of an HTML document.) is the language for describing the presentation of Web
pages, including colors, layout, and fonts. You can control the color of the text, the style of font,
spacing between paragraphs, how columns are sized and laid out, what background images or
colors are used, layout designs, and variations in display for different places in website.

Merits:

 CSS saves time: You can write CSS once and reuse same sheet in multiple HTML
pages.

25
  Easy Maintenance: To make a global change simply change the style, and all elements in
all the webpages will be updated automatically.
 Search Engines: CSS is considered as clean coding technique, which means search engines
won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS have a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of offline cache.
Using of this we can view offline websites.

Bootstrap
Bootstrap is a free and open source front end development framework for the creation of
websites and web apps. Itincludes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels, etc. Bootstrap's responsive CSS
adjusts to phones, tablets, and desktops.Bootstrap enables you to create responsive websites
without you needing to do the "responsive" bit. Bootstrap takes care of that. Bootstrap is
promoted as being One framework, every device. Bootstrap includes components such as
buttons, navbars, dropdown menus, alert boxes, and more. In most cases, you can make use of a
component simply by using the appropriate class name.

One of the main benefits of development frameworks like Bootstrap is that they can help speed
up development times, while maintaining quality and consistency across the site. You no longer
need to re-design every element. And you don't need to spend hours trying to get everything
looking and working right across browsers, platforms, and devices.

Angular

Angular (commonly referred to as "Angular 2+" or "Angular v2 and above")[4][5] is

a TypeScript-based open-source web application framework 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

26
 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:Static Typing, including Generics and Annotations .Typescript is a
superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.:
JavaScript).

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.Support Angular Universal, a technology that
runs your Angular application on the server.Has its own suite of modern UI components that work
across the web, mobile and desktop, called Angular Material[8]

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.[9]
Version 2:
Angular 2.0 was announced at the ng-Europe conference 22–23. October 2014.[10][11] The drastic
changes in the 2.0 version created considerable controversy among developers.[12] On April 30,
2015, the Angular developers announced that Angular 2 moved from Alpha to Developer
Preview.[13] Angular 2 moved to Beta in December 2015,[14] and the first release candidate was
published in May 2016.[15] The final version was released on September 14, 2016.
Version 4:
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.[16] The final
version was released on March 23, 2017.[17] Angular 4 is backward compatible with Angular 2.[18]
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.

27
 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:
Angular 5 was released on November 1, 2017.[19] Key improvements in Angular 5 include support
for progressive web apps, a build optimizer and improvements related to Material Design.[20]
Version 6:
Angular 6 was released on May 4, 2018.[21]. 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.
Version 7:
Angular 7 was released on October 18, 2018. Updates regarding Application Performance,
Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects, now supports
Content Projection using web standard for custom elements, and dependency updates regarding
Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8).[22]
Version 8:
Angular 8 was released on May 28, 2019. Featuring Differential loading for all application code,
Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an
opt-in preview. Angular Ivy opt-in preview includes:[23]

 Generated code that is easier to read and debug at runtime.

 Faster re-build time.
 Improved payload size.
 Improved template type checking.
 Backwards compatibility.
Future Releases:
One of the highlights is the expected release of Ivy[23], a backwards compatible, completely new
render engine based on the incremental DOM architecture. Ivy has been engineered with tree
shaking in mind, which means that application bundles will only include the parts of Angular
source code that is actually used by the application.
Each version is expected to be backward-compatible with the prior release. Google pledged to do
twice-a-year upgrades.
Support policy and schedule:
All the major releases are supported for 18 months. This consists of 6 months of active support,
during which regularly-scheduled updates and patches are released. It is then followed by 12
28
months of long-term support (LTS), during which only critical fixes and security patches are
released.[24]

Ionic
Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch,
Ben Sperry, and Adam Bradley of Drifty Co. in 2013.[3] The original version was released in 2013
and built on top of AngularJS and Apache Cordova. However, The latest release was re-built as a
set of Web Components, allowing the user to choose any user interface framework, such
as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface
framework at all.[4] Ionic provides tools and services for developing hybrid mobile, desktop,
and Progressive Web Apps based on modern web development technologies and practices, using
Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these
Web technologies and then distributed through native app stores to be installed on devices by
utilizing Cordova or Capacitor.[5]

29
30