Mobile App Project: Design, Development & Deployment

TAKEAWAYS:

• A mobile app project follows a structured lifecycle from requirement analysis to post-launch updates, mirroring agile methodologies used by Daraz and Pathao.
• Prototyping (wireframing, mockups) and UI/UX design (Figma, Android Studio’s Layout Editor) are critical for user engagement, just as Pathao’s route optimization relies on intuitive navigation.
• Version control (Git, GitHub) and CI/CD pipelines automate testing and deployment, a practice adopted by eSewa for seamless transaction updates.
• Debugging tools (Logcat, Android Studio Profiler) and performance optimization (reducing app size, lazy loading) are essential for apps like Ncell’s mobile banking, where speed and reliability are non-negotiable.
• App Store Optimization (ASO) and user feedback loops (Google Play Console, App Store Connect) directly impact downloads, as seen in Daraz’s seasonal sales app success.
• Security best practices (OAuth, encryption, data anonymization) protect user data, critical for apps handling financial transactions like Khalti or NEPSE’s trading apps.

1. Mobile App Project Lifecycle

A mobile app project is not just about writing code—it’s a structured lifecycle from ideation to maintenance. This mirrors how Pathao evolved from a simple ride-hailing app to a logistics and delivery platform. Below is the lifecycle with key phases:

flowchart TD
    A["1. Requirement Analysis"] --> B["2. Planning & Prototyping"]
    B --> C["3. UI/UX Design"]
    C --> D["4. Development"]
    D --> E["5. Testing & Debugging"]
    E --> F["6. Deployment"]
    F --> G["7. Maintenance & Updates"]
    G -->|"Feedback Loop"| A

1.1 Requirement Analysis

What it is: Gathering and documenting user needs, features, and constraints. For example, Daraz started with a simple e-commerce wishlist but later added live shopping, AR try-ons, and same-day delivery—all driven by user demand.

How it works:

• Stakeholder interviews: Talk to users, developers, and business teams.
• Use case analysis: Define who interacts with the app (e.g., customers, drivers for Pathao).
• Feasibility study: Assess technical and financial viability (e.g., can Ncell’s mobile banking support offline transactions?).

Worked Example: Suppose you’re building a Nepali recipe app like Khana Khazana. Your requirements might include:

• User profiles with saved recipes.
• Search and filter by cuisine (Dal Bhat, Thakali, etc.).
• Offline access for rural users.

Visual:

┌─────────────┐       ┌─────────────┐       ┌─────────────┐
│   User      │       │  Recipe    │       │   System    │
│ (Customer)  │──────▶│   Database │◀──────│ (Backend)   │
└─────────────┘       └─────────────┘       └─────────────┘

Key Actions:

• User searches for "Dal Bhat recipes" → System fetches results → User saves a recipe.

1.2 Planning & Prototyping

What it is: Defining the project scope, timeline, and creating a wireframe or mockup to visualize the app.

Tools:

• Figma or Adobe XD for UI mockups.
• Android Studio’s Layout Editor for Android prototypes.
• User stories: "As a driver, I want to see real-time traffic updates so I can avoid delays."

Worked Example: For Pathao’s driver app, the prototype would include:

1. A map view with live traffic data.
2. A button to accept/reject ride requests.
3. A chat feature for passenger-driver communication.

Visual:

┌───────────────────────────────────────────────────────┐
│ [Map] [Traffic: High] [Accept] [Decline] [Chat]      │
│ ┌─────────────┐ ┌─────────────┐ ┌───────────────────┐ │
│ │ Passenger   │ │ $12.50      │ │ "Hello! Where are  │ │
│ │ Name: Ravi  │ │ Fare:      │ │ you from?"        │ │
│ └─────────────┘ └─────────────┘ └───────────────────┘ │
└───────────────────────────────────────────────────────┘

Prototyping Tips:

• Use low-fidelity prototypes (sketches) first, then refine with high-fidelity tools.
• Test prototypes with real users (e.g., ask friends to navigate your Daraz-like app).

2. UI/UX Design Principles

What it is: Designing an app that is intuitive, visually appealing, and functional. Poor UX (like a confusing Khalti payment flow) leads to user abandonment.

Key Principles:

Worked Example: Before: A banking app where users had to navigate 5 screens to check their balance. After: Ncell’s app with a floating action button (FAB) for quick balance checks.

Visual:

