A progressive web application (PWA) built with Ionic and Angular that provides useful information and services during your stay at PSI (Paul Scherrer Institute). The app offers features such as accelerator status monitoring, public transport schedules, campus maps, phonebook, meal planning, and more.

Live Application: https://pocket.psi.ch
QA Environment: https://pocket-qa.psi.ch

Features
Prerequisites
Getting Started
- Installation
- Development Server
Project Structure
Environment Configuration
Development
- Available Scripts
- Testing
Deployment
- Production Deployment
- QA Deployment
Technology Stack
Troubleshooting
Contributing
Versioning
Authors
License

Features

PSI Pocket provides the following features:

Accelerator Status: Real-time status monitoring for SLS, HIPA, ProScan, and SwissFEL accelerators
Public Transport: Bus schedules and public transportation information
Campus Map: Interactive map of the PSI campus using Leaflet
Phonebook: Searchable directory of PSI employees and contacts
Meal Planning: Menus and schedules for various dining facilities (Oase, Food Market, PIA Culinaare)
Scientific Highlights: Information about research highlights and achievements
Recycling Information: Guidelines and information about recycling at PSI
ZPT Contacts: Contact information for ZPT (Zentrum für Protonentherapie)
Progressive Web App: Offline support and installable on mobile devices

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v14 or higher recommended) - Download
npm (v6 or higher) - Comes with Node.js
Ionic CLI (v6 or higher) - Install globally with:
```
npm install -g ionic
```

Verify Installation

node --version
npm --version
ionic --version

Getting Started

Installation

Clone the repository:

git clone https://gitea.psi.ch/Lernende_IF/psiapp.git
cd psiapp

Install dependencies:
```
npm install
```
This will install all required packages listed in package.json.

Installation with Docker

git clone https://gitea.psi.ch/Lernende_IF/psiapp.git
cd psiapp

docker build -t pocketapp .
docker run -p 80:80 pocketapp

Development Server

Start the development server:

npm start

The application will be available at http://localhost:4200. The development server supports hot-reload, so changes will automatically refresh in the browser.

Project Structure

psiapp/
├── src/
│   ├── app/
│   │   ├── components/          # Reusable components
│   │   │   ├── corona-catering-popover/
│   │   │   ├── coronahelppage/
│   │   │   ├── coronatransportpopover/
│   │   │   ├── mobile-menu/
│   │   │   ├── mobile-menu-popover/
│   │   │   ├── mobile-nav/
│   │   │   └── profile-modal/
│   │   ├── pages/               # Page components
│   │   │   ├── accelerators/    # Accelerator status pages
│   │   │   ├── home/            # Home page
│   │   │   ├── map/             # Campus map
│   │   │   ├── phonebook/       # Phonebook search
│   │   │   ├── public-transport/ # Bus schedules
│   │   │   └── ...              # Other pages
│   │   ├── services/            # Angular services
│   │   ├── interfaces/          # TypeScript interfaces
│   │   ├── classes/             # TypeScript classes
│   │   ├── app-routing.module.ts # Route configuration
│   │   └── app.module.ts        # Root module
│   ├── assets/                  # Static assets (images, fonts, data)
│   ├── environments/            # Environment configurations
│   ├── theme/                   # SCSS theme variables
│   └── global.scss              # Global styles
├── e2e/                         # End-to-end tests
├── angular.json                  # Angular CLI configuration
├── ionic.config.json            # Ionic configuration
├── package.json                  # Dependencies and scripts
└── tsconfig.json                # TypeScript configuration

Environment Configuration

The application uses different environment configurations for development, QA, and production:

Development: src/environments/environment.ts
QA: src/environments/environment.qa.ts
Production: src/environments/environment.prod.ts

Each environment file contains API endpoints and configuration specific to that environment. The build process automatically selects the appropriate environment file based on the build configuration.

Key Environment Variables

