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)
- 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)
-
Ionic
-
App Development
- Mockups
- Live setup (Tailored for the Travel Log subject with Angular, but it can help you kickstart your own app)
-
Extras
-
Real-Time
- Javascript: basics and more
- JavaScript: prototypes
- JavaScript: classes
- JavaScript: modules
- JavaScript: basic promises
- JavaScript: advanced promises
- JavaScript: closures
- Advanced Angular
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.errorcalls 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.
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).