BEFORE:
┌───────────────────────────────────────────────────────┐
│ [Home] [Transactions] [Loans] [Pay Bills] [Balance]   │
│ ┌─────────────────────────────────────────────────┐ │
│ │ [Last 10 Transactions] [Transfer Money] [Top Up]│ │
│ └─────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────┘

AFTER:
┌───────────────────────────────────────────────────────┐
│ [💰 Balance: ₹12,500] [📊 Transactions] [🔄 Transfer]   │
│ ┌─────────────────────────────────────────────────┐ │
│ │ [🔄 Quick Transfer] [💳 Add Card] [📱 Mobile Top Up]│ │
│ └─────────────────────────────────────────────────┘ │
│ ▼ (FAB) [Balance]                                   │
└───────────────────────────────────────────────────────┘

Tools for UI/UX:

• Android Studio Layout Editor: Drag-and-drop UI design.
• Figma/Adobe XD: Collaborative prototyping.
• Google’s Material Design: Guidelines for Android apps.

3. Development Phase

What it is: Writing the actual code using Android Studio (Kotlin/Java) or Xcode (Swift). For this unit, we focus on Android.

3.1 Setting Up the Project

1. Create a new project in Android Studio:
   • Choose Empty Activity for a basic app.
   • Select Kotlin as the language (recommended for TU exams).
2. Add dependencies (e.g., for Retrofit API calls, Room database).

Example Project Structure:

MyRecipeApp/
├── app/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/myrecipeapp/
│   │   │   │   ├── MainActivity.kt
│   │   │   │   ├── RecipeModel.kt
│   │   │   │   └── RecipeDatabase.kt
│   │   │   ├── res/
│   │   │   │   ├── layout/activity_main.xml
│   │   │   │   └── values/colors.xml
│   │   │   └── AndroidManifest.xml

3.2 Writing Code: A Simple Recipe App

Goal: Display a list of recipes from a database.

Step 1: Define the Data Model

// RecipeModel.kt
data class Recipe(
    val id: Int,
    val title: String,
    val ingredients: List<String>,
    val instructions: String
)

Step 2: Create a Database (Room)

// RecipeDatabase.kt
@Database(entities = [Recipe::class], version = 1)
abstract class RecipeDatabase : RoomDatabase() {
    abstract fun recipeDao(): RecipeDao
}

interface RecipeDao {
    @Insert
    suspend fun insert(recipe: Recipe)

    @Query("SELECT * FROM Recipe")
    fun getAllRecipes(): Flow<List<Recipe>>
}

Step 3: Set Up the Activity

// MainActivity.kt
class MainActivity : AppCompatActivity() {
    private lateinit var db: RecipeDatabase

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Initialize database
        db = Room.databaseBuilder(
            applicationContext,
            RecipeDatabase::class.java, "recipe-db"
        ).build()

        // Insert sample data
        lifecycleScope.launch {
            db.recipeDao().insert(Recipe(1, "Dal Bhat", listOf("Rice", "Dal"), "Cook dal and rice separately."))
        }
    }
}

Step 4: Display Data in a List Use RecyclerView to show recipes dynamically (covered in Unit 6, but here’s a snippet):

// In MainActivity.kt
val adapter = RecipeAdapter()
recyclerView.adapter = adapter

// Fetch and update the list
lifecycleScope.launch {
    db.recipeDao().getAllRecipes().collect { recipes ->
        adapter.submitList(recipes)
    }
}

Visual: Database Insertion Trace

┌───────────────────────────────────────────────────────┐
│ Table: Recipe                                      │
├───────────┬─────────────┬───────────────────────────┬───┐
│   id      │   title     │   ingredients             │ ...│
├───────────┼─────────────┼───────────────────────────┼───┤
│ 1         │ Dal Bhat    │ [Rice, Dal]              │ ...│
└───────────┴─────────────┴───────────────────────────┘───┘

3.3 Version Control with Git

Why? To track changes and collaborate (like how eSewa updates its payment system without breaking existing features).

Key Commands:

git init               # Initialize repo
git add .              # Stage changes
git commit -m "Add Dal Bhat recipe"  # Commit
git branch -M main      # Rename default branch
git remote add origin https://github.com/your-repo.git
git push -u origin main

Visual: Git Workflow

flowchart TD
    A["1. Write Code"] --> B["2. git add ."]
    B --> C["3. git commit -m 'message'"]
    C --> D["4. git push origin main"]
    D --> E["5. Pull Request / Merge"]
    E --> A

4. Testing & Debugging

What it is: Ensuring the app works as intended and fixing bugs. Pathao’s app undergoes rigorous testing to handle traffic spikes during festivals.

