Anderson Danilo

Desenvolvimento para a nova web

Criando Um Aplicativo Para FirefoxOS Com Backbone

| Comments

Olá, neste tutorial você vai aprender os seus primeiros passos para criar um aplicativo FirefoxOS com o Backbone, vamos ao conceitos.

Gaia UI Building Blocks

O Gaia UI Building Blocks é um conjunto de arquivos (Html, Css e Imagens) que representam a aparência nativa do FirefoxOS

Manifest

O Arquivo de Manifesto especifica as informações básicas sobre o seu aplicativo, como nome, descrição, autor, permissão das api’s e etc…

Zepto

O Zepto é uma biblioteca javascript com foco principal na facilidade de manuseio do DOM. Ele é muito compatível com o jQuery.

Underscore

O Underscore é uma biblioteca javascript que oferece várias funções simples e úteis de uso geral.

Backbone

O Backbone é um framework para javascript muito leve e fácil de usar, muito conhecido. nele você separa a sua aplicação em Model, Collection, View e Template.

Model

O modelo é o objeto responsável por representar uma entidade do seu banco de dados.

Collection

Uma coleção é o objeto responsável por gerenciar um conjunto de modelos

View

A Visualização é o objeto responsável por mostrar ao usuário as informações (que podem vir de um modelo ou coleção)

Template

Um Template é a aparência que o usuário vê, no nosso caso é um arquivo html.

Nosso primeiro aplicativo

Nosso primeiro aplicativo vai ser o mais simples possível, NÃO vamos usar nenhum gerenciador de pacotes como o Bower Componentes, nem algo como o RequireJS para separar o código em módulos. Eu recomendo você posquisar sobre eles futuramente.

O que precisamos baixar

Um simples bloco de notas

Estrutura de arquivos

A nossa estrutura de arquivos será bem simplória, considere que este é o nosso primeiro aplicativo.

  • js/app.js
  • js/backbone.min.js
  • style/main.css
  • style/gaia/* (nesta pasta você vai colar o conteúdo de “Building-Blocks-gh-pages/style”, na realidade você só precisa colar os arquivos que você vai usar, mas como estamos apenas em um exemplo não se preocupe com isso).
  • index.html
  • manifest.webapp

manifest.webapp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "name": "Tutorial Bloco de Notas",
  "description": "Um simples exemplo",
  "launch_path": "/index.html",
  "icons": {
    "128": "/images/app_icon_128.png",
    "60": "/images/app_icon_60.png"
  },
  "version": "1.2",
  "developer": {
    "name": "Arnau March",
    "url": "http://buildingfirefoxos.com"
  },
  "default_locale": "en"
}

O restante do código é como se você estivesse programando para um navegador html5, com algumas API que você pode consultar em:

https://developer.mozilla.org/en-US/Apps/Reference

Para detalhes de como criar um aplicação no backbone, consulte:

https://backbonetutorials.com/

http://blog.fernandomantoan.com/serie-backbone-js-parte-1-introducao/

Comments