Quick Start

Running Your First Build

This guide will help you run TecNM Control Escolar on an emulator or physical device in just a few steps.

Make sure you’ve completed the Installation steps before proceeding.

Quick Start Steps

Open the Project

Launch Android Studio and open the TecNM Control Escolar project.If you just completed installation, the project should already be open. Otherwise:

Click File → Open
Navigate to the project directory
Click OK

Wait for Gradle sync to complete (you’ll see a progress bar at the bottom).

Set Up a Device

You can run the app on either an emulator or a physical Android device.

Option A: Use an Emulator (Recommended for Development)

Click the Device Manager tab on the right side of Android Studio
Click Create Device
Select a device definition (recommended: Pixel 6)
Select a system image:
- Recommended: Android 14.0 (API 34) with Google APIs
- Click Download if not already installed
Click Finish to create the emulator

Choose a device with Google Play for the most realistic experience, or Google APIs for development features.

Option B: Use a Physical Device

Enable Developer Options on your Android device:
- Go to Settings → About Phone
- Tap Build Number 7 times
Enable USB Debugging:
- Go to Settings → Developer Options
- Toggle USB Debugging on
Connect your device via USB
Authorize your computer when prompted on the device

Your device will appear in the device dropdown in Android Studio.

Run the App

Now you’re ready to launch the app!

Select your device from the device dropdown in the toolbar
Click the green Run button (▶️) or press Shift + F10

Android Studio will:

Compile the Kotlin code
Build the APK
Install it on your device
Launch the app

The first build may take 2-3 minutes. Subsequent builds are much faster thanks to Gradle caching.

You should see build progress in the Build tab at the bottom:

> Task :app:compileDebugKotlin
> Task :app:mergeDebugResources
> Task :app:processDebugManifest
> Task :app:installDebug
Installing APK...
Launching app...

Explore the App

Once the app launches, you’ll see the Home Screen with sample data for student Arlyn Alfaro.The app has four main screens accessible via the bottom navigation bar:

Home - Today’s schedule with current class
Schedule - Full weekly schedule view
Map - Campus building locator
Profile - Student academic information

Understanding the App Entry Point

Let’s look at how the app initializes when it launches.

MainActivity.kt

The app’s entry point is MainActivity.kt, which sets up the Compose UI and navigation:

MainActivity.kt

package com.example.appcontrolescolar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.appcontrolescolar.navigation.AppNavigation
import com.example.appcontrolescolar.ui.theme.AppControlEscolarTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // Apply the custom TecNM theme
            AppControlEscolarTheme {
                // Set up navigation between screens
                AppNavigation()
            }
        }
    }
}

Key points:

Extends ComponentActivity for Compose support
setContent establishes the Compose UI hierarchy
AppControlEscolarTheme applies TecNM brand colors and Material Design 3
AppNavigation() creates the navigation graph

AppNavigation.kt

The navigation system defines how users move between screens:

AppNavigation.kt (simplified)

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomBar(navController)
        }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = AppScreens.Home.route,
            modifier = Modifier.padding(innerPadding)
        ) {
            composable(AppScreens.Home.route) { HomeScreen() }
            composable(AppScreens.Schedule.route) { ScheduleScreen() }
            composable(AppScreens.Map.route) { MapScreen() }
            composable(AppScreens.Profile.route) { ProfileScreen() }
        }
    }
}

Navigation features:

Bottom navigation bar persists across all screens
startDestination is the Home screen
Four main routes: Home, Schedule, Map, Profile

Exploring the Main Screens

Home Screen

The Home screen displays today’s schedule and highlights the current class. Key features you’ll see:

Header with TecNM branding and campus name
Week day selector with the current day highlighted
Current class card with large, colorful design showing:
- Subject name (e.g., “Cálculo Diferencial”)
- Time (09:00 - 10:00 AM)
- Location (📍 Edificio K, Aula 5)
- Teacher (👨‍🏫 Ing. Juan Pérez)
- Progress bar showing time remaining
Upcoming classes list with next 2-3 classes
Floating QR button for attendance scanning

