CCS332

APP DEVELOPMENT
M.GNANAVEL
SYLLABUS
UNIT I FUNDAMENTALS OF MOBILE & WEB
APPLICATION DEVELOPMENT -6 HOURS
Basics of Web and Mobile application
development, Native App, Hybrid App, Cross-
platform App, What is Progressive Web App,
Responsive Web design.
CONTD..
UNIT II NATIVE APP DEVELOPMENT USING JAVA
-6 HOURS
Native Web App, Benefits of Native App,
Scenarios to create Native App, Tools for
creating Native App, Cons of Native App,
Popular Native App Development Frameworks,
Java & Kotlin for Android, Swift & Objective-C
for iOS, Basics of React Native, Native
Components, JSX, State, Props.
CONTD..
 UNIT III HYBRID APP DEVELOPMENT -6 HOURS
 Hybrid Web App, Benefits of Hybrid App,

Criteria for creating Native App, Tools for

creating Hybrid App, Cons of Hybrid App,
Popular Hybrid App Development
Frameworks, Ionic, Apache Cordova
CONTD..
 UNIT IV CROSS-PLATFORM APP
DEVELOPMENT USING REACT-NATIVE -6
HOURS.
 What is Cross-platform App, Benefits of
Cross-platform App, Criteria for creating
Cross-platform App, Tools for creating
Cross-platform App, Cons of Cross-platform
App, Popular Crossplatform App
Development Frameworks, Flutter, Xamarin,
React-Native, Basics of React Native, Native
Components, JSX, State, Prop
CONTD..
UNIT V NON-FUNCTIONAL CHARACTERISTICS
OF APP FRAMEWORKS- 6 HOURS
 Comparison of different App frameworks,

Build Performance, App Performance,

Debugging capabilities, Time to Market,
Maintainability, Ease of Development, UI/UX,
Reusability.
PRACTICAL EXERCISES: 30 PERIODS
 1. Using react native, build a cross platform
application for a BMI calculator.
 2. Build a cross platform application for a simple
expense manager which allows entering expenses
and income on each day and displays category
wise weekly income and expense.
 3. Develop a cross platform application to convert
units from imperial system to metric system ( km
to miles, kg to pounds etc.,)
 4. Design and develop a cross platform application
for day to day task (to-do) management.
CONTD..
 5. Design an android application using Cordova for a
user login screen with username, password, reset button
and a submit button. Also, include header image and a
label. Use layout managers.
 6. Design and develop an android application using
Apache Cordova to find and display the current location
of the user.
 7. Write programs using Java to create Android
application having Databases
 ● For a simple library application.
 ● For displaying books available, books lend, book
reservation. Assume that student information is available
in a database which has been stored in a database server.
TEXT BOOKS
 1. Head First Android Development, Dawn
Griffiths, O’Reilly, 1st edition
 2. Apache Cordova in Action, Raymond K.

Camden, Manning. 2015

 3. Full Stack React Native: Create beautiful

mobile apps with JavaScript and React Native,

Anthony Accomazzo, Houssein Djirdeh,
Sophia Shoemaker, Devin Abbott, FullStack
publishing
REFERENCES
 1. Android Programming for Beginners, John
Horton, Packt Publishing, 2nd Edition
 2. Native Mobile Development by Shaun Lewis,
Mike Dunn
 3. Building Cross-Platform Mobile and Web Apps
for Engineers and Scientists: An Active Learning
Approach, Pawan Lingras, Matt Triff, Rucha Lingras
 4. Apache Cordova 4 Programming, John M Wargo,
2015
 5. React Native Cookbook, Daniel Ward, Packt
Publishing, 2nd Edition
Basics of Web and Mobile application development

 Web development refers to the creating,

building, and maintaining of websites.
 It includes aspects such as web design, web

publishing, web programming, and database

management.
 It is the creation of an application that works

over the internet i.e. websites.

Web Application Development
 A web application is an interactive program
that runs on a web server and is accessed
through a web browser.

 For Example:Amazon, eBay, Shopify,

 Facebook, LinkedIn, Twitter, and Instagram
Contd..
 Web application development describes the
process of designing, building, testing and
deploying web-based applications that will be
installed on remote servers and delivered to
users or customers via the internet.
Mobile Application Development
 Mobile application development is the
