Introduction to Ionic

Hello everyone, welcome to my blog, in this new post I will be talking about IONIC.

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies – HTML, CSS, and JavaScript – with integrations for popular frameworks like Angular and React.

Ionic initially started in 2015 with angular.js at that time it became very popular because you could create frontend applications in the browser, you only had to download a version of node.js to install ionic and it automatically carried out the installation process.

for the year 2017, ionic used angular 4.0 & typescript with its version 3, where it was a little more intuitive and made use of new features, such as the RXJS, Http requests, Observables, NgModel, in short, it had many features that we know today of angular.

For the year 2019, ionic opted to be an inclusive framework and added two new technologies, such as ionic-vue & ionic-react (with typescript), which makes the framework have a much larger reception since it was not only focused Angular, but also in two other javascript languages, such as Vue (Framework) & react (library).

I will tell you a bit of the history of Angular over the years, as it has been my favorite framework for creating progressive applications or hybrid mobile applications.

To install ionic you must download the following:

  • NODE.JS: https://nodejs.org/en/download/
    Linux user: sudo apt-get install curl
    curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash
    sudo apt-get install nodejs
  • JAVA JDK:
    Linux User
    sudo apt update
    java -version
    sudo apt install default-jre
    java -version

You may need the Java Development Kit (JDK) in addition to the JRE in order to compile and run some specific Java-based software. To install the JDK, execute the following command, which will also install the JRE:
sudo apt install default-jdk
javac -version

All S.O USERS: https://www.oracle.com/java/technologies/javase-downloads.html

  • ANDROID STUDIO OR SDK TOOLS
    For all Users: https://developer.android.com/studio
  • VISUAL STUDIO CODE
    SnapStore: https://snapcraft.io/code
    All Users: https://code.visualstudio.com/download

After installing all the tools, now we will proceed to install ionic with the following command:
sudo npm install -g @ ionic / cli

now to create an ionic application you must write the following code:
ionic start "application_name" blank
ionic start "application_name" tabs
ionic start "application_name" menu

you select the language of your preference, and Ionic automatically creates the application for you.


And ready you already have your ionic application created on your machine.

To run your ionic application, there are two 3 options.

The first is with the ionic serve command
The second is with the same command but so that you can view the application externally with the command:
ionic serve --external

and the third is installing the browser platform with the following command:
ionic cordova build browser

And this is the result!

as such an ionic project has, at its root, installed the package.json which is all the configuration of your project and the dependencies, in addition to that file, you can choose with which command to start your project, which dependencies to add and remove from your project etc.

the .gitignore that helps us a lot when we are deploying our application to avoid having to re-upload the Node_modules, which is where all the dependencies of the project are located.

In addition, in the SRC of the project we find the initial configuration, such as the routes, the components, the app.module, which is where we add all the imports or dependencies that we use in our project.

are the pages to create a page in ionic just add the command:

ionic g page "application_name"
to create components:
ionic g component "component_name"

to install a platform in Android and IOS:

ionic cordova platform add android

ionic cordova platform add ios

are the assets, which is where all the part of icons, fonts, images, etc. goes.

This is the environment variable that is configured when we are going to connect with APis
THE index.html which is where we add, sources, opengraph, metadata etc.
there is the global sass, to add global styles to our application
I make a mention since on every page & component you create from ionic, a .sass file is always created (which sass is a css preprocessor)

It is also worth noting that in this project we have created the ionic application with angular, therefore I want you to see it in the package.json

As we see, we have installed Angular 9 & Typescript.

I hope you liked this little introduction to ionic, where we show you how to install ionic with angular from scratch, we explain a little the root of the project, some ionic commands and most importantly what tools you must download in order to compile ionic in android & on the web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *