The Official Ionic Blog

The next generation HTML5 hybrid app development SDK

marketwatch-header
The MarketWatch app is a free news and market data app available for iOS and Android. It’s targeted to the MarketWatch.com community, as well as anyone interested in news coverage and analysis about the markets and personal finance. MarketWatch is owned by Dow Jones, publisher of The Wall Street Journal.

“We consider ourselves a resource for all of life’s money decisions, and we hope our app serves as a critical utility for users in building wealth and for smart financial planning,” says Brian Aguilar, head of product for MarketWatch. “We did extensive research to find the right fit for a hybrid platform that would serve our needs, and Ionic was the best match.”
Read more…


PhoneFlare app
What do you do when you’re in a situation that feels unsafe? Wouldn’t it be great if you could leverage your mobile device for personal safety? Well, now there’s an Ionic app for that.

PhoneFlare, available on iOS and Android, allows you to trigger an alarm by ripping an accessory from the headphone port, kind of like the emergency cord on a treadmill; or by pressing a button. You can also use PhoneFlare to set check-in times with family and friends; if you fail to meet those times, they’ll know something’s up.

If you’re in danger, the app texts friends and family your location and automatically calls your school’s safety dispatch if you’re on campus. Advanced features prevent coercion and allow for audio recording and UDID logging during emergencies.
Read more…


Localization is extremely important for software, especially as your app grows. Can you imagine not speaking the language in which an app is written and still trying to use it? In the past, it was hard to do localization in Ionic 2, as there were no solid Angular 2 localization libraries, but now, that has changed with NG2-Translate!

NG2-Translate Offers Simplicity

NG2-Translate is dead simple to use. It provides a pipe and a service with a few observables and methods that allow you to translate not only static HTML strings, but JavaScript values, too. This makes it very easy to implement into your existing Ionic 2 app and translate everything from the title of an alert to the name of your app in the navbar. Don’t you love it when things are this easy?

Angular 2 FTW

NG2-Translate is a perfect example of one of the biggest strengths of Ionic 2: being built with Angular 2. Because Ionic 2 is built with Angular 2, we get all the benefits of the Angular 2 ecosystem, including awesome libraries like this. And this means that as the Angular 2 ecosystem grows, the Ionic 2 ecosystem also grows, which provides nothing but benefits for Ionic 2 developers.

How to Use NG2-Translate in Your Ionic 2 App

If you’re intrigued by NG-2 Translate and interested in implementing it in your Ionic 2 app but are wondering how to get started, I’ve written a resources article that will walk you through exactly how to integrate NG2-Translate with your Ionic 2 app. With only a few steps, you’ll be opening your app to potentially millions of new users!

As you can see, Ionic 2 has now gained a new superpower, localization! Thanks to NG2-Translate, you can now be assured that your Ionic 2 app will be ready for your users, no matter what language they speak. Big shoutout to Olivier Combe for his amazing work on this library! Have fun making your Ionic 2 app ready for international use!


creator-custom-code

Some of you may have noticed that Creator has changed a lot in the past three weeks. We’ve rolled out some of the biggest updates ever to the product, and the response has been incredible. Our goal has always been to get you “from zero to App Store” as quickly and easily as possible, and I’m happy to say we’ve finally made that dream come true.

Introducing Custom Code Support 🎉

Now, Custom Code Support isn’t just one feature, it’s actually a collection of features that, when brought together, allow you to build a fully dynamic app without ever leaving Creator.

If you want to check it out in action, watch this 30-minute tutorial, in which we make a “Master Detail Pattern” style ToDo list backed by Firebase.

Read more…


wkwebview

Here at Ionic, we believe speed is a requirement, not a feature. We take pride in being performance-obsessed, because we believe speed is key to providing a first-class user experience. Most of the apps at the top of the App Store charts all have one thing in common: They’re all very fast and fluid! Ionic apps have always provided a quick, seamless experience, but we’ve come up with a simple way to make them even faster on iOS.

Ionic apps deployed using Cordova run within low-level, bare bones web browsers called “webviews”. Cordova utilizes each platform’s native webview in order to deploy the webapp within a native app wrapper.

iOS’s default web browser is Safari. Behind the scenes, Safari utilizes a webview. Currently, the iOS platform provides two different webviews that can be used. There’s the older (and slower) webview, called “UIWebView”, and the latest and greatest, called “WKWebView”. WKWebView is better and faster than UIWebView in every way. In addition to being significantly faster and smoother, Apple is actively providing updates to it in each iOS release. The Safari app takes advantage of WKWebView, which may explain why webapps seem more performant in Safari vs. within a Cordova application. Due to various incompatibilities and technical challenges, Ionic apps have been restricted to run in the several-year-old UIWebView.

But today, we have some great news! One of our awesome engineers, Manu, has been working hard to bring WKWebView to Ionic apps and is working to bring the new plugin into Cordova! The new plugin will work with both Ionic V1 and Ionic V2 apps. In fact, it should work with any iOS Cordova build!

Read more…


Ionic 2 Frontend: Adding More Functionality

In the first two parts of this series, we set the stage for an Ionic 2 Todo app that can be hosted on Heroku. We set up the Node.js backend for the app, with an Express server that defined API endpoints for accessing a MongoDB database. We also laid the groundwork for an Ionic 2 app to the point where the Todos in our database were displaying on the screen. If you’re just joining us now, head back over to Part 1 and start there.

In this third and final part of the series, we’ll beef up the functionality in our Ionic 2 app, play with more cool Angular 2 stuff, and finish up with a very simple, yet very functional app you can show off to all your friends.
Read more…


Ionic 2 Frontend: Displaying Todos

In Part 1 of this series, we started building an end-to-end Ionic 2 app with a Node.js backend. If you’re just joining us now, you’ll probably want to stop and go back to the first post.

Up to this point, we’ve worked primarily in the server.js file, where we created an Express app and defined the API endpoints for the todos stored in a MongoDB database, provisioned by mLab via Heroku.

In this next post, we’ll write Angular 2 code using TypeScript to create the frame for our Ionic 2 todo app, communicate with our backend, and display the todo that we added to the database.

Now that our backend server and database are super-hardcore, we can start building out the frontend todo app. Let’s start by adding the pieces to display our todos.
Read more…


Given the choice between a short or tall stack of pancakes, which would you get? The correct answer is always more pancakes. In this post, we’re giving you more pancakes! So grab the syrup, and let’s make a full-stack of MEAN. This is the first post in a three-part series!

Before we really dig in, a little bit about the MEAN stack:

For those who aren’t familiar, the MEAN stack is similar in concept to the popular LAMP (Linux, Apache, MySQL, PHP) stack, and is one of the most popular application development stacks for JavaScript developers. MEAN stands for MongoDB, Express, AngularJS, and Node.js, which are the four technologies that make up the stack. Here’s a quick breakdown of the part each of these plays:

  • MongoDB: NoSQL database/persistence
  • Express: HTTP request router/API framework
  • AngularJS: Application/MVC framework
  • Node.js: Server-side execution environment

MEAN has been a popular default dev stack for web apps in particular for quite some time now, primarily because it gives developers the ability to work with JavaScript and JSON across their entire application stack, from the server all the way to the UI. This is pretty cool for a lot of reasons, though one of the largest is that it removes a lot of complexity from an already complex system. Not only can we write all of our code in a single language (JS), since every level of the stack speaks the same language we also get to use a single data format to exchange data (JSON), as well as common idioms and object types. This continuity between layers can reduce errors and make coordinating development across the stack much easier.

Read more…


In Part 1 of this series, we took at a look at how to use Ionic Native’s Camera Plugin to access the native photo app (Photos on iOS and Gallery on Android) in an Ionic app. Hopefully that inspired you to go forth into the world and create something awesome, but if you did, you may have noticed a slight catch. The Camera plugin only lets us select one photo, and as we all know as savvy internet consumers, more pictures are more better. Making a user choose only one of their photos not only isn’t going to cut it for a lot of apps, it’s downright immoral!

So let’s fix the error of our ways, shall we? Time to take a look at the Image Picker plugin, which does a few things:

  • Invokes the native photo app on the user’s device
  • Allows the user to select multiple photos
  • Returns an array of file URIs of the selected photos to our app

The plugin also allows us to set some options, such as the maximum number of images the user is allowed to select. More on these shortly.

To see how it works, let’s build another super fun sample app!
Read more…


Taking photos with my phone is awesome. I’ve probably taken at least a dozen of my dog just today. Check it out:

IMG_0196

But what’s even more awesome is that we live in the future, where the apps on our phones and tablets let us do all kinds of cool stuff with those photos. So as an app developer, how can you participate in this amazing World of Tomorrow? To start, your app needs to be able to access the photos on your device.

In today’s post, we’ll take a look at the first of two ways to easily get images from the Gallery on Android and Photos on iOS in Ionic 2 with Ionic Native.

Ionic Native Camera Plugin

As a user, picking a photo from the native photo app is already a pretty great experience, so let’s look at how we can integrate that into our apps. Thanks to the Ionic Native Camera plugin it’s super easy. In a previous blog post, we looked at how to use the Camera plugin to take a new photo, but that’s not all it does! It also allows us to open the device’s native photo app, and access any picture selected by the user.

Let’s take a look by building a simple app.
Read more…


Ionic Blog RSS Feed