Ionic (Media Engineering Web Dev)

# Ionic

Learn about [Ionic][ionic], an open source framework to build hybrid mobile applications based on [Cordova][cordova] and [Angular][angular].

**You will need**

* [Node.js][node] 8+
* [Google Chrome][chrome] (recommended, any browser with developer tools will do)

**Recommended reading**

* [Angular](../angular/)

---
class: center, middle, image-header
## What is Ionic?

.breadcrumbs[<a href="#1">Ionic</a>]

---
### Which OS should you support?

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a>]

---
### How can you deal with OS fragmentation?

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a>]

---
### Cordova

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a>]

.grid-30[

]
.grid-70[

> "[Cordova][cordova] wraps your **HTML/JavaScript app** into a **native container** which can **access the device functions** of several platforms.
> These functions are exposed via a unified JavaScript API,
> allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores."

]
.container[

]
---
#### Hybrid mobile applications

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a> > <a href="#5">Cordova</a>]

.grid-45[

Write your app with HTML, CSS and JavaScript, **like a website**:

]
.grid-10[

]
.grid-45[

Embed it into a **native application**:

]
.container[

.grid-10[

]
.grid-90[

Since you are writing a **web app**, you can access **web APIs** like the [geolocation API][geolocation-api].

But with Cordova, you can also access **device hardware** like the **camera** or the **accelerometer**, and you can do it **in JavaScript**.

]

]
---
### What about Ionic?

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a>]

.grid-35[

]
.grid-65[

> "Free and open source, Ionic offers a **library of mobile-optimized HTML, CSS and JS components**, gestures, and tools for building highly interactive apps.

> Ionic utilizes **Angular** in order to create a framework most suited to develop rich and robust applications."

]
.container[

Ionic is basically **Cordova** and **Angular** plugged together:

]
---
#### What can I do with it?

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#2">What is Ionic?</a> > <a href="#7">What about Ionic?</a>]

Ionic lets you build web apps that **look like native apps** with HTML, CSS and JavaScript:

---
class: center, middle, image-header
## Demo

.breadcrumbs[<a href="#1">Ionic</a>]

---
### Install Ionic

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#9">Demo</a>]

Cordova and Ionic are both **npm packages**.
Install them globally with the following command:

```bash
$> npm install -g cordova ionic
```

You're now ready to use Ionic.
Let's generate an app called `ionic-demo` with the `tabs` starter template:

```bash
$> cd /path/to/projects
$> ionic start ionic-tabs-demo tabs
✔ Creating directory ./ionic-tabs-demo - done!
✔ Downloading and extracting tabs starter - done!
? Would you like to integrate your new app with Cordova
  to target native iOS and Android? Yes
...
? Install the free Ionic Pro SDK and connect your app? No
...
```

Once that's done, run these commands to open the app in your browser:

```bash
$> cd ionic-tabs-demo
$> ionic serve
```

---
### Starter templates

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#9">Demo</a>]

There are other templates than `tabs`.
For example, this will generate an application with a sliding side menu:

```bash
$> cd /path/to/projects
$> ionic start ionic-sidemenu-demo sidemenu
```

You can also start with a much simpler template.
This will generate an app with just one page and a title,
then it's up to you to define your basic layout:

```bash
$> cd /path/to/projects
$> ionic start ionic-blank-demo blank
```

You will find many Ionic app templates shared by the community in the [Ionic market][ionic-market].

---
class: center, middle
## Basics of Ionic

.breadcrumbs[<a href="#1">Ionic</a>]

---
### Components

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#12">Basics of Ionic</a>]

Ionic has many [UI components][ionic-components] you can use out of the box:

.grid-65[

```html
<button `ion-button`>Default</button>
<button `ion-button color='secondary'`>
  Secondary
</button>
```

]
.grid-35[

]
.container[

.grid-65[

```html
<`ion-card`>
  <`ion-card-header`>
    Header
  </`ion-card-header`>
  <`ion-card-content`>
    The British use the term "header",
    but the American term "head-shot"
    the English simply refuse to adopt.
  </`ion-card-content`>
</`ion-card`>
```

]
.grid-35[

]

]
.container[

.grid-65[

```html
<`ion-range`>
  <`ion-icon` range-left small name="sunny" />
  <`ion-icon` range-right name="sunny" />
</`ion-range`>
```

]
.grid-35[

]

]
---
### Angular components

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#12">Basics of Ionic</a>]

