lOMoARcPSD|49924226

CCS332 App development - Unit 1

app development (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

1. Basics of Web and Mobile application development

1.1.Basics of Web 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.

Two Types

Web Development can be classified into two ways:

 Frontend Development
 Backend 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 Roadmap:

Frontend may be HTML, CSS, JavaScript, BootStrap.

 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 fondly 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.

 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

 The Roadmap of Front end is shown in Fig 1.

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
Gomathi N. Page 1

about:blank 1/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

 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.

Front End

HTML CSS Java Script

CSS CSS JavaScript JavaScript JavaScript

Frameworks Preprocessors Technology Frameworks Libraries

Bootstrap SASS ES6 AngularJS jQuery

Tailwind CSS LESS TypeScript
PrimeNG React JS
Bulma
VueJS P5.js
Foundation
script.aculo.us Fabric.js
Primer CSS
Ember.js D3.js
Spectre CSS
Handlebar.js Collect.js
Materialize CSS
Backbone.js Underscore.js
Onsen UI
Semantic UI Lodash
Blaze UI TensorFlow.js
Pure CSS

Fig 1. Front End Road Map

Gomathi N. Page 2

about:blank 2/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

 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.

 Backend Roadmap is shown in the following figure

1.2. Basics of MobileApp Development

Mobile apps are majorly developed for 3 Operating System.

1. Android
2. IOS
3. Windows

There are 3 different ways to develop Mobile apps:

1. 1st Party Native App development
2. Progressive web Application
3. 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. The

Gomathi N. Page 3

about:blank 3/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

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,
Here’s an example of a 1st party native app:
A retail company wants to improve the in-store shopping experience for its customers. They
develop a 1st party native app that allows customers to:

 Browse the store’s inventory and product information

 Create a shopping list
 Scan barcodes to view product information and reviews
 Locate items in the store using an interactive map
 Pay for items directly through the app, without having to wait in line at the register
 The app is only available to the company’s customers and can only be used in their physical
stores. The app is designed to integrate with the company’s existing systems, such as inventory
management and point-of-sale systems.
This app is developed by the retail company for their own use, to improve the in-store customer
experience, increase sales and gain insights from the customer’s behavior.

In this example, the retail company is the 1st party, and the app is a native app, because it is
developed for the specific platform (iOS or Android) and can take full advantage of the device’s
capabilities and features.

2. 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,
Here’s an example of a Progressive Web App:

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
 Can be installed on the user’s home screen like a native app

Gomathi N. Page 4

about:blank 4/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

 Provides a fast and smooth browsing experience

 Has a responsive design that adapts to different screen sizes
 Users can access the PWA by visiting the website on their mobile browser. They are prompted
to install the PWA on their home screen, which allows them to access the website offline and
receive push notifications.
In this example, the news website is the 1st party and the app is a Progressive web app, because it
can be accessed through a web browser and can be installed on the user’s device like a native app.
It also allows users to access the content offline and have a fast and smooth experience.

3. 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,
Here’s an example of a cross-platform application:

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
 Integrates with popular tools such as Google Calendar and Trello
 Has a user-friendly interface that works seamlessly across all platforms
 The application can be downloaded from the company’s website or from different app stores
such as App Store, Google Play Store, Microsoft Store, and Mac App Store, depending on the
platform.
This example illustrates how the company developed a project management tool that can be used
by teams on different platforms, Windows, Mac, iOS and Android, which is a cross-platform
application. It allows teams to collaborate and manage their projects seamlessly, regardless of the
platform they use.

2. Native App

Gomathi N. Page 5

about:blank 5/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

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.

2.1. 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.

Gomathi N. Page 6

about:blank 6/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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

Gomathi N. Page 7

about:blank 7/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

Despite the many wonderful benefits of native apps, they also have some drawbacks
or challenges. Let us see what they are and how they affect native app development.
1. Higher Development Costs
Since you will have 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.
2. 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.
3. 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.
4. 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.
5. 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.

Gomathi N. Page 8

about:blank 8/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

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.
Some SDKs have dedicated IDE included with them, while some don’t. If an SDK
does not include an IDE, developers can download and install any compatible IDE or use a
text editor to write programs.
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.
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.

3. Hybrid application (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

Gomathi N. Page 9

about:blank 9/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

2021 Regulation CCS332 App Development UNIT 1

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:

1. Example #1: Instagram

2. Example #2: Uber

3. Example #3: Gmail

4. Example #4: Evernote

5. Example #5: Twitter

Example #1: Instagram

Instagram is the most popular social media app for sharing images and videos. Going hybrid enables
the app to support tons of media and offline data. The app permits users to access its features and
media, photos, and short videos while also being in the offline mode.

Example #2: Uber

Another great example of hybrid app development in action is the Uber application. With easy
navigation and an intuitive user interface, Uber is easily accessible and convenient, which is why this
hybrid app is probably the most used ridesharing app in the world.

Example #3: Gmail

Previously built using HTML, Google has upgraded to HTML 5 to provide users with new,
advanced features and functionalities, thus enhancing the user experience. This is the perfect
example of combining native and web elements to create a high-performance mobile application.

Gomathi N. Page 10

about:blank 10/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 11/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 12/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 13/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 14/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 15/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 16/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 17/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 18/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 19/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 20/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 21/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 22/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 23/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 24/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 25/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 26/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 27/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 28/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 29/30
Downloaded by Mohamed Natheem L ([email protected])
 lOMoARcPSD|49924226

11/30/23, 3:36 PM CCS332 App development - 2021 Reg

about:blank 30/30
Downloaded by Mohamed Natheem L ([email protected])