process of creating software applications that
run on a mobile device.
 Mobile application utilizes a network

connection to work with remote computing

resources.
Three Types of Web Development

 Web Development can be classified into three

ways:
 Front End Development
 Back End Development
 Full Stack Development
Frontend Development

 The part of a website where the user

interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the
application.
 Frontend may be HTML, CSS, JavaScript,

BootStrap.
CONTD.
 HTML: HTML stands for Hyper Text Markup
Language. It is used to design the front end
portion of web pages using markup language.
It acts as a skeleton for a website since it is
used to make the structure of a website.
 CSS: Cascading Style Sheets referred to as
CSS is a simply designed language intended
to simplify the process of making web pages
presentable.
 It is used to style our website.
CONTD..
 JavaScript: JavaScript is a scripting language used
to provide a dynamic behavior to our website.
 Bootstrap: Bootstrap is a free and open-source tool
collection for creating responsive websites and
web applications.
 It is the most popular CSS framework for
developing responsive, mobile-first websites.
 Nowadays, the websites are perfect for all
browsers (IE, Firefox, and Chrome) and for all sizes
of screens (Desktop, Tablets, Phablets, and
Phones).
◦ Bootstrap 4 & Bootstrap 5
 Backend Development

 Backend is the server side of a website.

 It is part of the website that users cannot see and
interact with.
 It is the portion of software that does not come
in direct contact with the users.
 It is used to store and arrange data.
 Backend may be
 PHP: PHP is a server-side scripting language
designed specifically for web development.
 Java: Java is one of the most popular and widely
used programming languages. It is highly
scalable.
CONTD..
 Python: Python is a programming language
that lets you work quickly and integrate
systems more efficiently.

 Node.js: Node.js is an open source and

cross-platform runtime environment for
executing JavaScript code outside a browser.
Basics of Mobile App Development

 Mobile apps are majorly developed for 3

Operating System.
 Android
 IOS
 Windows
There are 3 different ways to develop Mobile apps:

 1st Party Native App development

 Progressive web Application
 Cross-Platform Application
1st Party Native App development

 These types of apps normally run in the

native devices, that is, it runs only in the OS
that it is specifically designed for it.
 These apps cannot be used on different

devices using a different OS.

 The apps that are developed for android are

normally coded using Java or Kotlin

languages
Contd..
 IDE normally used for android app
development is Android Studio which
provides all features and the apps that are
developed for IOS are generally coded in Swift
language or Objective-C.
 The IDE suggested for IOS App Development

is Xcode.
 Example: A retail company wants to improve

the in-store shopping experience for its

customers.
Progressive web Application:

 Progressive web apps are essentially a website

which runs locally on your device. The
technologies used are Microsoft Blazor, React,
Angular JS, Native Script, Iconic.
 These technologies normally used for web
development propose
 . The apps’ UI is developed the same way as they
are developed while developing the website.
 This category has many ups and downs let’s
start with the advantages of Progressive web
apps.
example
 A news website wants to provide its users
with a better mobile experience.
 They develop a Progressive Web App that:
 Allows users to access the website offline by

storing content on the user’s device.

 Sends push notifications to users to alert

them of breaking news.

Cross-Platform Application:

 These are frameworks that allow developing

total native applications which have access to
all the native features of IOS and Android but
with the same code base.
 These apps run on both Android and IOS. So

normally the development speeds of these

apps are very fast and the maintenance cost
is low.
 The performance speed is comparatively low

to 1st party native apps but faster than PWA.

Example
 A project management company wants to
create a project management tool that can be
used by teams on different platforms.
 They develop a cross-platform application

that:
 Can be used on Windows, Mac, iOS, and

Android devices.
 Allows users to create and assign tasks, set

deadlines, and track progress.

Native App

 The term native app refers to platforms

such as Mac and PC. The Photos, Mail or
Contacts applications that are preinstalled
and configured on every Apple computer is
the example for Native App.
Native App Development
 Native app development is the process of creating mobile
applications specific to a single platform.
 Examples are Google’s Android and Apple’s Ios.
 The programming languages and tools required for
developing native apps are specific to each platform.
 Android app developers would use Java or Kotlin, whereas