production: Boolean flag indicating production mode
assets: Path to static assets
phone_api: Phonebook API endpoint
oase_api: Oase menu API endpoint
foodmarket_api: Food Market API endpoint
slsstatus, hipastatus, proscanstatus, swissfelstatus: Accelerator status endpoints
zptforecast, zptshifts: ZPT-related endpoints

Development

Available Scripts

Command	Description
`npm start`	Start development server
`npm run build:prod`	Build for production environment
`npm run build:qa`	Build for QA environment
`npm test`	Run unit tests with Karma
`npm run lint`	Run ESLint to check code quality
`npm run e2e`	Run end-to-end tests with Protractor

Testing

Unit Tests:

npm test

End-to-End Tests:

npm run e2e

Linting:

npm run lint

Deployment

Production Deployment

Build the application:
```
npm run build:prod
```
This creates a production build in the www/ folder with service worker enabled.
Deploy to server:
- Connect via FTP to api.psi.ch
- Navigate to /html/psipocket
- Upload all files from www/ folder except version.php
- The version.php file should remain on the server
Verify deployment:
- Visit https://pocket.psi.ch
- Check browser console for any errors
- Verify service worker is active

QA Deployment

Build the application:
```
npm run build:qa
```
This creates a QA build in the www/ folder.
Deploy to server:
- Connect via FTP to api.psi.ch
- Navigate to /html/psipocket-qa
- Upload all files from www/ folder except version.php
Verify deployment:
- Visit https://pocket-qa.psi.ch

Deployment Notes

Always test the build locally before deploying
The version.php file is used for version tracking and should not be overwritten
Service workers are enabled for production builds to support offline functionality
Ensure all API endpoints in the environment files are correct before building

Technology Stack

Core Framework

Ionic 7 - Mobile-first UI framework
Angular 16 - Web application framework
TypeScript 5 - Typed superset of JavaScript

Key Libraries

Leaflet - Open-source JavaScript library for interactive maps
ngx-echarts - Angular directive for Apache ECharts (data visualization)
@meddv/ngx-pinch-zoom - Image zoom functionality for mobile devices
ngx-device-detector - Device detection service
leaflet-geosearch - Geocoding and search for Leaflet maps

Development Tools

Angular CLI - Command-line interface for Angular
Karma - Test runner
Jasmine - Testing framework
Protractor - End-to-end testing framework
TSLint - TypeScript linter

Additional Features

Progressive Web App (PWA) - Service worker support for offline functionality
Cordova Integration - Support for native mobile app builds

Troubleshooting

Common Issues

Issue: npm install fails

Solution: Clear npm cache and try again:
```
npm cache clean --force
npm install
```

Issue: Port 4200 already in use

Solution: Use a different port:
```
ng serve --port 4201
```

Issue: Build fails with TypeScript errors

Solution: Check TypeScript version compatibility and ensure all dependencies are installed:
```
npm install
npm run build
```

Issue: Service worker not updating

Solution: Clear browser cache and unregister service workers in browser DevTools

Issue: API endpoints not working

Solution: Verify environment configuration files and ensure API endpoints are accessible from your network

Getting Help

If you encounter issues not covered here:

Check the Ionic documentation
Check the Angular documentation
Review existing issues in the repository
Contact the development team

Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository and create a feature branch
Follow the coding style used in the project
Write tests for new features
Update documentation as needed
Submit a pull request with a clear description of changes

Code Style

Use TypeScript strict mode
Follow Angular style guide conventions
Use meaningful variable and function names
Add comments for complex logic
Keep components and services focused and single-purpose

Versioning

We use Semantic Versioning for version management. Current version: 1.2.0

Version history is available in the Gitea repository tags.

Authors

José Pedro Lima Marques - Core Development - Repository
Noah Pombas Teixeira de Freitas (Last change: 27. March 2026)

Contributors

Stefan Janssen
Mike Seidel
Oliver Bunk
Thomas Bücklers
Michela Schorta

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

README.md

PSI Pocket

Table of Contents