The current class card uses a progress bar that shows how much of the class period has elapsed. This is calculated based on start and end times.

Schedule Screen

View your complete daily schedule with color-coded classes. What you’ll find:

Semester header (“SEMESTRE AGO-DIC 2026”)
Day selector at the top
Time-based layout with classes shown at their scheduled times:
- 08:00 - Física I (Blue)
- 10:00 - Programación Orientada a Objetos (Green)
- 12:00 - Lunch Break (Gray)
- 13:00 - Inglés IV (Orange)
- 15:00 - Cálculo Integral (Purple)

Each class card includes a colored accent line, classroom tag, and time range.

Map Screen

Find buildings and locations on campus. Interactive features:

Search bar for finding specific rooms
Filter chips (Todos, Aulas, Labs, Cafetería)
Visual campus map with building positions
Building list with distance from your location:
- Edificio A - 120 m
- Laboratorio 3 - 180 m
- Cafetería Central - 220 m
Floating location button to center map on your position

Profile Screen

View student information and academic stats. Profile data shown:

Student name and photo placeholder
Control number: 226W0487
Semester: 8
Average grade: 92.5
Career: Ingeniería en Sistemas Computacionales
Today’s classes quick view

Understanding FakeData

The app currently uses FakeData.kt to provide realistic sample data during development.

Sample Student Data

FakeData.kt

object FakeData {

    val student = Student(
        id = 1,
        controlNumber = "226W0487",
        name = "Arlyn Alfaro",
        career = "Ingeniería en Sistemas Computacionales",
        semester = 8,
        average = 92.5
    )

    val todayClasses = listOf(
        ClassSession(
            id = 1,
            subject = "Física I",
            teacher = "Prof. A. Einstein",
            classroom = "Aula A2",
            day = "Martes",
            startHour = "08:00",
            endHour = "09:00",
            isCurrent = false
        ),
        ClassSession(
            id = 2,
            subject = "Programación Orientada a Objetos",
            teacher = "Prof. G. Hopper",
            classroom = "Lab 3",
            day = "Martes",
            startHour = "10:00",
            endHour = "12:00",
            isCurrent = true // Currently active
        ),
        // ... more classes
    )

    val buildings = listOf(
        Building(
            id = 1,
            name = "Edificio A",
            description = "Aulas generales",
            category = "Aulas",
            distance = "120 m"
        ),
        // ... more buildings
    )
}

Why FakeData?

Enables UI development without backend dependencies
Provides consistent test data for all developers
Makes it easy to test edge cases (e.g., long class names, many classes per day)
Will be replaced with real API calls in production

Do not modify FakeData.kt for personal testing. Instead, create your own test data files or use dependency injection to provide alternative data sources.

Making Your First Changes

Try customizing the app to understand how it works:

Change the Campus Name

Open HomeScreen.kt and find the campus name:

Text(
    text = "Campus Zongolica",  // Change this!
    color = Color.Gray
)

Change it to your campus name, then rebuild and run.

Modify Theme Colors

Open ui/theme/Color.kt to customize the TecNM brand colors:

val TecBlue = Color(0xFF003366)    // Primary brand color
val TecGold = Color(0xFFFFD700)    // Accent color

Try different color values and see how they affect the entire app!

Add a New Class

Open FakeData.kt and add another class to todayClasses:

ClassSession(
    id = 5,
    subject = "Redes de Computadoras",
    teacher = "Prof. V. Cerf",
    classroom = "Lab 2",
    day = "Martes",
    startHour = "16:00",
    endHour = "18:00",
    isCurrent = false
)

Run the app and you’ll see your new class in the schedule!

Development Workflow

Instant Run

Android Studio supports instant run for quick iterations:

Make changes to your Compose code
Press Ctrl + S (Windows/Linux) or Cmd + S (macOS) to save
Click the Apply Changes button (⚡) instead of full rebuild

