21IT1902 App Development

UNIT - I

FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT

Basics of Web and Mobile application development, Native App, Hybrid App, Cross
platform App, What is Progressive Web App, Responsive Web design,

1. Define web application.

A web-application is an application program that is usually stored on a
remote server, and users can access it through the use of Software known as web-
browser.
It is a type of computer program that usually runs with the help of a web browser
and also uses many web technologies to perform various tasks on the internet.
2. Explain the flow of web application.

3. List the benefits of web application

Runs on any OS: It’s programmed to run on any OS . It must appropriately adapt to
iOS, Android, and Windows Phone — amongst other operating systems.
Runs using easy URL: These apps run on the device’s own browser through an easy
URL.
Need not be downloaded: They don’t got to be downloaded and installed from app
stores like Google Play or Apple’s App Store. This translates into money-saving
since having an immediate link through an internet app is free.
Need not be updated like apps: They may also open websites. This suggests that
they don’t require to be updated within the way common apps do.
Cost Efficient: The most important benefit you’ll draw faraway from its price. Web
app development is that the cheaper quiet app development. It consists of making a
link or several links between the appliance and an URL. Developing a native app or
an interpreted app entails a better cost but its chances to succeed are far greater.
4. Define Mobile App development.
 The process of developing software applications for mobile platforms, such
as smartphones, tablets, or digital assistants, is referred to as mobile app
development. This calls for the use of tools and programming languages created
especially for mobile platforms, such as Swift for iOS and Java for Android.
5. List the ways to develop Mobile App.
 1st Party Native App development
 Progressive web Application
 Cross-Platform Application
6. Define Native APP.
Native applications are the applications of smartphones that are specifically designed
for mobile operating system. For instance, Swift for iOS, Java and Kotlin for
Android.
7. Define Hybrid app.

Hybrid applications are the combination of both native applications and web
applications. Hybrid apps run offline on the devices. Hybrid apps are written by using
the web technologies like HTML5 and CSS.

8. Compare Native app and Hybrid app

On the basis Native App Hybrid App

of

Installation Native applications require installation. These apps don't require

installation.

Maintenance They require high maintenance. They require less maintenance.

Time and cost A large amount of budget is required to develop a Hybrid apps are cheaper, or we
native application that will be compatible with can say cost-effective, as they
multiple platforms (such as iOS and Android). require less development time.

Codebase They have multiple codebases. They have a single codebase.

User They provide the best user experience. Hybrid apps don't have a good
experience user experience.

Languages The languages used in native apps are Java, Swift, The languages used in Hybrid
used Kotlin. apps are JavaScript, HTML, CSS.

Platform These applications are particularly developed for Hybrid apps can work on various
Dependent one platform. platforms. It means that they can
operate on both iOS and Android.
 9. What is cross platform App?.
A cross-platform computer product or system is a product or system that can
work across multiple types of platforms or operating environments. Different kinds
of cross-platform systems include both hardware and software systems, as well as
systems that involve separate builds for each platform, as well as other broader
systems that are designed to work the same way across multiple platforms.
10. Define Progressive web apps
A progressive web app (PWA) is an app that's built using web platform
technologies, but that provides a user experience like that of a platform-specific app.
11. What Is Responsive Web Design?
Responsive web design is an approach to web development that aims to
create websites that adapt and respond to the user's device and screen size. It
involves designing and building sites to ensure optimal viewing and user experience
(UX) across various devices, from desktop computers to smartphones and tablets.
12. Why you should include responsive design in your website?
 Improved UX.
 SEO benefits
 Cost-Effectiveness.
 Futureproofing
 Social sharing
13. How To Design A Responsive Website in Eight Steps.
 Use HTML + CSS
 Define Media Queries Ranges
 Position Layout Elements
 Incorporate Responsive Image
 Insert Responsive Typography
 Check Website Speed
 Test Responsiveness
 Test The Website Manually on Different Devices

PART B

1. Design the web app for hospital management with necessary items.
2. A retail company wants to improve the in-store shopping experience for its
customers. Design it by using native app.
3. A news website wants to provide its users with a better mobile experience. develop a
Progressive Web App for that user.
4. Develop a cross [platform application for the given scenario.A project management
company wants to create a project management tool that can be used by teams on
different platforms.
 5. List the simulators and emulators in mobile application.
6. Tabulate the difference between simulators & emulators.

UNIT - II NATIVE APP DEVELOPMENT USING JAVA

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

PART A
1. What is React Native?
React Native is a JavaScript framework used for developing a real, native mobile
application for iOS and Android. It uses only JavaScript to build a mobile application. It
is like React, which uses native component rather than using web components as
building blocks.
2. List the advantage of reactive native app.
Cross-Platform Usage: Provide facility of "Learn once write everywhere", it works
for both platform Android as well iOS devices.
Class Performance: The code written in React Native are compiled into native
code, which enables it for both operating systems as well as it functions in the same
way on both the platforms.
JavaScript: The JavaScript knowledge is used to build native mobile apps.
Community: The large community of React and React Native around helps us to
find any answer we require.
Hot Reloading: Making a few changes in the code of your app will be immediately
visible during development. If business logic is changed, its reflection is live
reloaded on screen.
3. List the benefits of native app
 Speed: Native apps are designed specifically for platforms, so they work
faster.
 Availability: Users can easily find native apps from App Store or Play Store.
 Internet Requirement: Internet is not a must in native apps.
 Image Quality: Native apps offer better image quality with their progressive
resolution and orientation.
 User Friendliness: Native apps provide a recognizable look and feel.
4. Idea to design native app

5. List some popular tools for developing native apps

Android (Java/Kotlin):
Android Studio: The official IDE for Android app development. It supports both
Java and Kotlin, offering a rich set of tools for designing, coding, testing, and
debugging.
iOS (Swift/Objective-C):
Xcode: Apple's official IDE for iOS development. It supports both Swift and
Objective-C and provides a comprehensive set of tools for building iOS, macOS,
watchOS, and tvOS apps.
Cross-Platform (using Native Technologies):
React Native: Developed by Facebook, React Native enables building mobile apps
using React and JavaScript. It allows developers to use a single codebase for both
iOS and Android.
Flutter: Created by Google, Flutter uses Dart programming language and offers a
reactive framework for building natively compiled applications for mobile, web, and
desktop from a single codebase.
6. Give the Pros and cons of Native app
 7. Define Mobile App development Framework.
Mobile App Development Framework is a library that offers the required
fundamental structure to create mobile applications for a specific environment. In short, it
acts as a layout to support mobile app development. There are various advantages of
Mobile App Development frameworks such as cost-effectiveness, efficiency, and many
more
8. What is Kotlin and Why Do We Use it?
It’s an open-source, statically typed, (where variable types are known at compile
time) built by Jetbrains (team of Czech Dev Company) for their in-house purpose in 2010
but later in 2016, it went public for general and created a gap with full compatibility and
interoperability with Java. Besides this, it also offers similar syntax and concepts from C#,
Java, Scala, etc., and is officially supported by Google.
9. Define swift in ios.
Swift is based on modern programming practices and has shorter syntax and
easier readability than older languages like Objective-C2. Swift is available in the most
recent versions of Xcode and can be used to build apps from iOS 7
10. What is JSX?
JSX stands for JavaScript XML. It's an extension of the JavaScript language
based on ES6. It's translated into regular JavaScript at runtime.
JSX allows us to write HTML in React which makes the process of writing
HTML in your React apps much easier.
11. Why use JSX?
JSX is not mandatory. It is totally up to you whether to use plain HTML or JSX. But the
code blocks I'll share below will clarify the difference between plain HTML and JSX and
which one is preferable.
12. List Jsx Rules.
JSX Rules
There are few rules to keep it mind while working with JSX:
 A React component name must be capitalized. Component names that do not begin with a
capital letter are treated like built-in components.
JSX allows you to return only one element from a given component. This is known as a
parent element.
13. What are Components in React?
Components are independent and reusable blocks of code which work in isolation.
The main advantage of components is that they help reduce redundancy.
PART B
1. Explain the Scenarios to create Native App with example
2. Create a Popular Native App Development Frameworks using Java & Kotlin.
3. Explain the basics of Basics of React Native, Native Components, JSX, State, Props.
4. Explain the tools for creating native app.

UNIT - III HYBRID APP DEVELOPMENT

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.

PART A

1. What is Hybrid App Development?

Hybrid app development is a modern approach to building mobile
applications that combines elements of both native and web development.
In simple terms, a hybrid app is essentially a web app wrapped in a native
shell, allowing it to be deployed and run on multiple platforms, such as iOS and
Android.
2. List the example of hybrid app development.
Instagram: Instagram, a widely used social media platform, started as a native app
but eventually transitioned to a hybrid app using the React Native framework. This
allowed them to maintain a consistent user experience across iOS and Android
platforms while sharing a significant portion of the codebase.
Airbnb: Airbnb, a popular accommodation booking platform, also adopted hybrid
app development using React Native. By leveraging this approach, they were able to
streamline their development process, deliver a consistent experience to their users,
and efficiently maintain their app across multiple platforms.
Untappd: Untappd, a beer-tracking and social networking app, is built using the
Ionic framework, which is a popular choice for hybrid app development. This allows
them to have a single codebase for both iOS and Android platforms, reducing
development time and effort.
3. List the key features of Native, hybrid and web app
4. List the advantage of hybrid app development.
 Cross-platform compatibility:
 Cost-effective development
 Faster development cycle:
 Access to device features:
 Seamless updates and maintenance
 Offline functionality:

5. List Disadvantages of Hybrid Application Development.

 Limited performance
 Restricted access to device capabilities
 Dependency on framework updates:
 Limited customization options
 Debugging and troubleshooting complexities
 Reliance on internet connectivity

6. List of hybrid mobile application development frameworks with their pros and
cons.
The list includes:
Flutter- Holds a Market Share of 42%
React Native- Lets you Reuse Code up to 90%
Cordova- Ensures Faster Development with Simplified Coding Practices
Ionic- Experience Quicker Prototyping of the App
Xamarin- Provides Low & Affordable Maintenance
Unity- Eases Development of Immersive Animations
Native Script- Offers Native Look & Feel to the Developed App
 7. Pros of using Flutter Development Framework
 Growing Popularity
 High Performance
 Mild Learning Curve
 Facilitates Fantastic UI designs
 Saves Money and Time
 Powerful Community support
8. Define Ionic.
Ionic is a renowned open-source mobile development framework that uses HTML5
and CSS3 to create cross-platform apps. Because Ionic allows you to use standard web
technologies, they have a massive community of open source developers with access to
many plugins and building blocks.
9. Pros of using Ionic Development Framework
 Quick Development
 Faster Time To Market
 Multi-browser support
 A Plethora of UI Components
 Developer-friendly
10. Cons of using Ionic Development Framework
 Not suitable for apps with heavy graphics.
 Unfriendly live-reloading feature.
PART B
1. Explain Hybrid Web App, Benefits of Hybrid App, Criteria for creating Native App
with example.
2. Create Hybrid App for real time application.
3. Explain the frameworks, Ionic, Apache Cordova in detail with example.
4. Explain the tools of hybrid app.

UNIT -IV CROSS-PLATFORM APP DEVELOPMENT USING REACTNATIVE

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-
platformApp, Popular Cross- platform App Development Frameworks, Flutter,
Xamarin, React-Native, Basics of React Native, Native Components, JSX, State, Props

PART A

1. List the two frameworks in cross platform Archtiecture?

 1. RIB
2. VIPER
2. List the best languages for cross-platform app development.

 Swift
 C#
 Java
 JavaScript and TypeScript
 Kotlin
 Dart
 Objective-C
3. Give Examples for Cross-Platform Apps

 Instagram
 Facebook Ads Manager
 Storyo
 Skype
 Wix
 The New York Times
 Adobe Flash player
 Skulls of the Shogun
 CitiBank Network Direct
4. Difference between Native vs. cross-platform development.
Native App Cross-Platform App

Source code cannot be shared across Source code can be shared across
platforms. platforms.
Mobile app is created to run only on a Mobile app is created to run only on
specific mobile OS. multiple mobile OS.
Used when Used when
 no rush to market app.  target audiences on different
 no budget constraint. platforms at the same time.
 future-proof investment.  limited budget.
 business obliges to serve the audience  satisfactory app performance.
well.
Only Native Application. Native with web application.
Tools Tools
For iOS: XCode, AppCode, Atom.
Flutter, React Native, Xamarin.
For Android: Android Studio, Android IDE,
IntelliJ IDEA.
App examples: GPS, Pinterest, SwiftKey, App examples: Facebook Ads Manager,
any preset apps in iOS. Zipcar.

5.List the Benefits of cross-platform development.

 High performance

 Cost-effective and fast development

 Native look and feel

 Reduced development cost

 Maximum exposure to the target audience

 Easier maintenance & deployment
 Quicker development process
 Reusable code

6. List the tools creating Cross-platform App and programming languages support for
it.

Name Programming language

React Native Javascript

Flutter Dart
Xamerin C# and native libraries
Ionic HTML, CSS, and JavaScript

Sencha JavaScript

7. How to develop cross-platform mobile apps?

 Define your concept & objectives
 Create and test prototypes
 Choose your development path
 Develop your cross-platform app
 Launch your mobile app
8. How do you choose the right cross-platform app development framework for
your project?
 The expertise of your team
 Vendor reliability and support
 UI customization
 Framework maturity
 Consistency between different platforms
 Security
 Educational materials

9. Future of cross-platform app development

 Artificial intelligence (AI)

 Cloud technologies:
 Low-code and no-code platforms
 Internet of Things (IoT
10. What is JSX?
JSX is an extension to the JavaScript language that adds a new kind of expression,
the JSX expression, used to create React elements.

11.How to write the expression concatenate two names in JSX?

function formatName(user) {

return user.firstName + ' ' + user.lastName;

const user = {

firstName: 'John',

lastName: 'Peter'

};

const element = (

<h1>

Hello, {formatName(user)}!

</h1>

);
12. Give the Name of Apps made with Xamarine cross-platform app framework
 Fox Sports
 Alaska Airlines
 HCL
 American Cancer Society
 BBC Good Food.
 UPS
 Academy Members (Academy of Motion Picture Arts and Sciences).

13. What is the tool supported to develop a Facebook app ?

Facebook announced that React Native cross platform is open and available on
GitHub. Facebook develops the React Native in 2013 for their internal
project Hackathon. Later on, it was released publically in January 2015 as React.js,
and in March 2015,

PART B
1. Illustrate the Criteria for creating Cross-platform App.
2. Differentiate Native vs Hybrid vs Cross-Platform.
3. Compare tools used in Cross-Platform APP.
4. Explain the installation steps of React Native.
5. Discuss about the Flutter Architecture in detail.
6. How to install Android Studio in windows
7. Write down the steps to create simple Hello world App in Xamerin.
UNIT -V NON-FUNCTIONAL CHARACTERISTICS OF APP
FRAMEWORKS

Comparison of different App frameworks, Build Performance, App Performance,

Debugging capabilities, Time to Market, Maintainability, Ease of Development,
UI/UX, Reusability
PART A

1. Give real time App developed with Flutter?

 Alibaba
 Google
 Google Ads
 Tencent
 eBay Motors
 Hamilton BMW
2. Difference between React Native and Flutter?

Concept React Native Flutter

ProgrammingLang JavaScript Dart language
uage
Architecture React Native uses Flux and Flutter uses Business Logic
Redux architecture. Flux Component (BLoC)
created by Facebook, architecture.
whereas Redux is the
preferred choice among the
community.
User Interface It uses native UI controllers It uses custom widgets to
to create UI of the app. build the UI of the app.
Documentation React native documentation Flutter documentation is
is user-friendly but good, organize, and more
disorganized. informative. We can get
everything that we want to be
written in one place.
Testing React Native uses third- Flutter provides a very rich
party tools that are available set of testing features. This
for testing the app. feature allows the developer
to perform unit testing,
integration testing, and
widget testing.
Community It has very strong It has less community support
Support community support where as compared to React Native.
the questions and issues can
be solved quickly.
Hot Reload Supported Supported
Industry Adoption Facebook,Instagram GoogleAds,Hamilton
LinkedIn,Skype Reflectly, Xianyu

3. State Flutter.
Flutter, developed by Google, is a UI toolkit to build native applications for
mobile apps, desktop & web platforms. Flutter is a cross-platform mobile app
development framework that works on one code base to develop Android as well as
iOS applications.
4. What is Mobile Angular UI?
Mobile Angular UI is an open-source mobile application development
framework that merges the implementation of the Bootstrap and Angular
frameworks. The framework offers various UI components such as overlays,
switches, sidebars, nav bars, scrollable areas, etc.
5. Mobile app performance KPIs to measure app quality

 App downloads
 App rating & reviews
 . Active users of the app
 Average visit time
 Average session interval
 App retention
 App churn rate
6. List the metrics of app performance
 Response Time/Latency:
 Load Time
 Error Rates
 Resource Utilization:
 Concurrency:
 Scalability
 User Satisfaction
7. List the functional aspects of debugging capabilities.
 Performance Profiling Tools:
 Logging and Monitoring:
 A/B Testing
 Load Testing:
 Continuous Integration/Continuous Deployment (CI/CD)
8. Compare UX vs UI designers.

9. What is Reusability in app framework ?

 Reusability in the context of app frameworks refers to the ability to use and apply
components, modules, or code snippets across different parts of an application or even in
entirely different projects. It's a fundamental principle in software development that aims
to maximize efficiency, maintainability, and consistency by avoiding redundant work
and promoting the use of existing, proven solutions.

10. Define easy development in app framework.

A framework, or software framework, is a platform that provides a
foundation for developing software applications. Think of it as a template of a
working program that can be selectively modified by adding code. It uses shared
resources – such as libraries, image files, and reference documents – and puts them
together in one package. That package can be modified to suit the specific needs of
the project. With a framework, the developer can add or replace features to give new
functionality to the application.
PART-B

1. Differentiate Xamarin, React Native and Flutter framework.

2. Comparison of different App frameworks with Pros and cons.
3. Explain ways to improve the app performance in detail.
4. Write down the steps to debug in android.
5. Explain ways to reduce time to market in product development.
6. Describe the importance of application maintainability.
7. Explain the rules to design good UI and UX.
8. Differentiate UI and UX.