4.1 Types of Testing

Worked Example: Unit Test for Recipe Calculation Suppose you have a function to calculate cooking time:

// RecipeUtils.kt
fun calculateCookingTime(ingredients: List<String>): Int {
    return ingredients.size * 5 // 5 minutes per ingredient
}

Test Case:

// RecipeUtilsTest.kt
@Test
fun calculateCookingTime_shouldReturnCorrectTime() {
    val ingredients = listOf("Rice", "Dal", "Ghee")
    assertEquals(15, calculateCookingTime(ingredients))
}

Visual: Test Execution Flow

flowchart TD
    A["Test Case: 3 ingredients"] --> B["calculateCookingTime(ingredients)"]
    B --> C["Returns 15 (ms)"]
    C --> D["Assertion: assertEquals(15, result)"]
    D --> E["Test Passed"]

4.2 Debugging Tools

• Logcat: View runtime logs (e.g., Log.d("MainActivity", "Recipe loaded")).
• Android Studio Profiler: Identify memory leaks (critical for apps like Ncell’s mobile banking).
• Firebase Crashlytics: Monitor crashes in production.

Example Logcat Output:

D/MainActivity: Recipe loaded: Dal Bhat
E/RecipeDao: Failed to insert recipe: java.sql.SQLException

5. Deployment

What it is: Making the app available to users via Google Play Store or Apple App Store.

5.1 Preparing for Release

1. Generate a signed APK/AAB:
   • In Android Studio: Build > Generate Signed Bundle / APK.
   • Choose V1 (JAR signing) or V2 (Android App Bundle).
2. Create a Play Console account (for Google Play) or Apple Developer account (for App Store).
3. Fill in metadata:
   • App name, description, icons, screenshots.
   • For Daraz’s seasonal app, highlight features like "Flash Sales" in the description.

Visual: APK Signing Steps

5.2 App Store Optimization (ASO)

What it is: Improving visibility in app stores. Pathao uses ASO to rank higher for keywords like "ride sharing Kathmandu."

Key ASO Strategies:

Worked Example: Before ASO: "MyRecipeApp" with no keywords → 100 downloads. After ASO: "Dal Bhat Recipes: Authentic Nepali Cooking" + screenshots of Dal Bhat → 5,000 downloads.

6. Maintenance & Updates

What it is: Fixing bugs, adding features, and improving performance post-launch. eSewa releases weekly updates to add new payment methods (e.g., UPI integration).

6.1 Types of Updates

Worked Example: Update for Daraz’s "Same-Day Delivery" Feature:

1. Plan: Add a "Same-Day" filter in the search bar.
2. Code: Modify the backend API to return same-day orders.
3. Test: Verify on 100 devices.
4. Deploy: Release via Play Console with a promotional banner.

Visual: Update Release Timeline

gantt
    title Daraz: Same-Day Delivery Update
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements :a1, 2023-10-01, 3d
    section Development
    Backend API :a2, after a1, 5d
    Frontend UI  :a3, after a2, 3d
    section Testing
    QA Testing   :a4, after a3, 2d
    section Deployment
    Beta Release :a5, after a4, 1d
    Live Release: a6, after a5, 1d

7. Real-World Examples

1. Pathao: Ride Optimization with Real-Time Data

• Idea Used: Maps API (Google Maps) + Dijkstra’s Algorithm for route optimization.
• How:
  • Pathao’s backend calculates the fastest route using real-time traffic data.
  • Drivers see optimized paths, reducing fuel costs and delivery time.
• Worked Example: Suppose a driver is at Thapathali and a passenger requests a ride to Garden. Pathao’s algorithm compares:
  • Route 1: Thapathali → New Road → Garden (30 mins, 5 km).
  • Route 2: Thapathali → Ring Road → Garden (25 mins, 6 km, but heavy traffic).
  • Selected Route: Route 1 (faster despite longer distance).

Visual: Dijkstra’s Algorithm for Pathao

Start: Thapathali
Nodes: A (New Road), B (Ring Road), C (Garden)
Edges: Thapathali→A (30m), A→C (5m), Thapathali→B (25m), B→C (10m)
Selected Path: Thapathali → A → C (35m total)

2. Khalti: Secure Payments with OAuth

• Idea Used: OAuth 2.0 for secure third-party logins (e.g., login with Facebook/Google).
• How:
  • Users can log into Khalti using their Facebook account without sharing passwords.
  • Khalti’s backend verifies the token with Facebook’s API.
