Luckily, though, there are other options to choose from. One option that I\u2019ve been working with lately is Ionic, specifically the Ionic 2 framework<\/a>.<\/p>\n In this blog, we\u2019ll show just how easy it is to get up and running with a Ionic 2 by creating a reference mobile application. By the end of this blog, our application will have the ability to run in the browser, emulator, or be built-out to run on a device.<\/p>\n Note: As of this writing, Ionic 2 is in public preview. This means that it is more of a release candidate, and it may not be the full-fledged framework yet. That said, it\u2019s most likely that core framework changes will no longer be happening.<\/p>\n Ionic leverages commonly used web technologies to build out the app, specifically Angular<\/a> with TypeScript<\/a>, SCSS, and HTML. You\u2019ll want a little knowledge in each of these areas, but if you\u2019re not extremely strong in these areas, don\u2019t worry; the Ionic site offers plenty of examples to help get you through most situations.<\/p>\n First we need to have NodeJS installed. If you don\u2019t have this installed, head on over to NodeJs.org<\/a> to a package that is Node.js 6 or greater. Once installed, open your command prompt or terminal window and type the following to install Ionic and its dependencies:<\/p>\n Now that we have Ionic installed, we are ready to start running forward. In your command prompt or terminal window, navigate to the folder where you\u2019d like to save your new application. Type the following:<\/p>\n A quick breakdown of this command is to tell Ionic we are Ionic, from the command above, has now created a project for you to start working with. In fact, at this point, you could even run the project in the browser to start playing.<\/p>\n You\u2019ll need to make sure you\u2019re in the right directory before you can serve up the application. You can do this by typing in From here, you can type the following to serve up the application:<\/p>\n We just told Ionic that we want to serve the application to the browser. In order for it to do this, Ionic will take any TypeScript files and SCSS files, and transpile\/compile them out to something that the browser can digest. Then it starts up a server for us to hit. When it has completed, it will launch the browser for you.<\/p>\n Boom<\/strong>, you have your first app. But this is just the beginning!<\/p>\n At this point, we can start moving forward to making a custom app for our needs.<\/p>\n We\u2019ll start by making a simple application for Keyhole Software. This app will give an overview of Keyhole Software, show the location of Keyhole offices, and show a contact page.<\/p>\n We\u2019ll do a quick update to the \u2014<\/p>\n Now our application has a home page set up. There\u2019s nothing crazy here to explain, your run-of-the-mill html with an icon.<\/p>\n Ionic provides its own list of icons that we can use. One neat thing about this is that it will use the appropriate icon given the platform you are using, for instance iPhone, Android, etc\u2026<\/p>\n Okay, now let\u2019s move on to the next easy page: the contact tab. We will update this page with the following:<\/p>\n As you can see with this example, you don\u2019t necessarily have to utilize the SCSS page for styling. You can feel free to style inline or in the SCSS page. This page also makes use of the Alright, on to something more complex. For this, we will be adding a new page that will show the locations of the Keyhole offices. We\u2019ll need to generate a new page. Lucky for us, Ionic provides some help for us.<\/p>\n In your command prompt or terminal, make sure you\u2019re at the root of your application in the folder With the above command, Ionic will create an HTML, SCSS, and TS file for you.<\/p>\n Now let\u2019s add some content to this page. We will be making use of the Google Maps JavaScript API to show the locations of each of the Keyhole offices. To do so, we will need to update the \u2014<\/p>\n \u2014<\/p>\n \u2014<\/p>\n The application won\u2019t inherently know about our new Locations page so we need to fix this by updating a few things in the We now have our location page set up and ready to go. However, we need to also add the page to our tabs system so that we can quickly navigate to the page. To do so we need to update the files below:<\/p>\n \u2014<\/p>\n Now we have our application set up, we are ready to test it out.<\/p>\n Run the In this blog, we created a mobile application using the Ionic 2 framework that can be run in the browser, emulator, or built-out to run on a device. I hope that you found it helpful in getting to know the Ionic 2 framework a bit better. Thank you for following along!<\/p>\n To see the working application source, visit this link: https:\/\/github.com\/costr\/Keyhole-Ionic-Starter<\/a>.<\/p>\n http:\/\/ionic.io\/2<\/a>About Ionic<\/h2>\n
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/GettingStartedwithIonic1-150x150.png\")
<\/a><\/p>\nLet\u2019s Get Started<\/h2>\n
npm install -g ionic cordova<\/pre>\n
ionic start MyFirstApp --v2<\/pre>\n
start<\/code>ing an application we call MyFirstApp<\/code> and that Ionic should be using version to (\u2013v2). If we were to fail to specify the --v2 flag<\/code>, Ionic would use version 1 of the Ionic framework.<\/p>\nCD MyFirstApp<\/code>.<\/p>\nionic serve<\/pre>\n
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/GettingStartedwithIonic1.5.png\")
<\/a><\/p>\nCustom App<\/h3>\n
Home Page<\/h2>\n
home.html<\/code> page:<\/p>\n<ion-content padding>\r\n <img src=\"https:\/\/keyholesoftware.com\/wp-content\/uploads\/2011\/10\/keyholelogo.png\" alt=\"logo\" \/><br \/><br \/>\r\n <p>\r\n Keyhole Software is a Midwest-based software development and consulting firm with a team that loves technology. Our expert employee consultants excel as \u201cchange agents,\u201d helping our clients to be successful with software technologies that bring competitive advantage. See some of our recent projects <a href=\"https:\/\/keyholesoftware.com\/projects\/\">here<\/a>.\r\n <\/p> \r\n <p class=\"standout\">\r\n <strong>\r\n <ion-icon ios=\"ios-cog\" md=\"md-cog\"><\/ion-icon>\r\n We frequently assist clients with custom application design, development, and modernization initiatives with Java, JavaScript\/SPA, and .NET technologies.\r\n <\/strong>\r\n <\/p> \r\n <p>\r\n Keyhole was founded on the principle of delivering quality solutions through a talented technical team, and as such, knowledge transfer is important to us. We have a weekly <a href=\"https:\/\/keyholesoftware.com\/blog\">development blog<\/a>, as well as in-team Tech Nights to keep up on the latest in the industry. To our clients, we offer various techniques to provide the most value: one-on-one or group mentoring, lab\/lecture educational <a href=\"https:\/\/keyholesoftware.com\/services\/education\/\">courses<\/a>, and access to our knowledge transfer engine <a href=\"http:\/\/www.grokola.com\/\">GrokOla<\/a>.\r\n <\/p>\r\n<\/ion-content><\/pre>\n
page-home {\r\n\t.standout {\r\n\t\tmargin: 3rem 0 3rem 2rem;\r\n\t\tfont-size: 1.5rem;\r\n\t}\r\n}<\/pre>\nContact Page<\/h2>\n
<ion-header>\r\n <ion-navbar>\r\n <ion-title>\r\n Contact\r\n <\/ion-title>\r\n <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n\t<ion-list>\r\n\t\t<ion-item text-wrap>\r\n\t\t\t<h1>Keyhole Software Headquarters<\/h1>\r\n\t\t\t<div>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tThe Keyhole Software corporate office is located in Leawood, Kansas, just south of Kansas City. Additional teams are located in St. Louis, Chicago, Lincoln, and Omaha. We consult nationally with clients across the United States.\r\n\t\t\t\t<\/p>\r\n\t\t\t<\/div>\r\n\t\t\t<br \/>\r\n\t\t\t<div>\r\n\t\t\t\t<p>\r\n\t\t\t\t\t8900 State Line Road, Suite 455<br \/>\r\n\t\t\t\t\tLeawood, KS 66206\r\n\t\t\t\t<\/p><br \/>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tTel: <a href=\"tel:1-877-521-7769\">(877) 521-7769<\/a>\r\n\t\t\t\t<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/ion-item>\r\n\t\t<ion-item text-wrap>\r\n\t\t\t<h1>Connect With Keyhole<\/h1>\r\n\t\t\t<div class=\"x-text cs-ta-left\">\r\n\t\t\t\t<p>\r\n\t\t\t\t\tWe are prolific in using social media and blogging to connect with the community. Get connected with us on our weekly\u00a0<a href=\"https:\/\/keyholesoftware.com\/blog\/\">development blog<\/a>, monthly\u00a0<a href=\"https:\/\/keyholesoftware.com\/company\/creations\/publications\/technical-newsletter-sign-up\/\">developer newsletter<\/a>, or via the social media channels below:\r\n\t\t\t\t<\/p>\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t<br \/>\r\n\t\t\t<div>\r\n\t\t\t\t<p style=\"font-size: 2.5rem; text-align: center;\">\r\n\t\t\t\t\t<a href=\"http:\/\/twitter.com\/keyholesoftware\" target=\"_blank\"><ion-icon name=\"logo-twitter\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"http:\/\/linkedin.com\/company\/keyhole-software\" target=\"_blank\"><ion-icon name=\"logo-linkedin\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"http:\/\/facebook.com\/keyholesoftware\" target=\"_blank\"><ion-icon name=\"logo-facebook\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"http:\/\/youtube.com\/keyholesoftware\" target=\"_blank\"><ion-icon name=\"logo-youtube\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"http:\/\/github.com\/in-the-keyhole\" target=\"_blank\"><ion-icon name=\"logo-github\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"mailto:asktheteam@keyholesoftware.com&subject=Website Inquiry\" target=\"_blank\"><ion-icon name=\"mail\"><\/ion-icon><\/a>\r\n\t\t\t\t\t\u00a0\u00a0\u00a0\r\n\t\t\t\t\t<a href=\"https:\/\/keyholesoftware.com\/feed\" target=\"_blank\"><ion-icon name=\"logo-rss\"><\/ion-icon><\/a>\r\n\t\t\t\t<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/ion-item>\r\n\t<\/ion-list>\r\n<\/ion-content><\/pre>\n
<\/code> and <\/code>. This allows us to list out our information in a clean manner. We also make use of the text-wrap<\/code> attribute to let Ionic know that it should wrap the text inside of the ion-item<\/code>. Otherwise the overflow would run off the screen.<\/p>\nLocation Page<\/h2>\n
MyFirstApp<\/code>. Type the following command:<\/p>\nionic g page Locations<\/pre>\n
index.html<\/code> file to add the Google Maps API source. Next, we\u2019ll add a DIV to our locations.html<\/code> page to put the map into. Finally, we\u2019ll add the TypeScript that will create the map and add the markers.<\/p>\nimport { NgModule, ErrorHandler } from '@angular\/core';\r\nimport { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';\r\nimport { MyApp } from '.\/app.component';\r\nimport { ContactPage } from '..\/pages\/contact\/contact';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\nimport { TabsPage } from '..\/pages\/tabs\/tabs';\r\nimport { LocationsPage } from '..\/pages\/locations\/locations';\r\n\r\n@NgModule({\r\n declarations: [\r\n MyApp,\r\n ContactPage,\r\n HomePage,\r\n\tLocationsPage,\r\n TabsPage\r\n ],\r\n imports: [\r\n IonicModule.forRoot(MyApp)\r\n ],\r\n bootstrap: [IonicApp],\r\n entryComponents: [\r\n MyApp,\r\n ContactPage,\r\n HomePage,\r\n\tLocationsPage,\r\n TabsPage\r\n ],\r\n providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]\r\n})\r\nexport class AppModule {}<\/pre>\n<!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Ionic App<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n <meta name=\"format-detection\" content=\"telephone=no\">\r\n <meta name=\"msapplication-tap-highlight\" content=\"no\">\r\n <link rel=\"icon\" type=\"image\/x-icon\" href=\"assets\/icon\/favicon.ico\">\r\n <link rel=\"manifest\" href=\"manifest.json\">\r\n <meta name=\"theme-color\" content=\"#4e8ef7\">\r\n <script src=\"cordova.js\"><\/script>\r\n \r\n <!-- load google map api -->\r\n <script src=\"http:\/\/maps.google.com\/maps\/api\/js\"><\/script>\r\n \r\n <link href=\"build\/main.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <!-- Ionic's root component and where the app will load -->\r\n <ion-app><\/ion-app>\r\n <!-- The polyfills js is generated during the build process -->\r\n <script src=\"build\/polyfills.js\"><\/script>\r\n <!-- The bundle js is generated during the build process -->\r\n <script src=\"build\/main.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
<ion-header>\r\n <ion-navbar>\r\n <ion-title>Office Locations<\/ion-title>\r\n <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content>\r\n\t<div class=\"map\" #map style=\"height: 100%;\"><\/div>\r\n<\/ion-content><\/pre>\n
import {Component, ViewChild, ElementRef} from \"@angular\/core\";\r\nimport { NavController, NavParams } from 'ionic-angular';\r\n\r\ndeclare var google: any;\r\n\r\n@Component({\r\n selector: 'page-locations',\r\n templateUrl: 'locations.html'\r\n})\r\nexport class LocationsPage {\r\n\r\n public map: any;\r\n\r\n @ViewChild('map') mapElement: ElementRef;\r\n\r\n constructor(public navCtrl: NavController, public navParams: NavParams) {}\r\n\r\n ionViewDidLoad() {\r\n \tconsole.log('ionViewDidLoad LocationsPage');\r\n\tthis.loadMap();\r\n }\r\n\r\n loadMap() { \/\/ TODO: Most of this can probably be moved to the base framework\r\n console.log(\"loadMap executing\");\r\n \r\n let latitude = 40.600920\r\n let longitude = -91.702881;\r\n\r\n let latLng = new google.maps.LatLng(latitude, longitude);\r\n\r\n let mapOptions = {\r\n \tcenter: latLng,\r\n \tzoom: 5,\r\n\t \tmaxZoom: 5,\r\n\t\tminZoom: 5,\r\n\t\tpanControl: false,\r\n\t\tdraggable: false,\r\n \tmapTypeId: google.maps.MapTypeId.ROADMAP,\r\n \tmapTypeControl: false,\r\n \tzoomControl: false,\r\n \tstreetViewControl: false\r\n };\r\n\r\n this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);\r\n\r\n this.setMarkers();\r\n this.refreshTheMap();\r\n }\r\n\t\t\r\n refreshTheMap() { \/\/ TODO: Move this to a map handler class to reuse in our base\r\n \/\/ refresh map\r\n setTimeout(() => {\r\n google.maps.event.trigger(this.map, 'resize');\r\n }, 300);\r\n }\r\n\t\r\n setMarkers() {\r\n\tconsole.log(\"Setting markers\");\r\n\t \r\n\tlet lincoln = {lat: 40.832255, lng: -96.674194};\r\n\tlet kansasCity = {lat: 39.046653, lng: -94.586792};\r\n\tlet stLouis = {lat: 38.627331, lng: -90.214233};\r\n\tlet chicago = {lat: 41.879531, lng: -87.621460};\r\n\r\n\tlet lincolnMarker = new google.maps.Marker({\r\n\t\tposition: lincoln,\r\n\t\tmap: this.map,\r\n\t\ttitle: 'Keyhole Lincoln\/Omaha'\r\n\t});\r\n\t\t\r\n\tlet kansasCityMarker = new google.maps.Marker({\r\n\t\tposition: kansasCity,\r\n\t\tmap: this.map,\r\n\t\ttitle: 'Keyhole HQ'\r\n\t});\r\n\r\n\tlet stLouisMarker = new google.maps.Marker({\r\n\t\tposition: stLouis,\r\n\t\tmap: this.map,\r\n\t\ttitle: 'Keyhole St Louis'\r\n\t});\r\n\t\t\r\n\tlet chicagoMarker = new google.maps.Marker({\r\n\t\tposition: chicago,\r\n\t\tmap: this.map,\r\n\t\ttitle: 'Keyhole Chicago'\r\n\t});\r\n\r\n\tlincolnMarker.setMap(this.map);\r\n\tkansasCityMarker.setMap(this.map);\r\n\tstLouisMarker.setMap(this.map);\r\n\tchicagoMarker.setMap(this.map);\r\n\r\n\tconsole.log(\"Markers set\")\r\n } \r\n}<\/pre>\napp.module.ts<\/code> file. At the top of the page, we add a new import<\/code> for the LocationsPage<\/code> that points to the path of the HTML file. Now that we have imported the page into app.module.ts<\/code>, we need to insert it into the declarations<\/code> and entryComponents<\/code> arrays. Once we have done this, Ionic will understand what to include for compilation of the app so that we can start using it.<\/p>\n<ion-tabs>\r\n <ion-tab [root]=\"tab1Root\" tabTitle=\"Home\" tabIcon=\"home\"><\/ion-tab>\r\n <ion-tab [root]=\"tab2Root\" tabTitle=\"Locations\" tabIcon=\"pin\"><\/ion-tab>\r\n <ion-tab [root]=\"tab3Root\" tabTitle=\"Contact\" tabIcon=\"contacts\"><\/ion-tab>\r\n<\/ion-tabs><\/pre>\n
import { Component } from '@angular\/core';\r\nimport { HomePage } from '..\/home\/home';\r\nimport { LocationsPage } from '..\/locations\/locations';\r\nimport { ContactPage } from '..\/contact\/contact';\r\n\r\n@Component({\r\n templateUrl: 'tabs.html'\r\n})\r\nexport class TabsPage {\r\n \/\/ this tells the tabs component which Pages\r\n \/\/ should be each tab's root Page\r\n tab1Root: any = HomePage;\r\n tab2Root: any = LocationsPage;\r\n tab3Root: any = ContactPage;\r\n\r\n constructor() { }\r\n}<\/pre>\nTesting<\/h2>\n
ionic serve<\/code> command again to test out our app. You should now see something similar to the below image. (Note: you can resize your browser to achieve the phone-sized page.)<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/GettingStartedwithIonic2.png\")
<\/a><\/p>\nFinal Thoughts<\/h2>\n
References<\/h2>\n
\nhttps:\/\/www.typescriptlang.org\/<\/a>
\nhttps:\/\/angular.io<\/a><\/p>\n