iOS app developers would use Objective C or Swift.
 A native Android application cannot run on the iOS
system, nor can a native iOS app run on the Android
system.
 For users to access the native applications, they have to
download them from the platform- specific stores, i.e.,
App Store for iOS and Play Store for Android.
Benefits of Native App Development

1.Flawless Performance
 Since native apps are developed for a specific platform,
they are completely optimized for that particular platform.
 They use the platform’s core programming language and
APIs. Further, they get complete hardware and OS support.
 These factors combine to make sure that they provide the
best possible performance.
 Another reason for their fast and responsive nature is that
all the visual and content elements of a native app are
downloaded and stored on the device. So as a user
navigates through a native app, everything loads quickly,
thereby considerably reducing the load speed.
2.Superior UI and UX

 Every platform has a set of guidelines designed to enhance

the user experience.
 When these platform-specific guidelines are followed, the
applications behave as if tailor-fit for that platform. Their
look and feel is completely consistent with the operating
system, making them feel like an integral part of the
platform.
 Thus, for a user using a native app, the learning curve is
very low. They can understand the app layout naturally and
interact with it in an intuitive manner.
 Their familiarity with the actions and gestures enable them
to navigate through the app quickly. The consistent UI and
superior UX is a great benefit offered by native apps
3. Access to Device Features

Native apps can directly access all the tools

and features of the particular device and
operating system.
 They can access hardware components like

GPS and camera without the need for any

intermediary plugins.
 This direct access to device features

encourages faster execution of the apps

and also opens the door for more creative
solutions to be implemented.
Better Store Support

 Since native apps adhere to the guidelines

of the specific platforms, it is easier to
publish them in the respective app stores.
Better compliance with store guidelines
enables them to get ranked high on the app
store.
 These apps receive better store support as

they deliver consistent performance.

More Security
 Compared to cross-platform app development,
native app development is more secure.
 As they are not dependent on different browsers or
development platforms, they are less vulnerable to
security threats.
 Also, the use of platform-specific programming
language plays a role in increasing data protection.
 In hybrid apps, the use of universal languages
increases the risk elements.
 Native apps offer better data encryption and higher
levels of protection.
Easy Testing

 A significant advantage of native app

development is the availability of inbuilt
testing tools.
 This makes app testing easier and more

efficient.
 It enables better troubleshooting, accurate

error detection and makes it simple for

developers to test apps and find bugs.
Fewer Bugs

 In hybrid app development, there is a

dependency with mobile app development
frameworks like Ionic or Xamarin.
 This bridge adds an extra layer, which

increases the chances of bugs occurring

during development.
 In native apps, there are fewer

dependencies and hence fewer chances for

bugs to occur
Instant Updates
 Native apps can access the latest Android and iOS
release updates quickly.
 This allows developers to build native apps with
the latest features, enabling users to access new
features with an OS update.
 But for hybrid apps, the developers have to wait
for the dependent tools to implement the new
features.
 Therefore the users of hybrid apps cannot access
the latest updates instantly. This hampers the
user experience to a large extent
Challenges of Native App Development

 Higher Development Costs

 To build separate apps for different

platforms, the development will get costly.

 For each platform, you will need to hire

different development teams.

 Further, app maintenance also has to be done

separately for each platform.

 This is a major challenge of native app

development.
CONTD..
 More Development Time
 Unlike hybrid apps, native apps cannot use a

single codebase for multiple platforms.

 Separate codes need to be written for

different platforms.
 That doubles up the time of app

development.
CONTD
 Need for Skilled Developers
 The development of native apps is somewhat

complex, and a skilled team of developers are

needed to create a successful native app.
 The programming languages used are more

advanced, and it isn’t easy to find developers

proficient in those languages.
CONTD..
 Require Constant Updates
 Whenever there is a new update or a bug fix,

the users have to update the app to the latest

version from the respective app store.
 Otherwise, they may experience glitches

while operating the app.

CONTD..
 Lengthy Downloading Process
 Compared to web app development, a major

disadvantage of native app development is that

native apps have to be downloaded.
 The app download is a multi-step process

including going to the app store, finding an

app, complying with its terms, downloading,
and installing.
 This requires users to spend considerable time

