Tutorial interativo para sistema

[lucasdanielbeltrame 0]

Ola!

Fiz um sistema de folha de ponto para a empresa em que trabalho, mas preciso criar um tutorial interativo que ajude o usuário a usar o sistema pelo menos na primeira vez que ele usa. Ele vai logar, se for a primeira vez mostra o sistema colocando balões e deixando bem claro onde clicar e o que faz cada coisa do sistema. Eu procurei de tudo na internet e não encontrei nada. Alguém sabe onde eu possa encontrar isso? Ficou claro o que preciso?

Fiz o sistema em AngularJs, PHP e Mysql.

Obrigado.

[andreneeto 7]

Opa, por ser algo simples você pode utilizar o localStorage para armazenar uma variável que indicara se é o primeiro login, assim que ele entrar na tela onde vai ter o tutorial você faz a sua lógica:

if (!localStorage.hasOwnProperty("wasShown")) {
    localStorage.setItem("wasShown", true);
    //-- Mostra os seus balões do tutorial
}

[lucasdanielbeltrame 0]

Sim. Isso se eu fizer tudo do zero, mas eu queria saber se já existe algum framework ou algum código já pronto que ajuda a fazer isso.

[Maykel-ctba 233]

Tem sim!

http://bootstraptour.com/

[gabrieldarezzo 255]

Acho animal esse cara:

http://introjs.com/

Ps:

Não esquece q para uso comercial tem um preço:

http://introjs.com/#commercial

[gabrieldarezzo 255]

@andreneeto discordo usar o localStorage, em explicações. (assim fica multi-device)

Seria legal utilizar uma flag no BD, e assim que terminar o tutorial chamar via ajax e atualizar que usuario X já viu.

O start() do tutorial só seria executado caso o User não tenha feito o tutorial