Ionic Framework - freeCodeCamp.org

Create Native Apps with Ionic and Capacitor

Beau Carnes — Tue, 16 May 2023 21:14:30 +0000

Ionic and Capacitor are two powerful tools that can be used to build native mobile applications. Ionic is a UI framework that provides a wide range of components and features for building mobile apps, while Capacitor is a runtime that allows Ionic apps to be deployed to both iOS and Android devices.

We just posted a course on the freeCodeCamp YouTube channel that will teach you everything you need to know to build native mobile apps with Ionic and Capacitor. You'll learn about the basics of Ionic, how to create your own components, and how to use Capacitor to deploy your apps to the App Store and Google Play.

By the end of this course, you'll be able to build native mobile apps that look and feel great on both iOS and Android devices. You'll also have the skills you need to build more complex and feature-rich apps.

Simon Grimm created this course. Simon is an Ionic Developer Expert and an experienced Ionic instructor.

In this course, you will learn:

The basics of Ionic
How to create your own Ionic components
How to use Capacitor to deploy your apps to iOS and Android
How to use Ionic's built-in features, such as animations, gestures, and data storage
How to build more complex and feature-rich Ionic apps

This course is for anyone who wants to learn how to build native mobile apps with Ionic and Capacitor. No prior experience with Ionic or Capacitor is required.

Simon will guide you through the process of building native apps for both iOS and Android, and deploying your Ionic app as a web app. You'll also discover how to build a desktop app with Electron, demonstrating the true cross-platform capabilities of Ionic and Capacitor.

Here are all the sections covered in this course:

Getting started with Ionic & Capacitor
Run and Debug your App
Building a Login Screen
Creating Introduction Slides with Swiper
Storing data with Capacitor Preferences
Responsive UI with Ionic Grid
Creating a Drawer Menu
Building a Tab Bar
Ionic Components and Modals
Ionic Animations API
Ionic Gesture API
Ionic Web Components and Styling
Using Capacitor Plugins
App Icon and Splash Screen
Building a native app for iOS and Android
Deploying Ionic as a Webapp
Building a Desktop app with Electron
Final Ionic React Cross Platform App
Where to learn more about Ionic?

Watch the course full course on the freeCodeCamp.org YouTube channel (3-hour watch).

How I Created a Coronavirus Tracker App in Just 3 Days with Ionic and Firebase

freeCodeCamp — Tue, 02 Jun 2020 20:31:27 +0000

By KAPIL RAGHUWANSHI

I am really fond of Hybrid App technologies – they help us achieve so much in a single codebase. Using the Ionic Framework, I developed a cross-platform mobile solution for tracking Coronavirus cases in just 3 days.

In this tutorial, we are going to learn how to develop an Android, iOS, and Progressive Web App to track the cases around us with the latest related news, help, and feedback sections. Brace yourself for a new coding journey! ?

Prerequisites

The process of hybrid mobile app development is meant for all kinds of developers irrespective of their technology stack. Since we will be using three basic pillars of Web Development – HTML+CSS+JAVASCRIPT – at the core, you can easily understand the process and techniques.

Thus this tutorial is for everyone who has just a basic understanding of Web Fundamentals. So, let's begin.

Day 0 - Idea, Plan, and Engineering

Idea

Initially, I was looking for the latest Covid19 cases around me (in March 2020). I got several links that had little difference in numbers.

Then, I realised that data from https://github.com/backtrackbaba/covid-api is regularly updated and more accurate. I decided to develop a universal, small, and handy mobile solution by using data provided by Johns Hopkins University.

Plan

I planned to develop a cross-platform mobile solution that could be universally accessed by everyone. I considered the Ionic framework which would allow me to develop an Android, iOS & Progressive Web App (PWA)**? by just writing and maintaining a single codebase.

I also wanted to show the COVID19 virus cases across the world and individual countries through various illustrations.

Engineering

The idea was to develop 5 separate tabs which would be there at the bottom of the app:

World — would show the COVID19 Dashboard
Country — would allow you to select a country to check the cases
News — would get the latest news regarding the Coronavirus Pandemic
Guidelines — would allow you to read and watch all advisories and guidelines
Help — would provide help and feedback.

_Photo by [Unsplash](https://unsplash.com/@sctgrhm?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Scott Graham / Technology Stack

I have developed several websites and apps through Angular and Ionic before. But this time, I wanted to learn and use React.js. The below libraries are required to install using the Node package manager (npm):

React.js includes the latest react-hooks
Ionic Framework (version 4) with Capacitor
Node.js environment to support JavaScript and npm libraries
TypeScript language to write the actual code (.tsx files)
Chart.js for various illustrations
Firebase for hosting the content (Progressive Web App)

Tools

VS Code
Google Chrome
Android Studio for Android app
Xcode for iOS app (Unfortunately only available in Apple computers)

Installation & Scaffolding

We need to install and configure all the above mentioned Software and Frameworks. So, let’s start with the first set of terminal commands (whether it's on Mac, Linux or Windows):

Install ionic with global scope "npm install -g @ionic/cli native-run cordova-res"
Create react app with Capacitor "ionic start corona-tracker tabs — type=react — capacitor"
Add react hooks and pwa elements "npm install @ionic/react-hooks @ionic/pwa-elements"

Open the corona-tracker folder in your default workplace. You should have gotten all the default HTML, CSS and .tsx files with other sub-folders in the proper sequence. Now, go to your app folder and run these 2 commands

cd corona-tracker ionic serve

Voilà! ? Your Ionic app is now running in a web browser. Click on the localhost option in the terminal to check. ?This is your basic app installation and scaffolding.

So far, you should be running your ionic-react app in your local browser. Now index.html and index.tsx are your first pages for Single Page Applications (SPAs).

App Routing

Let’s add routing to our app which will allow us to visit all 5 different tabs explained above. Open your App.tsx file and add the below router inside

     
        
          "/world" component={WorldTab} exact={true} />
          "/country" component={CountryTab} exact={true} />
          "/news" component={NewsTab} />
          "/guidelines" component={GuidelinesTab} />
          "/help" component={HelpTab} />
          "/" render={() => "/world" />} exact={true} />
        
        "bottom" >
          "WorldTab" href="/world">
            
            World
          
          "CountryTab" href="/country">
            
             Country
          
          "NewsTab" href="/news">
            
             News
          
          "GuidelinesTab" href="/guidelines">
            
            Guidelines
          
          "HelpTab" href="/help">
            
            Help

Check your app in the browser again, and you should see all these tabs with their respective pages. All tabs should be working smoothly with proper routing.

_Let me know in case you're stuck with any issues related to installation, compile-time, _or run-time errors.__

This is it for Day 0.?

Day 1 - Developing COVID19 Dashboard and Safety Guidelines tabs

In this part of the process, we will develop the World and Guidelines tabs for our Ionic React hybrid app. So far, we have done the basic installation and scaffolding of the app. We have also added 5 different tabs to our app with routing.

World Tab: Design

Let’s build our home page World tab now. I decided to have 4 different sections on this home tab:

4 different boxes to show actual numbers: Total, Active, Recovered and Deaths
A Pie Chart depicting the number of cases
Slideshows for basic health tips
All countries listed with these categories in descending order.

World Tab: Data & API

I have studied the open-source postman API source which contains all Application Programming Interfaces (APIs) related to Corona Cases https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest.

First, we will consume the global API with the Axios library to get the total global case count in the world using the useState & useEffect React-hooks.

const [data, setData] = useState();
const [showLoading, setShowLoading] = useState(true);
  useEffect(() => {
    const getGlobalData = async () => {
      //latest global count
      const result = await axios('https://covidapi.info/api/v1/global');
      // console.log(result);
      setData(result.data);
      setShowLoading(false);
    };
    getGlobalData();
  }, []);

Then set the data inside your return block using HTML:

<IonRow class="casesBox">
    <IonCol class="totalCases">Total <AddNumFunc a={confirmed} b={recovered} c={deaths} />IonCol>
    <IonCol class="confirmedBox">Confirmed {confirmed?.toLocaleString()}IonCol>
    <IonCol class="recoveredBox">Recovered {recovered?.toLocaleString()}IonCol>
    <IonCol class="deathsBox">Deaths {deaths?.toLocaleString()}IonCol>
IonRow>

Now, we have the first 4 responsive boxes containing total cases, confirmed cases, recovered, and deaths. Install chart.js in your project using npm install react-chartjs-2. Let’s make use of the same data to draw a PieChart.

import axios from 'axios';
import { Pie } from 'react-chartjs-2';

class="pieCard">
   true,
         position: 'bottom',
       },
       plugins: {
         datalabels: {
           anchor: 'end',
           clamp: 'true',
           align: 'bottom',
           color: 'black',
           labels: {
             title: {
               font: {
                 weight: 'bold'
               }
             }
           }
         }
       }
    }} />

Now, we have 2 of the 4 sections in the World tab. So next, let’s add a slideshow depicting general health tips.

class="tipsSlides" options={slideOpts}>
  class="slide">
    Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing.
  
  class="slide">
    Regularly and thoroughly clean your hands with an alcohol-based hand rub or wash them with soap and water.
  
  class="slide">
    If you have fever, cough and difficulty breathing, seek medical care early.
  
  class="slide">
    Avoid touching eyes, nose and mouth. #StayHomeStaySafe
  
  class="slide">
    WHO Health Alert brings COVID-19 facts to billions via WhatsApp.

Now, let’s make a data table for all countries in descending order to depict all kinds of cases. Again, we will consume the latest API with the Axios library to get the total global count for all the countries in the world using the useState & useEffect React-hooks.

const [countryWiseData, setCountryWiseData] = useState([]);
  useEffect(() => {
    const getGlobalCountryData = async () => {
      //latest global country wise count
      const result = await axios('https://covidapi.info/api/v1/global/latest');
      //console.log(result.data.result);
      let sortedResult = result.data.result;
      sortedResult.sort((a: Object, b: Object) => {
        return (Object.values(a)[0].confirmed > Object.values(b)[0].confirmed ? -1 : (Object.values(a)[0].confirmed < Object.values(b)[0].confirmed ? 1 : 0));
      });
      setCountryWiseData(sortedResult);
    };
    getGlobalCountryData();
  }, []);

We have completed the development for our home tab with all 4 sections described above. You can see them below:

World Tab — Working Emulator Snapshots in PWA, android and iOS

Now, let’s jump on to develop our next tab — the Guidelines Tab.

