App Development
App Development
INTRODUCTION :
COURSE OUTCOMES :
By the end of this course, students will be able to:
Apps have reshaped the manner we engage with the era, providing
convenience, efficiency, and accessibility across numerous domains. Their
significance stems from several key elements:
1
● Economic Impact: The app economic system has emerged as a
widespread driver of financial increase, creating opportunities for
marketers, builders, and businesses alike.
2
● Web Apps: These are accessed through a web browser and do not
require installation.
● Desktop Apps: These are traditional software applications installed
on desktop or laptop computers.
● Hybrid Apps: These combine elements of both native mobile apps
and web apps.
● Enterprise Apps: These are designed for use within organizations to
streamline processes, enhance productivity, and facilitate
communication and collaboration among employees. Examples
include customer relationship management (CRM) systems.
● Augmented Reality (AR) Apps: These apps integrate digital
content into the real-world environment, enhancing users'
perception of reality.
● Virtual Reality (VR) Apps: These apps create immersive virtual
environments that users can interact with using VR headsets. VR
apps are popular in gaming, simulations, training, and
entertainment.
● IoT (Internet of Things) Apps: These apps connect and control IoT
devices such as smart home appliances, wearable devices, and
industrial sensors, allowing users to monitor and manage them
remotely.
3
Features and Characteristics of app
1. Intuitive Interface
2. Personalization
3. Offline Accessibility
4. Security
5. Cross-Platform Compatibility
4
15 Best Apps Everyone Should Use in 2024
● Google Maps
● WhatsApp
● Spotify
● Zoom
● Slack
● Uber
● Instagram
● Amazon Shopping
● YouTube
● LinkedIn
● Dropbox
● Flipboard
● Calm
● Duolingo
● Pinterest
5
2: How Apps Work
After writing the source code files, when developers click the Run
button on the Android studio, plenty of operations and process starts at the
backend. Every operation happening in the background is a crucial step and
are interdependent.
The IDE builds all the application files, make them device compatible
in order to deploy, and assure that the application runs successfully on the
device.
1. Code Compilation
The android application source files are written in either Java(*.java files) or
Kotlin(*.kt files) programming languages.
Syntax of writing the code in these 2 languages are different but their
compilation process is almost the same.
6
Both programming languages generate code that can be compiled to Java
byte-code which is executable on JVM(Java Virtual Machine).
7
byte-code.
Resource files of the android application like images, fonts, XML layouts, etc.
are transformed into a single compiled resource unit by the Android Asset
Packaging Tool(aapt).
The aapt tool is also responsible for creating the [Link] file of an android
application. Further, the compiled resource unit along with the [Link]
file is compressed by the apkbuilder tool and a zip-like file is created that is
termed as Android Package(.apk file).
The generated .apk file contains all necessary data to run the Android
application.
8
4. App Distribution
The certificate is self-signed, and the Android uses it to identify the author of
the application. The app developer/author holds the private key of the
certificate and these all details are stored as an additional file in the android
package(.apk file).
9
Oracle Java Development Kit(JDK) provides the jarsigner tool to sign the .jar
files and .apk files. Further, the compressed parts of the signed .apk file are
required to line up on byte-boundaries in such a manner so that Android OS
can read them without uncompressing the file. The byte alignment of files is
assured by running the signed .apk file through the zipalign tool.
10
To start the deployment, the ADB client will first check whether the ADB
server process is already running on the device.
If there isn’t, the server process starts with the ADB command. The ADB
server starts and binds with local TCP port 5037.
All communication and commands are transferred from the ADB server to
ADB clients using port 5037. Further, the server sets up a connection with all
running devices. It scans all the ports and when the server detects an ADB
daemon(adbd: a background process on emulator or device instance), it set
up a connection to that port.
The adbd process that matches on the android device can communicate with
applications, debug them, and collect their log output.
11
2. Transfer .apk file to the Device
The ADB command transfers the .apk file into the local file system of the
target Android device.
The app location in the device file system is defined by its package name.
Application.
12
After following all these steps and procedures, the application will finally
start and the initial activity of the app will appear on the device screen.
13
● User Behavior: Users tend to be more price-sensitive and prefer free
apps.
14
3: Introduction to App Design
App Design
15
How to Design an App?
1. User Research
2. Wireframing and Prototyping: The second step of the application
design is Wireframes and Prototypes. But what are these
Wireframes? Wireframes are detailed structural sketches that
illustrate a concept. A wireframe for a digital product is similar to a
blueprint for a house. Wireframe clearly illustrates how the product
functions and the core elements of its design.
3. Visual Designing and testing
1. Buttons
Buttons are interactive elements that allow users to perform actions like
submitting forms or navigating to different screens.
16
Example in HTML
html
<button>Click Me</button>
2. Text Fields
Text fields are used for user input, like entering text in forms.
Example in HTML
html
<label for="name">Name:</label>
3. Images
Example in HTML
html
17
Importance of user-friendly design.
18
4: Getting Started with App Development Tools
Introduction to block-based coding platforms like Thinkable or MIT
App Inventor.
Users can drag and drop blocks to design their app's functionality and
interface. MIT App Inventor also supports IoT (Internet of Things)
extensions, enabling users to build apps that interact with physical
devices2.
Thinkable
19
Basic interface walkthrough.
Alright! Let's walk through the basic interfaces of two popular block-based
coding platforms: MIT App Inventor and Scratch (since Thinkable is not
widely recognized, I'll use Scratch for a more common reference). These
platforms are quite similar in terms of how they introduce coding concepts.
Getting Started
1. Sign In:
Go to the MIT App Inventor website and sign in with your
Google account.
2. Create a New Project: Click on "Projects" in the top menu and select
"Start New Project." Give your project a name.
Interface Overview
● Designer View:
This is where you design the user interface of your app.
○ Palette: Contains different UI components like buttons, text
boxes, labels, etc.
○ Viewer: The central area where you drag and drop components
to build your app’s interface.
○ Components: Lists all components currently used in your app.
○ Properties: Allows you to adjust properties (e.g., color, size) of
the selected component.
● Blocks View: This is where you program the behavior of your app.
○ Blocks Palette: Contains all the blocks you can use,
categorized by functions like control, logic, math, etc.
○ Workspace: The area where you drag and connect blocks to
create your app’s logic.
20
○ Backpack: A handy feature to store blocks you might want to
reuse later.
1. Visual Blocks
2. Drag-and-Drop Interface
● User Interaction: Users can drag blocks from a palette and drop
them into a workspace to build their programs.
● No Syntax Errors: This approach eliminates syntax errors, allowing
users to focus on logic and structure.
3. Building Blocks
21
4. Real-Time Feedback
5. Modularity
6. Event-Driven Programming
22
5: Creating a Simple App
Let's walk through the process of building a simple app with a button and a
text field. We'll use HTML, CSS, and a bit of JavaScript to demonstrate this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple App</title>
</head>
<body>
<div class="container">
23
<h1>My Simple App</h1>
<button id="submitButton">Submit</button>
<p id="outputText"></p>
</div>
<script src="[Link]"></script>
</body>
</html>
Open [Link] and add the following code to style your app:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
24
.container {
text-align: center;
padding: 20px;
border-radius: 10px;
input[type="text"] {
width: 80%;
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
border-radius: 5px;
button {
background-color: #4CAF50;
25
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #45a049;
p{
font-size: 1.2em;
color: #333;
Open [Link] and add the following code to handle the button click event:
[Link]('submitButton').addEventListener('click',
function() {
26
var inputText = [Link]('inputText').value;
});
● Open your browser and drag the [Link] file into the browser
window, or right-click the file and select "Open with" followed by your
browser name.
27
6: Adding Images and Sounds
Using images in apps
Using images in apps can greatly enhance the visual appeal and user
experience. Here's a guide to incorporating images into your app with
HTML, CSS, and JavaScript:
28
Step 3: Create the CSS File
Open [Link] and add the following code to style your app:
29
Step 4: Create the JavaScript File
Open [Link] and add the following code to handle image display:
30
Step 2: Create the HTML File
Open [Link] and add the following code to style your app:
31
Step 4: Create the JavaScript File
32
Open [Link] and add the following code to handle the audio playback:
33
7: Interactivity and Logic
Introduction to event-driven programming
1. Events:
○ These are actions or occurrences that happen during the
execution of a program and are handled by the program.
○ Examples include mouse clicks, key presses, sensor signals,
and messages.
2. Event Handlers:
○ Functions or methods that get called in response to specific
events.
○ For example, a function that gets executed when a button is
clicked.
3. Event Loop:
○ A programming construct that waits for and dispatches events
or messages in a program.
○ It continuously checks for events and processes them, making
the program responsive.
34
Using conditional logic (if-else statements) in apps.
Conditional logic, through the use of if-else statements, allows your app to
make decisions and execute different code based on certain conditions.
Let's break down how to use if-else statements with a practical example.
javascript
if (condition) {
} else {
35
8: Working with Data
Introduction to data storage in apps.
1. Local Storage
2. SQLite Database
3. Cloud Storage
36
4. Files
Let's create a simple web application where a user can input their name,
and upon clicking a button, the app will display a greeting using their name.
37
Step 2: CSS Styling
38
Step 3: JavaScript Logic
Create a [Link] file to handle the form submission and store the user
input in a variable:
39
9: Testing and Publishing Apps
2. Physical Devices
3. Cross-Browser Testing
40
4. Responsive Design Testing
5. Automated Testing
Identifying and fixing bugs and optimizing performance are critical for
maintaining a smooth user experience.
1. Bug Tracking
● Tools: Use bug tracking tools like JIRA, Bugzilla, or Trello to log,
track, and manage bugs.
● Reports: Collect user reports and crash logs to identify issues.
2. Debugging
41
3. Code Review
4. Performance Optimization
5. User Feedback
42
1. Preparation
3. App Information
4. Submission Process
● Google Play:
○ Upload your APK/AAB file to the Google Play Console.
○ Complete the app details, including pricing, distribution, and
content rating.
○ Submit the app for review.
● Apple App Store:
○ Use Xcode to archive and upload your app to App Store
Connect.
○ Complete the app information and set up app store metadata.
○ Submit the app for review.
5. App Review
43
● Review Process: Both app stores have a review process where your
app is evaluated for compliance with guidelines and quality
standards.
● Approval or Rejection: Upon approval, your app is published. If
rejected, review the feedback, make necessary changes, and
resubmit.
6. Post-Publishing
44
10: App Development Project and Showcase
Topics:
→ Activity: Present your app to the class and explain its features.
45