• Worked Example:
  1. User clicks "Login with Facebook" in Khalti.
  2. Khalti redirects to Facebook’s login page.
  3. Facebook returns an access token to Khalti.
  4. Khalti validates the token and grants access.

Visual: OAuth Flow for Khalti

sequenceDiagram
    participant User
    participant Khalti
    participant Facebook

    User->>Khalti: Click "Login with Facebook"
    Khalti->>Facebook: Redirect to Facebook login
    Facebook->>User: User logs in
    User->>Facebook: Approves access
    Facebook->>Khalti: Returns access token
    Khalti->>Khalti: Verify token
    Khalti->>User: Grant access

3. NEPSE Trading App: Real-Time Data with WebSockets

• Idea Used: WebSockets for live stock market updates.
• How:
  • Instead of polling the server every second (slow), the app uses WebSockets to receive real-time data.
  • Example: When the stock price of Ncell changes, the app updates instantly.
• Worked Example:
  • At 10:00 AM, Ncell’s stock price is ₹120.
  • At 10:00:01 AM, the price drops to ₹119.
  • The WebSocket connection pushes this update to all connected NEPSE trading apps without waiting for a request.

Visual: WebSocket vs Polling

WebSocket:
┌─────────────┐       ┌─────────────┐
│   Server    │◄─────▶│   Client    │
│ (NEPSE)     │       │ (Trading App)│
│ Price: ₹119 │◀─────▶│ Displays: ₹119│
└─────────────┘       └─────────────┘

Polling:
┌─────────────┐       ┌─────────────┐
│   Server    │       │   Client    │
│ (NEPSE)     │──────▶│   Client    │
│ Price: ₹119 │       │ Sends request│
│             │◀──────▶│ Receives: ₹119│
└─────────────┘       └─────────────┘

In the Real World

1. Pathao’s Driver App:

   • Uses Geofencing (a GPS-based trigger) to notify drivers when they enter a pickup zone. For example, if a driver is near Garden, the app alerts them of pending requests.
   • How it works: The backend tracks driver locations and sends push notifications when they’re within 500 meters of a passenger’s location.

2. Daraz’s "Flash Sales" Feature:

   • Implements countdown timers and real-time inventory updates using Firebase Realtime Database.
   • Example: During Makara Sankranti, Daraz runs a sale where a "Golden Rice" product is available for 24 hours. The app shows:
     • A 24-hour countdown timer.
     • Live stock levels (e.g., "Only 5 left!").
   • Tech used: Firebase for real-time sync, RecyclerView for dynamic lists.

3. Ncell’s Mobile Banking App:

   • Uses Biometric Authentication (fingerprint/face ID) to secure transactions. If a user tries to transfer ₹5,000 from a new device, Ncell’s app prompts for biometric verification.
   • Why it matters: Reduces fraud (e.g., unauthorized transfers) and improves user trust.

Exam Tip

This unit is project-based, so examiners will test:

1. Conceptual Understanding:
   • Explain the mobile app lifecycle (10 marks).
   • Compare Git vs GitHub (5 marks).
   • Describe ASO techniques (5 marks).
2. Practical Application:
   • Code-based questions: Write a snippet for Room database insertion or RecyclerView adapter (15 marks).
   • Scenario-based: "Design a prototype for a Nepali recipe app with offline support" (10 marks).
3. Real-World Linkage:
   • Connect ideas to Nepali apps (e.g., "How does Pathao use Dijkstra’s algorithm?").
   • Discuss security in Khalti or performance in Ncell’s app (10 marks).

How to Score Full Marks:

• Draw diagrams for:
  • Mobile app lifecycle (flowchart).
  • Database schema (Room database tables).
  • UI mockups (Figma-like sketches).
• Trace code execution for:
  • Room database operations.
  • RecyclerView updates.
• Use Nepali examples (Pathao, Daraz, Ncell) to show real-world relevance.
• Mention tools (Android Studio, Git, Firebase) in answers.

Common Pitfalls:

• Ignoring user feedback in maintenance (apps like Daraz fail if they don’t update based on user complaints).
• Overcomplicating the prototype (stick to low-fidelity for exams).
• Forgetting security (always mention OAuth, encryption, or biometrics for financial apps).

Final Note: This unit is not just about coding—it’s about solving real problems like Pathao’s traffic optimization or Khalti’s secure payments. For exams, combine theory with Nepali examples and visualize processes (flowcharts, database states). Good luck!