This is just an informative and static tab for various Advisories and Guidelines given by WHO and State Governments. We have added various images and videos here in the HTML:


   
     "WHO" width="100%" height="200" src="https://www.youtube.com/embed/5jD2xd3Cv80"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
     
   
   
     Symptoms
     class="guidlineImages" src="assets/images/Symptoms2.png">
   
   
     Diseases
     class="guidlineImages" src="assets/images/Symptoms.png">
   
   
     Myths Busted
     class="guidlineImages" src="assets/images/Myth.jpeg">
   
   
     Stress Distraction Tips
     class="guidlineImages" src="assets/images/Stress.jpg">
   
   
     Stay Home
     class="guidlineImages" src="assets/images/SafeHands.jpeg">

Let me know in case you get stuck with any issues related to installation, compile-time or run-time errors.

This is it for Day 1.?

Day 2 - Developing Country and News tabs

In this section we will develop Country and News tabs for our Ionic React hybrid app. So far, we have built World and Guideline tabs in our ionic react app with basic app routing.

Country Tab: Design

Let’s build our second page Country tab now. I decided to have 4 different sections on this second tab:

Country Dropdown to select the country of your choice
4 different boxes to show actual numbers: Total, Active, Recovered and Deaths in the selected country
A Doughnut Chart depicting the number of cases in the selected country
Weekly Trend for the cases in the selected country.

Country Tab: Data & API

I have studied the open-source postman link which contains all Application Programming Interfaces (APIs) related to Corona Cases https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest.

Here, we will consume the country API with the Axios library to get the total count in the selected country using the useState & useEffect React-hooks.

We will store the country the user has selected in local storage for other illustrations to update.

import moment from 'moment';
import axios from 'axios';
import { Doughnut, Bar } from 'react-chartjs-2';

  const [yourCountry, setYourCountry] = useState<string>('IND');
  Storage.set({ key: 'yourCountry', value: yourCountry });
  const [countryData, setcountryData] = useState();
  const [showLoading, setShowLoading] = useState(true);

  useEffect(() => {
    const getCountryData = async () => {
      let result: any = '';
      const { value } = await Storage.get({ key: 'yourCountry' });
      if (value) {
        result = await axios('https://covidapi.info/api/v1/country/' + value + '/latest');
      } else {
        result = await axios('https://covidapi.info/api/v1/country/' + yourCountry + '/latest');
      }
      // console.log(result);
      setcountryData(result.data.result);
      setShowLoading(false);
    };

    getCountryData();
  }, [yourCountry]);

Now, consume the API to get the country-specific data:

const [countryTimeSeriesData, setcountryTimeSeriesData] = useState([]);
  let endDate: string = new Date().toISOString().split('T')[0];
  let todaysDate = new Date();
  let startDate: string = new Date(todaysDate.getTime() - (5 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];

  useEffect(() => {
    const getCountryTimeSeriesData = async () => {
      const result = await axios('https://covidapi.info/api/v1/country/' + yourCountry + '/timeseries/' + startDate + '/' + endDate);
      // console.log(result);
      setcountryTimeSeriesData(result.data.result);
      setShowLoading(false);
    };

    getCountryTimeSeriesData();
  }, [yourCountry, endDate, startDate]);

Now, design the Doughnut and Bar trend chart:


 
    true,
          position: 'right'
        },
        plugins: {
          datalabels: {
            anchor: 'bottom',
            clamp: 'true',
            align: 'end',
            color: 'black',
            labels: {
              title: {
                font: {
                  weight: 'bold',
                  size: 10
                }
              }
            }
          }
        }
    }} />

 true
       }],
       yAxes: [{
         stacked: true
       }]
     },
     title: {
       display: true,
       text: 'Cases in the current week',
       fontSize: 15
     },
     legend: {
       display: true,
       position: 'bottom'
     },
     plugins: {
       datalabels: { display: false }
     }
   }}
  />

Now save the file and check it out in the browser. So, finally, we should get the below design:

Country tab — Working Emulator Snapshots in PWA, android and iOS

Now, let’s keep going and develop our third tab — the News Tab.

News Tab: Design

We have added a basic Ionic Card which contains various News resources such as URL, title, image, author and publisher’s details:


   {data.map((news, idx) => (
     
       
         class="newsImage" >
         
           class="newsTitle">{news?.title}
           class="newsSource">
             {news?.source?.name}
             {trimSourceDetails(news?.author)}
             {/* {moment(news?.publishedAt).format('DD MMM YYYY')} */}
           
           class="newsContent">{news?.description}
         
       
     
   ))}

News Tab: Data & API

To get the news, I used Newsapi.org which is not an open-source ?Application Programming Interface (API). But with a developer account, I searched news related to the Coronavirus. If you want to use other news APIs you can use them instead.

Here, we will consume the top-headlines API with the Axios library to get the total count in the selected country using the useState & useEffect React-hooks.

const [data, setData] = useState([]);
  const [showLoading, setShowLoading] = useState(true);

  useEffect(() => {
    const getNewsData = async () => {
      const result = await axios('https://newsapi.org/v2/top-headlines?q=coronavirus&language=en&apiKey=YOUR_OWN_KEY');
      // console.log(result);
      setData(result.data.articles);
      setShowLoading(false);
    };

    getNewsData();
  }, []);

Now, save the file and check in the browser. So, finally, we should get the below design:

News tab — Working Emulator Snapshots in PWA, android and iOS

Let me know in case you get stuck with any issues related to codes, compile-time or run-time errors.

This is it for Day 2.?

Day 3 - Developing the Help Tab and Deployment

In this section - our last one - we will develop the Help tab and learn to use Capacitor to build Android and iOS apps.

So far, we have built the World, Country, News, and Guideline tabs in our ionic react app. Also, will deploy our app to Firebase as a PWA. It is going to be most interesting now. Pull on your socks and be ready to actually see your own app in a real environment.

Help Tab: Design

First, let’s create the Help and Feedback tab. This is just an informative and static tab for help from the World Health Organization (WHO) that gives feedback to the developer.


    
      
        Call WHO helpline Number
        'warning' href="tel:+41-22-7912111">"start" icon={callOutline} /> Call
      
      
        Email WHO Team
        'warning' href="mailto:mediainquiries@who.int">"start" icon={mailOutline} /> Email
      
      
        Text 'Hi' to WHO helpdesk
        'warning' href="https://api.whatsapp.com/send?phone=41798931892&text=hi&source=&data=">"start" icon={logoWhatsapp} /> WhatsApp
      
      
        Donate via WHO website
        'warning' href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/donate">"start" icon={walletOutline} /> Donate

Environment Installation Check

As mentioned in our first (Day 0) section, we should have all the below Software installed in our system:

VS Code
Google Chrome
Android Studio for Android app
Xcode for iOS app (Unfortunately only available in Apple computers)

We need to set the required path, and install the targeted Android (such as Android 9 Pie) and iOS (such as iOS 11) operating system versions.

Wait, don’t worry if you are very new to this platform setup. Follow the next steps sequentially with all the provided important links in the coming sections.

We have already installed Capacitor in our first terminal command while creating the ionic react app. (Check Day 0 for the installation section). Capacitor is the Native Bridge for Cross-Platform Web Apps. It invokes Native SDKs on iOS, Android, and the Web with one codebase.

// Go to your project directory and run below commands to initialize Capacitor into your project and add the Android and iOS platforms to your app:

npm install --save @capacitor/core @capacitor/cli npx cap init npx add android npx add ios

App icons and Splash screens

For creating android and iOS icons and splash screens, I recommend using https://pgicons.abiro.com/. It will create varied sizes of icons and splashes for all the targeted mobile operating systems.

After creating these, you can directly replace these icons with the default ionic icons and splashes in your targeted platforms folders.

Progressive Web App (PWA)

The two main requirements of a PWA are Service Workers and a Web Manifest. Once these files have been added, run ionic build and the build directory will be ready to deploy as a PWA to any hosting platform like Firebase.

Follow the link ? https://ionicframework.com/docs/react/pwa for more details.

First, create the project in the Firebase Website. You can choose the free plan for now. Enable the hosting option from the left nav. Next, in a terminal, install the Firebase CLI:

npm install -g firebase-tools

It will ask you some default name and folder options for firebase related files. Continue answering all the questions. Now, build your project again with the --prod flag as given below:

ionic build --prod firebase deploy

That’s it. ? Go to the link provided by Firebase under the hosting section. It is very simple and straightforward to deploy your app on Firebase. Every time you push your code to your own GitHub repo, just follow those 2 commands to build and deploy the latest changes into your Firebase project.

Android App

Android Studio is the IDE for creating native Android apps. It includes the Android SDK, which will need to be configured for use in the command line.

Android Studio is also used to create Android virtual devices, which are required for the Android emulator. Ionic apps can also be launched to a device.

Use the link for complete setup and installation ?https://ionicframework.com/docs/developing/android.

// Run the below commands to sync native plugins and run the native apps: ionic cap copy ionic cap sync ionic capacitor run android ionic cap open android

Now, your app will be open in Android Studio where you can check the same folder, your project ID, and other default settings. Also, you can build icons and splash screens for your own app and replace the existing default ionic ones in the project.

Create an Emulator and run the app. You should see your Coronavirus-tracker app in the Android Emulator now. Go to the Build option in the top in Android Studio, and select the Build Bundle(s)/APK(s). For the first time, you need to create the signing key. Then, click next to build apk/bundle option.

Hurray! ? You have your own Android app now in the build folder which is ready to deploy to Google Play Store (Developer accounts cost USD $25 with lifetime access) and Amazon App Store (free).

iOS App

Xcode is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can be downloaded for free with an Apple account or it can be installed through the App Store.

Use the link for complete setup and installation ? https://ionicframework.com/docs/developing/ios.

Unfortunately, iOS apps can only be built in Apple Computers with macOS operating systems.

// Run the below commands to sync native plugins and run the native apps: ionic cap copy ionic cap sync ionic capacitor run ios ionic cap open ios

Now, your app will be open in Xcode where you can set your project ID and other default settings. Also, create icons and splash screens for your own app and replace the existing default ionic ones in the project.

Create an Emulator and run the app. You should see your Coronavirus-tracker app in the iOS Emulator now. If you have an active Apple Developers Account which costs USD $99 annually, you can build your iOS app and deploy it to the App Store.

Due to policy issues of the epidemic, Google Play Store, Amazon App Store, and others are not accepting app packages related to the Coronavirus. So until and unless you have authenticity proofs from any Government, Hospitals, or any designated Health Institution, no stores are accepting these apps.

However, the World Wide Web (WWW) is free to use. So we have deployed our app on the web only for now.

Finally, our Ionic React app is freely available on the internet for end users – ta-da!

CoronaTracker (Use mobile devices for a smooth experience) https://coronatracker-20efc.web.app/world

Pending Work

Since writing this article, I have made this project open source on GitHub. You can contribute here by forking the below repo.

Desktop Responsiveness ? (Currently works well for Mobile and Tablets)
Unit test cases.
There is always formatting and indentation.?

