How to install and to create your first Ionic project?


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 €œ€.
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 €œ€, 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
Tools of telework

Tools of telework

Tools for CURIOSIDADESTeletrabajo telework: to work in remote outside the headquarters of empresaComo already we commented in our post previous, this situation of group of forty derived from the sanitary crisis caused by the Covid-19 has taken to many companies€¦

5 advantages of telework

5 advantages of telework

5 advantages of CURIOSIDADESTeletrabajo telework: the future of the companies these days in Spain tecnologicasDuran to you more, some companies must face a new challenge: telework. All the sectors cannot adapt to this way to work€¦

What is one landing page and why it serves?

What is one landing page and why it serves?

What is one landing page and why it serves? Perhaps DIGITAL MARKETING sometimes you have listened to the term landing page or landing page speaking with some person who knows something of marketing online. But, you really know what is and why it is used? €¦