and effort and may result in user attrition.

Tools and Technologies Used in Native App Development

 Native app development involves writing code in the

native programming language and compiling the native
code to run on a processor.
 To make this process of creating a native app easier,
developers use two tools — a software development kit
(SDK) and an integrated development environment (IDE).
 SDK is a set of tools that a developer would need while
writing programs for a particular platform.
 These tools include compilers, debuggers, profilers,
and other tools, as well as libraries, frameworks, header
files, etc.

CONTD
 An IDE is a platform for writing and
debugging applications.
 It brings together all the components needed

for programming in one place.

 An IDE creates a convenient user interface for

developers to make programming easier.

Native App Development for Android

 Native app development for Android uses

tools like
 Android SDK combined with Android Studio
 Firebase
 Android Jetpack
 Mockplus
 Command-line tools for Windows, Mac, and

Linux.
CONTD..
 The programming language that it uses is Java or
Kotlin.
 Java is a popular programming language used
widely by developers all over the world.
 A notable aspect of Java is its “Write once, run
anywhere” feature.
 It means that a compiled Java code can run on
any Java supporting platform without
recompilation.
 Java is an object-oriented programming language
and is secure, robust, and developer-friendly
Native App Development for iOS

 The tools and resources that support the development of

mobile apps for iOS are
 iOS SDK integrated with Cocoa Touch UI framework
 XCode (official IDE)
 Swift Playgrounds
 TestFlight (for beta testing)
 Apart from these, there are also third-party tools like
AppCode and CodeRunner.
 The programming language Swift is known for its speed,
safety, and leading advancements aimed to provide consistent
and powerful performance to developers.
 Swift is well recognized for its excellent error detection and
handling capabilities.
HYBRID APP
 A hybrid application is a software app that
combines elements of both native and web
applications.
 Hybrid apps are popular because they allow
developers to write code for a mobile app once
and still accommodate multiple platforms.
 Because hybrid apps add an extra layer
between the source code and the target
platform, they may perform slightly slower
than native or web versions of the same app.
Working of Hybrid Apps:

 Developers build hybrid apps using web

technologies such as JavaScript, CSS and HTML.
 The code is then wrapped within a native
application using open-source hybrid app
development frameworks, like Ionic or React
Native.
 This allows the app to run through each
platform’s embedded browser instead of the
web browser, which means they can be installed
on mobile devices and submitted to app stores
for sale, just like regular native apps.
Five Best Examples of Hybrid Apps

 Five hybrid mobile apps that is extremely

popular among users across the globe:
 Example #1: Instagram
 Example #2: Uber
 Example #3: Gmail
 Example #4: Evernote
 Example #5: Twitter
Pros & Cons of Hybrid App Development

 Hybrid apps cost less, take less time to create, and

are easier to manage than native ones.
 Other significant benefits of hybrid app development
include:
 1.Easier scalability. Because hybrid apps use a single
codebase, they can be deployed across devices.
 For example, when you build them for Android, you
can quickly launch them on iOS.
 2. Single codebase to manage. Unlike native app
building, where you have to create two apps, with
hybrid software building, you develop only one app,
so you only need to manage one database.
CONTD..
 3.Faster build time. Since there is one database to
manage, it takes less time to make a hybrid than native
apps.

 4.Low cost of development. Hybrid mobile apps cost

less than native apps. Because developers write one set
of code, the initial costs and the maintenance costs are
low.

 5.Offline availability. Hybrid apps will work in an

offline mode due to their native infrastructure. Users
can still load the application and see the previously
loaded data if they can't access real-time data
Hybrid app development has a few disadvantages as..

 User experience. Considering that there is one codebase for

all platforms, the user experience might not be positive. We
are talking about different operating systems, so it is
difficult to customize an app based on one platform.
 Lower performance. Hybrid mobile apps load in a web view
that is difficult to reach a native performance, and that’s
one of their biggest drawbacks.
 Availability of features. Some new features of the hybrid
software are not available for some platforms. What’s more,
some native features may not even exist.
 Errors. Hybrid software can come with hidden errors.
Cross-platform mobile development

 Cross-platform mobile development is an approach to

developing software applications that are compatible with
multiple mobile operating systems (OSes) or platforms.

 Multiple frameworks could be used for cross-platform app

