53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
---
|
||
title: Ionic
|
||
---
|
||
## Ionic framework
|
||
|
||
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps.
|
||
|
||
Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.
|
||
|
||
### Building Hybrid Apps With Ionic
|
||
|
||
Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it’s just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want.
|
||
|
||
The bulk of an Ionic app will be written in HTML, Javascript, and CSS. Ionic also uses AngularJS for a lot of the core functionality of the framework.
|
||
|
||
### Before we can start playing with Ionic. Let’s prepare our system first:
|
||
|
||
```
|
||
nodeJS and npm
|
||
Ionic 2
|
||
Cordova
|
||
Android Environment (or iOS if you’re working on a MacOS)
|
||
```
|
||
|
||
### First thing first, we need to have Node.js and npm.
|
||
|
||
```
|
||
sudo apt-get update
|
||
sudo apt-get install nodejs
|
||
```
|
||
|
||
### Node.js package manager (npm)
|
||
|
||
```
|
||
sudo apt-get install npm
|
||
```
|
||
|
||
### Ionic 2 and cordova
|
||
|
||
```
|
||
sudo npm install -g ionic cordova
|
||
```
|
||
|
||
### Now sit back and relax, give it some time to finish, it can take several minutes depending on your internet connection.
|
||
Once that’s done, Let’s start off by generating a new project based on the “blank” template
|
||
|
||
```
|
||
ionic start MyFirstApp blank
|
||
cd MyFirstApp
|
||
ionic serve
|
||
```
|
||
|