How to install and to create your first Ionic project?

DEVELOPMENT APPS

First Ionic project

Introduction to this article

In this article we are going to explain of relatively simple form as creating a project with Ionic Framework from the home.

As we explained in our article exceeds what is Ionic and as we used it for our services of development of apps, Ionic is a Framework that allows to develop to hybrid applications cross-platform.

In Gatecreepers we are specialistic in the use of this technology almost there since we founded the company by year 2014, reason why we would like to contribute our granite of sand to those developers novates them or peculiar people who want to know this technology.

This it is not an advanced tutorial, and of course we cannot nor we will explain as developing one app completes, reason why you will have to continue learning by your account, but it will serve to you at least as it bases to install it and to understand minimumly of what it consists and how it works.

To indicate that to work with Ionic he is indispensable to have at least basic slight knowledge of model-making in HTML5 and CSS, as well as knowledge of the TypeScript as well as programming language Javascript and Angular JS

Shelp this€¦ We go to the mess!

We prepare the surroundings

First before being able to work with Ionic Framework, it will be to install the own Ionic and other dependencies:

Icon To unload Node Ionic

You can unload and install to install node from here.

NodeJS Ionic

Once installed NodeJS, you can install Cordoba executing from the terminal with the following commando:

npm install - g Cordoba

Logo Ionic

Once installed Cordoba, we will install Ionic Framework thus:

npm install - g ionic

(Optional) Only if you are going to develop Android applications. Unloading Android Studio from here.

Recommended IDE Ionic project

(Recommended) recommended IDE to work with Ionic Framework. Unload it here.

We install SDK de Android

 

In order to be able to create ours first Android application, before nothing we must install the SDK bookstores that will later allow to add the platform us in the Ionic project.

For that reason in the previous step we recommended the installation of Android Studio, since it is the way simplest to manage the installation of these bookstores.

 

Ionic Android Studio
Appearance Ionic Android Studio

We create our first project from Visual Studio Code

First, once opened Visual Studio Code it will be to unfold the terminal, from where we will habitually execute the commandos with whom we will work with Ionic.

Once opened the terminal, we will happen to execute the following commandos:

ionic start miAplicacion sidemenu We create the Ionic application

CD miAplicacion We enter the directory of the application.

ionic Cordoba platform add android We add the Android platform

Visual Studio Code

Hello World

First that we will do once executed the previous commandos, it will be to open the folder of the project in Visual Studio.
For it, as they indicate you shoot with an arrow, we will unfold the panel, clickaremos in €œopen to folder€ and will look for in our computer the folder that finishes creating.

Visual Studio Code - To open Folder

Once we have the folder with the code available, is recommendable to throw a look and to see the structure and the different files that you will find.

For ours €œHello world€, we will unfold the folder €œsrc€ => €œapp€ => €œhome€ and will publish the file €œhome.page.html€.
Within this file we will see the code HTML that corresponds in view of the main screen. Here you can make some small changes before executing the application.

Visual Studio - To select File

We compile and we executed our application on a real telephone

 

Now that already we have published the file €œhome.page.html€, it is the moment for seeing our application in action.

For it we have two forms, either using the emulator of Android, or directly to our telephone connected by USB cable to the computer.
For this step, first you must activate the options of Developer on your telephone, that surely will be hidden, and within the menu of developer, to activate the purification by usb.
He is quite simple, you can pay attention to how they do it in this page

When there are preparation your telephone, it remembers to connect it by USB to your computer, and then it executes this commando:

ionic Cordoba run android

And voil , already you have your first application working on your telephone. To that it has been easy?

First app Gatecreepers - Ionic
What implies to have a quality webpage?

What implies to have a quality webpage?

What implies to have a quality webpage? WEBHoy DESIGN for today abounds the platforms that allow you to create webpages of quality of a way fast and easy with a certain degree of personalisation. Often we were with clients who want to redesign€¦

Ionic Framework: Development apps hybrid

Ionic Framework: Development apps hybrid

Ionic Framework: Hybrid development apps DEVELOPMENT APPWhat is Ionic Framewok? Ionic is framework of open code cross-platform for the development of apps hybrid. It is characterized to use HTML5 as language of model-making for the views of€¦

Raspberry Pi: What is and what uses we give him

Raspberry Pi: What is and what uses we give him

Raspberry Pi: What is and what uses we give CURIOSITIES himWhat is a Raspberry Pi? The Raspberry Pi is a computer of reduced plate, computer of unique plate of low cost developed in the United Kingdom by the Raspberry Foundation Pi, with the aim of stimulating€¦