Ionic 4 Angular- Build Web App, Native Android, IOS App

Identify and install the development tools used in this course, including the terminal setup for Windows, to replicate the instructor's environment and workflow.

Install node.js and npm by downloading the official installer, run the setup, and verify with node -v and npm -v, noting npm comes bundled with node.

Install the Ionic CLI and Cordova on your machine, then verify the installation by running ionic -v and cordova -v to confirm the versions.

Explore how promises differ from async/await and how async/await reduces callback hell, enabling cleaner sequential flows and error handling with try/catch and resolve/reject.

Set up an Ionic 4 Angular project with a side-menu starter and run it locally in the browser. Use live reload to see code changes and preview the mobile view.

Explore the Ionic 4 Angular project structure, including packages, start and build scripts, configuration files, and see how the src folder houses pages, modules, routing, assets, environments, and global styles.

Use Ionic Lab to preview your app’s user interface on iOS and Android across platforms, install the lab package, and compare views in real time.

Explore how the Ionic split pane view adapts to screen sizes, revealing a hamburger menu below the 992px breakpoint and how to customize or remove the split behavior.

Style the toolbar with global color variables and platform-specific classes, applying a primary color for Android and web while keeping iOS separate and adjusting text color for dark toolbars.

Learn to use the News API to fetch top headlines by country, sources, or category, search articles by keyword, and sign up for an API key as a query parameter.

Build a news api service in Ionic 4 Angular, inject it into components, fetch top headlines via HTTP get, and subscribe to an observable to display results.

Build a responsive news card list UI in Ionic 4 Angular by leveraging the responsive grid, filtering articles with images, and applying utilities and shadows to cards across breakpoints.

Learn to implement the ion spinner component in an Ionic 4 Angular app, display a centered loader during API delays, and set a green color with a show flag.

Add a dynamic country select in an Ionic 4 Angular app to fetch news by country code using an ion select bound to ngModel and a mock country list.

Add a category selection option, define category list, and update the API to pass a category parameter for category-specific top headlines in the Ionic 4 Angular app.

Utilize the ion refresher component to implement pull down to refresh, triggering async tasks with the default refresher on the homepage and completing the refresher via its complete method.

Create a reusable toast service in an ionic 4 angular app using the toast controller, inject it where needed, and display dynamic messages for 1500 ms.

Explore angular routing techniques with a two-page app, passing data via path parameters, query parameters, and navigation state, and persist data using Ionic storage for web and native platforms.

Learn to implement a news detail page in Ionic 4 Angular, navigate from a news card to a detail view, pass the article object, and display the title and description.

Create a publishers page in Ionic Angular that lists publishers with logos, enabling navigation to publisher details. Implement a responsive grid and use a publisher code endpoint to fetch headlines.

Create a news page in Ionic 4 Angular; navigate from a publisher card to the news page, pass code and name with navigation extras, and display top headlines as cards.

Add a save button to save articles locally in Ionic 4 Angular, storing under the articles key and showing a toast with 'article saved successfully' on success.

Develop a saved articles page in an Ionic 4 Angular app, fetch and display articles from storage, and remove items with a confirmation alert, updating the storage and UI.

Identify and prevent duplicate articles by checking storage for an existing article using a unique url key before saving, and share common save logic via a helper service.

Build your Ionic 4 Angular app as a production-mode progressive web app and serve the production build’s static assets and index.html with a minimal Node Express server.

Set up android studio and ensure the correct java version is installed. Configure environment variables, create a new project with language Java, and use emulators to test the app.

Deploy your Ionic 4 Angular app to a real Android device via USB debugging, then style the native status bar with the primary color hex using the status bar plugin.

Customize android and ios icons and splash screens by replacing assets with 1024×1024 icons and 2732×2732 splash, generate with cordova-res, remove the splash loader, and deploy via ionic cordova run android.

Deploy your Ionic 4 Angular app to Android devices or emulators by running the same command, start the emulator on Windows by disabling Hyper-V and restarting, and verify splash screen.

Sign the APK with a keystore after building in production release mode to publish on the Play Store, and manage versioning and keystore security.

Examine the source code behind a cross-platform app built with Ionic 4 and Angular, enabling you to build a web app and deploy to native Android and iOS.