Projeto de exemplo da palestra do .NET Coders no dia 11/05/2014 usando a tag audio, Geolocation API, Google Maps e Local Storage
##Demo
[demo] (http://kiide.github.io/geolocation-html5/)
##Conceitos
- HTML5 http://pt.wikipedia.org/wiki/HTML5, http://tableless.com.br/html5/
- [Geolocation API] (https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation)
- [HTML5 audio] (https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Audio)
##Bibliotecas, plugins e frameworks
- [jQuery] (http://jquery.com/)
- [Bootstrap] (http://getbootstrap.com/)
- [jQuery.geocomplete] (http://ubilabs.github.io/geocomplete/)
- [jQuery.maskedinput] (http://digitalbush.com/projects/masked-input-plugin/)
- [Modernizr] (http://modernizr.com/)
##Pontos de interesse
####Organização do código
geolocation-html5/
├── bower_components/
│ └── *
├── css/
│ └── app.css
├── img/
│ └── *
├── js/
│ ├── app.js
│ └── database.js.js
└── media/
└── *
- bower_components: pasta para as bibliotecas, plugins e frameworks;
- css: pasta de css;
- img: pasta para imagens usadas no projeto;
- js/app.js: arquivo de load do jQuery e manipulação do DOM;
- js/database.js: arquivo que gerencia o local Storage;
- media: pasta para audios;
####Layout
Todo projeto é desenvolvido usando bootstrap e pequenas modificações em css.
####Máscara
Para a máscara do campo telefone eu utilizo o plugin maskedinput
, dentro de app.js
temos o método loadMask
, que é responsável por adicionar a máscara.
loadMask: function () {
this.$telephone.mask('(99) 9999-9999');
},
####Geolocalização
Para geolocalização eu uso o plugin jQuery.geocomplete
para transformar o input de endereço em um autocomplete - para mais detalhes veja a documentação do jQuery.geocomplete
- o método loadMap
recebe um objeto de geolocalização representando a localização atual. A localização atual é passada para o plugin em sua inicialização.
loadMap: function (position) {
position = position || {};
var $map = this.$map;
var mapOptions = { map: $map };
if (position.coords) {
mapOptions.location = [position.coords.latitude, position.coords.longitude];
}
// create a map using geocomplete
// see http://ubilabs.github.io/geocomplete/
this.$address.geocomplete(mapOptions);
},
A inicialização do plugin depende da localização atual, para isso temos o método getCurrentPosition
que é responsável por adquirir a posição atual.
getCurrentPosition: function(callback) {
navigator.geolocation.getCurrentPosition(callback, callback);
},
Para garantir que o browser tem suporte a geolocalização, eu uso o método checkSupportToGeolocation
que verifica se o browser suporta geolocalização.
checkSupportToGeolocation: function () {
return Modernizr.geolocation;
},
####LocalStorage
Toda manipualção do localStorage
é feita pelo arquivo database.js
, onde temos a classe DataBase
que possui os métodos add
que adicionar um objeto no localStorage
e o método findAll
que retorna todos os objetos do localStorage
.
DataBase.prototype.findAll = function (callback) {
// check if callback exists, if no exists create a empty function
callback = callback || function () {};
var data = JSON.parse(localStorage[this._STORAGE_ID]);
callback.call(this, data.friends);
}
DataBase.prototype.add = function (friend, callback) {
callback = callback || function () {};
// get all friends in database and convert to JSON
var data = JSON.parse(localStorage[this._STORAGE_ID]);
// add friend in array
data.friends.push(friend);
// save all friends in database
localStorage[this._STORAGE_ID] = JSON.stringify(data);
callback.call(this);
};
Como temos a limitação do localStorage
trabalhar apenas com strings
, uso os métodos JSON.stringify
e JSON.parse
para desserializar e serializar strings
para JSON
.
##Agradecimentos
[LGroup] (http://www.lgroup.com.br/)
.NET Coders
##Dúvidas?
Manda um oi no twitter [@_kiide] (https://twitter.com/_kiide)
Fork me and pull request!