Ionic 4 Crash Course with Heartstone API & Angular

Explore ionic lifecycle functions called at different times to initialize variables, update the user interface, fetch data from a server, and unsubscribe from observables.

Set up and run an Ionic 4 app, then create and wire a new card deck page with Angular modules and routing, previewing on a chosen device like iPhone 10.

Explore how to implement Ionic UI components using official documentation, preview components like the list and header, and adapt a card deck layout for dynamic item generation.

Iterate over card deck items in an Ionic Angular page, bind string data to each card, display provided images from assets, and prepare to move data to a service.

Create an angular service in ionic 4 to centralize data, transform it into observables, and inject it into a component to fetch card decks from the hearthstone api.

Integrate the Heartstone api in an Angular app by making an http get request with headers and an api key to fetch card data and decks for display.

Create a reusable card list component in Ionic 4 Angular using input properties for items and list name, and display the list only when items exist.

Learn to create a card listing page in Ionic 4 by generating the page, wiring modules, importing the listing page, and testing navigation and rendering.

Learn to navigate from the deck to the card listing page in an Ionic Angular app, building a route with group values to fetch and display cards from Heartstone API.

Learn to fetch data from the HS API with an Angular service, build headers, call get cards by deck, and display cards by name and set.

Create a detailed card detail page in an Ionic Angular app, fetch the card by ID via a service, and display image, name, flavor, health, attack, and rarity type.

Apply inner HTML and RegExp techniques to transform card text, map over cards, and handle missing descriptions in an ionic angular app.

Implement a back button in an Ionic 4 app, wiring navigation from car detail pages and customizing toolbar alignment. Tweak card detail styles and font sizes for mobile readability.

Use the Ionic loading controller to create, present, and dismiss a translucent loader with content, using async functions for synchronized loading in Angular.

Create a reusable loader service using the loading controller in angular/ionic, exposing present and dismiss methods, and share it across pages to manage card list and detail loading.

Learn to implement a toast service in an Ionic Angular app, display customizable messages for server errors, configure duration and styles, and inject the service into the card listing page.

Improve loading when navigating back to the listing page by fetching gift cards data from a service, handling loading states and errors, and displaying updated cards in the browser.

Implement an Ionic refresher to reload data, fix refresh function naming, and apply a color theme by updating primary colors in the theme variables; test in browser and on device.

Implement an alert service in Ionic 4 with Angular by injecting alert controller into the guard detail page and triggering alerts during testing.

Emulate an Ionic Cordova app on iOS and Android by installing Xcode and Android Studio, configuring Gradle, and running builds in simulators, troubleshooting issues as they arise.

Create a reusable Angular search component with an animated search bar, wiring input items from the card listing and emitting search events via ionChange to filter cards by name.

Copy the cards, bind a search input to the copy, and emit a search completed event to set up filtering in the next lecture.

Develop a live search filter for car listing cards in an Ionic 4 Angular app, using a lowercase includes check and emitting filtered items while handling empty input.

Improve search performance by debouncing input with a behavior subject, using distinct until changed, and subscribing after view initialization to filter items efficiently.

Learn to display a spinner while searching for cards in an Ionic 4 app using Angular, with the spinner display controlled by a loading flag and search events.

Learn to add a favorite toggle to cards using an Ionic storage module and Cordova plugin, including icon updates, a favorite boolean, and persisting favorites across sessions.

Integrate Ionic storage in an Angular app to persist favorite cards, import the storage module, and use get and set promises to save and retrieve state.

Save and retrieve cards from server, iterate them, and mark favorites stored in local storage; implement a private function that checks a card by id and returns its favorite state.

Implement a new store architecture to manage favorite cards in an Ionic Angular app using a favorite card store, behavior subject, observable, and Ionic storage for real-time updates.

Move the favorite cards logic to a dedicated store, exposing favorites as an observable from a behavior subject and subscribing to updates, while contrasting get versus function usage.

Unsubscribe from the card store on page exit using the Ionic lifecycle ionViewDidLeave; create a subscription reference, subscribe to favorite cards, and unsubscribe if active to prevent leaks.

Learn to set up Firebase in an Ionic Angular project, including real-time database, messaging, and push notifications, by creating a Firebase console project and initializing with your Firebase config.

Explore Firebase architecture and implement Firebase Cloud Messaging by obtaining device tokens, saving token and user ID to the devices collection, and subscribing to notifications.

Set up firebase android and ios apps by wiring the EPCM service to obtain a token and subscribe to notifications, and configure firebase with google-services.json.

Enable Android push notifications in an Ionic Angular app by configuring Firebase, building and running emulators, and testing notifications to devices via cloud messaging.

Learn how to configure iOS push notifications for an Ionic Cordova app using Apple developer accounts, certificates, and Firebase Cloud Messaging, including testing on a real device.

Debug and fix iOS push notifications by adding platform-based messaging, displaying the correct alert, and validating the flow with Safari dev tools and Firebase tests.

Fix cordova browser issues in ionic 4 by enabling ionic cordova browser plugin, running the app on localhost:8000, and using live reload to auto rebuild changes.

Generate platform-specific splash screen and icons in an Ionic 4 project using ionic cordova resources. Place images in the resources folder, update config.xml, and run the Android emulator to preview.

Remove the about and contact pages and their modules, update the app structure, compile the Ionic app to verify it runs on browser and mobile, complete a new page assignment.

Celebrate progress in the Ionic 4 crash course with Heartstone API and Angular by inviting ongoing ideas for on demand sections, and promising updates and future projects at the Golding.

Optimize the Ionic app by implementing async data loading, ensuring the loading indicator dismisses after fetch completes, and guard rendering to improve user experience and performance.

Implement infinite scroll in an Ionic 4 app to load cards in batches (20 at a time) using slice and limit, improving performance.

Implement and test infinite scroll in the Ionic app by building for iOS and Android, loading more cards as you scroll, with Firebase integration to follow.

Update ionic and angular in your project to the latest versions, addressing breaking changes. Reinstall dependencies, adjust code for the new ionic/angular setup, and validate the app runs cleanly.

This lecture explains updating an Ionic 4 app to a new routing and tabs model, including lazy-loaded modules, tab navigation, and aligning routes for home and favorites.

Fix broken links in the Ionic app and ensure routing and navigation work by updating paths, removing incorrect brackets and quotes, and testing the cart and favorite links.

Fix icons and async loader teaches completing ion icons path updates for an Ionic Angular app and implementing a loader service to synchronize card loading on listing and favorites pages.

Create and integrate a new favorite module in an Ionic 4 app, relocating components and HTML, and set up child routes to load the favorite page and its card store.

Unify the favorite card store across modules, by sharing the store in card and favorite modules, move subscription to a life-cycle function on view enter, and verify favorites update correctly.