https://github.com/irisgve/parking-app
Real-time Parking Capacity App
https://github.com/irisgve/parking-app
angular typescript
Last synced: 3 months ago
JSON representation
Real-time Parking Capacity App
- Host: GitHub
- URL: https://github.com/irisgve/parking-app
- Owner: irisgve
- Created: 2019-09-13T07:38:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-13T07:38:53.000Z (almost 7 years ago)
- Last Synced: 2025-08-23T10:29:55.718Z (10 months ago)
- Topics: angular, typescript
- Language: TypeScript
- Homepage:
- Size: 503 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Real-time Parking Capacity in Amsterdam
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0. It lists out parking lots in Amsterdam using the
[CitySDK API] (http://citysdk.waag.org/). It also displays statistics on each lot, i.e. free lots and total capacity. It uses google maps plugin to
render the geodata of each lot's latitude and longitude.
## Pre-requisites
This project requires Node 4 or higher, together with NPM 3 or higher.
## Running the Production-version Application
1. Install dependencies by running `npm install`.
2. Run `npm run serve:production` for a server.
3. Navigate to `http://localhost:4200/`.
## Running the Development server
This development server of this project requires installing angular-cli.
1. Install it by running `npm install -g angular-cli`.
## Architecture
The project follows the following project structure:
```
├── src/
│ ├── app/
│ │ ├── common/
│ │ │ ├── api.service.ts
│ │ │ ├── parking-space.ts
│ │ ├── parking-info/
│ │ │ ├── parking-info.component.html
│ │ │ ├── parking-info.component.less
│ │ │ ├── parking-info.component.ts
│ │ ├── parking-list/
│ │ │ ├── parking-list.component.html
│ │ │ ├── parking-list.component.less
│ │ │ ├── parking-list.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.less
│ │ ├── app.component.ts
│ │ ├── app.module
│ │ ├── index.ts
│ ├── environments/
│ │ ├── environment.ts
│ │ ├── environment.prod.ts
│ ├── icon.png
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.less
│ ├── tsconfig.json
│ ├── typings.d.ts
│── dist/
│── node_modules/
│── angular-cli.json
│── package.json
│── tslint.json
```
This project is in Angular 2 + Typescript. It follows the best practices pushed forward by the Angular team. The root module
is the AppModule (app.module). Two custom modules were also created. One is ParkingList (parking-list.component) which displays
the list of parking spaces obtained from the API. The other is ParkingInfo (parking-info.component) which displays specific
details about the selected parking space and a google map view based on the space's geometric data.
A separate service (common/api.service) is created to abstract the api calls away from the components. It strictly contains
getting the information from the API endpoint (http://api.citysdk.waag.org/layers/parking.garage/objects), extracts the data
according to the ParkingSpace class (common/parking-space) attributes and returns the JSON object to the parent component.
Instead of promises, observables were used to communicate the extracted JSON body from the API to the parent component.
For the styling, [Angular Material 2] (https://github.com/angular/material2) was mainly used. Responsiveness was achieved with
the use of flexboxes.