For the complete code, jump into the GitHub repo. Don’t forget to star and fork in case you would like to add some more cool features to it. For the fork process, follow the steps given in README.MD file.

https://github.com/kapilraghuwanshi/corona-tracker-app

I hope that you found this article useful and it was able to help you learn and build an awesome app today. If you really liked it, please do share it on all social media platforms.

Let’s be connected on LinkedIn (@kapilraghuwanshi) and Twitter (@techygeeeky) for more such tech stories.?

How to Write "Hello, World!" in Ionic

freeCodeCamp — Tue, 18 Feb 2020 19:34:00 +0000

This guide will teach you how to write a simple Hello World program in Ionic.

Step 1: installation

Install ionic, npm ,angular and cordova if not installed. [See first introduction for more information.]

sudo apt-get install nodejs
sudo apt-get install npm 
sudo npm install -g ionic cordova

Step 2: Create a folder named helloworld

ionic start helloworld blank

Note: Since this is a small project, enter No or N when prompted during program execution.

Step 3: Change directory to helloworld [this is your ionic directory]

cd helloworld

Step 4: Open the folder in your text editor .

You will see various files and subfolders.

Don't panic – these files are generated automatically by npm for you. Just go to src->page->home->home.html .

Basic File Format

`home.html` is the html page where you can write html syntax.


`home.scss` is the css page to write css syntax.


`home.ts` is the typescript page to write typescript code.

Step 6: Delete the template and add the html syntax as shown below

 <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Project
    ion-title>
   ion-navbar>
  ion-header>

  <ion-content padding>
   <h2>Hello World h2>
  ion-content>

Step 7: Save the code and run

ionic serve

To see your code running go to the browser and and open localhost:8100 in the URL. That's it!

More info on Ionic:

How to Create a CRUD To-do App Using Ionic 3

freeCodeCamp — Wed, 24 Jul 2019 08:47:12 +0000

By Sameeha Rahman

Hey all! This is a post on an up and coming tech topic — Ionic! By the end of this post you would learn how to create a simple CRUD (Create, Read, Update and Delete) to-do list app, which is also connected to Firebase.

Hybrid Mobile Applications — What are they?

Simply put, they are mobile apps created by the easier to learn languages; HTML, CSS, and JavaScript. The beauty of developing a hybrid mobile app is the fact that they can be compiled to work with any platform. If you are lazy, like yours truly, you’ll find it easier to use one code to build many apps, instead of developing separate apps for each platform.

Ionic is one of the popular frameworks to make your own hybrid mobile app. It can be built into an Android, iOS, Windows phone, Progressive Web or Desktop application. And testing the app is so much easier since it can be live reloaded right onto your browser.

Step 1 — Setting it all up

Initially, sign up for an Ionic Pro account, here. That will make building and shipping the app easier. You might have to sign in sometime during the process of project creation.

To start coding your first Ionic App, there are a bunch of things you need;

Node.js — This is pretty easy. Simply go to the Node.js website and download the ideal installer for you. We need the Node Package Manager, aptly named npm, to install all the dependencies for the many modules you would want to use in your app. If you develop on a Mac and have Homebrew installed, simply type in the command brew install npm on the console.
TypeScript — TypeScript, a superset of JavaScript, is used instead of JS for the majority of the code. After installing Node.js, on the console, type in npm install -g typescript .
Cordova — Cordova is a framework that builds the HTML, CSS and JS/TS code into an app. To install, type npm install -g cordova
And finally, Ionic — Type in npm install -g ionic .

Bonus — You can download all three in one go with this command too! npm install -g typescript cordova ionic.

Now that you have set up the environment, let's get this party started!! ??

Creating your first app

From within the console, move to the folder in which you want to store the app. My personal preference is to have a dedicated folder for all my Ionic projects in my Documents.

Then, type in ionic start . The console then prompts you for a name for the project, like so, Project name: Tasks.

It then prompts you to specify the type of application.

? Starter template: (Use arrow keys)
  tabs     | A starting project with a simple tabbed interface
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentation
  aws      | AWS Mobile Hub Starter

For now, let's make it a blank project, a to-do list with all CRUD functions in one page. It will then prompt you for permission to add the Android and iOS platforms.

? Integrate your new app with Cordova to target native iOS and Android? (y/N) y

It will proceed to download extra dependencies that will allow you to live reload the app in emulators and devices. Once the native SDK’s are downloaded you are prompted to add the Ionic Pro SDK, if you wish to do so.

? Install the free Ionic Pro SDK and connect your app? y

If you do pick yes, the console will then prompt you for your Ionic Pro email and password, set up at the beginning of this post.

? Email: 
? Password:

Thereafter, you have the option to either link this app to an existing one, to create a new one entirely.

? What would you like to do? (Use arrow keys)
  Link an existing app on Ionic Pro
> Create a new app on Ionic Pro

The console then proceeds to ask your preferred git host, to store your repository. I prefer GitHub, as it’s something I’m more familiar with.

? Which git host would you like to use? (Use arrow keys)
> GitHub
  Ionic Pro

Depending on your choice above, if you picked GitHub as I have, you may require to open your browser to give your credentials and sign in. Once done, return back to the console. You then need to link this app to the repository or create a new one. If you don’t have a repository, go back to GitHub and create one now. Once the new repository is created, come back to the console and type y .

? Does the repository exist on GitHub? y

Afterward, pick the correct repository from the list displayed on the console. I will be using only the master branch for now and will go with the former option.

? Which would you like to do? (Use arrow keys)
> Link to master branch only
  Link to specific branches

And FINALLY, we’re done creating the app!! ??

But, If you picked Ionic Pro as a git host, pick the option to generate an SSH key pair.

? How would you like to connect to Ionic Pro? (Use arrow keys)
> Automatically setup new a SSH key pair for Ionic Pro
  Use an existing SSH key pair
  Skip for now
  Ignore this prompt forever

And we’re done here too! Now to have a look at the app

There are two different commands to view the app on the browser.

ionic serve
ionic serve -l

ionic serve displays the app in the view of a web application.

Web Application View

ionic serve -l displays the app in the many mobile device platforms. You will need to download it from within the console, when prompted, to get this view.

Mobile Platforms View

And that’s a wrap for today! We successfully created and linked an Ionic 4 app to a version control host.

The Project Structure

Folder directory

app.module.ts — The entry point of the app. Any and all components, pages, modules, and providers need to be added to this file, as it keeps track and controls the many resources used by the app.
app.components.ts — The first page that is loaded as the app starts running, with all the code you wish to execute first. Pages that you might wish the user to view first, like the login screen, are put in this component.
app.html — The template of the app, where the other UI pages will mount onto.
app.scss — The page that holds all the Sass variables and styles to be used globally within the app.

Let’s head on over to the main component that we will be amending for this application, home.

As seen above, the home component has three pages;

home.html — The view/UI of the page is coded here, using HTML.
home.scss — Any page-specific styling is to be added here, along with Sass variables to be used within the page.
home.ts — The operational logic, in our case adding new tasks to the list, is coded in TypeScript here.

Step 2 - Implementing the CRUD operations

Wireframe of the app

What I hope to implement as seen above, is a very simple design; a text input to type the tasks, a button to add it to the list, a list view to view the items and finally a delete button to remove the items from the list. I might change up the design later.

Go ahead and open your editor. Let's take a quick run through all the pages and components found in the current directory.

Creating the UI for C and R

To begin, let’s tackle the UI first. When you open up home.html, this is the current code in the page.


    <ion-navbar>
        <ion-title>Ionic Blankion-title>
    ion-navbar>

<ion-content padding>
    The world is your oyster.
    <p>If you get lost, the
        <a href="http://ionicframework.com/docs/v2">docsa>
    will be your guide.
    p>
ion-content>

You can then remove everything within the tags. This is the body of the page and elements within those tags will be seen.

Now add an input tag in the body, so we can enter in the task, followed by a button, to call a method to add the task to the list.


    <input type="text" placeholder="Enter task">
    <button>Add Taskbutton>
ion-content>

Boring and basic

Not pretty, right? Let’s add some styling now!

Ionic has a special input tag , that comes with some styling coded within it, so go ahead and switch boring old to !

Ionic also comes with certain special classes which have styling, like the ion-button. I also want to have the button to the end of the input, and not right below. The final changes look like this;


    <ion-item>
        <ion-input type="text" placeholder="Enter task" [(ngModel)]="taskName"/>
        <div class="item-note" item-end>
            <button ion-button>Add Taskbutton>
        div>
    ion-item>

Seamless and sleek

So much better, right!? And all this without writing any CSS! Let’s have another look at the code above.

tag is normally used with the element. But, using this here, with the input within this element, gives it an added style on focus or use. Using the class item-note for a div element allows the button to be in line with the input tag. Doing so, gives a more seamless and sleek design, compared to the first one. Since Angular is also integrated into Ionic, we can use ngModel to easily link values in the views to that in the TypeScript files.

Ionic also comes with a built-in pack of icons, Ionicons. Its very simple to use, and a quick example would be substituting the Add task text with . Find more on Ionicons, here.

Final input tag

The final result! I’m quite happy with what it looks like now, but feel free to play around more with colors and styling.

Implementing create and read functionality

Now that the UI has been done, let's move on to giving this a function. It’s time to look at home.ts. You start off with code that looks like this;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    constructor(public navCtrl: NavController) {  }
}

Let’s get a quick look at what we have here. You import any components or external modules, that you may need to use in this page at the very top. The next few lines describe the template to which the many functions you may write belong to and manipulate. And lastly, all the logic you may code. Any code you wish to execute before viewing or interacting with the page must be written within the constructor.

Since we will be adding new to-dos each time, we need a place to store it. The simplest way to do this is to initialize an array. If you have had experience with JavaScript previously, coding with TypeScript will be a piece of cake!

Let’s call our list taskList, but since we need the list to be accessed from more than one method of the code, we need to initialize it outside the constructor taskList = [];. Now to write code to handle the Add Task button click, let's call it addTask. All we need to do is capture the text in the input, and push it onto the array. Since we have used ngModel for the input tag, we can easily get the value inside it by using this.taskName. And adding values to an array is as easy as taskList.push(task). We also need to ensure that no empty string is being added to the list, so wrap the above statement in an if condition, checking if the taskName truly exists. The final home.ts code;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    taskList = [];

    constructor(public navCtrl: NavController) {}

    addTask() {
        if (this.taskName.length > 0) {
            let task = this.taskName;
            this.taskList.push(task);
            this.taskName = "";
        }
    }
}

Note: Using the keyword let in TypeScript is the equivalent of using var, for variable declaration.

Now we can begin adding new tasks!

But how do we know something is being added???

Easy Peasy, ?Squeezy! That’s what the R in CRUD is there for!

