-1
What I Need to Learn to Build Apps with Ionic?
What language it uses?
I wanted articles that show me the first steps.
2 answers
3
Ionic
Ionic is a framework for developing hybrid apps that works on most smartphones and tablets on the market.
It is nothing more than a stack of components and other frameworks. These components are:
- Cordova: Integration with native device features
- Angularjs: Creating the App’s Web Part
- Ionic Module and Ionic CLI: Tools and Components provided by the framework
First of all, you must have Nodejs installed. After successfully installing Nodejs, it is indicated that you add the SDK’s (Software Development Kit) from(s) platform(s) that you want to work on (Android, iOS, Windows Phone).
Installing the tools
Turn the command:
$ npm install -g cordova yo generator-angular generator-ionic ionic bower grunt
This command alone will install the following:
- Cordova/Phonegap
- Yeoman
- Yeoman generator for Angularjs projects
- Ionic CLI (Command Line Tool)
- Bower
- Grunt
The parameter -g means that these commands will be installed globally, so it will be possible to use them directly from the terminal and not only in the folder you are in.
Creating the Project
After installing the tools you have two options to create a project using Ionic.
- Directly by Ionic CLI
- Using Yeoman’s Ionic Generator.
Both options have their advantage and in time you will be able to identify better which one to use.
Ionic CLI
The first option is very simple and accounts in the Steps Start session of the Ionic website itself. Just do the following:
Create the app using the command line
$ ionic start myApp tabs
Obs: tabs is a ready-made template that will create an app with tabs. The basic options are:
blank (Em branco) / tabs(Abas) / sidemenu (Menu Lateral)
Add the desired platforms and start the emulator
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic run
Generator-Ionic with Yeoman
The second option also focuses on simplicity and to start the project with the generator yeoman just follow the steps:
Create a new directory and perform a cd:
$ mkdir my-ionic-project && cd $_
The option $_ means that you will use the last parameter of the last command, in our case the nome/caminho of the created directory.
Execute yo ionic, optionally passing the name of the App.
$ yo ionic [app-name]
The command line tool of Yeoman will offer a number of questions. They are:
- Do you want to use Sass with Compass? (You need Ruby installed)
- Which Cordova project plugins do you want to include? (In this case are plugins to use the features of devices like: Contact list, camera, gps, etc...)
- Want to use an initial template? [T] are initial templates (like the last step) and [A] example applications.
After answering these questions, Yeoman will perform all the work of downloading and installing the dependencies according to the selected options.
Slicing in the Browser
To test the application directly in the browser just run the following command in the project folder:
$ ionic serve
If you have used the Yeoman:
$ grunt serve
A new tab/window will open and any changes you make to the code will be reflected by live-reload, excluding the need to run the command again.
Debug with the Device
To accomplish the deploy of the device just add the desired platforms(if not already added), connect the device to the computer and run the commands ionic/grunt.
$ ionic run --device
or
$ grunt run --device
Articles:
1
Prerequisites
First you need to have knowledge in:
- HTML
- CSS
- Javascript
Angularjs is also required, but if you don’t know, you can learn as you learn to interact with Ionic resources. However, I strongly recommend that you try to learn Angularjs. If you understand English, I recommend using Angularjs itself documentation from Ionic to learn how to use it, which is quite easy. And on the site itself Angularjs has the link for a course of Angular taught by Codeshool.
Instation
Installation is very easy. First you install the Node. Just download the installer and go forward. Then install Cordova and Ionic via the command:
npm install -g cordova ionic
This command must be executed on the terminal of your operating system. If you are on Windows, just open cmd. In this single command you install Cordova and Ionic. The parameter -g determines that the installation will be global.
Then you need to prepare the environment for Android and IOS, following specific tutorials for each. But this can be done later, since Ionic can emulate the application in the browser through a special command.
Creating a Project
To create a project you must type in the terminal:
ionic start myApp tabs
myApp is the name of the project. tabs is the template, which can also be blank (blank) or sidemenu.
Running this, Ionic will create the initial files for your app.
Running the App in the Browser
ionic serve --lab
The parameter --lab will show how it will look on IOS and Android. Try to run without this parameter to see the difference.
Article
This article is in Portuguese and makes clear the first steps.
Source: Documentation of the Ionic
Browser other questions tagged android ionic
You are not signed in. Login or sign up in order to post.
I don’t understand why you keep negatively asking this question. It ruins the community. Anyone with the same doubts will get to that question by Google. Considering that the documentation of Ionic is in Portuguese, I find this question legitimate. And despite having some quality Portuguese tutorials dealing with the subject, the information may well be documented within the stackoverflow community.
– Brittz
In the above commentary read "... documentation of Ionic is NOT in English..."
– Brittz
@Brittz The point is that, depending on the question, it seems that you don’t have the least amount of effort to do a survey and read a little more about it. I do not say this case, but many people have "laziness" to do a good research, when in fact would be learning much more about the subject. For you to have a critical view, you need to extract information from various sources, not just from here in the OS, perhaps from an answer that anyone can give. Take a little test, paste the first question into the Google search, take only the first 3 results and reflect a little. That’s it!!
– viana
@seamusd I agree with you on that. I particularly always use the first 3 Google results. If the search is difficult to complete, at most the results of the first page. However, most of the time when the answer is in the OS, it already satisfies my doubt, because the answers are usually good, or the best ones are voted. So even if you don’t research, just asking the question is already contributing to the community. I think this current question is quite different from questions that just want a copy and paste code ready.
– Brittz
@seamusd To understand my point of view, if that question had been answered by the same user who asked it, would it have been fair for it to have been denied? If the answer is no, then the question is legitimate for the purpose of the site, which is distorted by the use of users who score high.
– Brittz