Many of these components are actually [**Angular components**][angular-components].
They not only look pretty, but they also bring **functionality**.
Here's a code example for an Ionic list:

```html
<ion-list>
  <ion-item-sliding `ng-repeat='let person of people'`>
    <ion-item>
      <ion-avatar item-start>
        <img `[src]='person.avatarUrl'`>
      </ion-avatar>
      <h2>`{{ person.name }}`</h2>
      <p>`{{ person.description }}`</p>
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="primary">
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button ion-button color="secondary">
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
```

---
#### List component functionality

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#12">Basics of Ionic</a> > <a href="#14">Angular components</a>]

For example, the list component automatically enables you to [slide in][ionic-sliding-list] controls from the side as most mobile applications do:

.grid-65[

```html
<ion-item-options>
  <button ion-button color="primary">
    <ion-icon name="text"></ion-icon>
    Text
  </button>
  <button ion-button color="secondary">
    <ion-icon name="call"></ion-icon>
    Call
  </button>
  <button ion-button color="primary">
    <ion-icon name="mail"></ion-icon>
    Email
  </button>
</ion-item-options>
```

]
.grid-35[

]
---
## Running apps on your mobile device

.breadcrumbs[<a href="#1">Ionic</a>]

There are several ways to run your Ionic application on a mobile device.
This section will describe some of them:

* Run on an iOS device (requires a paid Apple developer certificate)
* Run on an Android device
* Run with the Ionic Dev App (Android & iOS)

Follow the setup instructions appropriate for your operating system:

* [macOS setup][ionic-macos-setup]
* [Windows setup][ionic-windows-setup]

Then follow the [deployment instructions][ionic-deploy] (Android & iOS).

---
### Ionic Dev App

.breadcrumbs[<a href="#1">Ionic</a> > <a href="#16">Running apps on your mobile device</a>]

The [Ionic Dev App][ionic-dev-app] is an Android and iOS application in which your own app can run without having to be built and installed on your physically connected device.

To use it, you must serve your app with the `-c` option:

```bash
$> cd /path/to/projects/my-app
$> ionic serve -c
```

If your phone is on the **same network as your computer**,
the Dev App can connect to the mobile application running on your machine.

It may find it automatically, or you may have to manually enter your computer's IP address on some networks.

---
## Resources

.breadcrumbs[<a href="#1">Ionic</a>]

**Documentation**

* [Cordova requirements][cordova-requirements]
* [Ionic][ionic-docs]
  * [Components][ionic-components]
  * [API Documentation][ionic-api-docs]
  * [Developer Resources][ionic-resources]

[angular]: https://angular.io
[angular-components]: https://angular.io/guide/architecture#components
[chrome]: https://www.google.com/chrome/
[cordova]: https://cordova.apache.org
[cordova-requirements]: http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
[geolocation-api]: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
[ionic]: http://ionicframework.com
[ionic-account]: https://apps.ionic.io/
[ionic-api-docs]: https://ionicframework.com/docs/api/
[ionic-components]: https://ionicframework.com/docs/components/
[ionic-deploy]: https://ionicframework.com/docs/intro/deploying/
[ionic-dev-app]: https://ionicframework.com/docs/pro/devapp/
[ionic-docs]: https://ionicframework.com/docs/
[ionic-macos-setup]: https://ionicframework.com/docs/developer-resources/platform-setup/mac-setup.html
[ionic-market]: https://market.ionicframework.com/
[ionic-resources]: https://ionicframework.com/docs/developer-resources/
[ionic-sliding-list]: https://ionicframework.com/docs/components/#sliding-list
[ionic-windows-setup]: https://ionicframework.com/docs/developer-resources/platform-setup/windows-setup.html
[node]: https://nodejs.org/en/