Run the code and have a look

Time to C(reate) a way for us to R(ead) what we type! (See what I did there?)?

Let’s roll back to the home.html. So far, we have put an input tag and a button to add tasks; now to put a list to view it. We now need to link the method addTask() to the button in the (click) property, so that a list item is added to the array with each click.

is a special Ionic element for list views. The tag is used within it to generate each item in said list. *ngFor is an easy method of showing all elements within a list, by setting a standard view for each list item.

The final home.html code;


    <ion-navbar>
        <ion-title>To-do Listion-title>
    ion-navbar>

<ion-content padding>
    <ion-item>
        <ion-input type="text" [(ngModel)]="taskName" placeholder="Enter task"/>
        <div class="item-note" item-end>
            <button ion-button (click)="addTask()"><ion-icon name="add">ion-icon>button>
        div>
    ion-item>
    <div padding>
        <ion-list>
            <ion-item *ngFor="let todo of taskList">
                {{todo}}
            ion-item>
        ion-list>
    div>
ion-content>

The variable todo is a temporary store for the element in the current index of the for loop (ngFor) within the list taskList, as declared in the home.ts.

Ready to see our app so far?

We did it!! It works!!????

But that was just Create and Read. Will still have to implement Update and Delete.

We will first begin with changing the GUI so that it can fit both the update and delete features. Thereafter move onto the TypeScript code, to show its functionality.

Change that look to include handlers for U and D

Whoops! Little forgetful ole me! I didn’t change the app name on the home page… ???

Go ahead and call it whatever you wish (I’ll be basic with ‘To-do List’).

The first step, to be done in the home.html, is to add the delete button to the left side of each list item. That’s easy! Reuse the very same code I used to include the addTask button next to the input in the , nesting this button within the div with the class item-note, but change that + into an ?️icon (don’t want to get confused now, do we?). Since this is a button, give the event handler the name deleteTask(). The button will also have another style class clear, which gives it a clear background. Since this button will be within the that is in the , it will be generated for all items in the list.

We need to add another button to the list to edit each task. Luckily more copying of code! Copy the whole button tag, but replace the icon ?️ to a ✏️ and the click handler to updateTask().

The code for each tag now looks like this

"let todo of taskList; let i = index">
    {{todo}}
    class="item-note" item-end>
        <button ion-button clear (click)="updateTask(i)">
            <ion-icon name="create">ion-icon>
        button>
        <button ion-button clear (click)="deleteTask(i)">
            <ion-icon name="trash">ion-icon>
        button>

The statement let i = index takes the index of the specific element in the list, so that we can pass it over to the method, so only the element to be deleted would be affected.

Pretty neat, huh??

I quite like it and it looks so much better than the wireframe I originally designed.

Implementing update and delete functionality

Now to add functionality to our ?️ and ✏️.

We need to create a new method within the home.ts called deleteTask(), as specified in home.html above. We pass the index of the array from within the ngFor loop, so we know the exact position of the task to be deleted. Hop on over to home.html, and pass the parameter i, which is the index of the element in the array, within the deleteTask method, like so deleteTask(i). As you have passed the index through to the home.ts, you simply need to use the splice() method on the array to remove the desired task, passing the index of the item to be removed as a parameter, like so this.taskList.splice(index, 1);.

The code for the deleteTask method is;

deleteTask(index){
    this.taskList.splice(index, 1);
}

Short and sweet! ? That’s all the coding we need to delete tasks!

Now to update, it will take a bit more typing (bear with me)!

My plan is to open up an alert asking the user to enter the update text of the task. To do that, we need to import the AlertController, a module found in ionic-angular. You import it using this line of code.

import { NavController, AlertController } from 'ionic-angular';

You then need to initialize it in the constructor, like so;

constructor(public navCtrl: NavController, public alertCtrl: AlertController)

You will then need to create an alert in the updateTask method to capture the new task name. To do so, you will need to pass the following into the create method of the AlertController;

title — The title of the message.
message — A longer message (if required).
inputs — Input field with their name and placeholder (if any).
buttons — Buttons along with their role or handler (if any).

The alert can be displayed afterward with the simple alert.present()command. I will be having two buttons, one is a cancel button, the second is to edit and the handler code will simply take the entered task and switch it with the previous value in the array. The code for the updateTask() method;

updateTask(index) {
    let alert = this.alertCtrl.create({
        title: 'Update Task?',
        message: 'Type in your new task to update.',
        inputs: [{ name: 'editTask', placeholder: 'Task' }],
        buttons: [{ text: 'Cancel', role: 'cancel' },
                  { text: 'Update', handler: data => {
                      this.taskList[index] = data.editTask; }
                  }
                 ]
    });
    alert.present();
}

It should all work perfectly now!

Want to see the final CRUD app?

And there you have it! ??

A fully operational CRUD to-do list, with minimal coding! That’s how easy Ionic can be.

I still believe we can make it a bit more user-friendly. Scroll down for more add-on functionality.

Bonus!! — Auto-focus

Input without autofocus

Do you know what I find annoying? I need to click on the input each time I want to add a new task, even at the beginning. Why not auto-focus the input after clicking the button?

That’s exactly what we will do!

Auto-focus on Ionic is not as easy as it is in classic HTML/JavaScript interactions. You need to import an extra component called ViewChild. You can then easily connect the input from the view (home.html) to the controller (home.ts), and manipulate it as well. You import it, like so;

import { Component, ViewChild } from '@angular/core';

You can then connect the input tag to the component, outside the constructor, using this line of code,

@ViewChild('taskInput') input;

taskInput is the id of the input tag on the home.html page. Go ahead and add#taskInput to the input tag. The input tag can now directly be handled from within the TypeScript file.

Ionic comes with a few methods that can be invoked on certain app events, such as when a page loads onto the view, unloads and so on. These are called lifecycle events, and more about then can be found here. We can cause the app to auto-focus on the input from within the ionViewDidLoad(), by setting a timeout. The code would be;

ionViewDidLoad(){
    setTimeout(() => {
        this.input.setFocus();
    },350);
}

For the auto-focus to work after you add the line this.input.setFocus(); as the last statement in the addTask() handler. Lets head on out to see the changes we made!

Input with autofocus

Now that’s what you call seamless…?

Step 3 - Integrating Firebase Authentication

Firebase has everything, from authorization to a database to file storage, one of the many reasons it’s a good choice to add to mobile apps. In this post, we will explore Firebase, create a project and make a handler component for Firebase in the app.

Setting up the Firebase console

But first step’s first, you need to create a project on the Firebase console. All you need is a Google account to access Firebase. So head on over here to get started. Add a new project and give it a name (I just called mine ‘Tasks’), agree to everything they ask and hit Create Project.

Now to set up the project to fit our needs.

All the areas of Firebase that we will be accessing will be found under Develop.

Namely;

Authentication
And Database.

Let’s have a look at Authentication.

As you can see, all methods of authentication have been disabled. For now enable the very basic of types, Email/Password, so we can begin using it to register an account.

Under templates, the many email templates for verification of email address to forget password are can be found. If you wish, you can change a few of the details, like the project name to be displayed and the name of the sender.

Now, onward to the Database section. Firebase has two types of databases;

Realtime Database — a NoSQL database, that looks like one big JSON Object.
Cloud Firestore — A collection of documents, which are essentially JSON Objects.

Firestore is the better option as it has a better structure compared to the normal Realtime Database. In the Realtime Database, anybody can write data anywhere, if they have the reference to the database, greatly affecting all the data stored. And for that reason, I picked Firestore and created the database in test mode, so we can assess the database.

Firestore in test mode does allow anyone to read and write into it, so let’s make it that only users who have registered to the app have access to the database. To do so, switch allow read, write: if false; for allow read, write:if request.auth.uid!=null;. Only registered users have a unique uid, with which to distinguish them. Most often, the uid is used as the ID to the users' object. I will be implementing the same for this project.

Once the rules are changed, we need to create a collection, so all our user documents can be put into it. Since we cannot have a collection without at least one document, make a fake user. You can delete it from the dashboard later.

As we have set up the Firebase dashboard, let’s move on the integrating Firebase into the app.

Linking Firebase to the app

There is a special module AngularFire you can download using npm to incorporate Firebase into the Ionic app. To download, type npm install firebase angularfire2 --save.

To use this module, you need to import it into the app.module.ts page, like so

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';

We also need to add the necessary config data for the app to access and use the correct database. This can be found in the Project Overview section, ‘Add Firebase to your web app’. You are required to call the JSON object firebaseConfig and initialize it after the imports.

export const firebaseConfig = {
    apiKey: "#######################################",
    authDomain: "###########.firebaseapp.com",
    databaseURL: "https://###########.firebaseio.com",
    projectId: "###########",
    storageBucket: "###########.appspot.com",
    messagingSenderId: "############"
};

One last step! You need to include the imported modules above, into the import array of @NgModule that contains all the components used in the app, initializing the AngularFireModule as well with the config object above.

@NgModule({
    ...
    imports: [
        ...
        AngularFireModule.initializeApp(firebaseConfig), 
        AngularFireAuthModule, 
        AngularFirestoreModule
    ]
})

AngularFireAuthModule comes with many methods pertaining to authorization, like signup, sign in, forgot password, etc. All the methods we will be using will be found in the auth property of AngularFireAuth. The methods being used are;

signInWithEmailAndPassword() — Login
createUserWithEmailAndPassword() — Register
sendPasswordResetEmail() — Reset Password
signOut() — Logout

Implementing all the authentication logic

We need to add a listener, to check if the user has logged in or not, and to display the correct response for either. We need to add the listener in the app.component.ts, as it’s the first page of the app that is loaded.

const authObserver = afAuth.authState.subscribe(user => {
    if (user) {
        this.rootPage = HomePage;
        authObserver.unsubscribe();
    } else {
        this.rootPage = LoginPage;
        authObserver.unsubscribe();
    }
});

Import the necessary other modules, like the HomePage, LoginPage, and AngularFireAuth.

Let’s start coding the Register page first.

First, to add a new page to the app. There are two ways to do this;

Create a new folder within the pages folder inside src and create separate .scss, .ts and .html files.
Or, be lazy (like me ?) and just type ionic g page in the console. All three files will be auto-generated!

Since we need to conduct many validations on the data entered in the login, register and forgot password pages, we need to utilize a form group to have a track of all the fields in the form and to add any and all validation to each field, such as checking if the email looks like an actual email, password lengths, the works. We’ll first design the view of the page. In register.html, the form tag looks like so;

"signupForm" (submit)="signupUser()" novalidate>

novalidate is used as the actual validation is being added in the .ts file to the form group signupForm.

