⚡ Ionic Angular News App

• Displays news items from a news API using the Ionic framework.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• The News API is a simple HTTP REST API for searching and retrieving live articles from the web.
• The News API now only works on localhost. It will not work when deployed due to CORS errors (error 406) which means they want you to pay a subscription to fully access the API. This app was successfully deployed to Android Studio - see screen shots below but I deleted the firebase depoyment. I will do another news app using the Gnews API which has a free tier for up to 100 requests per day and 10 articles per search.

📷 Screenshots

News Page French	News Page Spanish	News Page English

News Detail Page French	News Detail Page Spanish	News Detail Page English

Categories Page Business	Categories Page Entertainment	Article Detail Page

Favourites Page Empty	Favourites Page Some	Favourites Page Full

About Page French	About Page + Side Menu	About Page + Info Menu

Dark Mode News Page	Dark Mode Categories+Menu Page	Dark Mode About Page

Android About Dark Page	Android About Light Page	Android Categories Dark Page

Android Detail Dark Page	Android Detail Dark Page	Android Detail Light Page

Android Favourites Light Page	Android Menu Dark Page	Android Menu Light Page

📶 Technologies

• Ionic v6
• Angular v15
• Ionic/angular v6
• RxJS v7
• News REST API used to search for news articles
• IP Geolocation API
• Ionic Storage v3 specific to Angular
• Ionic ngx-Translate core v14
• Ionic Native Network v5
• NGX-Translate internationalization library for Angular v7
• Ionic open source Ionicons
• Day.js Date Conversion module v1

💾 Setup

• It is necessary to register with news API to get an API key that is stored in the environment.ts file
• To start the server on localhost://8100 type: ionic serve
• To run linter: npm run lint
• to add android platform: ionic cordova platform add android
• to create build file for android: ionic cordova build android
• to run on device plugged in via USB cable: ionic cordova run android
• Follow this link to deploy to IOS or Android

💻 Code Examples

• service to switch between dark/light display mode

// enable dark or light mode from html toggle switch event via changeThemeMode() function
export class ThemeService {
  darkMode: boolean;
  renderer: Renderer2;

  constructor(
    private rendererFactory: RendererFactory2,
    private storage: Storage,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  enableDark() {
    this.renderer.addClass(this.document.body, "dark-theme");
    this.storage.set("dark-theme", true);
    this.darkMode = true;
  }

  enableLight() {
    this.renderer.removeClass(this.document.body, "dark-theme");
    this.storage.set("dark-theme", false);
    this.darkMode = false;
  }

  changeThemeMode(e: any) {
    e.detail.checked ? this.enableDark() : this.enableLight();
  }
}

🆒 Features

• Typescript interface used to define the expected structures of the JSON objects returned from the IP and news APIs
• Separate providers (services) page with API HTTP fetch RxJS observables
• Custom pipes used to modify API news article titles, contents and derive '..time ago' from a date string
• Dark mode Menu toggle changes from light to dark mode
• Offline Storage of dark mode status & favourite articles using Ionic Storage
• Common Refresh Component dragging down will perform refresh function
• Common Progess Bar Component ion-card shows while news loading on News, Categories and Favourites pages
• Localisation using i18n so user can select between English (default), Spanish and French
• Ionic colour generator used to create color palette

📚 Navigation/Pages

• Nav side-bar: news, categories, favorites, search, about, change language, dark theme toggle + Unsplash image with credit. Sidemenu is dismissed when the user clicks on a list item.
• News page shows world headlines using an ion-card list. Uses *ngIf to only show card if it has an image to avoid having news items with empty spaces (API data is not perfect). Shows time as '... ago' using a date convert pipe that uses day.js to convert the API Coordinated Universal Time (UTC) date-time string to '...ago'.
• News-detail page shows the selected news item in more detail. Title has news source end text removed using a custom Angular pipe as I show this information in the top toolbar. Also uses custom pipe to show time as '... ago'. Includes working footer buttons for 'More info', which opens news source in a separate window and 'Favourite' which adds the article to a stored news 'favourites' array. Array symbol at end of article content string replaced with text using split and concat. Remove <li> from content text using regex .
• Categories page: ion-segment used to show categories in a scrollable horizontal menu: Sport, Busines, Health, Technology, Science, General, Entertainment. So far categories only shown from English sources. Shows time as '... ago'.
• Favourites page: articles listed in reverse date-time order that have been saved by clicking on the favourites icon on the news-detail page. Include popover that will let user delete all list items, sliding from the right deletes the favourite, prevent storage of duplicate articles. Add 'delete all' button at top. lhs sliding delete is not working.
• About page Displays Unsplash image with author credit and short info about the app with links to APIs used. Header includes popover with links to Author Website, Github Repo and a Contact Page.

📋 Status

• Status: Working except storage, including language on start-up menu, production build file created, successfully deployed to Android Studio

📋 To-do

• Fix storage
• Disable clicking on menu icon when in news page.
• Fix menu language storage.
• Check image shown when API image is null, status 404 not found

👏 Inspiration

• Some of project structure based on: Ionic example app: 'A conference app built with Ionic to demonstrate Ionic'
• The code for checking network status is based on: Ionic 4 Network Check Example Problem
• 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)
• Regexr.com for developing and testing regex expressions
• How to Publish Ionic App on Google Play Store for interest - although I will not be publishing this app
• Shields badges for readme
• Easy-Resize to resize images to a smaller file size
• Font Awesome Free Icon svgs

📁 License

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

✉️ Contact

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