Eventure

What we’ll build

We'll create an Event Repository app to find out traditional events all over the world, w/ advanced search options (incl. geo queries), share w/ friends and set reminder. The aim of app is to store interesting events to give travel ideas, or discover new cultures and traditions.

We'll use [Ionic] for UI with [Angular], [Firestore] as Cloud db and [AngularFire], the official Angular library for Firebase.

The great thing about [Ionic] is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript.

Highlights include:

• One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework UI components.
• Deployed as a PWA using @angular/pwa
• Deployed as a native iOS and Android mobile app using Capacitor, Ionic's official native app runtime.
• Event search functionality nearby or on selected location powered by the Geo queries.
• Provide user authentication to ...
• Firebase Cloud function to handle backend img processing, geo coordinates and notifications.

Good practices

Coding

Our main concern is to apply good/recommended coding practices:

• [x] Lazy load pages and deep-linking
  • Angular Firebase: How to Lazy Load Components in Angular 4 in Three Steps
• [x] Shared and Core modules
  • 6 Best Practices & Pro Tips when using Angular CLI
• [x] Observable data service
  • Angular university - How to build Angular apps using Observable Data Services
  • Cory Rylan - Angular Observable Data Services
• [x] Keep a consistent timestamp via back-end server
  • AngularFirebase: CRUD Operations with Server Timestamps

What you'll need

We need to have [Node.js] and [Git] installed in order to install both [Ionic] and [Cordova]. Follow the Android and iOS platform guides to install required tools for development.

And of course you'll also need a [Firebase] account.

Methodology

Each main section below corresponds to a visible milestone of the project, where you can validate work on progress running App.

1. Setup project
   1. Create a project
   2. Launch the application
   3. Setup dev tools
      1. Prettier - Code formatting
      2. Lint-staged - Pre-commit Hook
      3. Standard-version - Auto versioning
      4. Dependabot - Automated dependency updates
      5. Github Actions - Continuous integration
2. Scaffold
   1. Module
   2. Components
   3. Routing
3. Data modeling
4. Observable data service
5. Master-detail
6. Create/update w/ reactive form
7. Delete action
8. Deploy on Firebase hosting
9. Connect to Firestore
10. Convert to PWA

By this way you can pickup what is interesting for you and/or run tutorial on several days always keeping a stable state of project, avoid big bang ;-)

Create your project

Prerequisites

• @ionic/cli
• native-run, used to run native binaries on devices and simulators/emulators
• cordova-res, used to generate native app icons and splash screens:

$ npm install -g @ionic/cli native-run cordova-res
$ npm ls -g cordova @ionic/cli@ npm typescript @angular/cli                                      (master)eventure
├── @angular/cli@13.3.0
├── @ionic/cli@6.18.2
├── npm@8.3.1
└── typescript@4.6.2

Create an Ionic/angular app

Next, create an Ionic Angular app that uses the “blank” starter template and adds Cordova for native functionality:

$ ionic start eventure blank --type=angular --cordova --package-id=com.eventure.app

That means:

• ionic start creates the app.
• eventure is the name we gave it.
• blank tells the Ionic CLI the template you want to start with. You can list available templates using ionic start --list
• --type=angular type of project to start (e.g. angular, react, ionic-angular, ionic1)
• --capacitor include Cordova integration (default config.xml, iOS and Android resources, like icon and splash screen)
• --package-id=com.eventure.app specify the bundle ID/application ID for your app (reverse-DNS notation)

Launch the application

Run on web browser

$ cd eventure
$ ionic serve
> ng run app:serve --host=localhost --port=8100
...

Ionic lab to test iOS and Android rendering

To test iOS and Android views I recommend using @ionic/lab package

$ npm i --save-dev @ionic/lab

and run

$ ionic serve --lab

Deploy native Apps on device

It's not the purpose of this tutorial, so I will not develop this topic but if you need check links below for more details:

• deploy Ionic apps to iOS simulators and devices using Cordova
• deploy Ionic apps to Android simulators and devices using Cordova

Setup dev tools

Prettier - Code formatting