The essential news about content management systems and mobile technology.
Powered by Joocial & JoomGap.

Bill B. is Director of Engineering at a multi-billion dollar interactive gaming company. A few years ago he took over a new mobile initiative focused on making the firm’s 8,500+ employees (many of them passionate gamers) happier and more productive. Bill recently spoke to us about the apps he’s building with Ionic, and what it’s meant for him, his team of skilled web developers, and the company as a whole. Here’s his story (at their request I’ll keep the company and individuals anonymous).

You can also check out the full case study on our new Resource Center.

App sprawl & inconsistency holding back employees

Bill faced significant challenges getting started. App sprawl and design inconsistencies meant that employees had to juggle up to 18 different apps, all with varying user experiences and workflows. On top of that, many of the apps were outsourced, so his team had very little control over how they were designed and built.

His first order of business was to bring the outsourced apps back in-house, starting with an internal app that offered pre-release games to employees to test and try out.

Turning web developers into mobile developers

The first challenge was finding a platform that matched the team’s skillset.

“It wasn’t like we had a bunch of Android and iOS developers sitting around.”

Instead, they had lots of skilled web developers that knew JavaScript, HTML, and CSS, and had recently standardized on Angular and TypeScript.

After evaluating Sencha, a tool that had previously been used for mobile development, they decided to try something else. One of the developers on the team had worked with Ionic before and recommended it. “It didn’t take long for everyone on the team to come to the conclusion that Ionic was the way to go.”, said Bill.

The team successfully rewrote the testing and evaluation app with Ionic. After that initial success they were asked to take on a number of new projects charted by the firm’s newly promoted Chief People Officer. She had laid out a bold vision for using mobile technology to elevate and transform the employee experience.

Keeping technical debt low with developer-friendly tools

The team has gained a reputation for solving hard problems.

“Because of the work we’ve done within the last two years, there’s more support and investment for what we’re doing. When you tackle a difficult problem, your reward is more problems people haven’t been able to solve. The only way to handle that with limited resources is to not allow any tech sprawl to happen. You have to keep technical debt as low as possible.”

To do that they’ve standardized on developer-friendly tools like AngularJS for desktop, Ionic for mobile, Node for backend services, and AWS for most infrastructure.

The importance of cross-platform

Another key enabler for the team’s success is the ability to work cross-platform.

“Working cross-platform is so important. We don’t even think about it. We’ve been hybrid from the beginning. It’s settled. We have it. My stress points would be significantly higher if we had to code everything over again for each platform.”

Openness and integration

Finally, the openness of the Ionic platform was a major benefit. The company chose Salesforce Lightning to drive consistency in front-end experiences, and Ionic’s ability to support their choice of tools means employees get a consistent look & feel across desktop and mobile experiences.

Summarizing his views on Ionic, Bill explains:

“Of the numerous things I have to worry about, Ionic and our choice of the platform is not one of them. Totally solid.”

Interested in more customer stories? Check out the rest of the Built with Ionic blog series or visit our Resource Center for other published case studies.

Read more

UIkit 3 Beta 26 released

Today we are excited to announce the release of UIkit 3 Beta 26. This also marks the moment many of you have been waiting for: We are introducing the new Lightbox component! It includes various features to create visually more powerful galleries.


Lightbox

The new Lightbox component is a comprehensive feature to quickly create image and video galleries. Visitors can scroll through pictures using a touch and swipe navigation, while on non-touch devices they can apply regular mouse drag. Alternatively, the keyboard navigation can be used just as easily. Thanks to hardware accelerated CSS3 transitions, you can choose from three basic effects to create smooth animations when clicking through the Lightbox gallery: Slide, Fade and Scale.

When using devices with mobile data, smart preloading comes in handy as only 3 images are loaded at a time, reducing the data volume consumption to a minimum.

In addition to this, when transitioning from one image to the next, each click is automatically counted leading you to your desired image, no matter how fast you click. Animations even accelerate to keep up with your pace. Images and videos inside the Lightbox gallery are fully responsive, meaning that they are resized automatically to fit the viewport when being used on mobile devices.

Lightbox image gallery

Video support

Apart from images, it is also possible to include HTML5, YouTube or Vimeo videos in the lightbox. As you scroll through them, they are individually paused and continue to play where you left off. So, whenever you close the lightbox or switch to a different slide, the current video will pause and resume at the same spot as soon as it is reopened.

The new uk-video attribute from the Utility component achieves the same thing. The autoplay and automute options can be used to automatically start and mute background videos. This is useful in combination with the Cover component, but will also come to effect in the future slideshow.

These are the main innovations of this UIkit release. We are really happy with how the Lightbox component turned out. Feel free to leave your feedback in the comments section and let us know which new feature you are the most excited about.

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

EasyArticles Alpha Released

We are super excited to inform you that the long wait is finally over, presenting you the very first alpha release of EasyArticles.


Read more

Facebook has become one of the most used methods to get users to sign-in to your application, in today’s post we’ll set up the Facebook native plugin through Ionic Native.

That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser.

To make things easier, we’re going to break down the process into three different parts:

  • Step #1: We’ll log into our Facebook developer account, create a new app and get the credentials.
  • Step #2: We’ll go into our Firebase console and enable Facebook Sign-In with the credentials from the first step.
  • Step #3: We’ll write the code to authorize the user through Facebook and then authenticate that user into our Firebase app.

By the way, at the end of this post, I’m going to link a Starter Template that already has Google & Facebook authentication ready to go, all you’d need to do is add your credentials and run npm install.

With that in mind, let’s start!

Step #1: Facebook Developer Console

The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application.

For that you’ll need to go to https://developers.facebook.com/apps and create a new app.

