Dicas Framework 7 – Como criar um tour do aplicativo usando TinySlider.JS

Que tal dar um charme ao seu aplicativo? Imagine que na primeira execução do App o usuário veja um tour explicativo sobre os recursos do App e dicas de utilização.
Isso é possível usando a biblioteca TinySlider.JS que oferece uma grande varidades de efeitos de slides, vamos lá;

  1. Faça o download da bilbioteca gratuita TinySlider.JS no GitHub https://github.com/ganlanyuan/tiny-slider. Se você estiver utilizando Visual Studio, pode fazer o download via Bower;
  2. Descompacte a pasta do TinySlider.JS e copie para dentro da pasta www do seu projeto.
  3. Crie um arquivo tour.html.
  4. Utilize o código a seguir como modelo;
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Apresentação App Hidrosense</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="tiny-slider/dist/tiny-slider.css">
        <link rel="stylesheet" href="tiny-slider/dist/theme.css">
        <script src="tiny-slider/dist/tiny-slider.js"></script>
        <link rel="stylesheet" href="framework7-icons-master/css/framework7-icons.css">
        <style>
            .button {
                background-color: #2196F3;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                width: 100%;
                vertical-align: middle;
            }
    
        </style>
    </head>
    
    <body style="background-color: azure">
        <div class="my-slider" align="center">
    
            <div id="div0" style="padding-right: 20px; padding-left: 20px;">
                <a href="index.html">
                <button class="button">Pular introdução <i class="f7-icons">arrow_right_fill</i></button>        
                </a>
                <h3><strong><i class="fa fa-map-marker" aria-hidden="true"></i> BEM VINDO AO MEU APLICATIVO</strong> </h3>
                texto de apresentação aqui....
                <p></p>
            </div>
    
            <div id="div1" style="padding-right: 20px; padding-left: 20px;">
                <h3><strong><i class="fa fa-map-marker" aria-hidden="true"></i> PASSO 1</strong> </h3>
                texto de apresentação aqui....
                <p></p>
            </div>
    
            <div id="div2" style="padding-right: 20px; padding-left: 20px;">
                <h3><strong><i class="fa fa-thermometer-quarter" aria-hidden="true"></i> PASSO 2</strong> </h3>
                texto de apresentação aqui....
                <p></p>
            </div>
    
            <div id="div3" style="padding-right: 20px; padding-left: 20px;">
                <h3><strong><i class="fa fa-tachometer" aria-hidden="true"></i> PASSO 3</strong> </h3>
                texto de apresentação aqui....
                <p></p>
            </div>
    
            <div id="div4" style="padding-right: 20px; padding-left: 20px;">
                <h3><strong><i class="fa fa-users" aria-hidden="true"></i> PASSO 4</strong> </h3>
                texto de apresentação aqui....
                <p></p>.
            </div>
    
            <div id="div5" style="padding-right: 20px; padding-left: 20px;">
                <h3><strong><i class="fa fa-check-circle" aria-hidden="true"></i> VAMOS COMEÇAR?</strong> </h3>
                Viu só como o <strong>MEU APLICATIVO</strong> é fácil? Agora é só começar a usar.
                <p></p>
                <a href="index.html">
                <button class="button">Começar <i class="f7-icons">check_round_fill</i></button>   
                </a>
            </div>
    
        </div>
    
        <script>
            var slider = tns({
                container: '.my-slider',
                items: 1,
                slideBy: 'page',
                mouseDrag: true,
                controls: false,
                nav: true
            });
            var alturaTela = screen.height - 150;
            document.getElementById("div0").style.height = alturaTela + "px";
            document.getElementById("div1").style.height = alturaTela + "px";
            document.getElementById("div2").style.height = alturaTela + "px";
            document.getElementById("div3").style.height = alturaTela + "px";
            document.getElementById("div4").style.height = alturaTela + "px";
            document.getElementById("div5").style.height = alturaTela + "px";
        </script>
    </body>
    </html>
    

Salvando e testando o arquivo teremos o seguinte resultado;

Importante

  1. Perceba que cada bloco de DIV é uma tela do tour.
  2. O código JS no final da página é responsável por deixar as DIVs com a altura da tela do dispositivo. Então, caso crie novas DIVs ou remova algumas das existentes, não se esqueça de atualizar o código JS

Como fazer com o tour seja exibido apenas na primeira execução do aplicativo?

Podemos resolver isso com localStorage, mas este é um assunto para a próxima aula. Aguarde!