COMEM+ Mobile Development Course

The goal of this course is to learn how to develop hybrid mobile applications, that is web apps embedded into native wrappers for multiple platforms. You will:

• Learn about hybrid mobile application development with Ionic and Capacitor
• Learn the core principles of Angular
• Design and develop a frontend mobile application optionally based on the API developed in the previous course
• Add a real-time component to your hybrid mobile application
• Run the mobile application on your phone (ideally)

What you will need

• A Unix CLI:
  • On Mac, the Terminal will do fine ;
  • On Windows, you should install Git Bash (that comes with Git For Windows). You could also work with the Windows Subsystem Linux (WSL) but it requires more setup ;
• Git (on Windows, download and install Git for Windows to install Git and Git Bash at the same time) ;
• A free GitHub account ;
• A web browser (recommended are Edge or Chrome, but any browser with developer tools will do) ;
• Node.js 20+ (latest Iron LTS version)
• Latest Ionic CLI 7+
• An IDE or code editor of your choice (although VS Code is strongly recommended)

Plan

• Introduction

• Observables with Rxjs

• Ionic

  • TypeScript
  • Angular (Standalone)
  • Ionic navigation with Angular

• App Development

  • Mockups
  • Live setup (Tailored for the Travel Log subject with Angular, but it can help you kickstart your own app)

Complementary subjects

• Angular Forms With Ionic

• Extras

  • Geolocation with Ionic
  • Taking pictures and uploading them to qImg
  • Intergrating Leaflet with Angular

• Real-Time

  • WebSocket

Optional subjects

• Javascript: basics and more
• JavaScript: prototypes
• JavaScript: classes
• JavaScript: modules
• JavaScript: basic promises
• JavaScript: advanced promises
• JavaScript: closures
• Advanced Angular

Useful links

• Travel Log API Repository
• Travel Log API documentation
• qimg API

Evaluation

Features

• A user must be able to register and/or log in (depending on the API's capabilities).
• A user must be able to manage the main resources of the API's domain model:
  • A user must be able to create new instances of all the main resources of the domain model (e.g. create Trips and Places in the Travel Log).
  • A user must be able to modify at least one of the resources of the domain model (e.g. update a Trip's title and description in the Travel Log).
  • A user must be able to delete at least one of the resources of the domain model (e.g. delete a Place in the Travel Log).
• At least two mobile-oriented features must be used, for example:
  • Geolocation of the user (e.g. to center a map on the user's location, or to determine a Place's location in the Travel log).
  • Pictures taken with the phone's camera. You are not required to exclusively implement those two ; you can choose completly others ones depending on your subject
• There must be a map showing geolocated resources (with more than one item on the same map).
• There must be a resource list with filters/search parameters.

Implementation

• The app must follow Angular and Ionic best practices.
• The app must use an approved API.
• Asynchronous code must be correctly handled (e.g. callbacks, promises and/or observables).
• The app must provide clear feedback (console.error calls are NOT clear feebacks...) to the user when errors are likely to occur:
  • When submitting a form (input might be invalid or the API call might fail).
  • When geolocating the user (it might fail).
• Secrets (passwords & keys) must not be committed to the Git repository.

Presentation

You must provide a presentation for your app. This can be either in the form of a user guide or in the form of a pitch as if it were a real app that you were going to sell. You can choose from the following options (one is enough):

• You can present the app in the README or the Wiki of the GitHub repository for the app.
• You can make a webcast/video demonstrating or selling your app.
• You can provide a tutorial inside the app.
• You can use any other presentation tool (subject to approval) but your user guide or pitch must be available online.

Delivery

Each group must send an e-mail at a yet-to-be-defined date (probably at the end of january) to Mathias Oberson with:

• The list of group members.
• The link to your source code repository on GitHub.
• The link to your webcast, presentation page or user guide (if it's not in the repository).