Skip to main content

​
Prerequisites

Before installing Tareas, ensure you have the following tools installed on your system:

​
Required Software

Tareas requires Node.js version 18 or higher.Check your version:
node --version
Download: Visit nodejs.org and install the LTS version.
Required for Android development and building APKs.Check your version:
java --version
Download: Install OpenJDK 21 or Oracle JDK 21.
Set the JAVA_HOME environment variable to your JDK installation path.
Package manager for installing dependencies.Check npm version:
npm --version
Update npm:
npm install -g npm@latest
Install yarn (optional):
npm install -g yarn

​
Platform-Specific Requirements

Android StudioRequired for building and running the app on Android devices.
  1. Download Android Studio
  2. Install Android SDK Platform 34 (or latest)
  3. Configure Android SDK path in environment variables: 
    export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
Android SDK Command-Line ToolsInstall via Android Studio SDK Manager or download directly.

​
Installation Steps

1

Clone the Repository

Get the latest version of Tareas from GitHub:
git clone https://github.com/MiguelAPalaciosC/tareas.git
cd tareas
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This installs all dependencies from package.json, including:
  • Angular 20.0.0 - Core framework
  • Ionic 8.7.17 - Mobile UI components
  • Capacitor 8.0.1 - Native runtime
  • Angular Fire 20.0.1 - Firebase integration
  • RxJS 7.8.0 - Reactive programming
  • TypeScript 5.9.0 - Type safety
3

Environment Configuration

Tareas uses Firebase for backend services. Configure your environment:Development EnvironmentThe app includes a development configuration at src/environments/environment.ts:
// src/environments/environment.ts
export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT.firebasestorage.app",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
  }
};
Production EnvironmentUpdate src/environments/environment.prod.ts with production credentials:
// src/environments/environment.prod.ts
export const environment = {
  production: true,
  firebase: {
    // Production Firebase config
  }
};
The app uses localStorage for data persistence by default. Firebase configuration is optional for basic functionality.
4

Verify Installation

Confirm everything is set up correctly:1. Check Angular CLI
ng version
2. Start Development Server
npm start
# or
ng serve
Expected output:
✔ Browser application bundle generation complete.
✔ Built in X seconds

** Angular Live Development Server is listening on localhost:8100 **
3. Open in BrowserNavigate to http://localhost:8100 - you should see the Tareas home page with the quest list.

​
Platform Setup

​
Web Development

No additional setup required. The app runs in the browser using Angular’s development server. 
# Development with live reload
npm start

# Production build
npm run build
Output directory: www/

​
Android Development

1

Add Android Platform

Add Capacitor Android platform:
npx cap add android
2

Sync Project Files

Sync web assets to the Android project:
npx cap sync
# or specifically for Android
npx cap sync android
3

Configure Capacitor

The Android configuration is defined in capacitor.config.ts:
// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'Quest App',
  webDir: 'www',
  server: {
    androidScheme: 'https',
    hostname: 'localhost',
    iosScheme: 'ionic',
    allowNavigation: ['*']
  },
  android: {
    allowMixedContent: true,
    captureInput: true,
    webContentsDebuggingEnabled: true
  }
};

export default config;
4

Run on Android

Option 1: Run in emulator or device
npx cap run android
Option 2: Open in Android Studio
npx cap open android
Then build and run from Android Studio.Option 3: Build APK for testing
ng build --configuration production
npx cap sync
ionic capacitor build android
A pre-built APK is available in the repository root: /app-debug.apk

​
iOS Development

1

Add iOS Platform

npx cap add ios
2

Sync Project Files

npx cap sync ios
3

Open in Xcode

npx cap open ios
4

Configure Signing

  1. Open the project in Xcode
  2. Select the target under “Targets”
  3. Go to “Signing & Capabilities”
  4. Select your development team
  5. Build and run on simulator or device

​
Troubleshooting

If the development server fails to start:
# Kill process using port 8100
lsof -ti:8100 | xargs kill -9

# Or use a different port
ng serve --port 8200
Ensure you’ve built the web assets before syncing:
# Build the Angular app first
npm run build

# Then sync to native platforms
npx cap sync
Set the Android SDK path:
# Linux/macOS
export ANDROID_SDK_ROOT=$HOME/Android/Sdk

# Windows (PowerShell)
$env:ANDROID_SDK_ROOT="C:\Users\YourName\AppData\Local\Android\Sdk"
Or configure in gradle.properties:
sdk.dir=/path/to/Android/Sdk
Tareas requires Java 21. If you have multiple Java versions:
# Set JAVA_HOME to Java 21
export JAVA_HOME=/path/to/java-21

# Verify
java --version
On Unix systems, avoid using sudo with npm:
# Configure npm to use a different directory
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# Add to PATH in ~/.bashrc or ~/.zshrc
export PATH=~/.npm-global/bin:$PATH

# Reload shell and retry
npm install
Clear caches and reinstall:
# Remove node_modules and package-lock
rm -rf node_modules package-lock.json

# Clear npm cache
npm cache clean --force

# Reinstall
npm install

​
Next Steps

Now that Tareas is installed, explore the app:

Quickstart Guide

Create your first quest in 5 minutes

Architecture

Learn about components and services

Quest Service

Explore the CRUD operations

Gestures

Implement swipe interactions

​
Additional Resources

For production deployment, ensure you configure proper Firebase security rules and replace the default Firebase credentials.

Build docs developers (and LLMs) love

Get started for freeTalk to us