https://github.com/uzh-ase-fs24/frontend

findMe frontend application built with angular on ionicframework
https://github.com/uzh-ase-fs24/frontend

angular frontend ionic ionicframework mobile

Last synced: about 1 month ago
JSON representation

findMe frontend application built with angular on ionicframework

• Host: GitHub
• URL: https://github.com/uzh-ase-fs24/frontend
• Owner: uzh-ase-fs24
• Created: 2024-03-04T11:26:15.000Z (9 months ago)
• Default Branch: develop
• Last Pushed: 2024-04-13T17:44:00.000Z (7 months ago)
• Last Synced: 2024-04-13T23:54:12.097Z (7 months ago)
• Topics: angular, frontend, ionic, ionicframework, mobile
• Language: TypeScript
• Homepage:
• Size: 1.21 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  



# findMe frontend 📱💻

A mobile first social media guessing game app. 

## Tech-Stack 

This app is built with Angular and Ionic. This combination enables the app to work as progressive web app as well as a mobile app. Furthermore, Ionic provides standardized GUI elements that are optimized for the various platforms.

For authentication Auth0 is deployed due to its simple and intuitive integration with Angular apps. 

## Setup

-   First install dependencies using `npm install`

-   Install the Ionic plugin for vscode

### Dev

#### Web view

-   Run the app with `ionic serve` to view the app in the browser

-   Alternatively you can run the web build via the ionic plugin: Run > Web

-   Navigate inside your browser to [http://localhost:8100](http://localhost:8100)

#### REMARK: CURRENTLY THE AUTHENTICATION ONLY WORKS IN THE PROGRESSIVE WEB APP

-> Use the mobile screen setting provided by chrome dev tools

-> More information about PWA: [https://support.google.com/chrome/answer/9658361?hl=en&co=GENIE.Platform%3DAndroid&oco=0](https://support.google.com/chrome/answer/9658361?hl=en&co=GENIE.Platform%3DAndroid&oco=0)

#### Editor Emulator

-   Install a mobile emulator plugin to open the app inside an emulator (pass localhost link to emulator)

-   Alternatively you can run the Web build inside the editor which will also trigger a mobile preview (navigate to the ... next to the Web Run and select open in editor)

#### Native app with capacitor (Android/IOS)

-   Run `ng build`

-   Sync ionic with `ionic cap sync` or via the plugin

-   To use the native Run commands of the ionic plugin (Android/IOS) it is necessary to install Android Studio and XCode

    -   It is possible that your SDK is not defined. Find a help here: [https://stackoverflow.com/questions/27620262/sdk-location-not-found-define-location-with-sdk-dir-in-the-local-properties-fil](https://stackoverflow.com/questions/27620262/sdk-location-not-found-define-location-with-sdk-dir-in-the-local-properties-fil)

## E2E Testing

- Playwright is used for end to end testing. Important: Make sure to run the application before running the tests. For example using `docker compose up` 

- If not yet done run `npx playwright install`

- Run `npx playwright test` to run the test suite in headless mode

- Run `npx playwright test --ui` to run the test suite in UI mode (helpful for debugging)

- Run  `npx playwright codegen localhost:8100` to generate your own testcase. Run `npx playwright codegen --device="iPhone 14 Pro" localhost:8100` if you want to generate iPhone test cases (camera access not working)