andrewjbateman/ionic-angular-world-data

:clipboard: Ionic-Angular app that displays information about world countries and oceans using JSON data fetched from a REST API. Includes a user search of countries/capitals. Page popovers used to provide links to external websites or activate functions such as delete item from favourites.

⚡ Ionic Country Data

• Ionic app that displays data about countries and oceans from the Rest Countries API, Leaflet maps and a local JSON file. Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Country Data
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 General/Navigation/Pages
  • 📋 Status & To-do list
  • 📋 To-do
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• The Rest Countries API v3 has a number of endpoints that can be used to search for info. I have used the endpoints: All?fields=name,capital,region,flags, Name & Region. The API Response Example was useful to create my http interface class.
• Leaflet maps displays a map of the chosen country that the user can zoom in and out of.
• Angular KeyValuePipe used to extract values from key-value pairs
• Latest Angular flow control template syntax used - @for and @if.

📷 Screenshots

Country-List Page	Country-List Page - Dark	Country-List - Detail

Map View Page	Side Menu	Side Menu - Dark

Oceans-List Page	Oceans Page - Dark	Oceans Page + Popover

Favourites Page	Favourites Page + Popover	Favourites Page - Dark

About Page	About Page + Popover	About Page - Dark

📶 Technologies

• Angular v17
• Ionic/angular v7
• Rest Countries API v3 - v3 has a lot of breaking changes from v2
• Leaflet maps free JS library of maps
• open source Ionicons

💾 Setup

• Run npm i to install dependencies
• ionic serve to start the server on _localhost://8100_
• To create a build file suitable for Firebase deployment: ionic build --release
• To deploy to Firebase: firebase deploy

💻 Code Examples

• service function to fetch API country details, from rest-api.service.ts using the take(1) method so unsubscribing from the observable is not necessary.

fetchCountryDetailData(country: string): Observable<CountryDetail[]> {
  return this.httpClient
    .get<CountryDetail[]>(`${apiUrl}/name/${country}?fullText=true`)
    .pipe(
      take(1),
      catchError((error) => {
      return throwError('Country not found', error);
    })
  );
}

🆒 Features

• integrated Leaflet Maps API to show country map. Free.
• Typescript interface used to define the expected structures of the json objects returned from the API.
• Separate services page with API http fetch functions.
• RxJS Observables used to extract data asynchronously.
• Dark mode switch on menu.
• Offline Storage (future) of favourite countries/oceans using Ionic Storage.
• ion-grid with fixed column size used so country content data will display ok even on a PC.
• search function to search for country name with regex to only allow letters in search text.

📋 General/Navigation/Pages

• Nav side-bar: countries, oceans, favorites, about, dark theme toggle.

• Countries page: Displays mat-card list of countries, displaying country flag, title, capital and region, for 'all' and 5 region sub-categories. Clicking on a country list item will show the country detail (no routing required - all done using @if in the html content :-)). Country searchbar to search by country name. Fab icon link to map of country.

• Oceans page Displays a mat-card for each ocean using data from a local json file and an *ngFor loop. Menu popover with links to further info for each ocean. It was decided not to add 'favourites functionality' as there are only 5 oceans and they are easy to find.

• Maps page Displays Leaflet map of country and surrounding area with Capital in an offset tooltip

• Favourites Displays user favourites and popover allows them to be deleted. Shows an image with text below if there are no favourites

• About Displays image with author credit and short info about the app with links to APIs used. Header includes popover with working links to Author Website, Github Repo & author website contact page

📋 Status & To-do list

• Status: Working

📋 To-do

1. Add delete from favourites from individual country card - show heart red or hollow
2. Progress bar - check it is working
3. Add eslinting - currently will not install due to rxjs version
4. Splash screen
5. SqLite - use as default database?
6. Lighthouse score?
7. Run on simulator

👏 Inspiration

• Ionic Academy Tutorial: How to Localise Your Ionic App with ngx-translate however language selected using ion-select-option dropdown list in side-menu (ie not using a popover page)
• ERROR Error: Database not created. Must call create() first
• What’s New in RxJS 7: Small Bundles and Big Changes to share()

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]