development.
 Titanium
 React Native
 Xamarin
 Flutter
 Native Script
 Ionic
 Js
 PhoneGap(Cordova)
Examples for cross-platform mobile applications

 Well-known examples of cross-platform

mobile applications include:

 Instagram, Skype, Walmart, and Airbnb (React
Native)
 Google Ads, My BMW App, eBay Motors, and

the New York Times (Flutter)

 The World Bank, Fox Sports, Alaska Airlines,

and BBC Good Food (Xamarin)


Progressive Web Applications(PWA)

 . It is a web application like a mobile

application that is stored directly on the
mobile from the website.
 PWA is HTML 5 webpage.
 It is a website that runs on the mobile

browser of the user.

 PWA is a new technology.

Contd..
 PWA allows the website to be stored in your
device.
 It creates an icon in the form of a website app,

and that icon feels like a mobile application

upon opening.
 we have to develop that application for

different platforms, such as iOS, Android, and

Windows.
 We only need to create HTML 5 based

webpages that can run on any mobile browser.

Characteristics of PWA

 Progressive: The term progressive means, a PWA application must

work on any device and improve the performance of the user's
mobile browser and design.

 Discoverable: A PWA is a website with some extra features. It can be

searched via mobile searching applications like Google Chrome. App
Store or Play Store is not required for this.

 Responsive: The UI of a progressive web app should fit the form

factor and screen size of the device.

 App-like: A PWA application should look like a native application.

Although the methods for creating, sharing, launching, and updating
of the PWA are completely different from the original application.

 Connectivity-independent: It works even when connectivity is very

low.
Advantages of PWA

1. PWA works like an app on mobile and looks very

impressive.
2. It does not need an update.
3. It is easily saved in the device.
4. It's immediately loads on your mobile.
5. It saves money and time compared to creating
applications separately for android, iOS, and other
platforms.
6. Post can be read even if there is no internet.
7. Internet data is less used in it.
8. PWA is cheaper than the other applications.
Disadvantages of PWA

 It supports a limited mobile browser. It does not run on the

safari, edge, and IE browser.
 iPhone users cannot establish connections securely in it.
 It makes maximum use of the battery of the device.
 It needs to be hosted on the server because it is a web app.
 It cannot be downloaded from popular app stores such as
Google Play and Apple App Store.
 PWA does not provide the same level of support for all
devices.
 For example, push notifications in PWA work on Android,
but not on iOS.
 It supports limited hardware functionality.
Difference between PWA and Native Application

Feature Progressive Web Application Native Application

Function offline Yes Yes

Installatio There is no need to install it in It is necessary to install it in the

n mobile. phone.
requireme
nt
Push-notification. It the push- It also support the push-
suppor notification featur s notification
ts feature. e.
Platform It supports the cross-platform. It supports the specific platform.
Example iOS, Android, and
Windows
Data consumption Low data consumption High data consumption

Internet No internet requirement Internet requirement

requirement
Cost Low cost High cost
Contd..
Update the app It does not require to update It requires to update the application.
the application.

Implementation It is easy to implement. It is complex to implement.

Indexed by google Yes No

Shareable It is easy to share from anyone. It shares the entire application, so

it complex.
Technical components of PWA
 PWA has five components.
1. Web App manifest-It is a simple JSON file that
controls a user's application. Usually, it is named
"manifest.json".
2. Application shell-It is specialized to split the
static and dynamic content of the application.
3. Service worker-A service worker is a web worker.
4. Webpack-It is used to design the PWA front-end.
It allows the PWA-developers to gather all
JavaScript resources and data in one location.
5. Transport Layer Security (TLS)-secure data
exchange between any two applications.
HTTPS and an SSL certificate installed on the
server.
Responsive Web Design

Responsive web design makes your web page look good on

all devices.
Responsive web design uses only HTML and CSS.
 Responsive web design is not a program or a
JavaScript.
 Web pages can be viewed using many different devices:
desktops, tablets, and phones. Your web page should
look good, and be easy to use, regardless of the device.

 Web pages can be viewed using many different devices:
desktops, tablets, and phones. Your web page should
look good, and be easy to use, regardless of the device.
