{"id":484,"date":"2021-07-22T17:49:54","date_gmt":"2021-07-22T17:49:54","guid":{"rendered":"https:\/\/escolhadev.com.br\/?p=484"},"modified":"2024-04-30T20:24:44","modified_gmt":"2024-04-30T20:24:44","slug":"crie-uma-aplicacao-hello-world-do-zero-com-backbone-js","status":"publish","type":"post","link":"https:\/\/escolhadev.com.br\/javascript\/crie-uma-aplicacao-hello-world-do-zero-com-backbone-js\/","title":{"rendered":"Crie uma Aplica\u00e7\u00e3o “Hello, World!” do Zero com Backbone.js"},"content":{"rendered":"\n

Neste artigo quero iniciar nossos primeiros passos no universo do Backbone.js com o famoso cl\u00e1ssico Hello, World!<\/strong> At\u00e9 o final deste artigo entregarei um projeto simples e funcional.<\/p>\n\n\n\n

Eu tamb\u00e9m gostaria que este projeto possa ser usado como ponto de partida, ou seja, um reposit\u00f3rio no GitHub que possa ser facilmente clonado para come\u00e7ar outros projetos rapidamente.<\/p>\n\n\n\n

Pr\u00e9-Requisitos<\/h2>\n\n\n\n

Para acompanhar este tutorial recomendo que conhe\u00e7a pelo menos um pouco de HTML, CSS e JavaScript. Algum conhecimento em desenvolvimento web no geral \u00e9 bem vindo. Ter pelo menos uma id\u00e9ia sobre O que \u00e9 Backbone.js<\/a> tamb\u00e9m \u00e9 importante para manter voc\u00ea motivado durante toda a leitura, mas n\u00e3o \u00e9 obrigat\u00f3rio.<\/p>\n\n\n\n

PS: Para conhecer HTML, CSS e JavaScript acesse D\u00ea um start na carreira de programa\u00e7\u00e3o<\/a> – nele recomendo um minicurso para dar seus primeiros passos no desenvolvimento web.<\/p>\n\n\n\n

Cria\u00e7\u00e3o da estrutura de diret\u00f3rios<\/h2>\n\n\n\n

Agora explicarei como vamos organizar a estrutura de diret\u00f3rios do nosso projeto. Criaremos uma pasta chamada bd2020-hello-world<\/code> que ser\u00e1 o diret\u00f3rio raiz da aplica\u00e7\u00e3o. Dentro criaremos os subdiret\u00f3rios resources<\/code> e vendors<\/code>, cada um contendo as pastas css<\/code> e js<\/code>.<\/p>\n\n\n\n

A motiva\u00e7\u00e3o para criar os dois subdiret\u00f3rios s\u00e3o o seguinte: o resources<\/code> dever\u00e1 armazenar arquivos do tipo CSS e JavaScript criados por n\u00f3s e espec\u00edficos para este projeto enquanto o vendors<\/code> dever\u00e1 conter c\u00f3digo CSS e JavaScript de terceiros. Exemplos de c\u00f3digos de terceiros seriam bibliotecas como Bulma, jQuery, Underscores e o pr\u00f3prio Backbone.<\/p>\n\n\n\n

Agora que voc\u00ea entendeu a motiva\u00e7\u00e3o sobre como dever\u00e1 ser organizado o projeto vou mostrar como ficaria a estrutura j\u00e1 finalizada. Talvez fique mais f\u00e1cil para voc\u00ea visualizar e replicar a\u00ed no seu editor de textos tamb\u00e9m.<\/p>\n\n\n\n

bd2020-hello-world\n\u251c\u2500\u2500 resources\n\u2502   \u251c\u2500\u2500 css\n\u2502   \u2514\u2500\u2500 js\n\u2514\u2500\u2500 vendors\n    \u251c\u2500\u2500 css\n    \u2514\u2500\u2500 js\n<\/code><\/pre>\n\n\n\n
No meu caso sou usu\u00e1rio do sistema operacional Linux. Se este tamb\u00e9m for o seu caso segue dois comandos que executei dentro da pasta bd2020-hello-world<\/code> usando terminal. Esses comandos criar\u00e3o a estrutura de diret\u00f3rios do seu projeto caso voc\u00ea ainda n\u00e3o tenha criado.<\/p>\n\n\n\n
mkdir -p resources\/{js,css}\nmkdir -p vendors\/{js,css}\n<\/code><\/pre>\n\n\n\n
Finalizamos a estrutura de diret\u00f3rios e agora estamos prontos para a pr\u00f3xima etapa. Bora baixar alguns arquivos necess\u00e1rios para continuarmos com o desenvolvimento da nossa aplica\u00e7\u00e3o Backbone?<\/p>\n\n\n\n
Cria\u00e7\u00e3o dos arquivos necess\u00e1rios<\/h2>\n\n\n\n
Agora que finalizamos a estrutura de pastas do nosso projeto vamos para o pr\u00f3ximo passo. Primeiro criaremos os arquivos que conter\u00e3o nosso c\u00f3digo CSS e JavaScript. Em seguida baixaremos as depend\u00eancias.<\/p>\n\n\n\n
Para voc\u00ea ter uma id\u00e9ia de como vai ficar nossa estrutura quando finalizarmos a cria\u00e7\u00e3o dos arquivos estou disponibilizando logo abaixo o resultado final. Pode ser \u00fatil voc\u00ea ter uma vis\u00e3o da estrutura pronta para se guiar mais facilmente enquanto avan\u00e7amos para as pr\u00f3ximas etapas.<\/p>\n\n\n\n
bd2020-hello-world\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 resources\n\u2502   \u251c\u2500\u2500 css\n\u2502   \u2502   \u2514\u2500\u2500 screen.css\n\u2502   \u2514\u2500\u2500 js\n\u2502       \u2514\u2500\u2500 app.js\n\u2514\u2500\u2500 vendors\n    \u251c\u2500\u2500 css\n    \u2502   \u251c\u2500\u2500 bulma.css\n    \u2502   \u2514\u2500\u2500 bulma.css.map\n    \u2514\u2500\u2500 js\n        \u251c\u2500\u2500 backbone.js\n        \u251c\u2500\u2500 jquery-3.5.1.js\n        \u2514\u2500\u2500 underscore.js\n<\/code><\/pre>\n\n\n\n
Usualmente projetos web precisam de pelo menos um arquivo HTML, um arquivo para salvar estilos CSS e um arquivo onde escrevemos c\u00f3digo JavaScript. Sabendo disso ent\u00e3o vamos criar na raiz os seguintes arquivos: index.html<\/code>, resources\/css\/screen.css<\/code> e resources\/js\/app.js<\/code>.<\/p>\n\n\n\n
touch index.html\ntouch resources\/css\/screen.css\ntouch resources\/js\/app.js\n<\/code><\/pre>\n\n\n\n
Os nossos arquivos m\u00ednimos para come\u00e7ar um projeto web est\u00e3o criados. Agora vamos fazer o download do Bulma<\/a> que \u00e9 um framework CSS moderno baseado no flexbox.<\/p>\n\n\n\n
No momento que escrevo este artigo a vers\u00e3o atual do Bulma \u00e9 0.9.1<\/code>. Fa\u00e7a o download, descompacte o arquivo, localize os arquivos bulma.css<\/code> e bulma.css.map<\/code> e os copie no caminho vendors\/css<\/code>. Caso esteja em um terminal bash os camandos que executei para acessar um CDN e baixar o bulma seguem abaixo.<\/p>\n\n\n\n
wget https:\/\/cdn.jsdelivr.net\/npm\/bulma@0.9.1\/css\/bulma.css -P vendors\/css\nwget https:\/\/cdn.jsdelivr.net\/npm\/bulma@0.9.1\/css\/bulma.css.map -P vendors\/css\n<\/code><\/pre>\n\n\n\n
Nosso pr\u00f3ximo objetivo \u00e9 realizar o download do Backbone.js e suas respectivas depend\u00eancias que s\u00e3o o Underscore.js e JQuery. Essas depend\u00eancias dever\u00e3o ser baixadas e salvas no caminho vendors\/js<\/code>.<\/p>\n\n\n\n
Segue abaixo os comandos que utilizei no meu terminal bash para fazer o download das bibliotecas e salva-las dentro da pasta vendors\/js<\/code>. No momento que escrevo este artigo a vers\u00e3o das depend\u00eancias baixadas s\u00e3o Backbone.js 1.14.0<\/code>, Underscore.js 1.12.0<\/code> e jQuery 3.5.1<\/code>.<\/p>\n\n\n\n
wget https:\/\/cdn.jsdelivr.net\/npm\/underscore@1.12.0\/underscore.js -P vendors\/js\nwget https:\/\/code.jquery.com\/jquery-3.5.1.js -P vendors\/js\nwget https:\/\/backbonejs.org\/backbone.js -P vendors\/js\n<\/code><\/pre>\n\n\n\n
Se voc\u00ea chegou at\u00e9 aqui comigo ent\u00e3o j\u00e1 possui em m\u00e3os uma estrutura de pastas, arquivos de projeto e depend\u00eancias para come\u00e7ar um projeto usando Backbone.<\/p>\n\n\n\n
O pr\u00f3ximo passo agora \u00e9 escrever um pouco de c\u00f3digo que seja f\u00e1cil e funcional. O suficiente para dar um pouco de vida ao nosso projeto.<\/p>\n\n\n\n
Escrevendo nosso primeiro c\u00f3digo JavaScript<\/h2>\n\n\n\n
Com toda esta estrutura de pastas e arquivos criados podemos come\u00e7ar a escrever um pouco de c\u00f3digo JavaScript. Abra o arquivo resources\/js\/app.js<\/code> usando seu editor de c\u00f3digo preferido.<\/p>\n\n\n\n
Nele vamos criar a classe AppRootView<\/code> que dever\u00e1 estender Backbone.View<\/code>. Depois sobrescreva o m\u00e9todo render<\/code> para concatenar ao DOM this.$el<\/code> um t\u00edtulo e descri\u00e7\u00e3o com as tags H1<\/code> e P<\/code> respectivamente.<\/p>\n\n\n\n
No final crie uma inst\u00e2ncia de AppRootView<\/code> e execute o m\u00e9todo render<\/code>. O resultado armazenado na propriedade $el<\/code> ser\u00e1 passado por par\u00e2metro para o seletor jQuery que aponta para #app-root<\/code>.<\/p>\n\n\n\n
O objetivo deste artigo n\u00e3o \u00e9 se aprofundar no Backbone.js – para manter simples e ficar mais claro tudo o que expliquei veja abaixo como deve ficar o seu c\u00f3digo JavaScript.<\/p>\n\n\n\n
(function () {\n\tconst AppRootView = Backbone.View.extend({\n\t\tclassName: 'container',\n\n\t\trender: function () {\n\t\t\tconst title = $('<h1>');\n\t\t\ttitle.addClass('title');\n\t\t\ttitle.append('Hello, World!');\n\n\t\t\tconst subtitle = $('<p>');\n\t\t\tsubtitle.addClass('subtitle');\n\t\t\tsubtitle.append('My first website with <strong>Backbone.js<\/strong>!');\n\n\t\t\tthis.$el.append(title);\n\t\t\tthis.$el.append(subtitle);\n\n\t\t\treturn this;\n\t\t},\n\t});\n\n\t$('#app-root').html(new AppRootView().render().$el);\n})();\n<\/code><\/pre>\n\n\n\n
Escrever apenas c\u00f3digo JavaScript n\u00e3o \u00e9 suficiente para um projeto m\u00ednimo e funcional com Backbone. Vamos no pr\u00f3ximo t\u00f3pico escrever o c\u00f3digo HTML respons\u00e1vel por exibir alguma informa\u00e7\u00e3o no navegador.<\/p>\n\n\n\n
Escrevendo nossa estrutura HTML<\/h2>\n\n\n\n
Agora vamos escrever o c\u00f3digo HTML do projeto. \u00c9 simples – c\u00f3digo HTML b\u00e1sico que importa os arquivos de estilo e JavaScript. O conte\u00fado \u00e9 composto apenas por uma tag div<\/code> marcado com o ID app-root<\/code>. Esta marca\u00e7\u00e3o \u00e9 necess\u00e1ria pois \u00e9 nela onde o Backbone.js vai renderizar a sa\u00edda do m\u00e9todo render<\/code> da nossa classe AppRootView<\/code> que escrevemos anteriormente usando JavaScript.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\" \/>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\t\t<title>Hello, World!<\/title>\n\t\t<link rel=\"stylesheet\" href=\"vendors\/css\/bulma.css\" \/>\n\t\t<link rel=\"stylesheet\" href=\"resources\/assets\/css\/screen.css\" \/>\n\t<\/head>\n\t<body>\n\t\t<section class=\"section\">\n\t\t\t<div id=\"app-root\"><\/div>\n\t\t<\/section>\n\t\t<script src=\"vendors\/js\/underscore.js\"><\/script>\n\t\t<script src=\"vendors\/js\/jquery-3.5.1.js\"><\/script>\n\t\t<script src=\"vendors\/js\/backbone.js\"><\/script>\n\t\t<script src=\"resources\/assets\/js\/app.js\"><\/script>\n\t<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Agora que nosso c\u00f3digo HTML e JavaScript est\u00e3o prontos certamente j\u00e1 temos um projeto funcional para acess\u00e1-lo pelo navegador. Fique \u00e0 vontade para fazer seus testes. Mas vamos escrever um pouco de CSS com o objetivo de deixar a tela mais agrad\u00e1vel.<\/p>\n\n\n\n
\u00daltimos ajustes no c\u00f3digo CSS<\/h2>\n\n\n\n
Vamos agora criar uma estrutura b\u00e1sica para organizar e escrever o nosso c\u00f3digo CSS. Como este projeto \u00e9 muito simples e deve servir apenas como um ponto de partida para novos projetos escreveremos apenas estilos para centralizar o t\u00edtulo e subt\u00edtulo. Veja abaixo como ficou.<\/p>\n\n\n\n
\/*--------------------------------------------------------------\n>>> TABLE OF CONTENTS:\n----------------------------------------------------------------\n# Title\n# Subtitle\n--------------------------------------------------------------*\/<\/em>\n\/*--------------------------------------------------------------\n# Title\n--------------------------------------------------------------*\/<\/em>\n.title {\n\ttext-align: center;\n}\n\n\/*--------------------------------------------------------------\n# Subtitle\n--------------------------------------------------------------*\/<\/em>\n.subtitle {\n\ttext-align: center;\n}\n<\/code><\/pre>\n\n\n\n
Caso queira fazer seus pr\u00f3prios ajustes usando CSS fique \u00e0 vontade. Agora que est\u00e1 tudo pronto vamos abrir nossa aplica\u00e7\u00e3o usando um navegador e conferir se est\u00e1 tudo funcionando corretamente.<\/p>\n\n\n\n
Executando o seu projeto pelo navegador<\/h2>\n\n\n\n
Agora que todo c\u00f3digo necess\u00e1rio para executar nossa aplica\u00e7\u00e3o de exemplo est\u00e1 pronto precisamos execut\u00e1-lo localmente. Apenas clique duas vezes no arquivo index.html<\/code> e seu projeto ser\u00e1 executado em seu navegador.<\/p>\n\n\n\n
Aqui no meu navegador apareceu uma p\u00e1gina com os textos “Hello, World!” e “My first website with Backbone.js<\/strong>” posicionados ao centro. Se o mesmo apareceu a\u00ed pra voc\u00ea ent\u00e3o \u00e9 sucesso!<\/p>\n\n\n\n
Fa\u00e7a o download do projeto finalizado no GitHub<\/h2>\n\n\n\n
Espero que voc\u00ea tenha seguido todo o passo a passo deste artigo e criado o seu primeiro projeto “Hello, World!” usando Backbone. Quero deixar para voc\u00ea minha vers\u00e3o finalizada do projeto acess\u00edvel no GitHub. Voc\u00ea deve baix\u00e1-lo para tirar d\u00favidas caso tenha sentido alguma dificuldade, mas tamb\u00e9m pode ser \u00fatil caso voc\u00ea preferiu apenas ler o artigo e pegar tudo prontinho no final do artigo.<\/p>\n\n\n\n
Acesse este projeto no GitHub<\/a><\/strong><\/p>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Obrigado por chegar at\u00e9 o final deste artigo comigo. Voc\u00ea aprendeu qual \u00e9 o passo a passo para iniciar uma nova aplica\u00e7\u00e3o do Zero usando Backbone. Agora voc\u00ea sabe na pr\u00e1tica quais s\u00e3o os diret\u00f3rios e arquivos necess\u00e1rios para iniciar o seu projeto. Tamb\u00e9m acompanhou comigo o download do framework Bulma para ajudar com CSS e deixar o visual de nossas p\u00e1ginas um pouco mais agrad\u00e1veis.<\/p>\n\n\n\n
Compartilhei tamb\u00e9m no GitHub este projeto finalizado para que voc\u00ea possa fazer o download sempre que necess\u00e1rio. Sempre que quiser iniciar um projeto novamente do Zero voc\u00ea pode optar por baix\u00e1-lo e modific\u00e1-lo para que atenda suas necessidades espec\u00edficas.<\/p>\n\n\n\n
Eu acho muito divertido criar projetos do ZERO como este que acabamos de criar. Se voc\u00ea tamb\u00e9m curte visite um artigo que escrevi onde indico um minicurso gratuito: nele voc\u00ea cria uma calculadora do ZERO e passo a passo usando HTML, CSS e JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
Neste artigo quero iniciar nossos primeiros passos no universo do Backbone.js com o famoso cl\u00e1ssico Hello, World! At\u00e9 o final deste artigo entregarei um projeto simples e funcional. Eu tamb\u00e9m gostaria que este projeto possa ser usado como ponto de partida, ou seja, um reposit\u00f3rio no GitHub que possa ser facilmente clonado para come\u00e7ar outros projetos rapidamente. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,1],"tags":[],"_links":{"self":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/484"}],"collection":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":1,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":758,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/484\/revisions\/758"}],"wp:attachment":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}