APP DEVELOPMENT Unit 1 Notes
APP DEVELOPMENT Unit 1 Notes
UNIT I
Basics of Web and Mobile application development, Native App, Hybrid App, Cross-platform App,
A web application is a software program that runs on a web server and is accessed via a web browser
over the internet.
Unlike traditional desktop applications, web applications do not require installation on local devices.
Static Web Applications: Simple HTML and CSS-based pages with no dynamic content.
Dynamic Web Applications: Use a combination of frontend and backend technologies to generate
content dynamically (e.g., social media platforms).
Single-Page Applications (SPA): Load a single HTML page and dynamically update content using
JavaScript (e.g., Gmail, Facebook).
Multi-Page Applications (MPA): Traditional websites where each new request loads a new HTML page.
Progressive Web Applications (PWA): Hybrid between web and mobile applications, offering offline
functionality and app-like experience.
Programming Languages
Python (Django, Flask), JavaScript (Node.js), PHP, Java (Spring Boot), Ruby on Rails, etc.
Databases
Web Servers
Client-Server Architecture
Client: User’s browser (Google Chrome, Mozilla Firefox) sends requests.
Server: Backend server processes requests and sends responses.
Database: Stores and retrieves data as needed.
Request-Response Cycle
User makes a request (e.g., submitting a login form).
The request is sent to the web server via HTTP/HTTPS.
The server processes the request (e.g., checks credentials in the database).
The server responds with HTML, JSON, or another data format.
The client renders the response and updates the UI.
HTTP vs. HTTPS
HTTP (HyperText Transfer Protocol): Standard for transferring web content.
HTTPS (Secure HTTP): Encrypted version of HTTP using SSL/TLS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function showMessage() {
</script>
</body>
</html>
Use AJAX (Asynchronous JavaScript and XML) or Fetch API to make API calls from the frontend to the
backend.
Key Takeaways:
Next Steps:
What is an App?
Types of Apps
Native Apps – Built for a specific platform (e.g., Android using Java/Kotlin, iOS using Swift).
Web Apps – Accessed through browsers (e.g., Progressive Web Apps, responsive websites).
Hybrid Apps – Built using web technologies but run as native apps (e.g., using React Native,
Flutter).
Cross-Platform Apps – Single codebase, works on multiple platforms (e.g., Flutter, React Native).
What is Backend?
Databases:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="20dp">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:onClick="showMessage"/>
</LinearLayout>
package com.example.myfirstapp
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
Key Takeaways
✔ Android apps can be built using Java/Kotlin, and iOS apps using Swift.
Next Steps
Learn about Firebase Authentication & Cloud Firestore for real-time databases.
Build a small To-Do List App with user login.
Explore Flutter and React Native for cross-platform app development.
1. Native Apps
Definition:
A Native App is a mobile application developed specifically for one operating system (iOS or Android)
using platform-specific languages and frameworks.
Key Features:
✔ Fast and highly responsive due to direct access to device hardware (camera, GPS, etc.)
Advantages:
Disadvantages:
Examples:
2. Hybrid Apps
Definition:
A Hybrid App is a mix of Native and Web technologies, built using web-based frameworks but wrapped
in a native shell.
How It Works?
Advantages:
Disadvantages:
Examples:
3. Cross-Platform Apps
Definition:
A Cross-Platform App is written once and runs natively on both Android and iOS, without using
WebView.
Advantages:
Disadvantages:
Examples:
Definition:
A Progressive Web App (PWA) is a web application that behaves like a mobile app and can be installed
on a device without using an app store.
Key Features:
✔ Can be installed like an app without downloading from Play Store/App Store
Advantages:
Disadvantages:
❌ Limited Access to Device Features – Can’t access Bluetooth, Contacts, or certain native APIs
Examples:
Definition:
Responsive Web Design (RWD) ensures that a website adjusts its layout automatically across different
screen sizes (mobile, tablet, desktop).
✔ Flexible Grid Layouts – Uses CSS Grid & Flexbox for adaptive design
Advantages:
✅ One Website for All Devices – No need for separate mobile sites
✅ Better SEO Ranking – Google prefers mobile-friendly sites
Disadvantages:
❌ Performance Issues – Large images and media can slow down loading on mobile
Examples:
Conclusion: