New Tutorial: Swipeable User Intro Tutorial

Hi everyone,

We just posted a new tutorial that walks you through creating an initial tutorial to teach users how to use your app, like this:

The tutorial can consist of multiple pages that can be swiped through. Check out the tutorial here:

Please leave any questions or comments below. Thanks!

2 Likes

I will implement this feature in my upcoming app.
It’s almost done.

return is not working in the tutorial and also image is not showing

I was thinking this demo code would be at https://github.com/driftyco/ionic-intro . However, that code is the pets example. Is this Swipeable User Intro Tutorial Code available on Github?

This should be added in a place where everyone can find it easily. Really nice and helpful post. I will be implementing it in my next project. Awesome.

I can’t seem to get the CSS file loaded no matter what I do. I can verify that the CSS is compiled and loaded as part of my sass build. However the page looks all jumbled up. I have attached a screenshot below:

1 Like

Also noted a small typo. In here, the controller referred to is AppCtrl:

$routeProvider.when(’/’, {
templateUrl: ‘intro.html’,
controller: ‘AppCtrl’
});

but the provided controller is named IntroCtrl.

Disregard the previous issues I raised. I followed the link to the Codepen and that code works properly.

am looking to implement the slide-box, but slides up or down as opposed to side ways, that is users get a new box each time they swipe down or up, is that possible, or should i write a new directive to handle that, please help

Added this User Tutorial starter app to the Ionic Generator to help others get it up and running in no time!

2 Likes

In my App the Intro works fine. Thx! BUT if I want to show the intro only the first time the app starts, the call of startApp() needs to be scope.startApp i think. Without scope it doesn´t work for me.

 // Check if the user already did the tutorial and skip it if so
  if(window.localStorage['didTutorial'] === "true") {
    // startApp();  // does not work
    $scope.startApp();  // does work!
    return;
  }

Thanks, this is a really good looking tutorial.

One change I made for performance was to check the flag in the StateProvider and only load up the tutorial if it needed to be shown, as opposed to loading it up and redirecting 95% of the time. This is a bit quicker and eliminates the flicker.

    //first screen - check if they need to see the tutorial
    if (window.localStorage['didTutorial'] === "true") {
        $urlRouterProvider.otherwise('/app/tabs/gamesMap');
    } else {
        $urlRouterProvider.otherwise('/tutorial');            
    }
3 Likes

Why this tutorial is not listed on the tutorials index page http://ionicframework.com/tutorials/ ?

It is REALLY hard to find this little gem :wink: I found it through Google

If you build the app and ran it on android, will the intro run again if you open the app the second time?
I think the purpose of the intro is to run only once and if need be, there would be a button for it if you want to look at the intro again.

You have to code this: I use Local Storage and then if they click on Skip Tutorial I set a flag and check it in my State routes.

Max, thanks for the tutorial. I have one question:
What exactly is nav-page? There is no documentation on it that I can find. Thanks.

This tutorial is a little confusing?

The sample seeed project is a pets template… and doesn’t have any slide info…

I wanted to see a completed build of this so i can pull it apart and see how it works, instead it has 3 pages of info in a code pen that i’m unsure how to implement into a pets template or a tabs template?

has anyone got a completed set of files while i can build and obtain the results thats the demo displays?

Yes the demos are a bit hard to find. The ‘intro’ demo is here: http://ionicframework.com/demos/intro-tutorial.html

But the code can’t be found there, it’s on Codepen: http://codepen.io/ionic/pen/AjgEB

And in fact there is a page called ‘examples’ (not ‘demos’) which can be found here: http://ionicframework.com/examples/
and which just points to the Codepens …

1 Like

Hi, Is there any way we can collect data in the Intro tutorials?