How to create an app with IONIC and Visual Studio Code?

How to create an app with IONIC and Visual Studio Code

Do you want to make a mobile application?

The best thing to do to create an application, without having prior knowledge, is to create a hybrid application. In this article we will explain what a hybrid application is and why it is the best option.

In addition to how you should prepare your team for it and the programs that you will need to carry out the creation of the mobile application.

What is a hybrid application?

A hybrid application is an application that allows you to adapt it to any operating system, unlike a native application, where you must adapt it to each operating system. With what takes more time and work.

The main advantages that a hybrid application has over a native one are:

  • Its creation is much simpler and cheaper.
    • The base code with which the app is created can be used on multiple platforms.
    • You do not need external permissions to publish it in the application stores.

Having seen the advantages of a hybrid application, we are going to talk about the program that is needed to be able to carry them out.

What is Visual Studio Code?

The simplest program for what we want to do is Visual Studio Code, it is a source code editor that supports many practical features when working with the code.

You could also use, for example, Notepad for this, however, as we have said, Visual Studio Code is a program designed for this function and contains tools that will greatly facilitate the creation process.

The main advantages of Visual Studio Code over the other editors are:

  • Autocomplete: Visual Studio Code offers you “Autocomplete” in several languages. Just by typing an expression or letter you can interpret it and autocomplete the rest.
    • Live server: you can see the process of your application in real time in your browser, without the need to constantly refresh the page.
    • Integrated terminal: You have the option of opening a local terminal.
    • Library of extensions: Visual Studio Code has a library of extensions, which gives you a number of options to be more efficient when programming.
    • It has no cost: Close this with the finishing touch that this tool is free, in addition to offering the software for the different operating systems.

How to install Visual Studio Code?

To install visual studio code, you just have to download it from the official website: Download Visual Studio Code. As you will see, on its website you can choose the download depending on the operating system of your computer.

See also  App Ideas You Can Go For As Startups

In our case, we choose the download for Windows and execute the .exe that will be downloaded in our browser.

In this part we choose where the program will be installed, it is necessary to have 250MB available for the installation.

We can modify where the program’s shortcuts will be created, as well as choose whether or not to create a folder in the start menu.

In the same way, we can also decide whether to add other functionalities or not. This is optional.

It shows us a summary of what we have chosen, if everything is correct we give it to install. A loading bar will appear and once it is completed it will show us this window.

How to install Ionic?

In order to install Ionic, it is necessary that we first have node.js installed. We go to the official node.js page and download it. It is necessary to install node.js since the command we need to install Ionic needs that program.

Once node.js is installed, the next step is to install Ionic.

We look in the windows explorer node and we get into the cmd (console)

And in the console we execute the command “npm install -g ionic”.

To know that it has been installed correctly we execute the command “ionic –version”. So we will also know the ionic version.

Next, we create a folder (wherever we want) and from cmd we go to that folder. For this we use the command “cd” and paste the path of our folder.

Once we are in the desired path to create the project we execute the command: ionic start “name” tabs / sidemenu / blank. The latter can vary depending on whether we want our project to have tables, a menu or be completely blank.

It will ask us to choose the framework, we choose angular.

Here it will ask us if we want to share data from Angular Team to Google, we can give yes or no, what we want.

When this comes out, it means that our project is already used and we can see it in the specified folder. In the project folder we will find something similar.

From the console, we get into the project. Again with the cd command and the folder path, although if we are already inside the folder that we have created to contain the project, we only have to execute cd + project name.

Once we are on our route, we execute the command: “ionic serve” and, when it loads, a screen will open in our default browser where we can see our project. Meanwhile in the terminal we will get this:

See also  Mobile Applications And How They Serve The Businesses And The Consumers Differently

It is only necessary to look at the last line where it gives us the address to access our project from the browser (localhost: 8100).

However, to be able to modify our project more easily, we can use Visual Studio Code.

We are going to see another way to create the project from scratch with this program.

In case of already having an ionic project created and wanting to modify it with Visual Studio Code, we would only have to open the program and drag the project folder to it.

In any case, we are going to see step by step how to create a project, it is very similar.

We open the program and open a new terminal.

This console is the same as the one we have used previously, in order to create the project, we must execute the same command. However, in our case it gave us an error since we had restricted the use of scripts. To be able to check it, execute the following command:

In our case it is already unrestricted because it was modified, if you get restricted you just have to go to Windows PowerShell, look for it in Windows Explorer and open it as administrator.

We execute that command and we should already have it changing. We can check it again by executing the previous command.

If we have already solved this, we only have to execute the command to create the project, which is the same as we used previously:

ionic start “name” tabs / side menu / blank (to create the project)

ionic serve (to be able to see it in the browser)

And with this we would already have our project created. The commands are the same as we have used before.

From RetroCube we hope that this article has been useful for you and that you get down to work with your project. For all those who want to have a mobile application but prefer to have it made for you 😉 it is best to contact our mobile android app developmentteam.

Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.