Then copy the exact item tag that we have been using to add task names in the home page (but remove that button, id and [(ngModule)] this time!). Add a tag for the users’ full name, email, password and confirm password. The type of input tag for the latter two is password and email for the email tag. You will also need to add a formControlName to each input tag. Add in a button as well of the type submit, to submit the form. The body of your register page must now look like this;

"signupForm" (submit)="signupUser()" novalidate>
  <ion-item>
    <ion-input formControlName="firstName" type="text" placeholder="First Name">ion-input>
  ion-item>
  <ion-item>
    <ion-input formControlName="lastName" type="text" placeholder="Last Name">ion-input>
  ion-item>  
  <ion-item>
    <ion-input formControlName="email" type="email" placeholder="Email">ion-input>
  ion-item>
  <ion-item>
    <ion-input formControlName="password" type="password" placeholder="Password">ion-input>
  ion-item>
  <ion-item>
    <ion-input formControlName="retype" type="password" placeholder="Confirm Password">ion-input>
  ion-item>
  <ion-grid>
    <ion-row>
      <ion-col style="text-align: center">
        <button ion-button center-all type="submit" [disabled]="!signupForm.valid">Create an Accountbutton>
      ion-col>
    ion-row>
  ion-grid>
<form>

The Register button is disabled until the Lets now add validators to each input, in the register.ts page. We will need to import the following modules to the top of the page,

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

initialize the form group outside of the constructor, so it can be accessed from anywhere in the component; public signupForm: FormGroup and initialize the form builder inside the parameters passed to the constructor, like so;

constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder){}

Validators will be added to the form within the constructor like so;

this.signupForm = formBuilder.group({
  email: ['', Validators.compose([Validators.required])],
  password: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  retype: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  firstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
  lastName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])]
});

Validators.compose creates a validation check for the value, according to the validations passed in its parameters. Most of these Validators are self-explanatory. The pattern Validator checks if the value fits a specific regex. But one question remains, how to validate if an email looks like an email? Apparently, we need to make one….

But don’t worry! It’s quite simple and the only logic to it is to see if it fits a certain regex.

We need to make a new folder ‘validators’ in the src folder and a file ‘email.ts’ within it. We will be declaring a static method to check the email. When validating the email, we send the formControl to the Validator, so in that case, we will need to import FormControl. Once the email is tested against the regex, we need to return a value to convey if the email is valid or not. The final code for the email validator is;

import { FormControl } from '@angular/forms';

export class EmailValidator {  
  static isValid(control: FormControl) {
    const re = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(control.value);
    if (re) {
      return null;
    }
    return {
      "invalidEmail": true
    };
  }
}

Now import the EmailValidator into the register.ts and add it to the array within the Validators.compose method for the email input.

this.signupForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
    ...
});

That’s it on the validation side.

Another added feature you can do is show an error message right below the input, or even have the input tag turn red if the validation returns a false. The code for the error message;

class="error-message" *ngIf="!signupForm.controls.email.valid  && signupForm.controls.email.dirty">
    <p>Please enter a valid email.p>

*ngIf allows you to display the error only if the validation is false. The errors should be put right below each tag, altering the message and input name (in the above example ‘email’) accordingly.

The code for a red input on validation error;

[class.invalid]="!signupForm.controls.email.valid && signupForm.controls.email.dirty"

Add this inside each input, again changing the inputs’ name accordingly.

Now to handle the button click!

Create the method signupUser(). We will be using the AngularFireAuth modules’ method createUserWithEmailAndPassword(). This returns a promise, that we need to capture and according to the result, handle either the sign in of the user or display an error message. To make it more user-friendly, also show a loading carousel to the user as signup takes place.

As the button is only enabled when the whole form is valid, we do not need to recheck on that fact. We will first check if the password and the retyped password are the same, and if they are, create the new user and add their information to the Firestore. If the two are different, display an error message in the alert, stating that they are different.

signupUser() {
  if (this.signupForm.value.password == this.signupForm.value.retype) {
    this.afAuth.auth.createUserWithEmailAndPassword(this.signupForm.value.email, this.signupForm.value.password)
      .then(() => {
        let userId = this.afAuth.auth.currentUser.uid;
        let userDoc = this.firestore.doc('users/' + userId);
        userDoc.set({
          firstName: this.signupForm.value.firstName,
          lastName: this.signupForm.value.lastName,
          email: this.signupForm.value.email
        });
        this.navCtrl.setRoot(HomePage);
      }, (error) => {
        this.loading.dismiss().then(() => {
          let alert = this.alertCtrl.create({
            message: error.message,
            buttons: [{ text: "Ok", role: 'cancel' }]
          });
          alert.present();
        });
      });

    this.loading = this.loadingCtrl.create({
      dismissOnPageChange: true,
      content: "Signing up.."
    });
    this.loading.present();
  } else {
    let alert = this.alertCtrl.create({
      message: "The passwords do not match.",
      buttons: [{ text: "Ok", role: 'cancel' }]
    });
    alert.present();
  }
}

You will need to additionally import AlertController, Loading, LoadingController, AngularFirestore and HomePage.

loading needs to be declared outside the constructor, so that it can be accessed by all the methods. AlertController, LoadingController and AngularFirestore needs to be initialized in the constructor parameters.

And (finally) the register page is done!

Whew! ?? This is the longest post I’ve ever written. And there’s still more to go…..

But don’t worry! The rest is all just copy + paste.

The next page to tackle is the Login page. Copy the entire Register page form to login.html, coz its time to make some changes for it to fit Login. Remove the first name, last name and retyped passwords’ input tags and error messages. On the form tag, change all instances of signupForm to loginForm.

Change the submit buttons’ text to ‘Login’ and the onSubmit method to loginUser(). Add two buttons as well, outside the form, to navigate to the register and reset password pages. The final body of login.html;

"loginForm" (submit)="loginUser()" novalidate>
  <ion-item>
    <ion-input formControlName="email" type="email" placeholder="Email" [class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty">ion-input>
  ion-item>
  <ion-item class="error-message" *ngIf="!loginForm.controls.email.valid  && loginForm.controls.email.dirty">
    <p>Please enter a valid email.p>
  ion-item>
  <ion-item>
    <ion-input formControlName="password" type="password" placeholder="Password" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty">ion-input>
  ion-item>
  <ion-item class="error-message" *ngIf="!loginForm.controls.password.valid  && loginForm.controls.password.dirty">
    <p>Your password must be more than 6 characters longp>
  ion-item>
  <ion-grid>
    <ion-row>
      <ion-col style="text-align: center">
        <button ion-button center-all type="submit" [disabled]="!loginForm.valid">Loginbutton>
      ion-col>
    ion-row>
  ion-grid>

<button ion-button block clear color="danger" (click)="resetPwd()">
  I forgot my password
button>
<button ion-button block clear (click)="createAccount()">
  Create a new account
button>

There you have it! The UI is done.

The loginForm has the same Validators for the email and password fields. So, proceed to copy the same formBuilder, omitting the first name, last name and retyped password fields.

this.loginForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])]
});

The loginUser() method has similar code to that of the signupUser method. So copy that on to the login.ts as well. The change to be made, is to remove the password comparison and accessing the database.

loginUser() {
 this.afAuth.auth.signInWithEmailAndPassword(this.loginForm.value.email, this.loginForm.value.password).then(() => {
   this.navCtrl.setRoot(HomePage);
 }, (error) => {
   this.loading.dismiss().then(() => {
     let alert = this.alertCtrl.create({
       message: error.message,
       buttons: [{ text: "Ok", role: 'cancel' }]
     });
     alert.present();
   });
 });
 this.loading = this.loadingCtrl.create({
   dismissOnPageChange: true,
   content: "Logging in.."
 });
 this.loading.present();
}

You will need to import the exact extra modules to the login.ts as well, with the exception of the AngularFirestore, as you will not be accessing the database now.

Now to handle the buttons to the reset password and the registration page;

resetPwd() {
    this.navCtrl.push(ResetPasswordPage);
}

createAccount() {
    this.navCtrl.push(RegisterPage);
}

The pages work like a stack; you push the next page to the top of the stack and pop from the top as well.

Bear with me, we have one more page to go. Yay! More copy+paste!

For the reset password, we only require the email field, but still, need a form to validate the email entered. Much like for the Login page, copy the entire login.html form, remove all fields except the email input tag and error message, change all instances of loginForm to resetPwdForm. You are left with;

"resetPwdForm" (submit)="resetUserPwd()" novalidate>
  <ion-item>
    <ion-input formControlName="email" type="email" placeholder="Email" [class.invalid]="!resetPwdForm.controls.email.valid && resetPwdForm.controls.email.dirty">ion-input>
  ion-item>
  <ion-item class="error-message" *ngIf="!resetPwdForm.controls.email.valid  && resetPwdForm.controls.email.dirty">
    <p>Please enter a valid email.p>
  ion-item>
  <ion-grid>
    <ion-row>
      <ion-col style="text-align: center">
        <button ion-button center-all type="submit" color="danger" [disabled]="!resetPwdForm.valid">Reset Passwordbutton>
      ion-col>
    ion-row>
  ion-grid>

The same is to be done for the reset-password.ts file. The form builder looks like this;

this.resetPwdForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])]
});

while the resetUserPwd() method looks like so;

resetUserPwd() {
 this.afAuth.auth.sendPasswordResetEmail(this.resetPwdForm.value.email).then((user) => {
   let alert = this.alertCtrl.create({
     message: "We just sent a link to reset your password to your email.",
     buttons: [{ text: "Ok", role: 'cancel',
       handler: () => {
         this.navCtrl.pop();
       }}]
   });
   alert.present();
 }, (error) => {
   let errorAlert = this.alertCtrl.create({
     message: error.message,
     buttons: [{ text: "Ok", role: 'cancel' }]
   });
   errorAlert.present();
 });
}

The handler code above pops the reset password page to show the login page once the request for the link is sent.

One last part (I’m so sorry! I’m tired too)…??

The logout button, the easiest and smallest code!

You need to put a button at the end of the header on the home page as shown below;


    <ion-navbar>
        <ion-title>To-do Listion-title>
        <ion-buttons end>
            <button ion-button (click)="logout()">Logoutbutton>
        ion-buttons>
    ion-navbar>

The code to handle the logout in home.ts;

logout() {
    return this.afAuth.auth.signOut().then(authData => {
        this.app.getRootNav().setRoot(LoginPage);
    });
}

The code after the ‘then’ takes the user back to the login page.

And that’s it! Finally! ??

To allow the app to use these pages, you need to include them in the app.module.ts page, in both the declarations and entryComponents arrays, like so;

@NgModule({
    ...
    declarations: [
        ...
        LoginPage, 
        RegisterPage, 
        ResetPasswordPage
    ],
    ...
    entryComponents: [
        ...
        LoginPage, 
        RegisterPage, 
        ResetPasswordPage
    ]
})

Let’s have a look at all we have achieved so far.

App with Authentication

And there you have it! ?? It’s not so easy on the eyes, but it is definitely functional.

As you can see, when a particular fields’ validation returns false, the input turns red, and the error message shows as well. The buttons stay disabled until all fields of the form are valid!

Below, the user object has also been stored in Firestore, with the current users’ uid as the key to the document. It all works!

Firestore Document

Now that authentication and by extension user objects has been implemented, we now go on to syncing up the CRUD operations with Firebase Cloud Firestore.

Step 4 - Syncing CRUD actions with Cloud Firestore

The coding will be quite simple, as we have already integrated AngularFire into our app. The major changes will be made only to the back-end logic in the home.ts file, and one simple addition to the home.html to handle lists we get from Firestore.

The C in CRUD to Firestore

We’ll first start with adding functionality to the addTask() method. But first we need to import AngularFirestore to the home.ts and initialize it in the constructor, like so;

constructor(...public firestore: AngularFirestore) {}

As mentioned in the previous post, Firestore is not like its predecessor, it is not one big JSON structure. Instead, it works with something called documents. Each document is one uniquely JSON object that holds only one type of data, for example, the user object will only hold user data, such as their name, date of birth and other personal information, but not any other data.

Many documents of the same type make up a collection. And sometimes an object can have a collection of different objects inside it, and that’s what we are doing today; making a collection of task objects for each user.

If you can remember, in the previous post, we took the user’s uid, a unique ID that Firebase assigns all its users that sign up as the ID for the users’ JSON object. We will be requiring it heavily today as well, so the first thing to do is capture the uid from AngularFireAuth. As many methods will be using this value, it will be best to declare this variable outside the constructor, then initializing it inside ionViewDidLoad.

We put it in ionViewdidLoad(), because sometimes the user details from AngularFireAuth is not ready by the constructor. And since we will be accessing only that collection within the users' object, go ahead and grab that as well, similar to the register page. All this is added within the call to get the userId.

this.afAuth.authState.subscribe(user => {
    if (user) {
        this.userId = user.uid;
        this.fireStoreTaskList = this.firestore.doc('users/' + this.userId).collection('tasks').valueChanges();
        this.fireStoreList = this.firestore.doc('users/' + this.userId).collection('tasks');
    }
});

The reason why we have two lists is the fireStoreTaskList holds the list that we view, while the fireStoreList is the reference to the collection where we directly add the new tasks. The method valueChanges() returns an Observable List, which we can display in the view.

We can now use this reference anywhere in the page. Using it to add a task in the addTask method is very simple. There is a need to have a specific ID for each task, as we will require it when attempting to update the taskName, so we need to generate the ID and use the set() method of the firestore collection, to create a new task object, inside the if condition, replacing the previous code that pushes the task name into taskList.

let id = this.firestore.createId();
this.fireStoreList.doc(id).set({
    id: id,
    taskName: task
});

The R in CRUD in the App

Now to set up viewing the firestore list. The main part, getting the collection was done above. So the changes now need to be made to the home.html to view the fireStoreTaskList.

The first change is to be in the *ngFor, the name of the list. Since the list will be a response back by firebase, its asynchronous. The normal *ngFor, will cause errors. We need to add an async pipe as well, like so;

"let todo of fireStoreTaskList | async">

We no longer need to keep track of the index, as we will be using the task ID to either delete or update its value. And the second change is the value that we will view since todo will now be an object, we need to display todo.taskName, as that’s what we have named the task variable in the task object.

{{todo.taskName}}

And that’s it! Lets now have a look at both the app and Firestore, to see if it gets saved.

Create and Read tasks

Newly created task

It’s got saved!

There’s nothing much to it for the C and R in CRUD. Now to update then delete.

The U in CRUD to Firestore

Luckily, AngularFirestore has its own update function, which, given the documents’ ID as well as the values to be updated, can be done in one single line. But first, a small change in the home.html file, to allow this to happen. As said earlier, you don’t need the index of the task in the list to update or delete, but instead the document ID, which we have simply stored in the variable id of a task object.

Our first order of business is to send the tasks’ id to the method from the button, like so;

Move over to home.ts and replace the code in the handler of the alert to;

this.fireStoreList.doc(index).update({ taskName: data.editTask });

We first create a reference to the specific object that the user wishes to update using the doc() method, then sending the relevant data we wish to update into the update() method.

Now to see this functionality in action!

Update task name

Updated task name

This one works too!

Now onto the last change, delete.

The D in CRUD to Firestore

Deleting is just as easy (or easier, really) than updating.

You will again, need to pass the tasks’ ID onto the delete button;

Again like for update, AngularFirestore has a function delete(), that is run on the reference of the document to be deleted, like so;

this.fireStoreList.doc(index).delete();

And now to watch the last functionality….

Delete task

Task deleted in Firestore

This one is functional too!

As you can see, the ‘Fold Clothes’ task with an ID of ‘NSskIVHEg4gKsT3U0xAV’ is no longer there, as it has been successfully deleted

There you have it! Firebase integrated into all the CRUD operations.

Step 5 - Bonus content styling

This is a short checklist of basic things that weren’t covered in the previous posts;

Custom styles ?
Images ?️
Custom fonts ?

Prettify the UI

Going through my app, I was able to see a few things I wanted to change.

Remember those little messages below the input fields in the login, register and reset password pages?

Error message with underline

I just realized that, since they are essentially , they have a line at the bottom. Not that great.

Thankfully, it’s a simple fix! There’s a global property called no-lines, that you need to add to the like so;

So go ahead and add this to all the error message tags.

Error message without underline

Your error message now looks like this.

Let’s move on to colors!

If you snooped around the project structure, you would have seen a folder called theme. The variables.scss file within has a color variable with 5 set colors. Keep the colors light and dark as they are, as well as danger, as we are using it for the reset password button and page. I will be only changing the primary and secondary color. I normally use coolors.co to find complementary colors for all the projects I’ve ever done.

Disclaimer: Do not add more than those 5 colors to the object, as this causes multiple copies of components to be made for each of these colors. It will eventually add unwanted bulk to the project, as not all components with all colors are used. If you need to use more colors, add a new variable to hold only that color literal.

The colors I will be using are;

$colors: (
    primary:    #32B596,
    secondary:  #fff350,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222
);

The first place to splash some color is the top navbar.

Boring…

Looked so bland right??

Ooh la la!

Not any more.??

All you need to do is add the color primary to the ion-navbar tag, like so;

'primary'>

You can add the color property similarly to other components. Such as, give the delete icon the color stored in danger, or the add and logout button the color in secondary;

Adding colors everywhere!

I still hate the way that the logout button looks… To make it a proper button, simply add the property solid to the tag, like so;

Buttons must look like buttons!

Another cool UI design I saw previously, had icons before each input tag on the login, register and reset password pages, so I decided to give that a try as well! It’s a pretty simple code, that you need to add within the tag but before the tag, like so;


    <div class="item-note" item-start>
        <ion-icon name="at" color='primary'>ion-icon>
    div>
    <ion-input formControlName="email" ...>ion-input>

There is no icon that screams password, so I decided to use ? just like in the UI design I had a look at; and ? for the users’ names

Input icons of the register page

Adding images

A picture says a thousand words… But we have no need for such pictures…. ?No matter!

Adding pictures are not necessarily tough, but the path may get a bit confusing sometimes. You would assume that you need to add the actual path from the page to the image folder, which is ../../assets/imgs/imagename.png. The path you really need to add is the path from the app.html to the image in the image folder, and that path looks like assets/imgs/imagename.png.

Any and all images you wish to use needs to be added to the folder src/assets/imgs. You can then use the image as if this was HTML;

"assets/imgs/imagename.png"/>

I want to add an image, kinda like a logo, to the login, register and reset password pages.

So that the image doesn’t exceed the page, we will also need to code some styling, and as this image will be in more than one page, we are required to write the styling in the app.scss page like so;

.imageTop {
    height: 200px;
    padding: 20px;
    margin: auto;
    display: block;
}

All you need to do now is simply add the class to the img tag, class='imageTop'.

Another image (or two) that you might want to change, is the splash page and app icon. You will first need to add either (or both) Android and iOS platforms, to use this feature. The command to add a platform is

ionic cordova platform add android

Or ios, if that’s your cup of ☕.

Ionic can easily generate different sized splash pages and icons according to different phones when you run the command ionic cordova resources in the terminal. You will need internet for this, as ionic uploads both images to be analyzed to generate the other splash pages and icons.

Before that you need to add both the images, named splash.png and icon.png to the resources folder. The sizes of both images should be 27322732 and 10241024 respectively, for the many splash pages and app icons to be generated.

That’s all for images!

Typography Rox(cks)!

First, find a font that speaks to you. The latest trends stick to sans serif fonts that are pretty easy to read. As pretty as many handwritten flowy fonts are, they are just a fail waiting to happen, like this one….

I love ?too!

Or this one,

Hope has never looked so bleak!

???

Jokes aside, I picked the font ‘Alegreya Sans’ to use for this app. It can be found, here.

Unpack all the fonts to the folder assets/fonts.

All you need to do now is add the code below to the variables.scss found in the src/theme folder.

@font-face {
    font-family: 'Alegreya Sans Regular';
    src: url("../assets/fonts/AlegreyaSans-Regular.otf");
}
$font-family-base: 'Alegreya Sans Regular';
$font-family-ios-base: 'Alegreya Sans Regular';
$font-family-md-base: 'Alegreya Sans Regular';
$font-family-wp-base: 'Alegreya Sans Regular';

The @font-face imports your font and gives it a name, so it can be used throughout the application.

The variable $font-family-base assigns the default font.

The app now looks like this;

No one needs to see that password!

As you can only view the splash page and icon on a real device, I have brought in my trusty phone into the mix (Sadly it ain’t an Apple to fit with the rest of the gifs/pics).

And that’s it for this series!!!!!??

Find the repo for this post, here.

I hope you all had fun and learned a lot on this journey with me!

Thank you for the read, and see you soon!??

Learn Ionic 4 and start creating iOS / Android Apps

Beau Carnes — Fri, 17 May 2019 13:40:00 +0000

Learn how to use Ionic 4 in this full course for beginners from Awais Mirza. Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single JavaScript codebase.

In this tutorial you will learn how to build a mobile app with Ionic and Angular from scratch. You will learn the basic concepts of Ionic and the Ionic CLI.

Here are a few of the topics covered:

Ionic Installation
Project Structure
Emulating iOS and Android
Routing and Lazy Loading
Action Sheet
Components
ION Alert and Documentation
Ionic Native
Debugging
Native HTTP Plugins
Native SMS Plugins
Native Storage