Changes appear in the running app within seconds!

Apply Changes only works for certain types of changes (UI code, functions). For structural changes (new classes, manifest updates), you’ll need a full rebuild.

Preview Composables

You can preview Compose UI without running the app:

@Preview(showBackground = true)
@Composable
fun PreviewHomeScreen() {
    AppControlEscolarTheme {
        HomeScreen()
    }
}

Click the Split or Design view in Android Studio to see live previews.

Debugging

Set breakpoints and debug the app:

Click in the left margin next to any line of code to set a breakpoint
Click the Debug button (🐞) instead of Run
When the breakpoint is hit, inspect variables and step through code

Troubleshooting Runtime Issues

App Crashes on Launch

Check the Logcat:

Open the Logcat tab at the bottom of Android Studio
Filter by your package name: com.example.appcontrolescolar
Look for red error lines with stack traces

Common causes:

Missing dependencies
Null pointer exceptions
Resource not found errors

UI Not Displaying Correctly

Clear app data: Long-press the app icon → App Info → Storage → Clear Data
Reinstall the app: Uninstall from the device and rebuild
Check Compose version: Ensure all Compose dependencies use the same version

Slow Performance

Use Release build: Debug builds are slower. Try a release build for performance testing
Enable R8: Gradle automatically enables R8 code shrinking in release builds
Profile with Android Profiler: Tools → Profiler to identify bottlenecks

Next Steps

Now that you have the app running, explore deeper topics:

Architecture Guide

Learn how the app is structured and organized

UI Components

Explore the Compose components used throughout the app

Navigation

Understand the navigation system and routing

GitHub Repository

Start contributing features and improvements

Congratulations! You’ve successfully run TecNM Control Escolar. Continue exploring the documentation to learn more about the app’s architecture and development practices.

Get Started

Features

Development

Guides

Running Your First Build

Quick Start Steps

Option A: Use an Emulator (Recommended for Development)

Option B: Use a Physical Device

Understanding the App Entry Point

MainActivity.kt

AppNavigation.kt

Exploring the Main Screens

Home Screen

Schedule Screen

Map Screen

Profile Screen

Understanding FakeData

Sample Student Data

Making Your First Changes

Change the Campus Name

Modify Theme Colors

Add a New Class

Development Workflow

Instant Run

Preview Composables

Debugging

Troubleshooting Runtime Issues

App Crashes on Launch

UI Not Displaying Correctly

Slow Performance

Next Steps

Architecture Guide

UI Components

Navigation

GitHub Repository

Get Started

Features

Development

Guides

​Running Your First Build

​Quick Start Steps

​Option A: Use an Emulator (Recommended for Development)

​Option B: Use a Physical Device

​Understanding the App Entry Point

​MainActivity.kt

​AppNavigation.kt

​Exploring the Main Screens

​Home Screen

​Schedule Screen

​Map Screen

​Profile Screen

​Understanding FakeData

​Sample Student Data

​Making Your First Changes

​Change the Campus Name

​Modify Theme Colors

​Add a New Class

​Development Workflow

​Instant Run

​Preview Composables

​Debugging

​Troubleshooting Runtime Issues

​App Crashes on Launch

​UI Not Displaying Correctly

​Slow Performance

​Next Steps

Architecture Guide

UI Components

Navigation

GitHub Repository

Running Your First Build

Quick Start Steps

Option A: Use an Emulator (Recommended for Development)

Option B: Use a Physical Device

Understanding the App Entry Point

MainActivity.kt

AppNavigation.kt

Exploring the Main Screens

Home Screen

Schedule Screen

Map Screen

Profile Screen

Understanding FakeData

Sample Student Data

Making Your First Changes

Change the Campus Name

Modify Theme Colors

Add a New Class

Development Workflow

Instant Run

Preview Composables

Debugging

Troubleshooting Runtime Issues

App Crashes on Launch

UI Not Displaying Correctly

Slow Performance

Next Steps