Social Icons

Friday, December 29, 2017

Create your first mobile app with ionic framework

1 - Installation of necessary tools

Apache Cordova is a platform for building native mobile applications using HTML / CSS / Javascript. Ionic relies on it (as well as on AngularJS) to build its applications.

Ionic also uses NodeJS and more specifically NPM (Node Package Manager) to install modules developed by the community. So first install node.js and npm:

Then, use the following command to install Cordova and Ionic on your machine:

npm install -g cordova ionic

If you already have some of these elements installed on your machine, it remains priomordial to check that they are up to date and ready for development.

2 - Create an Ionic app

To create an ionic application, simply use the following command at the desired location:

ionic start myProject blank

at this level, ionic asks you:
Would you like to integrate your new app with Cordova to target native iOS and Android? :

Now type yes and press enter, and the application will be created in a few minutes

Note :

You can replace "blank" with "sidemenu" (which allows you to create an application directly with a left-side menu) or "tabs" (which allows you to have an application with a tabBar in footer):

ionic start my project sidemenu

ionic start myProject tabs

3 - Structure of an ionic project

The important part of an ionic project is in the "www" folder of the created project. This file is itself composed of several files:

"css": folder containing all style sheets

"img": folder containing all your image resources.

"js": folder containing your JavaScript script (including your "app.js", "controllers.js" and "factory.js" files). The file "app.js", will allow you to specify the routines at the start of the application as well as the routes of the latter (by which URL each view will be accessible). The file "controllers.js" will define your different controllers (Javascript script which will be individual for each controller, each controller being associated with a view). Finally, the file "factory.js" is optional and will extend the "providers" of ionic. A provider is a variable that will contain different functions (we can create a provider for a local database for example) and is used to better architect our code.

"lib": folder containing all the scripts of the JS or CSS libraries (added automatically if you add a plugin with PhoneGap or Cordova or added by yourself if they are plugins found on the Internet).

"templates": folder containing all your HTML templates (different views of your application).

Finally, the file "index.html" which will be the starting point of your application.

See you in my second article for more!

4 - Launch the ionic application on the local server

We can now, from the directory of the application, launch a local test server using the command

ionic serve

And here we get a first application that runs locally on our machine.

To have a list of the different options available for ionic,

ionic -h

More complete documentation on starting the development using the Ionic Framework is available:

5 - Conclusion

There are many benefits to using Ionic Framework to develop mobile and web applications. We develop once and we deploy on several environments. We rely on AngularJS, which allows us to have a rapid development and Cordova, which allows us to access the elements of the device such as bluetooth or accelerometer. You can quickly deploy the application on a connected device directly via the command line, which is nice when you are in the development phase and you want to test quickly a small part of the application without having to rebuild everything . In addition, Ionic Framework will continue to integrate the changes of AngularJS, that is to say that changes AngularJS 2 will be integrated in Ionic 2, which portends a bright future for Ionic.

The framework supports the integration of the Android SDK up to 4.0+, it does not support version 5 yet, and it is also possible that some features of Android are not fully supported. But I think we can really quickly develop a web and mobile application without too much integration difficulties with a powerful base bootstrap and the ability to set up an application icon and a splash screen.

Younes Derfoufi

No comments:

Post a Comment

Learn Python For Beginners

Category Of Mobile Courses

Actualités (644) Adsense (1) Affiliation (1) Algebraic Topology (2) Algorithmic (1) all-news (30) Android (5) Android App (8) Android app without code (4) Android Apps (256) Android Development (4) Android download (2) Android OS (3) AngularJS (1) Automata theory and formal language (5) Bootstrap CSS (1) C programming (5) Category and Functor (8) CMS (3) Computer Glossary (29) Create Mobile App With Ionic Framework (2) CSS (2) CSS-Cascading-Style-Sheets (4) Developpement Java (13) Differential Geometry (1) Django-Python-Framework (15) dropshiping (26) Earn Money by Internet (4) Emplois (23) Framework php (2) Fraud (2) Github (2) HTML (9) IT News (3) Java For Beginners (10) Javascript (12) Kotlin Programming Language (8) Kotlin For Mobile Android (1) Linux Download (2) Marketing (5) Mobile (3) Mobile Courses (4) Mobile Marketing (4) MoneyGram (1) News (721) Node.js (5) Open Source (1) Photoshop (1) Protect Computer (1) Python (37) Python BeautifulSoup (1) Python For Data Science (2) Python PyQt (14) Python Reference (1) Python Source Code (19) Python-Books (6) Python-DVD-Training (1) Python-Exercises (313) Python-Framework (1) Python-IDE (1) Python-Kivy-Framework (2) Python-Modules (1) Python-pdf (2) Python-pyQt (1) python-temp (3) Référencement (2) Script PHP (2) Security (6) SEO (1) Snipping Tool: Faq (1) Social Networks (1) Source Code (4) Statistics With SPSS (2) Surveillance Software (1) Travail à domicile (6) Tutoriels php en vidéos (2) Tutoriels-MySql (6) tutoriels-php (19) Utilitaires (1) VPS (1) Web Hosting (1) Webcam (1) Webmarketing (11) Western Union (1) Windows 10 (1) Windows 7 (4) Windows 7 Faq (2) Windows 8 (1) Windows Accessories (1) Windows Download (8) Windows Drivers (1) Windows Fonts (1) Windows Power Shell (2) Windows Registry (2) Windows Security (18) Windows Software (2) Windows Spyware (2) Windows utilities (3) Windows Virus (2) Windows Vista (3) Windows Wireless (1) Windows xp (1) Wordpress (1)

Sample text

Sample Text

Blogger Templates