You can watch the full video course on the freeCodeCamp.org YouTube channel (3 hour watch).

How to Build Your First Ionic 4 App with API Calls

freeCodeCamp — Mon, 04 Feb 2019 16:37:38 +0000

By Simon Grimm

So you just noticed that Ionic 4 was released and you finally want to get started with cross-platform app development? Well, today is your day! We’ll go through building your first Ionic 4 application with HTTP Calls to the Open Movie Database!

Whether you are completely new to Ionic or have used previous versions, we go through all the basics. We will cover how to set up a new app, routing and even API calls to display async data inside our app.

If you want to learn Ionic even faster you can also check out my Ionic Academy which was made for developers just like you!

Ready? Go!

Setting up Our Ionic 4 App

If you are new to Ionic you need to make sure you have the Node Package Manager installed. If you have worked with other web technologies before chances are pretty good you already got everything you need.

If you also haven’t used Ionic before, you need to install it through npm. Once installed you are finally ready to create your Ionic 4 project!

To set up a blank project you can use the Ionic CLI so we end up with a fresh Ionic 4 project with Angular support (you could also use React or Vue, better support coming later this year).

Once the project is created we cd into the folder. We use the CLI, which uses the Angular CLI under the hood, to create new pages for our app that we want to display.

# Install Ionic if you haven't before
npm install -g ionic

# Create a blank new Ionic 4 app with Angular support
ionic start movieApp blank --type=angular
cd movieApp

# Use the CLI to generate some pages and a service
ionic g page pages/movies
ionic g page pages/movieDetails
ionic g service services/movie

You can now directly bring up your app by running the following command inside your project:

ionic serve

This will open the browser with the preview of your app which will reload automatically once you change anything inside your project.

Speaking of the project, we got a bunch of files and folders in here, let’s see what all this means. We will focus on the src folder of our app since we don’t have to worry about the rest for now.

Your Ionic 4 Project

App

This is the folder where we will make all the code changes that follow later in this tutorial. It already contains a home folder that’s basically a page like we created before. I like to have all pages in their own pages folder so you can remove the home folder as well for now.

The pages folder contains the actual views/pages of our app, which means the element we will see on the screen. Right now we already got 2 pages in here, and each page you create with the CLI comes with 4 files:

.module.ts: The *Angular module for a page. Each page is basically their own module (related to the Angular architecture) with imports and styling
.page.html: The *HTML markup for a page
.page.scss: The *styling for the specific page (more on global styling later)
.page.spec.ts: An automatically added *testing file for your page. Good if you want to set up automated unit tests
.page.ts: The *controller for a page that contains the Javascript code that manages the functionality

The services folder contains our previously created service — this is about structuring your app according to best practices and separating concerns between the view and the actual data of your app. The service will take care of handling the API calls and simply return the data to our view later!

Assets

This folder contains all the images, fonts or whatever assets you need for your app later down the road.

Environments

From time to time your project might have a development, staging and production environment with different servers that your app targets. The environment folder helps to set up information for different environments. We can later build our Ionic app with a command line flag and it automatically takes the right values. Very handy!

Theme

This folder only contains the variables.scss that contains predefined color information from Ionic. We can always change this file and even use a tool like the Ionic Color Generator to create our own flavored version of this file!

Outside of the folder we also have the global.scss. Here we can write some SCSS that will be globally applied to our app. We can also define it just for one page in their own styling files.

Other Files

The most relevant of the other files might be the index.html because just like with every other website, this file marks the entry point to our app! For now, though we don’t need to change a thing in here so let’s now start to get into the actual code.

Prerequisite Routing & HTTP Calls

With Ionic 4 we move on from a proprietary routing concept to the standard Angular Router. The markup might look a bit more difficult in the beginning, but it actually makes totally sense.

For all the connections inside your app, you set up routing information upfront — just like you navigate around on a website!

In our app we need 2 routes:

/movies — Navigate to our first page which should display a list of movies
/movies/:id — We want to be able to show the details for one movie so we add a param :id to the route that we can dynamically resolve

We also need to connect the according page (more specific: the module of the page) to the route so Angular knows how to resolve a specific route. We supply this information using loadChildren which actually only gets a string to the module path.

This means we are not really importing another module here, therefore, the pages are using lazy loading. That means they will only be loaded once we navigate there!

To setup our routing information open our app/app-routing.module.ts and change it to:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'movies', pathMatch: 'full' },
  { path: 'movies', loadChildren: './pages/movies/movies.module#MoviesPageModule' },
  { path: 'movies/:id', loadChildren: './pages/movie-details/movie-details.module#MovieDetailsPageModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

By making this change we have also disconnected the home page which was initially in the project (and which you might have deleted already at this point).

Now the app will load our movies page as the first page, great! You should also notice this change in your running ionic serve instance already.

Tip: If you want to get a better feeling for how your app will look on a real device you can also run ionic lab instead of serve but you have to install the package upfront:

# Install the Lab Package

npm i @ionic/lab

# Run your app with device preview and platform styles

ionic lab

This package was previously bundled with every new app but needs to be installed for Ionic 4 now.

/Tip End

We also need to apply another change to our app as we want to make HTTP calls. Therefore we need to import another Angular module for making those requests.

The way of doing this is the same as with Ionic 3. We just need to add the HttpClientModule to our main module file and add it to the array of imports like this inside our app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Before we dive into more Ionic 4 code we first have to set up the service that powers our app and handles all the HTTP requests that we later want to call.

Making HTTP Requests

A service is the same as in previous versions a provider and can be injected into our controller in order to call its functions.

In order to use the Open Movie Database you need to request an API key and insert it into our service — the process is free so go ahead right now.

With the API we can now search for strings and get results in form of movies, episodes or even games. Also, we can get detailed information for one specific object of those results so a perfect use case for our first Ionic 4 app!

Our service only needs 2 functions:

searchData(): This function searches for results to a specific title and search type – an enum we defined upfront to represent the types that we can pass to the API using TypeScript!
getDetails(): This function returns the detailed information for one specific element, will be used on our details page

Both functions will return an Observable which is like a Promise on steroids. No serious, it’s like a stream of events that we can subscribe to. Explaining this concept would take another post. For now, let’s use it and keep in mind that both of our functions are async — they will return the API data not immediately.

Now go ahead and change your services/movie.service.ts to:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// Typescript custom enum for search types (optional)
export enum SearchType {
  all = '',
  movie = 'movie',
  series = 'series',
  episode = 'episode'
}

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  url = 'http://www.omdbapi.com/';
  apiKey = ''; // <-- Enter your own key here!

  /**
   * Constructor of the Service with Dependency Injection
   * @param http The standard Angular HttpClient to make requests
   */
  constructor(private http: HttpClient) { }

  /**
  * Get data from the OmdbApi 
  * map the result to return only the results that we need
  * 
  * @param {string} title Search Term
  * @param {SearchType} type movie, series, episode or empty
  * @returns Observable with the search results
  */
  searchData(title: string, type: SearchType): Observable<any> {
    return this.http.get(`${this.url}?s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe(
      map(results => results['Search'])
    );
  }

  /**
  * Get the detailed information for an ID using the "i" parameter
  * 
  * @param {string} id imdbID to retrieve information
  * @returns Observable with detailed information
  */
  getDetails(id) {
    return this.http.get(`${this.url}?i=${id}&plot=full&apikey=${this.apiKey}`);
  }
}

I’ve also added some documentation to the functions — with a tool like Compodoc you could now create nice documentation!

Alright, now we are finally ready for some more Ionic 4 code!

Searching for Movies

We start our apps functionality with the things that happen in the background and then build the view on top of it.

So right now we need to implement the logic to submit a search term and type to our service and receive the results. Therefore, we inject the service through our constructor so it’s available to the class.

In another function that we call searchChanged() we will now simply call the according function of our service and set the result to a local variable b>results. Our view will later handle the data that comes from the API and display it using this variable.

We also keep 2 more variables for the searchTerm and type inside our class that we pass to the service. We will connect with them from the view as well so we can change them.

Now go ahead with the code for your controller inside the pages/movies/movies.page.ts:

import { MovieService, SearchType } from './../../services/movie.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.page.html',
  styleUrls: ['./movies.page.scss'],
})
export class MoviesPage implements OnInit {

  results: Observable<any>;
  searchTerm: string = '';
  type: SearchType = SearchType.all;

  /**
   * Constructor of our first page
   * @param movieService The movie Service to get data
   */
  constructor(private movieService: MovieService) { }

  ngOnInit() { }

  searchChanged() {
    // Call our service function which returns an Observable
    this.results = this.movieService.searchData(this.searchTerm, this.type);
  }
}

Now the view which looks a lot like Ionic 3 code, just a few of the elements changed their names and properties. For everyone new to Ionic in general: Welcome to your first Ionic components!

A page can be separated into 3 areas: Header, content, footer. In our case, we don’t want a footer so we only define the header area with a title and the content with our actual elements for the search.

The first element that affects the search is the ion-searchbar which is a simple input you have seen in many apps before to search for a term.

We always want to call our search functionality when the type or searchTerm changes. We can do this by catching the (ionChange) event of some of our elements.

Below we got a select drop down with options and the according value for the different types that we could pass back to the API.

You should have also noticed the [(ngModel)] syntax through which both elements are connected to our controller properties. If one side changes, the other will automatically get the new value as well (also known as 2-way data binding).

So we got the search in place and now add another list with elements below our previous components.

For the list, we use an iteration over our results variable. Because this variable is an Observable (remember the implementation in our service) we need to add an Angular Pipe “| async” to it. The view subscribes to the Observable and handles the changes accordingly.

We also add the routing directly to this element by using [routerLink]. We construct the path that we want to open when we click on the element. We use the imdbID property of the item so we can resolve the information on our details page later.

Besides that, we create the markup for one item using the Poster which is an image, the title, year and finally also a cool icon at the and based on the type of the item. Yes, those cool icons are already bundled with your app and are called Ionicons!

With all of that in mind change your pages/movies/movies.page.html to:


  "primary">
    My Movie Search
  




  "searchTerm" (ionChange)="searchChanged($event)">

  
    Select Searchtype
    "type" (ionChange)="searchChanged($event)">
      "">All
      "movie">Movie
      "series">Series
      "episode">Episode
    
  

  

    "let item of (results | async)" [routerLink]="['/', 'movies', item.imdbID]">
      "start">
        "item.Poster" *ngIf="item.Poster != 'N/A'">
      

      
        {{ item.Title }}
        {{ item.Year }}
      

      "end" *ngIf="item.Type == 'movie'" name="videocam">
      "end" *ngIf="item.Type == 'series'" name="tv">
      "end" *ngIf="item.Type == 'game'" name="logo-game-controller-b">

By now you should be able to search for a specific term inside your app and get a list of results — that’s already a big win!

Searching for movie title works!

If you are coming form Ionic 3 you might have also noted another new property called slot so here’s some info on that:

Ionic 4 components are built using Stencil (yeah, they actually created that tool as well!) so they are standard web components — you could import them basically everywhere on the web! These components also use the Shadow DOM API and are basically living outside of the scope of your regular DOM elements.

That means also standard styling will sometimes not affect these components like it was possible in previous versions!

In order to get information into these components, we can inject certain parts of HTML into their slots that are defined on these elements. You can see how their implementation looks like on the example of the ion-item we used here.

Presenting Detailed Information

Ok enough of background information, let’s put some more work into the details page of our app. We have implemented a route and we also created a button that passed an ID with that route so the details page will be open, but we need to get access to the ID!

With previous Ionic versions we could easily pass whole objects to new pages, this is now not a best practice anymore. Instead, we pass only small chunks of information (like an ID) with the URL. Otherwise, you would end up with a huge JSON stringified term inside the URL. This isn’t really something we want to have.

To get access to this ID field (that we already defined inside our routing in the beginning) we can use the ActivatedRoute and its properties.

So after we extract the ID from the params we can make another call to our service (that we injected through the constructor again) and get the detailed information for whatever ID we got.

Nothing really new so let’s add the following code to our pages/movie-details/movie-details.page.ts:

import { MovieService } from './../../services/movie.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-movie-details',
  templateUrl: './movie-details.page.html',
  styleUrls: ['./movie-details.page.scss'],
})
export class MovieDetailsPage implements OnInit {

  information = null;

  /**
   * Constructor of our details page
   * @param activatedRoute Information about the route we are on
   * @param movieService The movie Service to get data
   */
  constructor(private activatedRoute: ActivatedRoute, private movieService: MovieService) { }

  ngOnInit() {
    // Get the ID that was passed with the URL
    let id = this.activatedRoute.snapshot.paramMap.get('id');

    // Get the information from the API
    this.movieService.getDetails(id).subscribe(result => {
      this.information = result;
    });
  }

  openWebsite() {
    window.open(this.information.Website, '_blank');
  }
}

We also added another function to open a website using the window object and the information from the data of the API that we stored in the local information variable.

Now we just need to create a view based on the JSON information of the API. It always helps to log() out the info you got so you see keys that you can use to display some values.

In our case, we use the Ionic card component and add the image and some items with information and more icons (did I say I really like the Ionicons?).

We also added a button below that card that will be displayed if the result information contains the website key. We just have to add our function to the (click) event of the button in order to hook everything up!

On another note, we also have to add an ion-back-button to the header of that page in order to get a nice little back arrow to our previous movie list page. This was automatically done in v3 but needs to implemented manually as of v4!

Now finish your details view by changing your pages/movie-details/movie-details.page.html to:


  "primary">
    "start">
      "/">
    
    {{ information?.Genre }}
  




  "information">
    
      
        {{ information.Title }}
      
      
        {{ information.Year }}
      
    
    
      "information.Poster" class="info-img">
      {{ information.Plot }}

      "none">
        "star-half" slot="start">
        {{ information.imdbRating }}
      

      "none">
        "clipboard" slot="start">
        {{ information.Director }}
      

      "none">
        "contacts" slot="start">
        {{ information.Actors }}
      

      "full" (click)="openWebsite()" *ngIf="information.Website && information.Website != 'N/A'">
        "open" slot="start">
        Open Website

If you now take a look at your browser you might notice that the image looks waaaay to big as its taking all the space available. Let’s change this through some good old CSS so open your pages/movie-details/movie-details.page.scss and insert:

.info-img {
    max-height: 30vh;
    object-fit: contain;
    padding: 10px;
}

Now our results look a lot more appealing.

Our finished Ionic 4 App

We can search, select a movie type, dive into a search result and have a fully functional Ionic 4 app with HTTP calls finished!

Conclusion

While it was a straight forward experience to build our first Ionic 4 app there are so many things we haven’t talked enough about.

UI patterns like Tabs and side menu, CSS variables, responsive layout and PWA to just name a few on the side of Ionic and Angular.

And we haven’t even touched the Cordova side of things to actually build this app into a real native mobile app!

If you want to learn how to develop Ionic 4 apps as fast as possible and get them to the iOS & Android app stores quickly you can join the Ionic Academy today and enjoy expert screencasts, a library of quick wins and a community to support you on your journey!

And of course, I (Simon) am also present inside to answer all your questions all the time

You can also find a video version of this guide below!

Originally published at ionicacademy.com on January 24, 2019.

How to dynamically theme your Ionic application and make your users happy

freeCodeCamp — Thu, 10 May 2018 16:35:02 +0000

By Ryan Gordon

Designing a sleek color scheme for your mobile application can be time consuming. Why not let the user choose their own favourite theme?

This is one of my favorite features in apps. It provides a great experience for users who don’t want to be tied down to one primary accent color scheme or want to personalize the theme to suit their own style.

A great example of dynamic themes in the ToDoist app

In this Medium post, we will work through a project which will have a number of themes the user can select at run-time just like above. When a theme is selected by the user, ideally this change should happen in real-time rather than requiring the user to reopen the app.

Installation and getting started

Ionic, if you haven’t used it before, is a mobile application framework which lets you write mobile apps in HTML, CSS, and Typescript. With one shared codebase, you can develop an application for iOS or Android or you can deploy it as a web app.

To install Ionic, open a terminal and enter :

npm install -g ionic@latest

Note: you must have Node JS and npm installed. If you get an error with code ‘EACCES,’ then you may need sudo or admin privileges.

For this tutorial, the sidemenu template provides a good starting point. To generate a project with this template, enter this command into the terminal:

ionic start sidemenu

Example terminal output from the CLI

After the project has generated, change into the directory with:

cd pp>


Now you have an Ionic project with a sidemenu and two pages ready to go! To see your creation, enter ionic serve in your terminal.
Setting up the first 2 themes: Todoist Red vs Noir
In order to set up the first two themes, we’ll need to complete a number of steps. Pretty much all of these steps need to be followed in order to get the themes working.
First, we need to denote an SCSS file which will be used when the theme is applied. In the src/theme directory of your project, you’ll find a variables.scss . The respective theme files are located here, too. Create a new file called:
red.theme.scss
This file will be used to apply the first theme. From this file, any of the default Ionic styling can be overridden. There are two options for how we can apply the themes:
Option 1: Styling just the navbar and certain elements
Option 2: Applying the theme to all background content
Here is an example of both options applied. The code has a checkpoint halfway down. If you don’t want to style the whole app, comment out the rest of the code below it:
That’s the first SCSS file created! Next will be for dark mode. Create another new file called:
noir.theme.scss
This file will be used to apply the second theme. We won’t need to change much for the second theme to work other than changing the hexcode values to a colour such as #33333 .
It’s important to note, though, that we will need to rename the SCSS class from theme-red to something unique for this theme. I’ll call mine theme-noir .
The next step is to import the SCSS files into the app itself. This is important, otherwise the theme won’t be loaded into the app. Head to the app.scss file located at src/app/app.scss where you can import the theme like so:
@import '../theme/red.theme';@import '../theme/noir.theme';
Now that we’ve created and imported the theme files into the project, the SCSS side of things is taken care of! Now onto the Typescript and HTML.
Programmatically changing the theme
Changing the theme itself will only require three more steps for a simple setup:

a wrapper around the app
a function to change the theme at run-time
something to hold the state of the current theme

The AppState class
The AppState class will be an injectable Angular component that holds what the current theme, and that can also be used to update the theme.
There isn’t much to how it works, other than that it has an internal state variable. When a Get operation is called, a clone of the state is returned. When a Set happens, a property of the state is updated with a new value, in this case the theme.
The AppState will hold the current theme and allow modification, but it will need to be imported into the component you want to use it with.
When an Ionic app is first setup using the CLI, you’ll find the following code in the app.component.ts :
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Default Red Theme', component: HomePage },
{ title: 'List', component: ListPage }
];
The array that’s displayed is used to provide content for the sidemenu. This sidemenu will serve as our theme switcher in this project rather than a navigation menu.
Change the values in this.pages to reflect the names of the themes you want the user to see (like the theme file that will be applied, and any other assets like images files).
In this example, the ‘theme file’ is going to be the name of the CSS class that we want to use. We’ve already imported the SCSS files by the time the app is running. So rather than accessing the file itself, we access the root class in that file. In the case of the red theme, the ‘theme-noir’ class will be applied.
Displaying available themes and applying the wrapper
The last step we need to take will be to add a wrapper div. This will be the top level element in the app.html file. This wrapper will have the chosen theme applied to it, allowing children elements to receive style updates also. An example of this in app.html would look like this:

class="{{global.state['theme']}}">
    //in here you will have the rest of app.html

In terms of display, if you followed above and renamed the this.pages array to this.themes so it holds your available themes, then you don’t need to change anything else to display!
The sidemenu originally was used to push to available pages in the app, but now it’s a great theme switcher. The names of each available theme are displayed using NgFor and some databinding with the this.themes array. The result will be a very simple list which will have the name of the theme for each entry. When an entry is clicked, that theme will be applied.
On the Github repo you can find a better example with a color indicator next to each entry.

Recap
Okay time for a quick review of what we have done here. So far we have implemented the following changes to get the theming working:

Created theme SCSS files for each desired theme
Imported the created theme files in the main Sass file located at src/app/app.scss
Setup an AppState class to hold which theme is currently applied
Setup a very small changeTheme function which will set a new theme into AppState
Added a wrapper element over the app.html which will have the theme applied to it

To create more themes from here, copy one of the theme files you already created, rename it, and change the hex colour values in this new file. You can make as many as you want! Just make sure that you also import this new theme file in app.scss like you did with the first ones, otherwise it won’t work.
With these five steps you can have dynamic theming in any Ionic application. The beauty of the solution is that it works well on all platforms since it uses no native plugins — everything is in HTML,CSS and TS.
As a bonus, on the GitHub repo, I have implemented two other ways to present the available themes.

Option 2 on the left and a model option on the right
Conclusion:
Dynamic theming saves us from worrying whether our chosen colour scheme will suit all audiences. Instead of doing numerous mockups with different schemes to evaluate, we can simply implement all of the colour schemes and let the user choose which one they prefer at runtime.
A hidden benefit of this is that we can collect analytics from our users on which theme suits them best. In the changeTheme function discussed, a webhook or some event could be sent specifying the user’s choice. Through this, developers could gather real user feedback on which themes ‘work’ and which don’t.
All the source code for this tutorial can be found in this Github repo.

One last look
Please consider leaving a star on the repo. I welcome any and all additions.