How to Create an App Using Ionic
Build Apps efficiently with the Ionic Framework. This article provides an overview of how to create an App for multiple platforms using Ionic, based on our Codementor Office Hours with Perry Govier.
Intro to Mobile App Development
Thanks to Apps like Instagram, Uber, and Angry Birds, mobile App development is more popular than ever. While thinking of a concept for the next big hit may be relatively easy, the most complicated, time-consuming, and most crucial aspect of App development is creating and perfecting the App itself.
Ionic Framework simplifies this process. Instead of spending countless hours mastering Objective C or Swift to develop iOS Apps, or Java for Android Apps, Ionic can help you build powerful Apps for both platforms in less time. If you’re a beginner, a web developer, or even a native app developer, Ionic is an easy-to-use and robust framework to build hybrid Apps.
Getting started with Ionic
Knowledge of basic web development languages like HTML5, CSS, and Javascript is all you really need to know to get started with Ionic. That being said, you can build a simple yet complete App without any programming knowledge whatsoever.
Since Ionic uses AngularJS services and derivatives to carry out its objectives, previous knowledge of Angular will help you build a more powerful App. For visual styling of the App aside from CSS, I recommend getting familiar with Saas (Syntactically Awesome Stylesheets). Saas is an easy and fast way to transform the entire look of your App.
Follow these instructions to install Ionic and get started. Everything you need to know about how Ionic works can be found in our Documentation page. You can also refer to my Intro to Ionic article. 
Ionic Framework Components
In my Office Hours session, Intro to Ionic Framework with Perry Govier, I provided an overview of how the interface looks (beginning at 21:40) and cover several components available. such as Lists, Complex Lists, and Collection Repeat. Ionic provides you with the functionality to swipe list items over, reorder them, optimize long lists, and more. 
Navigation can be tricky and easily over complicated. Ionic provides the tools to help you with the complex navigation structure in Apps that some people, such as web developers, may not be experienced with. Tabs (called “Ion Tabs”), Side Menu, Slide Box, Action Sheets, Popovers, and Modals are all important navigation components to pay attention to.
Ionic provides numerous components which make up its ecosystem that helps you build your perfect App.
Ionic Framework Example
See Ionic in action in our Office Hours clip beginning at 31:07.
In the demonstration, you’ll get to see the features and directories available for your App. The “www” folder, which contains your index file, is where you will be spending the most time in. You’ll find other folders such as the app.js (for configuration and bootstrapping), controllers.js (connects data sources and scope variables), and services.js (which passes through a controller to a template).
What’s great about Ionic is its live-reload server, so you can automatically see changes in your browser. Additionally, with a simple command, “ionic platform add ios”, you can connect your iPhone to your computer and have the App instantly run on your device. If you do not have an iPhone, an emulator will appear instead. For detailed instructions on testing, please refer to Ionic’s Testing Documentation.
Using Ionic, you can build an amazing App in no time!
If you need personalized help with the Ionic Framework or seek a mentor, Codementor can help you.
Perry Govier is a senior developer of the Ionic Framework. With 7 years of experience in Minneapolis digital agencies, he was first exposed to Ionic as a developer building Ionic apps for clients.
Please also check out my other article, Intro to Ionic Framework.