facebook create app

Once you click on the button, you’ll get a short form pop up, add the name you want for your app and the contact email that will be public to users.

facebook create app form

Once we finish creating our app, it will take you to the app’s dashboard, where you can see the app’s ID, take note of that ID, we’ll need it when it’s time to install the Facebook plugin.

Facebook console app id

Install the Cordova Plugin

Now that you created your app on Facebook, we need to install the Cordova plugin in our Ionic app so we can have our app calling the Facebook Sign-In widget.

For that, open your terminal and type (All in the same line):

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

You’ll need to replace the values or APP_ID and APP_NAME for your real credentials. You can find both of those inside your Facebook Developers Dashboard.

It’s a bit of a pain to work with Cordova plugins, luckily the great Ionic Team created Ionic Native, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way.

So the next thing we need to do is install the facebook package from Ionic Native, open your terminal again and type:

$ npm install --save @ionic-native/facebook

After we finish installing it, we need to tell our app to use it, that means, we need to import it in our app.module.ts file

import { SplashScreen } from '@ionic-native/splash-screen';import { StatusBar } from '@ionic-native/status-bar'import { Facebook } from '@ionic-native/facebook'@NgModule({  ...,  providers: [ SplashScreen, StatusBar, Facebook ]})export class AppModule {}

Add your Platforms to Facebook

Once everything is set up in our development environment, we need to let Facebook know which platforms we’ll be using (if it’s just web, iOS, or Android).

In our case, we want to add two platforms, iOS and Android.

To add the platforms, go ahead and inside your Facebook dashboard click on settings, then, right below the app’s information you’ll see a button that says Add Platform, click it.

facebook add platform button

Once you click the button, you’ll see several options for the platforms you’re creating, let’s start with iOS, you’ll see a form asking you for some information, right now we just need the Bundle ID.

Facebook console add ios app

If you don’t know where to get the Bundle ID, it’s the same as the package name when you create an Ionic app, it’s inside your config.xml file:

<widget id="co.ionic.facebook435" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Please, I beg you, change co.ionic.facebook435 (or what you got there) for something that’s more “on brand” with your app or your business.

NOTE: Not kidding, go to Google Play and do a search for “ionicframework” you’ll see a couple of hundred apps that didn’t change the default package name 😛

Once you add the Bundle ID, just follow the process to create the app and then do the same for Android, the difference is that instead of Bundle ID, Android calls it “Google Play Package Name.”

facebook platform android

Step #2: Enable Facebook Sign-In in Firebase.

Now that everything is set up on Facebook’s side, we need to go into our Firebase console and enable Facebook authentication for our app.

To enable Facebook, you’ll need to go to your Firebase Console and locate the app you’re using.

Once you’re inside the app’s dashboard, you’re going to go into Authentication > Sign-In Method > Facebook and are going to click the Enable toggle.

firebase auth enable facebook

Once you do, it’s going to ask you for some information, specifically your Facebook app ID and secret key, you’ll find both of those inside your Facebook console, under your app’s settings.

Step #3: Authenticate Users.

It is entirely up to you in which step of your app’s process you want to authenticate your users, so I’m going to give you the code so you can just copy it into whichever Page you’re using.

The first thing we need to do is to get the authorization from Facebook, to do that, we need to import Facebook plugin from Ionic Native and ask our user to log in.

import { Facebook } from '@ionic-native/facebook'constructor(public facebook: Facebook){}facebookLogin(): Promise<any> {  return this.facebook.login(['email']);}

That function right there takes care of opening the Facebook native widget and ask our user to authorize our application to use their data for login purposes.

Now we need to handle the response. The function response will provide us with a Facebook access token we can then pass to Firebase.

import firebase from 'firebase';import { Facebook } from '@ionic-native/facebook'constructor(public facebook: Facebook){}facebookLogin(): Promise<any> {  return this.facebook.login(['email'])    .then( response => {      const facebookCredential = firebase.auth.FacebookAuthProvider        .credential(response.authResponse.accessToken);      firebase.auth().signInWithCredential(facebookCredential)        .then( success => {           console.log("Firebase success: " + JSON.stringify(success));         });    }).catch((error) => { console.log(error) });}

Let’s break down the code above.

const facebookCredential = firebase.auth.FacebookAuthProvider  .credential(response.authResponse.accessToken);

First, we’re using the line above to create a credential object we can pass to Firebase, then we need to pass that credential object to Firebase:

facebookLogin(): Promise<any> {  return this.facebook.login(['email'])    .then( response => {      const facebookCredential = firebase.auth.FacebookAuthProvider        .credential(response.authResponse.accessToken);      firebase.auth().signInWithCredential(facebookCredential)        .then( success => {           console.log("Firebase success: " + JSON.stringify(success));         });    }).catch((error) => { console.log(error) });}

This bit of code firebase.auth().signInWithCredential(facebookCredential) makes sure your user creates a new account in your Firebase app and then authenticates the user into the Ionic app, storing some authentication information (like tokens, email, provider info, etc.) in local storage.

Next Steps

By now you have a fully working sign-in process with Facebook using Firebase, I know it’s a lot of configuration, but it’s because we want our users to have an amazing experience using our apps.

Now I want you to download a Starter Template I built it has both Facebook and Google Sign-In working out of the box, all you need to do is add your credentials from Facebook and Google 🙂 (If the link doesn’t show the price as $0 just use the discount code IonicBlog to manually set it as $0)


GET THE TEMPLATE

Read more

image

Troubleshooting WordPress issues is challenging. Over the years, WordPress has grown from a simple blogging platform to the largest and most widely-used content management system on the Web.

Read more