ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

Database

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • How Does Social Media Bring People Together?
    TTMind Author
  • How to read appSettings JSON from Class Library in ASP.NET Core
    Anil Shrestha
  • Printing Support In Asp.Net Core
    TTMind Author
  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
    Prakash Pokhrel
  • Images Upload REST API using ASP.NET Core
    Prakash Pokhrel
  • Related Topic

  • Firebase Cloud Messaging (FCM) using Cordova FCM Plugin
  • Cordova Upload Images using File Transfer Plugin and .Net core WebAPI
  • How to get Current user Location from device in ionic Cordova?
  • Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: Local\Android\Sdk\tools\templates\gradle\wrapper
  • How to make the two side-menu in ionic?
  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Main Content

What is ionic? How to start mobile app development with ionic?

Hybrid Development Ionic about 7 years ago || 10/2/2018 || 4.3 K View

  • Hide

Ionic is a complete app development kit, it was founded in 2012, using web technologies to native apps. Ionic is open source Framework development kit or SDK and it easy to use for a developer. It helps us to develop the high-performance multiplatform mobile application with Javascript, CSS and HTML5. Those apps make a look and feel beautiful on any platform or device.

Ionic Benefit:

  • Ionic is an open source framework free platform.
  • Hybrid development so you can work easily on IOS, ANDROID, Windows and any other operating system.
  • Beautiful default Designs and template like  tabs, sidemenu, super, tutorial
  • A very large active community so you can get an idea, solution to common issue etc.
  • Ionic is Create use Angular

I hope you get what is ionic and its benefits. So, let install on our system and my doing on windows operating system.

  • Download and install the node js for the window, Mac or Linux from here https://nodejs.org/en/ download the recommended because it is more stable.
  • Download and install the VS CODE for Mac or Linux from code.visualstudio.com vs code is light waited for IDE for any programing language.

After installing the node, you need to add the path “C:\Program Files\nodejs” to your environment variables. Follow this step to set on windows.

  • In control panel > System and Security > System
  • Click on the Advance system setting click on Environment variables
  • On system, variables select a path and Click on Edit and New.
  • Paste the nodejs installed path on it and Click on Ok.
  • Open the Command promote (cmd) Enter “npm –v” if you see the version number of node.

So we set the node js  globally on our system.  Let’s lunch the vscode and press “CTRL + ` “  and  type command and hit Enter:

“npm install -g ionic”  or  “npm install -g ionic cordova”

It takes 4- 5 minutes to ready your system to developing the amazing app. Once it done create your first ionic app. By entering the command.

ionic start Myionicapp sidemenu

After enter the command it ask you integrate your new app with Cordova to target native iOS and Android?

Enter “Y” to integrate Cordova in a project which helps to run an app on a device.

 

cd Myionicapp to enter the floder.

ionic serve to run on browser.

Ionic also provide the great official template.

  • blank: start  with a single page
  • tabs: a simple 3 tab layout
  • sidemenu: a simple Side menu on the side
  • super: start an app  with  14 ready  page designs
  • tutorial: a guided starter  project

 

If you want to run your app on your device follow this step

Note: For IOS app development you need to mac

  • ionic Cordova platform add android or ionic Cordova platform add IOS
  • ionic Cordova build android or ionic Cordova build IOS
  • ionic Cordova run android or ionic Cordova run IOS

Conclusion

In this article, we learn what is ionic and how to set up in our system, and now you can develop any an app, can solve any problem.

 

  • 1
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Anil Shrestha

Anil Shrestha

Qualified and skilled professional with experience working as a Software Developer

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey