- 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
- 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.
- Codium AI used to check and improve code quality.
 |
 |
 |
| 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 |
- 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 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
- service to switch between dark/light display mode
// enable dark or light mode from HTML toggle switch event via changeThemeMode() function
export class ThemeService implements OnInit{
darkMode: boolean;
renderer: Renderer2;
constructor (
private rendererFactory: RendererFactory2,
private storage: Storage,
@Inject(DOCUMENT) private document: Document
) {
this.renderer = this.rendererFactory.createRenderer(null, null);
}
async ngOnInit() {
await this.storage.create();
}
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();
}
}
- ng Control Flow latest
@if and @for used in templates
- Typescript interface used to define the expected structures of the JSON objects returned from the news API
- 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
- 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
@if control flow 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: Working except including language on start-up menu, production build file created, successfully deployed to Android Studio
- Disable clicking on menu icon when in news page.
- This project is licensed under the terms of the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent