Ruby on Rails em 30 dias: crie sua primeira aplicação web | Tal Safran | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ruby on Rails em 30 dias: crie sua primeira aplicação web

teacher avatar Tal Safran, Software Developer at GitHub

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

12 aulas (3 h 6 min)
    • 1. Trailer

      0:44
    • 2. Vamos começar

      5:16
    • 3. Instale o Ruby, Rails, Git e texto de de de alta qualidade,

      10:36
    • 4. Olá, Rails!

      18:27
    • 5. Nosso primeiro

      5:39
    • 6. Adicione o Bootstrap

      22:58
    • 7. Adicione posts (vídeo)

      12:14
    • 8. Entendendo o código de Scaffold

      22:41
    • 9. Como estilizar nossos posts

      28:24
    • 10. Adicione posts de imagem

      15:35
    • 11. Adicione o de cinas

      27:21
    • 12. Coloque seu aplicativo em online

      16:10
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

4.264

Estudantes

58

Projetos

Sobre este curso

Olá! Este é o primeiro curso completo para ensinar de Rails 4 e Bootstrap 3!

Olá, sou o tal. Sou um desenvolvedor de web freelance em NYC. Este curso vai ensinar como criar uma aplicação de Ruby em Rails e publicá-la na web.

Rails é uma maneira insanável de criar aplicativos na web, mas os primeiros para começar pode ser um pouco somente. Este curso foi criado para iniciantes com a programação de uma de experiência.

Vamos seguir uma abordagem à base de projeto, o que vamos gastar o curso como construir um aplicativo de funcionamento e utilizável do início ao fim.

No final do curso, você vai construir e publicar uma mini versão do Tumblr do stratch:

  • Crie um blog semelhante no Tumblr.

  • Poste o conteúdo de texto

  • Adicione fotos (você sabe, como a parte)

  • Postagens "Heart"

  • ..e mais de

Ao se inscrevendo neste curso, você vai ter acesso para vida a o

  • Um guia de projeto passo a passo

  • Horas de videoaulas de de vídeo registrados profissionalmente

  • Uma galeria de estudantes para postar seu trabalho para feedback de colegas de turma

  • e recursos de download adicionais

Os conceitos que vamos abordar, vamos incluir:

  • Instalação de instalação. Como obter de Rails instalado em de a de headache-free. de de a de cabeça.

  • Crie um modelo, de visualizar, controlador. A maneira de de de Rails são organizados.

  • Como ler e escrever para o banco de dados. Como usar o de dados de a ActiveRecord, de de de a

  • Git. Acompanhante das mudanças no seu código.

  • Como implantar. Como colocar seu aplicativo online com o Heroku.

  • Segregos 4. Esta marca de uma versão de as de os Rails tem muitas melhoras e é ainda mais para iniciantes.

  • Twitter Bootstrap 3. Desligue a prensa! Estamos usando a versão de o de sua incrível biblioteca de front-end
  • ..e muito mais.

Faça uma inscrição neste momento para começar!

Conheça seu professor

Teacher Profile Image

Tal Safran

Software Developer at GitHub

Professor

I'm a software developer at GitHub, based in San Francisco CA.

I got into programming in Junior High when a neighbor showed me that with some basic coding skills, I could spam AOL chatrooms and kick my friends offline. I was hooked!

Today I write code at GitHub. Before that I founded Josephine, where I led product and engineering. Before that I worked with various early stage startups and agencies which have included IDEO, Pivotal Labs, Techstars, Aviary, Branch and Flow Kana. I'm a founding board member of hackNY, a non-profit that helps students do cool things with their programming skills, and an alumnus of NYU, where I was a founding board member of Tech@NYU.

I'm very passionate about helping people do meaningful things with their programming... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

2. Vamos começar: - Ei aí. - Bem-vinda. - Eu sou alto. - Prazer em conhecê-lo. Estou muito entusiasmada por dar esta aula, e só queria dizer olá antes de começarmos, porque acho que esta é a única vez que vais ver a minha cara no resto da turma, e só queria dizer olá antes de começarmos, porque acho que esta é a única vez que vais ver a minha cara no resto da turma, fundição de tela. O que significa que vais ver o que estou a fazer no meu computador por isso vou estar ao vivo a revestir a aplicação a partir do zero. - E minha recomendação para você é assistir todos os vídeos em tela cheia para que você possa tipo de - obter tudo e também provavelmente quer assistir os vídeos todo o caminho através do seu primeiro - tempo. E depois de cada vídeo, você deve voltar e tentar fazer o que eu faço para que você tenha uma versão funcional do aplicativo no mesmo estado que eu. Mas de qualquer forma, vamos dar uma olhada no que vamos construir. - Vejo-te em breve. - Vamos construir um mini aplicativo de bloqueio. - Isso é uma espécie de tumbler, - onde você pode postar imagens ou conteúdo de texto, - e cada post também vai ter o seu próprio l. - E se você realmente gosta de um post. Pode apertar este botão de coração, e será um pouco favorito. - Podias ver que a contagem aqui subiu. Também teremos uma tela de gerenciamento onde você pode escrever novas postagens, postagens existentes ou até destruir postagens. É muito simples, mas acho que vai nos ajudar a cobrir todos os fundamentos importantes de trabalhar com trilhos. - Então, o que é essa coisa de trilhos, afinal? - Rails é um framework Web de código aberto destinado a manter os programadores produtivos e felizes. - Simplifica coisas como trabalhar com a base de dados, renderizar HTML e colocar a Europa Online. Está escrito numa linguagem de programação chamada Ruby, que foi desenhada para fazer os programadores felizes. Estou programando há uma década, mas quando encontrei a Ruby há três anos, nunca olhei para trás. - Há um monte de grande recurso está on-line para aprender Ruby e para o meu favorito, - ambos os quais são gratuitos são tentar ruby dot org e Code Academy. - Eu recomendo vivamente passar pelos desafios Try Ruby antes de começar o curso. Só porque é muito curto, só leva cerca de 15 a 20 minutos. - Code Academy também é um bom recurso, - mas é um pouco mais programador orientado para isso pode ser confuso no início, - Mas uma vez que você é feito com este curso, - Eu recomendo voltar e ir através de seus tutoriais, porque eles são realmente muito bom - e muito minucioso. Então vamos dar uma olhada no que vamos cobrir. Primeiro, vamos usar a linguagem de programação rubi para escrever a maioria do nosso código. E quando escrevermos, teremos muita ajuda dos trilhos. - Framework and Rails é simplesmente uma biblioteca ou framework que é escrito em Ruby. - Então não há nada real é escrever código de trilhos porque ele ainda está usando o rubi - linguagem de programação. Também vamos escrever um monte de HTML, que é basicamente como estruturamos as páginas da Web que vamos exibir. - Também vamos aprender a usar algumas ferramentas. Vamos escrever todo o nosso código em algo chamado Sublime Text, que é um editor de texto. - É como um processador de texto como o Microsoft Word. Mas para escrever código depois de um código vermelho nosso código, vamos salvá-lo usando uma ferramenta chamada git, que nos ajuda a rastrear o histórico de nossas mudanças de código ao longo do tempo e finalmente vamos colocar em nosso aplicativo on-line usando um serviço chamado O Roku. - Isso é muito, muito fácil de usar. Há também algumas coisas que pensei em mencionar que não vamos cobrir o CSS, que você já deve ter ouvido falar. - É uma grande coisa que os dedos aprendem, - e é uma ferramenta que costumava estilizar suas páginas para basicamente fazê-las parecer bonitas. Mas em vez de aprender CSS, vamos usar uma ferramenta chamada Twitter. - Bootstrap. Isso já vai fazer a nossa página ficar muito bonita sem ter o dedo do pé entrar nos detalhes . - CSS. - Também não vamos escrever nenhum script Java. - E JavaScript é a linguagem que é executada em seu navegador da Web e ajuda a tornar suas páginas - se comportar de forma mais dinâmica. - Mas não vamos entrar em nada disso por causa desta aula. A última coisa que quero mostrar antes de começarmos é ações de habilidades. - Guia Comunidade. Tem um par de grandes características que acho que vamos ajudar todos os alunos nesta classe, classe, aprender uns com os outros para que você possa usar o feed da turma aqui para conversar com outros alunos, basicamente postando um aprender uns com os outros para que você possa usar o feed da turma aqui para conversar com outros alunos mensagem. - Há o Q e uma guia aqui onde você pode fazer perguntas e eu ou outro aluno - vai ajudá-lo. - A guia do grupo é meio legal porque você pode criar tipo de grupos com base em seus próprios interesses. Então talvez você viva em uma determinada cidade ou você está tentando aprender algo novo, então você pode tipo de continuar a discussão aqui criando um grupo ou juntando-se a um grupo existente . - Há também a galeria de estudantes onde você pode postar seu projeto desta classe ou - apenas outros projetos em que você tem trabalhado e você quer que outras pessoas para verificar. - E é isso. - Acho que estamos prontos para começar. - Então, no próximo vídeo, - vamos configurar nosso ambiente de desenvolvimento instalando trilhos e também nosso editor de texto - texto Sublime. - Vejo-te então. 3. Instale o Ruby, Rails, Git e texto de de de alta qualidade,: Agora que sabemos qual é o plano, vamos começar e preparar o nosso ambiente de desenvolvimento. Agora que sabemos qual é o plano, - A maneira mais fácil de fazer isso é através de algo chamado instalador de trilhos. - Você pode encontrar um instalador de rails dot org, - e o que vai fazer por você é que ele irá instalar todos os pacotes que você precisa para Ruby on - rails aplicação, - incluindo a linguagem de programação ruby, - o framework rails obter um banco de dados e várias outras coisas que eu não vou entrar. - Então vamos fazer o download. E pode levar um pouco de tempo, já que é um arquivo grande, então vai depender da rapidez da conexão. - Uma vez que o download terminar, - você deve ter este arquivo TZ ponto app. - Vá em frente e clique duas vezes. - Criou um novo arquivo. - Então vá em frente e clique duas vezes nisso. - Isso só está dizendo que você pegou na internet e é um arquivo de opinião. - Então abra e coloque sua senha e ele deve lançar os trilhos. - Instalador. - Vamos escolher o inglês a seguir. - Então aqui, coloque o seu nome completo, coloque o seu e-mail e bata a seguir juntos. - E aqui estamos nós. - Isso também vai levar um pouco de tempo. Enquanto isso, vamos instalar os editores de texto da linha. Texto sublime é o que vamos usar para escrever nosso código. Você pode pensar nisso como um Microsoft Word, mas para programadores, então vamos clicar, baixe e obtenha a versão do OS X. Tudo bem, então temos aqui, vamos arrastá-lo para aplicações, e acho que estamos prontos. Já que vamos usar muito texto sublime, recomendo que o arrastes para o teu médico para que o tenhas sempre. - E vamos abrir. - Vou digitar Hello, - Compartilhar habilidades. - E vamos aprender muito sobre texto sublime ao longo deste curso. Mas eu não quero entrar em detalhes agora, então vamos checar nossos trilhos. - Instalador. - Eu vou descer aqui e parece que tudo terminou. - Legal. A última coisa que faremos antes de começarmos a codificar é checar os trilhos. O instalador instalou todos os componentes corretamente, e vamos fazer isso usando nosso terminal. - Então, para chegar ao seu terminal. - Se você já está em aplicativos, - vá para a pasta de utilitários e você deve ver o terminal aqui e como antes. - Vamos arrastá-lo para o nosso médico para que possamos guardá-lo para mais tarde. - E vamos abrir. Então este é o seu terminal pode ser a primeira vez que você vê um terminal, e é uma maneira ligeiramente diferente de interagir com um computador do que você poderia estar acostumado . Você não está clicando em um mouse e arrastando coisas. - Em vez disso, você está digitando comandos. - Então um desses comandos é LS que você aperta Enter e LS lista os arquivos que estão na pasta em que - você está atualmente. E a maneira como você sabe qual pasta urina é o Comando P W D, também conhecido como Diretório de Trabalho de Impressão. - Você aperta Enter. Estamos no diretório de compartilhamento de habilidades, e esses são os arquivos dentro dele. - Algumas são pastas. Agora, antes de irmos mais longe, vou deixar a fonte um pouco maior. - E você faz isso apertando o comando mais incrível. - Outro comando é o que usar para descobrir onde outros comandos estão localizados no seu computador. - Então, se eu disse que pwd, - então isso significa que o script que faz PWD está localizado em barra sido barra PWD. - Vamos usar o Comando da Bruxa só para garantir que o instalador de trilhos instalou tudo no lugar certo. Então o primeiro comando que vamos verificar é o Comando Ruby. - Então vamos dizer qual Ruby e você podem ver que Ruby está nesta pasta. É um nome bem longo, mas devia ver algo assim. - Você pode ver um número de versão diferente aqui, - como ele pode não ser 1.9 ponto três traço p 3 92 Mas enquanto você vê algo semelhante - para este instalador trilhos instalado no lugar certo e agora enfraquecer. - Use o comando ruby. - Vamos pegar a versão do rubi para que possamos dizer rubi e depois traço versão. - E isso já é versão. - Vamos agora verificar se o comando rails foi instalado corretamente. - Então diga quais trilhos e você também deve ver esse tipo longo de corda. - Se você ver em vez disso, - Se você vir barra barra barra barra barra barra barra barra rubi, - então ele está no lugar errado. , Quando gravei esses vídeos, instalador de trilhos ainda estava com trilhos. - Versão 3.1 ponto 12 Mas há na verdade uma nova versão de trilhos trilhos quatro pontos. - E quero que usemos isso. - Então a maneira de atualizar é dizer, - gem, - instalar trilhos Dash versão 4.0, - ponto. - E então você tem que adicionar essas duas outras opções e não se preocupe muito com o que elas significam. - Mas diga Dash traço, - sem traço R I e Dash Dash não traça nossa doca e, em seguida, aperte Enter. - Vai demorar um pouco, então estou em um avanço rápido. - Ok? - Parece que está instalado. Vamos nos certificar de que temos 4.0, então digamos trilhos, traço, versão de traço novamente e temos 4.0, ponto de legal. - Se você teve algum problema, - por favor, poste sobre isso em compartilhamento de habilidades. - Eso aqueles dois comandos que realmente os comandos mais importantes que trilhos instalador - instala. Mas também vamos verificar se temos uma versão funcional do Get So To fazer isso, vamos dizer “pegue a versão Dash Dash”. - Isso nos diz qual versão do get temos instalado. Se você vir algo parecido, talvez não seja exatamente a mesma versão que é boa. Mas se você não vir nada, significa que você não tem que instalar. - E você deve postar sobre isso na aba comunidade de compartilhamento de habilidades aqui. - E é isso. Se você tem essas três coisas instaladas, então você está pronto para ir e eu te encontro na próxima lição sobre se você é um usuário do Windows, eu vou mostrar como fazer isso no Windows. então você está pronto para ir e eu te encontro na próxima lição sobre se você é um usuário do Windows, , Então estamos no Windows agora, e é a mesma coisa que vamos ao Rails Installer Dot Org's e certifique-se de baixar a versão mais recente, que aqui é Ruby 1.9. - Uma vez que o download, - vá para a sua pasta de downloads e clique nos trilhos. - Instalador, - executar ervas ele executar. - Vamos bater em seguida, - aceitar os termos que em seguida vamos instalá-lo nesta pasta e certificar-se de que você tem - ambos os hit install verificados eo instalador vai ser executado. Pode levar alguns minutos, então vou avançar e parece que acabou. - Certifique-se de ter isto verificado e, em seguida, clique em terminar. Agora vamos configurar, digite seu nome e coloque seu e-mail. - Acerte, - entra e parece que estamos prontos. Então, só para ter certeza que tudo funciona, vamos tentar o comando Ruby e vamos dizer, Ruby Dash, versão dash. - Você deve ver que estamos usando 1.9 ponto três e vamos tentar trilhos. - Versão de teste do pessoal do Rial. - Temos o trilho instalado agora. - Quando gravei este vídeo, - instalador de trilhos ainda estava enviando com trilhos versão 3.2 ponto 13 Mas uma nova versão de - trilhos está fora. - Versão quatro pontos. - Oh, - então vamos em frente e atualizar. - Então vá em frente e digite gem instalar trilhos traço versão 4.0, - ponto. - Oh, - e então nessas duas opções traço, - traço, - sem traço Tudo bem E traço, - sem traço está escuro Não se preocupe muito com o que eles significam e então aperte Enter. - Vai demorar um pouco, então vou avançar e parece que está instalado. - Vamos verificar a versão e lá vamos nós. - Temos trilhos. - A versão quatro aponta. - Se você tiver quaisquer problemas postar sobre isso em compartilhamento de habilidades. - A última coisa é, obter a versão traço e se você tem essas três coisas instaladas, então você já está indo com trilhos a última coisa que vamos fazer é instalar texto sublime nosso editor de texto. - Então vá para sublime tex dot com clique download. - Devia ver o download. - E então vamos abrir isso e executar o instalador. - Rápido. - Sim. - Uh, apenas aperte o próximo. - Instale aqui. - Isso é bom. - Devias verificar isto. - Eu acho que isso é ah para que você possa clicar com o botão direito em uma pasta e dizer aberto em texto sublime. - Então é meio útil. Instalar Staller correu com sucesso acertado, terminar. E agora, se você olhar no menu inicial, você deveria ter um texto sublime e vamos fazer a mesma coisa. - Vamos arrastá-lo para a nossa barra de tarefas. - Hum, - e vamos abri-lo. E como podem ver, é um editor de texto. Podias dizer olá, partilha de habilidades como fizemos no Mac, e isso é tudo. - Se você teve algum problema, - vá para o site da aula e vá para a comunidade para ter e postar sobre o seu problema - e eu vou ajudá-lo. - A próxima lição. Vamos criar nosso primeiro projeto de trilhos, então fique animado 4. Olá, Rails!: - Ok, então vamos criar nosso primeiro aplicativo de trilhos. - Então abra seu terminal e digite trilhos. - New Crumble ER vai criar um novo projeto chamado Crumb Blur. - Só vai levar um segundo. - Legal. - Então está tudo feito. - Só vou fazer esta janela maior. - E agora, se o fizeres, devias ver que há uma nova pasta aqui chamada Crumble. - Então vamos falar sobre isso dizendo, - CD mudar diretório crumble er, - pwd. - Só para ter certeza de que foram, - você pode ver que nós estamos em barra usuário slash tall slash trembler e agora Ron Rails servidor - e abrir seu navegador web. - Você vai para um anfitrião local 3000. - Agora você pode ver que a nossa APP está em execução e o servidor ferroviário também nos mostra que ele está funcionando - em 000 3000. - Mas um atalho para isso é apenas um anfitrião local. - Incrível. - Então isso é Ah, - isso é como a tela de boas-vindas padrão dos trilhos, - e você pode ver que ele está nos dizendo como começar. E diz que use trilhos geram para criar seus modelos e controladores, e o que vamos fazer é adicionar duas páginas e adicionar uma página de boas-vindas, que é o quê? As pessoas vão te ver quando souberem quando vierem aqui em vez desta tela, e nós vamos adicionar uma página sobre, e isso vai ser em barra. - Incrível. Então vamos usar trilhos, gerar. - Então abra seu terminal e você não quer usar esta janela porque ele está executando seu - servidor ferroviário. - Então abra uma nova janela por você pode dizer shell nova aba. - E então, - uh, - certifique-se de que você está no diretório novamente. Você pode ter que ver a parte de trás no diretório Crumpler, mas uma vez que você está lá, você vai dizer trilhos, gerar controlador, e isso não vai fazer nada ainda. - Vou apertar Enter. - E quando você diz rails gerar controlador, - ele mostra como usar este comando. - Então diz que os trilhos geram controlador, e então você passa um nome e um par de ações. Entraremos no que isso significa em breve, mas vamos dizer que os trilhos geram páginas de controle. Vamos ter um controlador de páginas, e vamos ter de acções ou duas páginas. Um vai ser por aí, e o outro será bem-vindo. - E depois batemos. - Entra. - Então isso criou um monte de arquivos em nosso projeto. - Enfraquecer, vê? - Criou um controlador. - Atualizou nosso arquivo de rotas. - Ele criou um par de uso com páginas HTML para a página sobre e para a página de boas-vindas e - todas as coisas aqui que não vamos realmente entrar. - Mas estes testes de ar trilhos ajudantes em DSA, - JavaScript e CSS. , Mas agora sem fazer mais nada, você pode voltar para o seu navegador e ir para o host local 3000 páginas barra bem-vindo. - E você deve ver que temos algo dizendo páginas libra bem-vindo. - Encontre-me no aplicativo, - visualizações páginas de boas-vindas dot html Papai ou ser assim vamos verificar isso. - Vamos abrir um texto sublime e encontrar nosso projeto. - Então arquivo aberto e está em alta Crumpler hit, - digite ou clique em abrir e você deve ver em texto sublime. Assim podemos ver todos os arquivos do nosso projeto de trilhos. - Então este disse me encontrar um aplicativo visualiza páginas Bem-vindo. - Então vamos tocar páginas de visualizações de aplicativos bem-vindos dot html Filha, seu B e isso é muito pequeno, então eu só vou torná-lo maior. - Você pode pressionar o comando Plus e torna a fonte maior para que você possa ver que esta página está - sendo gerado por este arquivo html dot RB. - Torná-lo um pouco mais largo. - Vamos passo a passo. - Então esta primeira coisa é um cabeçalho, - e nós temos você pode ver que ele está usando essas tags HTML. - Temos o nosso conteúdo em branco, certo? - O texto que vemos. - Mas também temos essas coisas em torno do nosso conteúdo. - Estes ar conhecidos como tags HTML. Então, este primeiro 1 o H, significa cabeçalho um. - E é isso que cria este grande tipo de cabeçalho. - E o 2º 1 a etiqueta P significa parágrafo. - Então isso é só se você quiser, - tipo, - um texto normal, - um, - um, - um, - um, - um, - tipo, - menos do que sinal. - É assim que você abre uma tag e menos que uma barra é como você fecha a tag. - Então, - por exemplo, - se eu, - tipo, - apaguei isso e, em seguida, - hum, - apenas fechei o h uma tag aqui e acertei, - salvar tudo é, - vai ser grande. Tudo vai ser um cabeçote, mas não vamos fazer isso. - Então vou desfazer. - Então vamos personalizar esta página. - Basta apertar salvar e deve ser como era quando começamos. - E nós vamos mudar este cabeçalho esta etiqueta H 1 para apenas dizer bem-vindo e atualizar. - Você deveria ver isso. - E então, - uh, - eu vou apenas espaçar isso aqui. - Nós vamos dizer em vez de me encontrar e usar o aplicativo Bem-vindo que html ia dizer que isso é - a página de destino para Crumpler Baking blog. Estamos construindo um blogue de bacon, feito com rubi sobre trilhos. Estamos construindo um blogue de bacon, - Incrível. - Nós batemos, - salvar. - Refresque-o e devemos vê-lo. - Vamos adicionar outra tag p. - Então vamos abrir a tag chave e vamos dizer que esta página é apenas um lugar titular mais tarde - irá substituí-la pelas postagens em nosso bloco e fechar a tag p. - Escuta, - salva, - e você deve ver que esta segunda tag p criou um novo parágrafo. - Hum, - incrível. - Vamos para a página sobre agora. Então, se você for para páginas com barra, você deve ver uma coisa parecida. E, a propósito, se você for para as páginas do dedo do pé, obrigado. - Por exemplo, - você verá que não criamos Ah, - nós ainda não criamos uma rota para páginas. Então nosso aplicativo não sabe sobre isso. Então nosso aplicativo não sabe sobre isso. Então, estamos em páginas e podemos ver que é muito parecido o que vimos antes. - E vamos personalizar isso é Bem, - vamos fazer o cabeçalho dizer sobre e então vamos aqui deletar isso e nós vamos - dizer que este APP foi construído em grandes sofrimentos. Ruby sobre trilhos, aula de compartilhamento de habilidades. - E lá vamos nós. - Então temos uma página sobre nós temos uma página de boas-vindas em Let's Last Thing. - Vamos transformar isto numa ligação. - E a maneira de fazer isso em HTML é que eu só vou fazer a janela maior. O jeito de fazer isso em HTML é usar uma tag chamada a. então vamos cercar isso em um e quando atualizarmos, nada acontece ainda. O que precisamos fazer é dizer para onde o link vai, então a maneira de fazer isso é meio estranha. - É contra-intuitivo, mas siga. - Vamos dizer que um H r E f é igual e, em seguida, entre aspas, colocará o Conde do Link e você acerta. - Refresque. - Agora você deve ver que este é um link para ir para a página da classe de compartilhamento de habilidades. - Incrível. - Outra maneira de criar um link em vez de usar a tag A, - que é apenas HTML normal, - é usar uma função que obtemos dos trilhos em si. Então, em vez disso , vamos comer. E vamos usar uma função chamada, , ligada a, e a maneira de usar funções de trilhos dentro do seu HTML. É como a etiqueta HTML onde você tem uma cenoura, exceto que em vez da cenoura você faz por cento de cenoura e nós vamos dizer link para e então - o nome da turma entre aspas e então a habilidade da garota compartilhar ponto alto Seffrin dot com. - E vamos fazer isso, hein? - Ele não aparece. - Isso é porque eu esqueci de colocar um sinal de igual aqui. E explicarei o que significa o sinal de igualdade. - Funciona. - Então por que não funcionou antes? Quando você usa está nos dizendo para rodar um cenoura e por cento, código de trilhos, mas não nos diz para imprimir o que esse código de trilhos faz. A fim de realmente imprimir, você precisa de um sinal de igual incrível. - Então a próxima coisa que vamos fazer é mudar. - Você é da RL? Eu realmente não quero que eles digam para ser, páginas sobre e páginas bem-vindas realmente querem que a tela de boas-vindas apareça quando nós vamos aqui , e eu quero que a página sobre seja apenas barra sobre. páginas sobre e páginas bem-vindas realmente querem que a tela de boas-vindas apareça quando nós vamos aqui - Mas isso ainda não está pronto. - Não há correspondência de rota. - Então vamos ver como isso funciona. - A maneira que os trilhos sabem o que fazer quando um usuário vai para uma garota em particular são as rotas - arquivo e os arquivos de rotas localizados em rotas de configuração que são ser para que você possa ver que quando nós - executamos nosso gerador, - acrescentou essas duas linhas para as páginas sobre Paige e para a página de boas-vindas páginas. - E o resto disto aqui é apenas um comentário rubi. - Então, qualquer coisa que comece com um sinal de libra em Ruby é ah é apenas um comentário. E você pode dizer que este é um arquivo rubi porque a extensão é ponto R b, que significa Ruby. - Então as pessoas que escreveram trilhos deixaram todos esses comentários aqui para que você pudesse ter - como um guia sobre como usar rotas, - mas na verdade não está fazendo nada. - Então queremos que a página de boas-vindas seja o que vemos quando formos para cá. E isto é o nível superior da nossa aplicação, porque não é. - Não é como cortar nada. - É apenas ah, - anfitrião local 3000. E isso também é conhecido como a raiz. - Então você pode ver aqui que eles deixaram um comentário que diz que você pode ter a raiz do seu site - roteado com root. E o que você faz é dizer que a raiz é um controlador, e então alguma ação. - Então, vamos apagar isto. - E quando apagamos as páginas, as boas-vindas não funcionam mais. o Eoque vamos substituí-lo é por isto. Vou deixar estes comentários intactos, mas vou copiar isto e pô-lo no fundo. - E quando não temos ah controlador de boas-vindas e uma ação de índice, - temos um controlador de páginas e uma ação bem-vinda, - e podemos ver que em controladores de APP e nosso gerador criou esta página é controlador - e criou uma ação para cada página que temos até agora. - Então, há uma ação sobre. - Isso é apenas ah dizendo que é definir um método rubi ah rubi com a morte e então está - terminando. - Acabaria e está fazendo a mesma coisa para a ação bem-vinda. - Então de volta em nossas rotas estavam dizendo que a raiz do nosso aplicativo são páginas. - Bem-vinda. - Vamos fazer isso e atualizar e vemos a página de boas-vindas. - Legal. - Então, como personalizamos isso agora? - A página sobre. - Então agora ele diz para pegar páginas sobre e isso vai aqui. - Mas o que nós realmente queremos é que o U R L seja apenas cortante. - Vamos ver se isso é suficiente. - Então nós mudamos. - Nós apertamos salvar e estamos indo para o host local 3000 barra sobre e temos um erro que Ah, - ele não sabe o controlador para ir porque anteriormente isso deixou uma dica para trilhos - que é no controlador de páginas e a ação sobre. Mas desde que removemos páginas, temos que fazer algo diferente. Temos que dizer: “ Então, quando o usuário fala sobre o seu l e então esse tipo de flecha “, também é conhecido como um foguete de hash. - Mas é apenas um sinal de igual e um sinal maior do que. - E nós vamos dizer que quando o usuário vai para o sobre Earl usou o controlador de páginas - e a ação sobre e nós vamos bater salvar. E agora, quando falamos, podemos ver a página tão legal. A última coisa que vamos fazer é adicionar algumas,uh, alguma uh, navegação porque agora,você sabe, você sabe, nós temos essas duas páginas sobre e bem-vindos, mas a única maneira de chegar até elas é alterando a URL. - Então vamos adicionar, - vamos adicionar alguns links no topo. - Tipo um tipo como um menu que vamos ver em todas as páginas. - Então vamos ao nosso código. - Agora. - Uma abordagem seria Teoh. - Adicione um link na página sobre e, em seguida, adicione outro link na página de boas-vindas. - Mas vamos querer que esta navegação esteja em todas as páginas da nossa aplicação. Não queremos repetir porque vamos ter muitas páginas, e isso seria uma perda de tempo. - Então, a maneira de fazer isso é ir para vistas e, em seguida, layouts e ir para este ponto aplicativo - html dot seu arquivo b. Isto é como o HTML circundante que é usado em cada página do nosso aplicativo, e eu vou espaçar um pouco. Então eu vou selecionar tudo isso e, em seguida, recuado você pode fazer comando e, em seguida, colchetes, ou você pode apenas apertar Tab e, em seguida, - ah, eu também vou e endividar isso. Isso deve ser um pouco mais fácil de ler. - E você pode ver que parece estranho, - porque aqui há duas abas e aqui há para então ir para texto sublime em tamanho de tabulação - e mudar 4 para 2 e você pode ver que tudo se moveu. E a segunda coisa que você quer fazer é endividado. - Usar o espaço é que há duas maneiras de se endividar e código. Você pode fazer isso usando espaços, e você pode ver esses pequenos pontos aqui que indicam que é um espaço. - Você também pode fazê-lo usando um caractere especial chamado caractere tabulação. Mas amaioria dos códigos rubi usa espaços, então queremos ser consistentes, e queremos usar espaços para isso. maioria dos códigos rubi usa espaços, então queremos ser consistentes, - Então agora podemos ter uma ideia melhor da estrutura. - Esta é a etiqueta principal e tem o título da página para que possamos ver que o título está - desmoronando, - como diz aqui. - Isso está carregando nos trilhos padrão, - pés estilo CSS e JavaScript. - Mas não vamos fazer nada com ele. E esta última coisa é meio que Ah, é uma coisa de segurança e não se preocupe muito com isso. - Mas a seguir temos essa etiqueta corporal e você pode ver isso dentro dela. - Ele tem isso, - este código rubi, - certo, - porque ele tem o percentual igual e o que ele está fazendo é ele está criando uma tag corpo - e, em seguida, dentro da tag body, - ele está realmente indo e buscar a página que estavam olhando para Então na página sobre. - Está substituindo o que vemos aqui em rendimento por este material, - e se formos para o nosso aplicativo, - podemos realmente olhar para a idade para o HTML que é gerado indo para inspecionar elemento, - e isso nos mostra todo o HTML na página. - É uma ferramenta muito útil, e você pode passar o mouse sobre cada elemento, e ele o destaca. Então você pode ver que temos essa etiqueta corporal, mas dentro dela, temos nosso h um e R p que estão nessa visão. Então o que vamos fazer é queremos, vamos fechar isso agora queremos que nossa navegação esteja acima de tudo isso em cada página. vamos fechar isso agora queremos que nossa navegação esteja acima de tudo isso em cada - Então também na página de boas-vindas. - Então o que vamos fazer está acima do rendimento. - Vamos colocar um código e só por agora, vamos dizer que este será o médico de navegação. - Salve-o e podemos ver que na página de boas-vindas nós temos isso. - E também na página sobre, - nós temos isso. - Então agora vamos transformá-lo em links. Fizemos um link mais cedo na página sobre , e , podemos ver que era o link para marcar. - Vamos copiar isso aqui para o aplicativo. - Mas não vai dizer Ruby sobre trilhos em compartilhamento de habilidades. Vai dizer que o primeiro link vai vetar são página de boas-vindas, e vai ser dois barra direita e depois copiar isso. A 2ª 1 vai ser para a nossa página sobre, e vai ser para cortar sobre “Vamos bater, salvar e atualizar”. - E agora temos esses links. - Você pode ver isso. - Sabe, no fundo, você pode ver onde vai dar. - Isto é sobre Page. - Esta é a página de boas-vindas. - Então é isso para esta lição. Na próxima lição, vamos salvar todas as nossas mudanças criando um get commit, então fique atento. 5. Nosso primeiro: get é um sistema de controle de versão, e isso é apenas uma maneira elegante de dizer que você pode rastrear o histórico de seus arquivos contendo seu código. É semelhante à forma como a Wikipédia rastreia o histórico de uma página em particular. Então, na Wikipédia, se você for ver o histórico, você pode realmente ver que quando este documento foi editado, quem o editou a que horas? E você pode realmente comparar versões diferentes. Vamos usar isso para o nosso código. Se isso ainda não estiver claro. Outro exemplo que é tipo de semelhante é o recurso de alterações de controle do Microsoft Windows. Se você já viu isso, o que você pode fazer é compartilhar um documento com outra pessoa, e eles podem editar o que você escreveu, e então você pode ver o que eles tiraram e o que eles colocaram. Então vamos usar get para tirar instantâneos ou commits do nosso código para que, à medida que avançamos no curso, possamos ver como nosso código muda. Então, se você precisar voltar para um capítulo específico e você quiser ver como o código era, então você pode fazer isso usando ficar bem legal. Então, para interagir com o git, vamos usar a ferramenta fornecida pelo serviço chamado Get Hub. Então, pegue o Hub. É um site que muitos programadores usam. Ele permite que você, uh, envie seu código on-line e compartilhá-lo com outros desenvolvedores. Então é bom se você está trabalhando em um projeto com um monte de outras pessoas, mas nós realmente não vamos fazer isso. O que vamos fazer é baixar essa ótima ferramenta que eles construíram para interagir com Get. Então, se você vai para obter hub dot com e você rolar para baixo, você deve ver este link de download e há uma versão para o Windows também. Então vamos baixá-lo e instalá-lo quando terminar. Então, clique nisso. Ele abre o zíper, mostra e encontra-a. E nós temos esse aplicativo hub Dragon em aplicativos. então Eentãofaremos como fizemos antes. Vamos arrastá-lo para o nosso médico para que o tenhamos para o resto do curso. Legal. E então vamos abrir. Vai dizer que você pegou na Internet, então pressione aberto e o que vamos fazer é criar um repositório para o nosso código. Então vá para o arquivo e não vamos escolher Criar novo repositório porque já temos algum código. Isso é apenas se você fizer isso primeiro, antes de escrever qualquer código. Então nós vamos realmente dizer adicionar repositório local e então, ah, encontrar nosso projeto. Então aqui está desmoronando. Clique duas vezes nele. Certifique-se de que você vê, uh, uh, você sabe todas essas pastas e, em seguida, pressione anúncio. Vai dizer que não temos um repositório aqui. Queremos criar um? Diga sim. E agora vemos todos os arquivos em nosso projeto. Isso pode parecer um pouco assustador, mas logo entenderemos o que isso significa. Então, Então, esses são todos os arquivos, e esses cheques significam que vamos criar um commit deles. O que isso significa é que vamos começar a rastrear as mudanças deles. Então vamos apenas digitar primeiro commit e, em seguida, pressione commit Awesome. Se formos para a guia histórico agora, podemos ver que até agora só fizemos um commit e o que este commit fez, foi, uh, ele uh, adicionou 61 arquivos. Ele basicamente adicionou todos os arquivos em nosso projeto para obter porque antes disso não estávamos rastreando. Então ah, vamos fazer um outro compromisso para tornar isso um pouco mais claro s abrir, texto sublime se ele ainda não está aberto e ir para suas views layouts aplicativo dot html Papai ou ser assim que temos o link em nosso menu aqui Diz “Bem-vindo”. Mas vamos realmente mudá-lo para dizer casa e apertar Salvar Então diz casa agora. E se olharmos e obtivermos hub, podemos ver que temos um arquivo que mudou e é o arquivo exato que modificamos há um segundo. Então vamos criar um commit fora disso e então vamos ver o que acontece. Vai dizer Segundo, nosso segundo comprometimento, mudou. Bem-vindos à comunicação de imprensa. E agora, se você olhar para a história, uh, nós temos dois commits. Nós temos o 1º 1 onde tudo o que fizemos foi adicionar todos os arquivos para que possamos rastreá-los e temos o 2º 1 E o que você pode ver aqui é que nós mudamos. Bem-vindo a casa. Então há um menos aqui e é vermelho. Significa que isso é o que nós apagamos. E o mais e verde é o que adicionamos. Então você pode pensar nisso como Ah, sim, sim, nós só mudamos a palavra “Bem-vindo a casa”. Mas a maneira de obter interpreta é que nós removemos a linha que diz ligada a Welcome. E adicionamos uma nova linha que diz ligada a casa. Então, isso deve lhe dar uma compreensão de como começar funciona. Isto vai ser muito útil à medida que avançarmos pelo curso, porque vamos escrever muitos códigos. E isso nos permitirá ter um histórico de todo o código que escrevemos, e vamos criar pequenos commits. Então, basicamente, toda vez que colocamos o aplicativo em um estado de trabalho, vamos criar um commit, fazer um instantâneo dele, e então, dessa forma, podemos voltar a ele mais tarde na próxima lição, nós vai fazer o nosso aplicativo parecer um pouco melhor porque este tipo de aparência, você sabe, super velha escola. Então vamos usar algo chamado Twitter Bootstrap, e vai fazer a maçã parecer muito, muito legal. 6. Adicione o Bootstrap: - Ok, então paramos da última vez com esta página muito básica, certo? - Tivemos uma tela de boas-vindas. - Tínhamos uma tela sobre. - Hum, - e parece bastante padrão, - certo? - Parece que parece muito antigo. - Então nesta lição, vamos usar algo chamado Bootstrap para fazer parecer um pouco mais agradável. - Então você pode obter bootstrap em get bootstrap dot com. - E assim bootstrap é um framework de front-end. - Foi originalmente construído por dois caras no Twitter e, em seguida, open source. - Então isso significa que qualquer um pode acessá-lo e usá-lo de graça. - E vou mostrar alguns exemplos do que você pode fazer com ele. - Basicamente, - ele permite que você faça seu aplicativo parecer realmente bom. um Em computadores e telefones com umesforço mínimo. - Então, se você começar e exemplos, - você pode ver um monte de exemplos aqui do que você pode fazer com bootstrap. - Então vamos clicar sobre isso, - como, - jumbotron estreito, - por exemplo. - Então entendeu a tipografia certa? - Você vê isso, - essas fontes legais, - um, - você tem botões, - você tem títulos. - Você pode colocar seu conteúdo em colunas. - Você começa como, - uma navegação em como um cabeçalho para sua página. - Vamos ver o que mais consegue. - Você sabe, - há apenas como se houvesse um monte de estilos diferentes. - Mais botões, menus suspensos , etc , etc. - É realmente incrível. - E eu recomendo usá-lo não só para este projeto, mas para o futuro. É preciso um pouco de aprendizado, mas na verdade é muito poderoso, e não teremos que escrever nosso próprio CSS para toda a turma. É preciso um pouco de aprendizado, mas na verdade é muito poderoso, Só vamos usar bootstrap para fazer tudo, , doce. - Então vamos instalá-lo. - Você pode. - Você pode baixá-lo se você for começar, - faça o download. Mas descobri um jeito mais fácil de instalá-lo, e você nem precisa baixar nenhum arquivo. - Só se você rolar para baixo aqui para bootstrap CD en. - O que Cdn significa é rede de entrega de conteúdo, e é realmente apenas uma maneira chique de dizer que o bootstrap vai estar hospedando os arquivos para nós. Então nem temos que entrar e instalar arquivos e eles nos dão a opção de instalar três arquivos, certo? instalar arquivos e eles nos dão a opção de instalar três arquivos, - O primeiro é o arquivo CSS bootstrap. - O próximo é um tema que não vamos usá-lo. - Ah, - o arquivo CSS bootstrap faz com que pareça simples e que o tema tipo de dá-lhe estes tipos, - três botões D, - Mas nós não vamos usá-lo. E o último é esse JavaScript bootstrap, que também não vamos usar. - Então o único que precisamos é este de cima. - Então vá em frente e copie, em seguida, vá para texto sublime e vamos abrir nosso layout. Estivemos na última vez deles, então é um aplicativo. - Visualizações layouts aplicação dot html Daddy Urbi. - E, - hum, - nós basicamente vamos importar a folha de estilo bootstrap. - E onde fazemos isso está dentro desta tag de cabeça, - você pode ver que já estamos importando uma folha de estilo já usando algum código de trilhos para - fazê-lo. Mas, na verdade, não temos nada na folha de estilo, e está tudo bem. não temos nada na folha de estilo, - Por enquanto, não faz nada. Podemos sempre personalizar nosso aplicativo, mas colocando estilos aqui. Mas neste curso, vamos usar bootstrap. Por isso, aqui em baixo, vamos colar os pés de estilo. - Podemos mudar isto para uma etiqueta de ligação da folha de estilo. - Mas há realmente, - você sabe, - é a mesma coisa. - É ele vai estilo folha link tag gera este tipo de código eso hit, - salvar, - e, em seguida, voltar para o seu aplicativo e atualizá-lo e você pode ver que ele está usando bootstrap. - Já. - O tipo é um pouco diferente, certo? - E as ligações são como este azul, mas é, - você sabe, - é um bom começo, - mas não é nem perto de perfeito. - Há muita coisa que quero fazer aqui até parecer bom. - Então a primeira coisa é que o conteúdo é todo o caminho para a esquerda aqui. Eu queria estar , no centro, e queria ter algum tipo de estofamento em ambos os lados. - Então vamos dar uma olhada em como fazemos isso com bootstrap. - Vá para CSS e, em seguida, visão geral e role um pouco para baixo. - Você verá contêineres. - Basicamente, - queremos todo o nosso conteúdo em um recipiente. - Você pode ver como, - como nas botas Dr. Website, - por exemplo, - eles estão usando um recipiente. O conteúdo deles ocupa tanto espaço, e há um pouco de espaçamento em ambos os lados. - É o que queremos fazer. - E a maneira como você faz isso é, - um você coloca nesta classe DIV igual a contêiner e todo o seu resto do seu conteúdo em - a página vai dentro desta div em um feito. A propósito, não tenho certeza se já falamos sobre dibs. - A div é um elemento HTML apenas para seções de uma página. - É um tipo muito genérico de, - Ah, - ele não tem nenhuma aparência especial, - mas é que você usa muito para definir como seções de sua página, - e esta classe é igual recipiente é um HTML atributos. - Então esta div tem um atributo. - Ele tem uma classe, - e o nome da classe é contêiner, - e Bootstrap diz que se você quiser toe, - criar um contêiner, - você usa um contêiner de ponto e ponto container significa classe é igual a contêiner. - O Eso. - Vamos em frente e fazer isso Bem, na verdade, mais uma coisa sobre atributos que já vimos um tipo de atributos. Vimos o A H r E F certo, como quando criamos um link, é uma etiqueta. - Mas tem este H R E F atributos, - e o valor para esse atributo é Google dot com. - Então vamos fazer algo parecido. Vamos pegar todo o nosso conteúdo, que agora é só a navegação e, em seguida, as coisas específicas da página, certo? - Então, ou sobre as nossas boas vindas. - E queremos que tudo isso esteja dentro deste contêiner para que nosso layout, você sabe, meio que se pareça com isso. Então, tudo o que vamos fazer é dizer que classe div é igual a contêiner, e então vamos indenizar e fechar a div aqui e clicar em Salvar. E agora, quando atualizamos o boom, é a mesma coisa. - E você pode realmente, - se você inspecionar o elemento e, em seguida, passar por cima da coisa do recipiente - você pode ver essas cores diferentes, - certo? - Você pode ver que o conteúdo está apenas no azul aqui, e então esta laranja é e o verde é como um espaçamento. - Uh, - legal. - Então, o que vamos fazer a seguir? A próxima coisa que vamos fazer é trabalhar nesta acho navegação, que podemos fazer com que pareça um pouco mais agradável. E felizmente, Bootstrap tem algo para isso. - Então vá para os componentes e, em seguida, cavalheiros. Então eles falam um pouco sobre cavaleiros, e eles têm um pouco de Ah, alguns exemplos diferentes. - Eles têm esta guia de navegação. - Então ele tem esta linha e a guia que você está atualmente em tem. - Você sabe, - este pequeno contorno, - um e então eles têm pílulas, - que são Ah, - você sabe, - o ativo. O que você está usando é azul, e então eles têm pílulas empilhadas, como talvez para um menu suspenso ou algo assim. - Então vamos usar a navegação da pílula. - Gosto da aparência deste. - E vamos descobrir como isso funciona. - Eso, você vê, - nós temos três guias aqui. - Temos três comprimidos. - Temos perfil de casa e mensagens e aqui em baixo dentro deste HTML. Temos perfil de casa e mensagens, e cada uma delas está dentro de um link. - Certo? - Esta é uma etiqueta e você pode ver que estes links clicáveis ar, mas esse link está dentro de um L. - I tag e l I I I representa item da lista e nossa navegação. - Você pode pensar nisso como uma lista. - E este 1º 1 o azul tem uma classe especial chamada ativo e bootstrap. - Quando ele vê a classe ativa. - Torna-o azul. - Então o que é isto aqui em cima? - Isto é Ah, esta é a lista em si. - Então esta é a lista encomendada pela ONU. - Isso é o que você representa. - E estes aliados são os itens da lista dentro dele. E se quisermos nossa lista, nosso dedo da lista de navegação parece assim, então temos que dar a classe de cavaleiros e agora de pílulas. - E então só para que possamos comparar estas abas um é praticamente o mesmo código, exceto que o U. - L é de classe. Valete, valete , abas. - Essa é a única diferença. - Então vamos adicionar este código. A primeira coisa que vamos fazer é criar uma UL, e vamos dizer que classe é igual a valete agora pílulas e em dívida que fecham a rul e então cada um destes vai estar dentro de um aliado. - Então, o que mais? - Podemos ver que bootstrap tem isso um treff. - Mas nós realmente não precisamos desse direito, - porque é exatamente o que link faz Link para criar um link que usa uma tag. Então, isto é tudo o que precisamos. Vamos salvar e lá vamos nós, é a navegação da pílula. - E só para comparar, podemos mudar isso para Valete Tabs direita esta guia de navegação e atualizá-lo. - E agora está em abas. Vamos tentar essa coisa ativa. - Classe é igual a ativo. - Lá vamos nós. - Está ativo. Tem um esboço, mas vamos mudar para comprimidos. Vamos usar a navegação dos comprimidos, e podem ver que é azul. Na verdade, acho que não vamos usar tudo ativo na aula. - Então é isto que quero que escrevas. - Legal. - Uh, - o que vem a seguir? Acho que quero que esse valete esteja do lado certo. - Hum, - porque nós vamos por aqui, - nós vamos ter, - como, - o Borrão Crumb. - Vai dizer, desmoronando do nome do nosso aplicativo. Então vamos ver como movemos essas coisas para a direita. Voltamos ao Bootstrap, podemos ir ao CSS e depois ajudar as aulas dela. - E então temos essa coisa puxando certo? - O que significa é, - diz que flutua um elemento à direita com uma classe. Então tudo o que você faz é dar algo na classe, puxar para a direita, e ele se move para a direita. Então vamos dar toda a nossa lista, certo? Toda a pesquisa, classe certa, e isso deve bastar. - Boom! - Incrível. A próxima coisa que vamos fazer é adicionar um cabeçalho do site que diz desmoronar, porque esta é bem-vinda. E isto por aqui, eles são como os Petters que são específicos para essa seção. - Mas nós queremos algo que é como um tipo pegajoso de que sempre diz desmoronar. , Como você sabe, quando você vai ao Facebook, é sempre o Facebook dele no canto superior esquerdo ou superior, certo? - Onde quer que o coloquem nos dias de hoje. - Então vamos olhar para como você que vai para componentes e, em seguida, cabeçalho da página. - E você pode ver que nós temos este, tipo, muito bonito cabeçalho. - Hum, - é que você pode usar este texto preto que é meio grande. - E então este grande texto que é um pouco menor. - Então, se lermos isso diz que um shell simples para um H um espaço apropriado para fora no segmento - seções do conteúdo na página, - ele pode utilizar o H um elemento pequeno padrão que eles estão fazendo aqui para o subtexto como - bem como a maioria dos outros componentes com estilos adicionais. - Isso significa que você pode quaisquer outros estilos em bootstrap você também pode usar dentro desta página - cabeçalho. - Mas tudo que você tem que fazer é criar uma div que diz cabeçalho da página e, em seguida, criar um H um - abertura direita, - fechamento colocado aqui. - Vamos colocar em desmoronamento para isso e, em seguida, aqui, vamos colocar um pouco de subtexto. - Eu tenho, - tipo, - um pequeno subtítulo que eu quero usar. - Então vamos colocá-lo acima da navegação vai dizer div classe é igual Paige Dash cabeçalho. - Feche esse Dave, - temos em cada um que vamos dizer desmoronar. - Er, - vamos apenas refrescar o Cool. - Já podemos ver isso. - E vamos adicionar o subtexto vai dizer bondade caseira. - Refresque isso. - Incrível. Só mais uma coisa, vou adicionar esses dois cortes porque acho que parece mais legal. - Doce. - Então temos o nosso valete. Vamos transformar isso em um link para que quando eles clicarem no Crumpler, ele sempre vá para a página inicial. , Então nos lembramos de como fazer isso direito,dirá link para Crumb Blur, e depois vai para refrescar. - Incrível. - Então o cabeçalho parece bom, mas parece que a nossa navegação é meio que eu não acho que esteja no lugar certo. Acho que pessoalmente deveria ser como aqui em cima. - Então vamos descobrir como podemos fazer isso. Estamos usando a classe direita, então vamos tentar agora que está fora do nosso cabeçalho, certo? - Aqui é onde o cabeçalho começa e aqui é onde termina. - Então vamos colocá-lo dentro do cabeçalho. - Vamos ver se isso faz o truque, certo? - Então agora temos esta etiqueta de cabeçalho e ela ligada. - Lee fecha aqui, bate, refresca. - Ainda não funciona. - Pode-se ver que se mexeu. - Então, você sabe, isso é progresso, mas parece que não funcionou e eu sei o porquê. - É meio confuso. - É porque esta classe direita que estamos usando usos. - Ah, - longe do dedo do pé Elementos em CSS chamado flutuante e flutuante tipo de usa uma técnica diferente . - Teoh posiciona as coisas na página. - Eu realmente não vou entender o porquê, - mas Bootstrap tem um exemplo de como você pode alcançar o que estamos tentando dilatar. - Então eu acho que se você voltar a começar e depois exemplos. - Se você olhar para este exemplo Jumbotron, - você tem o cabeçalho à esquerda e, em seguida, esta navegação pílula à direita. - Então vamos realmente olhar para como eles fizeram isso tão bem, - certo, - Clique e nós vamos para inspecionar Element. - Hum e isso é legal. - Você poderia fazê-lo em qualquer site porque HTML e CSS são tipo de apenas você pode olhar para você - pode sempre ver a fonte de qualquer site que você está olhando e o que eles fizeram aqui. - Waas. - Você pode ver que eles colocaram a navegação antes do cabeçalho e que parece ter feito o - truque. - Então por que não tentamos isso vai pegar este h um e vamos colocá-lo depois do rul e parece que - funciona. Então só vamos fazer mais uma coisa, e isso é, vamos centrar isto no meio da página. E eu quero te mostrar mais uma coisa, na verdade. - Então vamos para a nossa página de boas-vindas e vamos ver o que acontece se este texto estiver mais certo. - Se esta frase, - tipo, - fosse mais longa, - então vamos apenas copiar provar um deles um par de vezes. - Sim, - certo. Seja lá o que for, economizou e você pode ver que vai até o final do nosso contêiner de bootstrap. - E eu acho que isso é um pouco demais, certo? - É muito difícil ler uma frase assim tão larga. - Então, na verdade, vamos fazer duas coisas. - Vamos centralizar isto e vamos ter o conteúdo em torno desta largura. - Então vamos ver como fazemos isso. - Vou fechar isto e voltar. - Vamos para CSS e, em seguida, sistema de grade. Então o sistema de grade é como você coloca seu conteúdo em colunas, e é muito poderoso. coloca seu conteúdo em colunas, Mas como você pode ver, a documentação aqui é meio assustadora. À primeira vista, , deixe-me explicar o que acho necessário. Primeiro de tudo, você tem quatro tamanhos diferentes. - Você tem dispositivos extra pequenos, como telefones, - e isso significa que a largura da tela é inferior a 768 pixels, - e então você tem dispositivos um pouco menores, como tablets. - Você tem dispositivos de desktop médios, - e então você tem grandes dispositivos de desktop, - e o que isso significa é, - você pode realmente definir um estilo diferente para cada tamanho de tela, - mas nós não vamos fazer tudo isso. O que vamos nos interessar é a maneira como essas colunas funcionam, então você pode ver que é realmente muito simples fazer colunas. - Aqui está o código para esta primeira linha onde cada pedaço de conteúdo é uma coluna. Você basicamente tem um rapper DIV chamado Roe. - E, em seguida, cada coluna recebe esta classe CSS. - Então ligue para um médio. - Vamos usar o prefixo do dispositivo médio. - Não vamos usar todos eles, e então você pode, você sabe. Então este é 44 e 4 e você pode ver que tudo o que eles estão fazendo é que eles estão dizendo, me ligue antes de ligar para o meio quatro. - Chamar a reunião antes. - Então vamos fazer isso. - E toda a grade é de 12 colunas. Quero que o nosso conteúdo ocupe metade da grelha, por isso vamos ter seis colunas de largura. - Eu vou deletar Bem, - na verdade, - vou deixar isso por agora, - mas vamos voltar ao nosso layout e nós realmente vamos fazer cada pedaço de conteúdo - apenas seis colunas de largura. - Então isso significa que o nosso rendimento vai estar dentro da div de seis colunas. - Então nós vamos dizer, - Ligue para o meio seis recuado e, em seguida, aperte Salvar e você pode ver que tem seis colunas de largura, - mas é que nós esquecemos a linha. Veja como esquecemos a fila e tem um espaço extra aqui. - Não está alinhando com o logotipo. Então, se colocarmos outro mergulho e dissermos que a classe Dave é igual a linha, nós nos dividimos. - Este foi o diferencial de como isso vai ser legal. - E agora tudo se alinha. - Certo? - Você pode ver aqui você sempre quando você está fazendo colunas, - você sempre quer que eles sejam embrulhados dentro de ah Rho div. - Hum, - certo. - Então agora o que queremos fazer é centralizar isso e vamos pensar sobre isso. Vamos ter que fazer matemática básica, certo? - Então isto tem seis colunas de largura, o que significa que temos outra de seis colunas aqui. - Então, se quisermos isso no centro, - vamos querer, - tipo, - três colunas de espaço em branco e, em seguida, seis colunas de conteúdo e, em seguida, outras três colunas - de mais espaço em branco. Então há uma maneira de fazer isso, que se chama Offsets. - Você pode ir para o menu aqui e deslocar colunas. Basicamente, o que você faz é adicionar outra aula. - Você vê como isso aqui tem três colunas de largura por causa da chamada média três. - Mas também é compensado por três colunas. Isso significa que, à esquerda, suas três colunas no valor de espaço em branco. - Então tudo que você precisa fazer para movê-lo é, - digamos, - deslocar a coluna, - deslocamento médio três. - E você sabe, - se você estivesse fazendo uma tela extra grande, - você diria, - Ligue grande deslocamento três ou, - você sabe, - para um telefone você diria excesso para extra pequeno. - Então, tudo o que temos a fazer é dizer que o nosso conteúdo tem seis colunas de largura, mas também é compensado três direito, e precisamos chamar Médio Offset três. Então, quando o atualizarmos , - Não é assim que fazemos. - Então, quando o atualizarmos, lá vamos nós. - É no centro e você pode ver que casa e sobre estão agora ambos centrados tão incrível. Estou muito feliz com a aparência da nossa página. - A última coisa que vamos fazer e vamos fazer isso em todos os capítulos agora é criar um commit para que possamos salvar nosso progresso. - Eso ir para obter hub app e levantar-se sabe que modificamos para arquivos, mas este arquivo de boas-vindas. Na verdade, eu não quero tudo isso, certo? - Só estávamos fazendo isso para testar fora do teste com. - Então eu estou realmente indo para o botão direito aqui e eu vou dizer Descartar mudanças. - Uh, - sim. E agora, quando eu atualizo a página, eles percebem como isso automaticamente tipo de como através dessas mudanças fora, porque dissemos que não estamos interessados nelas. Então o que nos resta é apenas um arquivo que mudamos e fizemos um monte de coisas , certo? - Adicionamos esta folha de estilo. - Removemos essas duas linhas iniciais e as mudamos para cá. - Então nós adicionamos tudo isso, certo? - Nós adicionamos o nosso recipiente eo cabeçalho da página, - a navegação Temos o nosso cabeçalho que diz er crumble, - bondade assado casa. - E aqui em baixo temos o nosso conteúdo. - Isso é dentro de uma grade de seis colunas que é deslocado três colunas para a direita. - Isso é tudo. - Então vamos criar um commit aqui, - e vamos dizer bootstrap adicionado e hit commit doce. - Vejo-te na próxima lição. 7. Adicione posts (vídeo): - Ok, - Então, na última lição, - nós instalamos o Twitter bootstrap, - e nós fizemos a página parecer realmente legal. - Mas agora vamos começar a trabalhar no nosso verdadeiro blawg. - Então vamos escrever um código que vai deixar o usuário postar algo para o blawg em - - Então eles podem ver as postagens, - eles podem editá-las, - e finalmente eles serão capazes de excluir as postagens. Então vamos falar sobre o que nossos posts vão realmente parecer que eles vão ter um título e eles vão ter algum conteúdo. - E o que vamos fazer é guardá-los numa base de dados. Então, quando um usuário envia uma postagem, ela fica armazenada em algum lugar. Então, quando a próxima pessoa vier visitar o site, eles podem ver esse post, e isso ficará muito mais claro em um segundo. - Então abra seu terminal e verifique se seu servidor ferroviário está funcionando. - Mas, em seguida, abra um segundo terminal e certifique-se de que você está em nosso diretório de desmoronamento. - Então faça um PWD só para verificar se você ainda está lá e vamos usar algo chamado andaime de trilhos. - Então, por enquanto, - vamos apenas digitar trilhos gerar andaime. - Não vai fazer nada. - Só vai imprimir um texto explicativo e não ficar sobrecarregado. - É muita mensagem, mas o quê? - Vamos mesmo olhar para fora? - Esta é a primeira linha aqui para o uso? Então, quando gerarmos um andaime, ele vai criar um monte de coisas para adicionar páginas. - Vai adicionar um controlador. - Vai adicionar algo chamado modelo. E também vai adicionar algo chamado migração de banco de dados, que vai nos ajudar a criar uma maneira de armazenar nossas postagens. - Isso seria mais claro à medida que avançarmos. - Então, para a maneira de fazer isso é trilhos gerar andaime e, em seguida, o nome do tipo de objeto - você está tentando criar. - Então, neste caso, - estamos fazendo postagens blawg, - então vamos dizer que os trilhos geram postes de andaime, - e isso aqui é uma lista de campos. - Então eu mencionei anteriormente, as postagens vão ter basicamente dois atributos. Cada post terá seu próprio título, e terá seu próprio conteúdo, como o conteúdo real fora da postagem do bloco. - Então é isso que este campo significa. A próxima coisa aqui, o tipo é que temos que dizer ao banco de dados. - O que? - Que tipo de coisa estavam guardando? - Então, é um número? - É um encontro? É “ Corda “, que é basicamente um monte de palavras. - Ou talvez seja uma corda muito longa. Então vamos dizer que os trilhos geram postes de andaime porque vamos criar uma mesa de postagem, e então terá duas coisas. Vai ter um título, e vai ter algum conteúdo. - Mas não aperte Enter ainda. Nós dissemos que também temos que dizer o tipo, então o título será do tipo string, que eu disse que mencionei antes. - String é apenas é é suas palavras, - e isso é o que temos visto até agora. Qualquer coisa que esteja entre aspas é uma string, e o conteúdo também será. - Também vai para texto, mas não vai ser uma string porque uma string é apenas para um texto curto. Vamos usar um tipo diferente, que é muito parecido. - Chama-se texto, e isso é basicamente para texto mais longo, mais longo. Só há mais uma coisa que precisamos fazer antes de apertarmos Enter. Quando você executa os trilhos, gera andaime, por padrão cria alguns feitos de estilo para você e não queremos isso porque estamos usando bootstrap e esses estilos vão se chocar com nossas bootstraps Quando você executa os trilhos, gera andaime, por padrão cria alguns feitos de estilo para você e não queremos isso porque estilos. Então o que vamos dizer é traço, sem folhas de estilo de traço e agora podemos acertar, sem folhas de estilo de traço e agora podemos acertar, - E, - como você pode ver, - ele criou um monte de arquivos vai para entender o que esses arquivos significam em um segundo, - Mas vamos atualizar nosso aplicativo e ver se alguma coisa mudou. - Então estamos no anfitrião local 3000. - Eu vou bater, - refrescar, - e parece que recebemos este erro. - Eso nosso aplicativo está quebrado e o que ele está dizendo é que há uma migração pendente. - Ele diz Migrações ar pendente taxa de execução db migrar para resolver esse problema. - Este fim de trilhos de coisas que você realmente não precisa dilatar. - É só que se você está fazendo isso, digamos que não em seu computador em alguém. Ao contrário do servidor, você definiria o ambiente dos trilhos, algo que não é desenvolvimento como produção. - Mas, - hum, - isso não é importante agora. - O que precisamos fazer é executar este comando rake db migrate. Mas antes de fazermos isso, vamos entender o que isso significa. - Então, se olharmos para os arquivos que este comando gerou. - O 1º 1 aqui é isto. - Db barra migrar barra este número longo, que é basicamente a data de hoje, certo? - É 2013 8 26 23 e, em seguida, este é o momento e, em seguida, é chamado criar Posts. - Então vamos abrir esse arquivo em texto sublime. - Então vamos ao DB meu grande e lá está ele. Então, se o lermos, deveríamos entender o que está fazendo. - Está dizendo Criar uma tabela chamada postagens, - e nessa tabela adicionar dois campos. Uma é uma string, e é o título que mencionamos anteriormente, e a outra é conteúdo, que é texto. E se olharmos para o que escrevemos, é só olhar para isto, certo? - Então o que? Essa migração de banco de dados do Ah é um conjunto de instruções para construir como vamos armazenar nossos dados em nosso banco de dados. - É apenas uma definição da estrutura. Ainda não construiu a tabela do banco de dados. - Então, o que precisamos fazer para executar esta migração é o comando rake db migrate. - E isso é o que vimos aqui no erro certo Vamos em frente e fazer isso. - Ok? - Incrível. - Parece que a nossa migração correu. - Então o que isso fez foi criar uma tabela de banco de dados agora para armazenar postagens. Então vamos atualizar nossa página, e não recebemos mais esse erro. Mas eu não vejo nada aqui sobre postagens, então vamos voltar à nossa saída e ver se há alguma pista. Então parece que o gerador criou um monte de visualizações, oque é bom, e também criou um controlador. Então parece que o gerador criou um monte de visualizações, que é bom, Mas a coisa mais importante aqui é que ele criou uma rota e podemos ver aqui essas duas linhas, e se abrirmos nosso arquivo de rotas em rotas de configuração que são B, vemos que Mas a coisa mais importante aqui é que ele criou uma rota e podemos ver aqui essas duas linhas, linhas, e se abrirmos nosso arquivo de rotas em rotas de configuração que são B, vemos que e se abrirmos nosso arquivo de rotas em rotas de configuração que são B, temos este novo recurso de linha é posts. - E para entender o que isso faz, - vamos para o nosso terminal e digite as rotas de rake de comando. - Então vemos que há muitas rotas aqui, - e se tivéssemos executado rotas rake mais cedo, - só teríamos visto essas duas rotas que criamos diretamente para a página sobre e - bem-vindo. - Estes devem ser familiares. - O resto destes aqui estão todos relacionados a postagens e vamos ver o que isso significa. - Então o 1º 1 aqui tem as postagens do Earl Slash. Essa coisa entre parênteses é um formato opcional, então você pode dizer postagens com ponto html ou outro formato chamado Jason J S O. N, que não vamos usar. - Mas o que é importante aqui é que você pode ir para cortar postes e algo deve acontecer. - Então vamos cortar postes e esfriar. Parece que temos uma página, e diz que está listando as postagens e algo sobre o título e o conteúdo, mas ainda não vemos nenhum conteúdo, mas temos um link que diz “New Post”. e diz que está listando as postagens e algo sobre o título e o conteúdo, mas ainda não vemos nenhum conteúdo, - Então clique nisso, - e parece que ele foi para cortar postagens barra nova legal. - Vamos olhar em nossas rotas e ver se encontramos isso em algum lugar. - E parece que podemos bem aqui cortar postes barra dois. - E a propósito, esta coluna. - É o padrão U. - R I, que é outra forma de dizer apenas o padrão U R L. E isto vai para o controlador de postos. - A nova ação. - Bem, - olhe para o controlador na próxima seção. - Por agora vamos ver o que o nosso andaime fez por nós. Então temos um formulário aqui, e parece que é assim que criamos novas postagens para o log de sinopse do R Crumb. - Então vamos, - hum, - vamos escrever um post no nosso primeiro bloco postado. - Estou tão entusiasmado. - OMG hum e clique em criar. - Então diz que o The Post foi criado com sucesso e tem este título e este conteúdo. - Se você olhar para o URL aqui, ou Ellis barra postagens barra um, - vamos clicar para trás e estamos de volta para postagens de barra. - Vamos criar um 2º 1 e vamos dizer o nosso segundo post. - Uau, isso é tão divertido. Ele criou e isso é barras barras barras, e se revidarmos novamente, devemos ver os dois postes e o que vimos antes, certo? Se clicarmos em mostrar a barra barra barra um, é essa garota aqui. que você vê dois pontos, o que E sempreque você vê dois pontos, o quesignifica é que é um parâmetro ou um Paramus e, neste caso, é a idéia do post, então os trilhos gerados automaticamente e eu d escrever Nosso primeiro post tem a idéia de um que você - poderia vê-lo barra posts barra um, - eo segundo post tem o i d de para barra post barra dois. - Se formos a algo como barras postes 2000, recebemos um erro. - Diz registro de registro ativo não encontrado porque não há nenhum post com a idéia de 2000 legal. - O que mais podemos fazer aqui? - Vimos o que o botão de trás fez. Nós temos esse botão de edição, então vá em frente e clique nisso. Nós temos esse botão de edição, E agora parece que vai nos deixar editar o Post. - Mas vamos ver a rota por um segundo. - Então aqui está a rota, certo? - É barra postagens cortar o i d slash edit, - e que vai para post controller. - Editar ação. - Incrível. - Vamos editá-lo. - Hum, - vamos fazer tudo isso, porque isso é divertido e vamos atualizar fixe. - Então vimos o show que vimos nele e vimos índice e com alguns novos. - Mas parece que há mais algumas coisas aqui. - Bem ali é criar, - mas você vai notar que criá-lo tem exatamente o mesmo seu URL como nosso índice de posts exceto que - este verbo é diferente. - Chegaremos a isso no próximo capítulo. - Você também pode ver que mensagens atualizar e destruir. - Eles também não estão entendendo. Há algo mais e é na verdade isso. Parece que com muito pouco trabalho, podemos criar postagens de bloqueio e editá-las e também podemos, acho que não tentei destruí-las. Mas se eu clicar aqui e depois dizer OK, ele destrói o posto de bloqueio. Então, agora, se formos cortar postagens, não está mais lá. - Deletou do nosso banco de dados. Isso é tudo o que vamos fazer neste capítulo do próximo capítulo, vamos cavar um pouco mais no código que os andaimes construíram para nós. Mas vamos criar um commit antes de fazermos qualquer outra coisa , e vamos apenas dizer, - Acrescentou. - Muitos e muitos arquivos estavam indo apenas para dizer, - um adicionado postagens andaime, - e vamos pressionar commit cool. - Vejo-te na próxima lição. 8. Entendendo o código de Scaffold: Então, na última lição, usamos os trilhos geram o comando andaime para criar um andaime para postagens. - Podíamos listar todos os posts. Podemos criar uma nova postagem, editá-la, e finalmente podemos excluí-la. - Então, na última lição, nós meio que executamos o comando e vimos o que ele fez em nosso aplicativo. Mas nós ignoramos muitos detalhes, e quero que entenda como isso realmente funciona. Então, nesta lição, vamos investigar esses detalhes. E eu quero apenas, como, prefácio dizendo que você pode não entender tudo nesta lição no primeiro - ir, - e tudo bem. - Você pode pensar nisso. - Ah, - como dirigir um carro, - certo, - um monte de carros de luta. E para dirigir um carro, só precisamos saber algumas coisas certas. - Precisamos saber onde estão os freios. - Precisamos saber como o dedo do pé, - você sabe, - empurrar o gás. Precisamos usar o volante e mudar de marcha. - É tudo o que precisamos saber. - A fim de dirigir um carro. - Não precisamos saber como funciona o motor e a suspensão e como as engrenagens realmente mudam. - Precisamos saber muito menos. E na programação, especialmente com trilhos, funciona da mesma maneira. - Temos diferentes camadas de complexidade. - Trilhos Eso. - Na verdade, é um quadro muito complicado. - Há milhares de linhas de código ou provavelmente dezenas de milhares, - se não mais escritas por milhares de desenvolvedores. E faz muito, e quanto mais tempo você trabalha com ele, mais camadas de complexidade você pode descobrir. - Mas não há necessidade. Teoh tenta entender tudo de uma vez, porque provavelmente não vai acontecer. - Então eu sei, você pode querer assistir esta lição mais de uma vez se você realmente quer ter um - entendimento. - E também vou postar algum material de leitura no caso de você querer mergulhar mais fundo. - Então, aqui vamos nós. - Nos primeiros slides, - Eu falei um pouco sobre o controlador de visualização de modelo, - e neste ponto já vimos controladores e já vimos visualizações, - mas ainda não olhamos para modelos, - e quando criamos este andaime, na verdade, criou um modelo de postagem para nós, e vocês podem ver isso aqui. - Sua em modelos de aplicativo mensagens ponto r B. - Então vamos dar uma olhada nele. - Nós vamos modelos de aplicativos, - e aqui vamos nós post dot r b. - Você pode ver que ele realmente não parece fazer muito. Ele só define este post de classe e termina com ele, e realmente não há nada aqui. - Mas isso deve nos dar uma dica como nós podemos fazer todo tipo de coisas com postes. Isso quer dizer que ele herda da base de registros ativos, que significa que ele recebe um monte de comportamento de graça apenas herdando esse registro ativo - base, - e o comportamento que ele recebe é para ajudá-lo a trabalhar com o banco de dados. Então nosso modelo é você pode pensar em nosso modelo como o objeto real. - É o correio de verdade. - Então vamos começar a cavar. - Abra um terminal e execute o console de trilhos de comando. E o que isso faz é carregar outro terminal onde podemos digitar código rubi, e temos acesso a todos os dados em nosso aplicativo. - Então, temos acesso a este posto aqui. - Então, vamos ver se conseguimos mesmo obtê-lo. A maneira de fazer isso é você dizer, postar com um P maiúsculo que está se referindo à classe postal, e então você diz postar ponto encontrar um. - Os parênteses, - ar opcional. - Você também pode dizer Post não encontrar um como este, - e é a mesma coisa. - Mas vamos ver o que está fazendo. - Vemos esta linha aqui. Esta é a linha que trilhos estão usando para buscar a postagem do banco de dados. - E esse tipo de sintaxe muito estranho. - Um seleto posts estrela ponto de posts Where Post essa idéia, - etcetera, - etcetera. - Na verdade, não é a Ruby. - É uma linguagem diferente chamada SQL. E o que é legal sobre trilhos é que, já que estamos usando a classe ativa baseada em registros, não precisamos saber como. - Pergunto-lhe tudo o que é bom. - Podemos apenas dizer post dot find e então ele vai falar com o nosso banco de dados. - Ele vai tipo de converter nosso código em código SQL e, em seguida, obter o post do banco de dados. - E este aqui é o posto que devolveu. - Hum, - e você pode dizer que ele devolveu algo com este tipo de seta igual. - Então, sempre que você faz algo aqui no console dos trilhos. - Quando você vê que você sempre vê o valor de retorno e é sempre uma seta igual. - Então o nosso post aqui tem a ideia de um. Ele tem o nosso título, tem o conteúdo, e também tem a data em que foi criado, incluindo a hora e a data em que foi atualizado pela última vez. - Então vamos ver o que mais podemos fazer com isso. - Podemos dizer que podemos atribuir este post a uma variável. - E o que isso significa é que é como matemática. Quando você diz que X é igual a cinco cada vez que você se refere a X mais tarde, ele tem esse valor de cinco. - Então poderíamos dizer que meu post é igual a postar ponto encontrar um. - E agora podemos nos referir ao meu post para que possamos dizer o meu post ponto i d. - E tem a idéia de um que podemos dizer no meu conteúdo post ponto. - Há o conteúdo, título do meu post, o meu post que criou em etcetera, etc. - Então isso é muito útil. - É assim que usamos o método de busca. Basicamente dizemos “Post Dot “encontrar e depois um número, então se eu dissesse, Post foi multado em 5000. - Recebemos esse erro longo, - ele ainda executa esse código SQL, - mas então ele lança um erro porque não há nenhum post com o i d de 5000. Então é muito inteligente e sabe, você sabe, entãovocênão pode dizer algo como outro Post é igual a Post que encontra 5000 porque esse post não existe. Então é muito inteligente e sabe, você sabe, você entãovocênão pode dizer algo como outro Post é igual a Post que encontra 5000 porque esse post - Então é assim que a multa funciona. - A seguir vamos fazer, - vamos usar o método post dot all que vem com registro ativo. - Quando dizemos postar, ele lista todos os posts que temos no banco de dados. - Estes colchetes aqui indicam que é uma lista que também é conhecida como uma matriz. - Mas agora só temos um posto. - Então vamos criar outro post. Mas em vez de passar por aqui, vamos fazer através de um terminal. - Vamos dizer que New Post é igual a post dot sabia e isso não salvou o post no banco de dados - ainda porque não vimos nenhuma sequela. Mas nos deu um objeto postado para que possamos dizer novo post dot i d. e ele retorna nulo. - E isso significa que o prego está meio vazio. - Não tem valor. - E o novo título de postagens Desculpe, - I mis digitado. - Eu disse perder novos posts quando ele realmente deve ser New Post também é conhecido Então o que nós queremos - fazer é queremos que nós queremos definir o título deste post Então nós podemos dizer novo post título ponto é - igual ao novo título post E então nós podemos dizer novo post dot conteúdo é igual ao - conteúdo. - Agora estamos prontos para armazená-lo em nosso banco de dados e o que fazemos é dizer novo post dot save - e você pode ver que ele agora executado algum x SQL Você não precisa entender o que isso faz - e ele retorna verdadeiro agora. - Por que não voltou verdadeiro? - Ele retornou verdadeiro porque ele fez isso com sucesso. Se, por algum motivo, não pudesse colocar este post no banco de dados, então ele retornaria False na verdade. Então, agora, se estivéssemos atualizando nosso aplicativo Desculpe, não aqui. - Vamos para postagens de barra. - Vemos que temos duas postagens e veremos exatamente a mesma coisa. - Se dissermos que tudo como fizemos antes de termos a nossa pequena lista, certo? - Mas agora tem duas postagens. - Tem um aqui e outro aqui. - Há outra coisa que você pode dio para criar um post, - e isso é em vez de usar o ponto post sabia em vez de usar post dot Sabia que você pode dizer - postar estoque criar post que criar tipo de trabalhos como post dot sabia e depois postar ponto salvo -. - Então ele meio que faz os dois em um tiro e você pode ver isso de novo. Ele criou isso no banco de dados, e aparece aqui, exceto que não tem conteúdo. - Então podemos dizer que o título do terceiro ponto do post é igual. - Teoh, - terceiro título post e terceiro post dot conteúdo é igual ao terceiro conteúdo post e terceiro post - dot save awesome. - Nós o atualizamos, ele tem todas as coisas. - Ok, legal. - Então esses são todos os métodos modelo que eu quero que saibamos. Temos o post op encontrar certo, postar encontrar um. - Nós temos post em tudo, - que nos mostra todas as postagens que temos para postar esse novo, - que cria um post, mas não é armazenado no banco de dados e, em seguida, postdoc criar, - que na verdade o armazena nos dados baseados. - Você também pode dizer post dot último, - e há também um método de destruição que realmente irá excluí-lo. - Então eu quero excluir o último post que nós criamos porque é ah, - ele está vazio novamente e não tem um título e conteúdo. - Então, se fizermos isso, tudo bem. Acho que enquanto estivermos aqui, vou te mostrar mais uma. - Há contagem de pontos e temos quatro postagens no banco de dados. - Então, agora que vimos como o modelo Post funciona, - Eu acho que estamos prontos para olhar para o nosso controlador para que possamos ver que nosso gerador criou um - controlador no APP. Controlador Posts. Vamos ver isso. - Controladores AP postam controlador Então a primeira coisa que você vai notar é que ele é chamado de postagens - com um plural. - E isso é consistente sempre que você usa um comando gerador e é realmente necessário em - trilhos. Então, se criássemos algo novo como uma foto, teríamos um controlador de fotos, e isso é diferente do modelo, que é singular, certo? - É postar aquele trailer. Então isso é apenas algo que Teoh para olhar, para é apenas algo que Teoh para olhar, paraquepossamos ver que há muito mais código neste controlador do que nosso controlador de páginas, certo? possamos ver que há muito mais código neste controlador do que nosso controlador de páginas, - Nosso controlador de páginas aqui apenas define a ação sobre, - e define a ação bem-vinda, - mas ele não faz mais nada. - Então vamos um por um e tentar entender o que está acontecendo aqui. - Vamos deixar isto um pouco. Então, primeiro de tudo, temos o Index. E a ação de índice é que está fazendo algo certo, sua configuração em postagens para postar pontos todos. E a ação de índice é que está fazendo algo certo, E sabemos o que Post faz, certo? - Traz todo o correio. - Isto é algo que não vimos antes. - E isso significa que é uma variável de instância. - E o que isso significa para os nossos propósitos é que isso é acessível na vista. - Então você vai ver que se você vai para visualizações de aplicativos, - postar Índice, - ele está fazendo algo com isso em postagens. - Hum, - variável. - Se nós apenas dissemos mensagens sem o em, - ele realmente quebraria. Então, se eu apertar Salvar e depois ir até ele, você pode ver que ele acha que em postagens é nulo. E mesmo que mudássemos esses dois posts, não funcionaria, certo? - Então precisamos disso em, - hum Então isso é Posts Cool. de O showdeação aqui parece à primeira vista que não está fazendo nada. - É só definir a ação. - Mas como eu disse, tem algo aqui. - Então vamos olhar para isso antes de ação aqui diz antes de ação set post Onley show nele. - Actualizar. - Destruir. - E isso se refere ao show aqui. - Atualize e destrua. - Então o que? - Set Post? - É um método que está definido aqui, e o que está fazendo é colocar em posição de algo. - Agora vemos que está usando o post dot find, certo? Mas tem essa coisa do Haram e já vimos isso antes de vermos quando corremos rotas de rake. - Então este parâmetro de cólon i d. - É acessível em nosso controlador. Então, quando visitamos, postagens de barra barra um, por exemplo, que Paramus de I. postagens de barra barra um, por exemplo, que Paramus de I. - Então isso é realmente dizer “set in post up “encontrar um, - e quando você visita um diferente - é obviamente esse número, - certo? - Serão cinco. - Então você pode pensar neste set post como sendo executado aqui para que você possa pensar nisso - acontecendo no posto é igual a postar Encontrar Haram de I. - Exceto que esta é uma ação muito comum. Sempre que acessarmos uma postagem com um “i d “na URL, vamos querer fazer isso. - Então é por isso que também vamos querer fazer isso e editar atualizações. Tudo bem, ele tem o I D e destruir, então meio que nos faz repetir um pouco menos então vamos dar uma olhada no novo. - Então o que ele está fazendo aqui é definir a variável no post para postar esse novo. E se você se lembrar do nosso console, New Onley cria um objeto postado, mas não o salva no banco de dados. - Certo? E isso é exatamente o que precisamos, porque este formulário precisa ter um objeto postado. - Mas é um objeto postado que ainda não foi salvo. - O que fazemos é preencher alguns detalhes e ele só é salvo quando pressionamos criar e quando - pressionamos criar, - ele realmente vai. - Adivinha o que a ação de criação. - Então vamos dar uma olhada em criar agora. Mas antes de fazermos isso, quero simplificar este código porque não precisamos de tudo o que está aqui. - Há você pode ver que ele está respondendo a dois formatos. HTML e Jason e R. Ap só usariam HTML. Mas só para você ter uma idéia do que Jason é, se você olhar para o show direito, você pode ir para postagens barra barra um ou barra postar barra um ponto Jason. - Então vamos com o Post 8 Open aqui. - Hum, - e podemos ver que não é. - Não está nos mostrando em HTML Page. Está a mostrar-nos isto, tipo, outra forma de descrever o nosso post, certo? Isto é conhecido como Jason ou notação de objetos JavaScript, mas não vamos usá-lo neste curso. - Você o usaria se estivesse escrevendo um aplicativo para iPhone que precisasse interagir com seus trilhos - servidor ou talvez, - ah, - talvez um aplicativo que foi escrito inteiramente em JavaScript. - Ele também gostaria de ter o objeto de volta em Jason, - mas nós realmente não vamos usá-lo para que possamos nos livrar deste comentário e nós estamos realmente - indo para simplificar este código apenas para fazer o que ele faz para HTML. Então, vamos dizer que se o posto salvar, então faça o que isso estiver fazendo. Copie isso se não salvar, faça isso e sempre precisa terminar depois disso. - Então isso parece muito mais simples. - E agora vamos dar uma olhada nisso. - Então está chamando Post Dot sabia com o Paramus que nós temos e está atribuindo o dedo do pé - no posto. E então está dizendo, se o Post salvar que vimos antes, isso voltaria a ser verdade, então você vai redirecionar para aquele post e você vai ter um aviso que diz que o The Post foi criado com sucesso. - E foi exatamente o que aconteceu aqui. - Se você se lembra, nós chegamos aqui porque nós criamos um post usando este formulário. - O que ele fez foi ter este aviso que disse que o Post foi criado com sucesso e ele - na verdade nos redirecionou para o Conde daquele posto. - Certo? - Então estamos no pós barra oito. - Hum, - isso chicoteia. - Parece que copiei as coisas erradas. Copiei o Jason, então, na verdade, vou levar isto. - Isso é melhor. E isso é realmente muito mais fácil, porque o que está dizendo é que se o Post salvar, mostre-nos o post e mostre este aviso. - Mas se não salvar. Voltar para a nova ação, significa mostrar esta forma novamente. - Então isso é tudo o que está fazendo e agora é realmente muito semelhante a mostrar, - e ele usa isso antes da ação. - Ele define o posto, - e então se formos, - vamos para um post real que temos, - certo? - Então está carregando naquele post, - e então preenche os detalhes reais do post em nosso formulário. Então, quando enviarmos o formulário, ele vai atualizar o registro. - E esse é esse cara. - E vamos simplificar isso da mesma forma que simplificamos a criação porque não precisamos de nada dessa coisa do Jason. Então vamos apenas dizer, se o Post atualizou com os parâmetros que enviamos, então volte para aquele post e diga que foi atualizado. - Caso contrário, - volte para o formulário de edição e eu meio que perdi sobre essa coisa do post Haram. Esse é outro método que é definido aqui, e é apenas uma coisa de segurança de trilhos. - Mas no final do dia, - é, - ah, - está devolvendo nossos programas hash. Então, se olharmos para Post Dot saberemos com o Post Haram e entrarmos no nosso conselho. - Então, se entrarmos em nosso console, - se você se lembrar de quando publicamos esse novo, - ele apenas cria um objeto post, mas não se sente no conteúdo e também não o salva no banco de dados grande. - E podemos ver isso porque não tem ideia. - Mas também podemos dizer que o Host Dot sabia e então ter esse hash que diz que o título é meu título - e o conteúdo é meu conteúdo - e agora você pode ver que o Post tem um título e conteúdo. - Então é basicamente isso que essa coisa de pós Paramus é. - O último aqui está destruído. Agora podemos ver que ele também está fazendo algumas coisas do Jason. Então vamos deletar isso e vemos que tudo o que ele faz é destruir o post, e ele sabe sobre ele porque ele está usando esse método set post, e então ele redireciona de volta para as postagens. Earl no Post Earl, se olharmos para as nossas rotas, é o nosso índice. - Eu não tenho certeza se eu mencionei isso antes, - mas este prefixo é uma espécie de uma maneira de dar atalhos para a nossa menina, - então barra posts você pode ou se referir a ele como barras como este ou você pode dizer posts - sublinhar u u R l E para New Post Seria novo post Earl, etcetera, etcetera. - Isso seria sobre euro e raiz você r O s. - Oh, - isso é tudo o que significa. Parece que cobrimos tudo neste arquivo. - A última coisa que vou fazer é apagar os comentários do Jason que esqueci antes. - E também vou apagar coisas à nossa vista. - Isso está se referindo ao Jason. - Não precisamos disso e não há razão para explicar agora. - Tão fixe. Espero que tenha uma ideia melhor de como funciona o nosso controlador. E novamente, se você não entendeu tudo nesta lição, tudo bem, porque tudo o que você precisa saber é como usar o gerador de andaimes, e isso vai criar tudo isso para você. Mas já que fizemos algumas limpezas, vamos criar um compromisso com isso. E se olharmos para nossas mudanças aqui, basicamente está mostrando todas as coisas que excluímos e adicionamos essas coisas em vez disso, certo? - Apagámos este comentário. - Adicionamos isto. - Deletamos todo esse arquivo. - É por isso que tem este rótulo vermelho apagado, - e nós excluímos este também para que possamos dizer controlador de post simplificado removendo - referências a Jason. E aqui, direi que também deletamos os arquivos do Jason J. Builder. Já que não estamos usando isso legal, faça um commit e vemos que agora temos cinco commits. Estou muito feliz com isso, e te vejo na próxima aula. 9. Como estilizar nossos posts: Ei, bem-vindo de volta. Então, nesta lição, vamos percorrer o nosso andaime que construímos, e vamos fazer com que pareça um pouco mais agradável, porque agora ele está usando alguns estilos padrão e eu quero que ele seja usado. Bootstrap. Quero que pareça muito, muito bom. Então vamos começar com a página de índice. Eso ir para a vista, sua em vistas de aplicativos, Um posts, índice e podemos ver a primeira coisa aqui é este cabeçalho, certo, este h um e eu acho que parece bem. Mas, em seguida, a próxima coisa aqui, esta grande tag HTML é uma tabela e é basicamente listar. Ah, certo. A primeira linha é como um cabeçalho, e depois está listando cada postagem, e tem cinco colunas, mas não parece muito bom. Então vamos ver se bootstrap tem algo para isso. Então vá para tabelas CSF bootstrap e você pode ver aqui que eles têm um monte de realmente, muito legal olhando tabelas, e é muito fácil. Teoh faz nossa mesa parecer assim. Basicamente, tudo o que temos a fazer é adicionar a tabela de classe base para qualquer tabela. Então, se dissermos classe tabela é igual a desculpe, tabela Agora nós atualizamos, então lá vamos nós. Eu acho que parece muito incrível. Agora vamos voltar à nossa visão por um segundo. Então, o que é tudo isso? Parece que está separado em duas seções. Este primeiro won t cabeça representa cabeçalho da tabela cabeçalho. Essa é a primeira fila aqui. Então ele tem o conteúdo do título e tem Então que é cada um destes th representa o título da tabela , Hum, e então tem mais três colunas que estão em branco. Isso é, você sabe que não há rótulos para mostrar e destruir. E aqui em baixo temos o corpo da mesa. Então esse é o resto. E está criando. By the way, TR significa linha de mesa de chá. Então o que ele está fazendo aqui é fazer referência em postagens. Então está passando por todos os postes que temos. E para cada post, é criar uma linha e, em seguida, mostrar algumas coisas que vamos chegar a em um segundo. Mas isto nos postos. Já vimos isso antes. Hum, nós vimos no nosso controlador, certo? Então, se estamos na exibição de índice, isso significa que ele foi renderizado pela ação, um Índice. Então, se entrarmos em nosso controlador de posts e vemos a ação de índice aqui mesmo. Podemos ver que em postagens é definido aqui no dedo do controlador, todos os posts. Então é por isso que podemos nos referir a um posto aqui. Se nos livramos dessa linha, por exemplo, e atualizamos, obtemos um erro. Diz método indefinido para cada classe de prego. E isso é porque em postagens agora é nulo. Então vamos adicionar isso de volta. Então o que está fazendo aqui é percorrer todos os postes que temos. E para cada post, ele está adicionando este HTML e está colocando o conteúdo do título das postagens. Ah, mostre e destrua Link. Então isso aqui, esta linha que diz Post, pare cada post. É conhecido como um er iterado, e uma vez que temos três posts, ele vai percorrer, ele vai iterar através de cada post e durante cada ciclo do loop, neste caso, haverá três. Esse Post vai ser referido como essa variável chamada Post. Então é assim que obtemos o título, o conteúdo deste show nele e destruir links. Vamos fazer mais uma coisa no índice. Quando temos um blog, nosso conteúdo de bloco provavelmente vai ser um pouco mais longo do que você imagina. Assim como Oh, meu Deus, isso é incrível. Então eu realmente encontrei um poste de bloco que eu realmente gosto sobre assar. É uma receita para o Blondie, se você assar. Eu recomendo fazer isso. Eles também são deliciosos, mas vamos copiar esta receita e editar nossa primeira publicação de bloco para ter esse conteúdo. Então eu colei e tive uma atualização e voltei para nossa página de índice e vocês puderam ver que isso é, você sabe, é muito longo, e essa página de índice é realmente apenas para, tipo, gerenciar todos os nossos posts. Então, provavelmente não precisamos ver Ah, você sabe todo esse texto aqui. Mas, felizmente, há um método auxiliar de trilhos chamado truncate. E vamos verificar, basicamente, basicamente, com truncamento. O que você pode fazer é pegar uma corda. Bem, olhe para este, e podemos dizer quanto tempo queremos que a corda seja. Neste caso, queríamos ter 17 caracteres, basicamente 17 letras de comprimento para que possamos ver 123459 11 13 17. Há 14 17. Usaremos o método do porta-malas para fazer a nossa mesa parecer um pouco mais agradável. Então vamos encontrar esta linha aqui onde ele está imprimindo o contexto e vai dizer, Truncar o conteúdo para este comprimento e vamos atualizar. Podemos ver que agora tem apenas 100 caracteres de comprimento, e eu acho que é um pouco mais agradável antes de passarmos para o próximo. Eu só quero adicionar um Nós vamos estar indo muito para a página de índice, então eu quero adicioná-lo ao nosso menu aqui. Eso Se você se lembra, o menu está localizado uma vez que é renderizado em cada página em nosso aplicativo. Certo. É renderizado no nosso layout. Então, se você vai para visualizações de aplicativos, layouts aplicativo, fizemos isso algumas lições atrás. Temos o menu aqui. Então tudo o que vamos fazer é adicionar outro item. Eu vou colocá-lo entre casa e sobre, e nós vamos dizer link para e nós vamos chamá-lo e gerenciar posts porque é isso que esta coisa está realmente fazendo. Somos como gerir os nossos postos, certo? Estamos a destruí-los, etc. etcetera. Então vá para barras postagens. Nós nos atualizamos. Nós vemos, podemos clicar agora e isso é muito legal. Mas aqui, há uma coisa que eu não gosto agora. Uh, nós estamos para Are você RL estava digitando, uh, o oral exato e há um Mawr melhor trilhas a maneira de fazer isso, e isso é usando um Earl chamado. Então, se você se lembra, nós temos este comando rotas rake e Ray Krauts. Nós olhamos para este direito, o padrão u R I, e nós também olhamos para a ação do controlador. Nós também olhamos para o verbo, mas este prefixo aqui é realmente muito útil. É basicamente, é como uma abreviação para o você é rebelde porque às vezes você vai ter um muito longo um u R l como post barra d barra editar. Então o que vamos fazer é, por exemplo, este primeiro 1 vai para barra poderíamos dizer barra, mas nós também podemos apenas dizer rota sublinhado u r l e quando atualizamos esse link ainda vai, você sabe, para o mesmo lugar. Então vamos fazer isso por tudo. Para os outros. Então gerenciar posts vai para cortar posts, e se olharmos para barras postagens. Se este primeiro 1 aqui direita o índice, este será apenas posts sublinhar u R l Então podemos dizer em vez de que posts, menina e sobre é sobre euro e nós atualizamos tudo ainda funciona. Então agora vamos para New Post. Vamos abrir a vista Então vamos para visualizações de aplicativos, postagens novas. A primeira coisa aqui, você pode ver que é o cabeçalho, certo? É isso e então diz aqui, renderizar forma. Agora o que isso significa é que é realmente ele está renderizando outra visão. Ele está renderizando o que é conhecido como uma visão parcial e nós poderíamos vê-lo bem aqui, uh, como sublinhado forma dot html dot air b. E por que ele está fazendo isso? Ao contrário de ter apenas este html aqui? Ele está fazendo isso porque este formulário é realmente usado em dois lugares e nós não queremos repetir a nós mesmos. Também é usado se você se lembrar na ação de edição. Então temos forma de renderização. Aqui é assim, se você vai para um post e você bater nele, é praticamente exatamente a mesma forma. E a razão pela qual não queremos nos repetir é digamos que adicionamos mais dois posts de campo , que na verdade iriam fazer na próxima lição. Então não gostaríamos de mudar cada forma. Nós Seria muito mais agradável e mais conveniente apenas ter que mudá-lo em um só lugar em. Esse é um conceito quando você está programando que geralmente é bom seguir seu chamado D R Y ou seco e significa não se repita. Então vamos verificar este formulário. Este formulário quatro tag é basicamente ele está criando, uh, em forma HTML para nós e esta seção aqui. Vamos pular por enquanto. Mas basicamente, se houver algum erro do que ele vai exibir os erros na página. Mas vamos olhar para estes três. Então esta é a nossa forma real, certo? Temos o conteúdo do título e um botão de envio, Então, a maneira de torná-lo mais agradável é em CSS bootstrap. Nós temos formulários, e aqui diz que você pode usar a tag de controle do formulário de ponto e você pode ver como ele vai ficar aqui. Certo? Então este é o HTML para este formulário um elemento aqui, e você pode ver que ele tem essa classe de controle de formulário. Então vamos o que vamos fazer é só para os campos, certo? Então não temos que fazer nada pela gravadora. Vamos dizer classe, controle de formulário e vamos dizer isso para este também, também, e atualizar. E parece bem legal. Mas uma coisa que eu não gosto aqui é o espaçamento. Você vê como, como os rótulos de ar tipo de esmagado contra os elementos de entrada. Há algo para isso, também, também, em bootstrap e diz rótulos embrulhados e controles em um grupo de formulários para espaçamento ideal. E você pode ver isso aqui, certo? Cada conjunto de rótulo e entradas está em um grupo de formulários. Então nós estamos basicamente nós não precisamos dessa aula de campo. Poderíamos dizer “formar grupo” em vez disso. A classe de campo é apenas algo que os trilhos nos dão automaticamente, mas não a estamos usando. Então dizemos que o grupo de formulário era fresco. É espaçado muito mais agradável. Agora. Outra coisa que queremos fazer é este botão certo. Este é um botão simples olhando muito chato, mas bootstrap tem seus próprios botões. Se você for aos botões aqui e eles ficarem muito mais bonitos, daí? Você faz é dar a eles a classe final BT e, em seguida, uma segunda classe para dizer que tipo de cor você quer. Certo? Então, há como aviso de informações de sucesso primário, etc. Eu realmente gosto deste primário. Então vamos dizer Classe, botão, botão primário e vamos atualizar. Oh, e parece que temos um erro. Isso ocorre porque este método de envio realmente espera outro argumento. Basicamente precisa do rótulo em si. No botão que chicoteia. Temos que dizer assim, sem vírgula. E agora nós atualizamos e nós temos isso. Então certifique-se que diz F dot enviar e depois o rótulo, certo? Como se eu dissesse para enviar a coisa, isso é o que o botão diria. Hum, então é isso que nós queremos E o que é legal sobre isso é, já que nós desenhamos este formulário e ele é usado tanto em novo quanto em edição, e isso significa que nossa edição é ah já é você sabe, já está definida. Não temos que fazer mais nada, e é isso que é legal sobre o D.R . sobre não se repetir. Então, vamos criar um novo post novo estilo novo qualquer que seja e enviá-lo. E agora estamos nos postos. Mostrar página, à direita. Estamos mostrando um post. Estamos mostrando o post da idéia de 13. Então vamos olhar para o modelo para isso. A primeira coisa que temos aqui é este aviso. Agora você pode ver nosso aviso. Não parece muito diferente, por isso é um tipo de identificação do dedo do pé duro. Mas vamos fazer com que pareça diferente. E diz que o post foi criado com sucesso. Então, se você voltar para o bootstrap e desta vez você entrar em componentes e aqui em baixo, há alertas. Então você pode ver que o bootstrap tem esses alertas realmente agradáveis que podemos usar. E você já deveria estar vendo um padrão aqui. Você tem que dar-lhes o alerta de classe, que apenas lhe dá a estrutura e, em seguida, uma segunda classe para o tipo de coloração que você quer . Então isso é sucesso, essa informação, advertência e perigo. Então vamos dizer, em vez de P, que nem precisamos disso. Eu igualaria a nota. É outro como trilhos dá-lhe por padrão porque ele acha que você pode usá-lo. Só vamos dizer que a classe P é igual a informações de alerta e alerta, e atualizamos, hein? Então nós vemos o, uh você sabe, nós vemos o tipo de alerta de estilo para ele, mas nós não vemos mais o conteúdo. E isso é porque este aviso Onley é mostrado uma vez que ele realmente é mostrado pelo nosso controlador. Certo? Então vamos dar um passo atrás quando enviarmos um novo post. Ele vai para nossos controladores, cria uma ação uma vez que a enviamos, e é aí que ele está definindo este aviso. Mas o aviso em Lee é mostrado na primeira vez que você carrega a página. Então vamos fazer outro post aqui e enviá-lo. Agora vemos o aviso, mas se atualizarmos, não o veremos mais. Então, o que queremos fazer é basicamente, se não houver aviso, não queremos mostrar nenhuma dessas coisas azuis, certo? Então isso é muito fácil de diligir. Nós basicamente apenas dizer maneira dizer, se um aviso está presente, em seguida, mostrá-lo de outra forma não mostrá-lo direito. Então lá vamos nós e podemos ver que se eu notar que é presidente, ele realmente mostra isso tão doce. Vamos estilizar isso um pouco, então temos que lembrar que estamos construindo um bloco e isso é como o u. R L. Para um eso blog individual Nós provavelmente não queremos dizer cólon título e conteúdo Colon. Nós provavelmente só queremos mostrar o título e mostrar o conteúdo e, você sabe, torná-lo bonito. Então, Então, o que vamos fazer é sair deste título e também podemos nos livrar desse conteúdo aqui, e isso conteúdo aqui, já é um pouco mais simples, mas provavelmente queremos que o título seja maior. Então vamos colocar em um H dois. Legal. Isso parece muito bom. E o conteúdo parece bom, certo? parece bom, Mas vamos apenas testá-lo com este longo post que escrevemos e podemos ver que algo está errado . Basicamente está ignorando qualquer um dos parágrafos que temos, certo, certo, porque isso é separado em parágrafos. Mas aqui não é. E a razão é que esses dados são armazenados em nosso banco de dados, um, com estes, como, separar este espaço em branco, mas não são convertidos automaticamente em HTML. Então, se você quiser que ele seja formatado em HTML, você tem que usar este auxiliar trilhos chamado formato simples, e você pode vê-lo aqui mesmo. E tudo o que você realmente diz é um formato simples. Meu texto e no caso de você estar curioso quando, ah, quando temos ah, nova linha em nosso banco de dados é armazenada como esta barra e o que significa barra nova linha. Mas html não sabe ler isso. Então, este método de formato simples irá realmente converter essa barra final Teoh barra dois Desculpe, Teoh para uma nova linha html. Então, tudo o que eu tenho a dizer no post que o conteúdo é simples formato postar que o conteúdo e agora nós atualizar e parece muito bom. Incrível. Então temos nossa tela de gerenciamento de postagem. Podemos criar um post que parece bom, podemos editar um post e parece bom e também podemos ver um post, e parece bom. Então, o que mais? Nós temos esses links ah, editar e voltar, mas eu acho que nós podemos realmente nos livrar deles porque isso é como se nós se alguém visita blawg, nós não vamos querer que eles vejam que esses links em tudo bem? Nós os temos. Ainda os temos na tela de gerenciamento. Então está tudo bem. Então nós excluímos isso. Isso é muito legal. E há uma última coisa que quero dizer que quero Teoh. Quero mostrar em muitos blogueiros. Você pode ver a data de quando esse post foi realmente escrito. Então o que vamos fazer é adicionar outro p aqui, e vamos usar os posts criados em um tributo. E se você se lembra, trilhos automaticamente, criamos alguns campos de banco de dados, certo? Criamos título e conteúdo. Mas sempre que você criar uma nova tabela, trilhos lhe darão automaticamente isso criado em atributos. E nós podemos realmente olhar para o nosso banco de dados indo para DB e esquema, e podemos ver que a tabela de postagens como conteúdo criado em conteúdo título desculpe e, em seguida, ele tem data hora, que é tanto a data ea hora de quando ele foi criado e também isso atualizado que , na verdade, sempre que nós, uh, modificamos um registro, este carimbo de hora é alterado, e também é ah, se você quiser Oh, você sabe, entendê-lo ainda mais se você olhar em sua migração. Essas coisas foram criadas porque nós tínhamos carimbos de hora aqui. Se não tivéssemos isso e então executássemos a migração, ele não teria criado ah, esses campos no banco de dados. Então nós vamos dizer brindes ponto criado em e vamos ver como isso se parece. Hum, então nós vemos algo, mas é meio que não, você sabe, é meio horrível. Vamos ver se há uma maneira melhor de fazer parecer. Então vamos usar os trilhos data formatando trilhos, ajudante. E temos essa coisa aqui chamada para string formatada. E o que ele faz é deixar você pegar uma corda. Desculpe, ele permite que você pegue uma data e permite que você converta para qualquer um desses outros formatos. Certo? E eu gosto muito deste. Então, a maneira como você usa é dizer ponto para string formatada e depois longo, então eu vou copiar isso, e nós vamos dizer post que criou em ponto converter isso em uma string formatada por uma longa data. E temos a data aqui em baixo. Devíamos dizer postado em 27 de agosto neste momento. Mas vamos realmente fazer caray. Então, se você ir para o bootstrap, CSS e, em seguida, tipografia e rolar um pouco para baixo, você pode ver Onde está? Sim, você pode ver isso aqui. Isto é o que eu quero. Eu quero que seja este cinza claro e tudo o que temos que fazer é usar a classe de texto silenciado. Então vamos fazer isso e apertar Refresh e você pode ver este cinza claro. Vamos também torná-lo um pouco menor para que possamos usar a etiqueta pequena. Já vimos isso antes, e é menor. Incrível. Então, uma última coisa que vamos fazer, certo, a página de índice parece boa. Show parece bom, e parece bom e novo parece bom. Hum, mas quando vamos para casa, eu acho que estamos prontos para realmente exibir são blogs, você sabe, da maneira que a maioria dos blogs se parece, que é uma espécie de um longo fluxo de postagens. Certo? Em vez disso, vamos nos livrar desse texto de boas-vindas, e em vez disso, vamos listar todas as nossas postagens e tipo, mostrar seu conteúdo e cada postagem será clicável. E quando você clicar no post, ele irá para esse post, certo? Ele vai para a ação do show. Então vamos fazer isso. Vamos abrir nossa visão para isso, certo? A vista de boas-vindas e vamos nos livrar de tudo isso. Então está vazio, certo? Agora. Mas vamos ter um plano de jogo. Nós basicamente vamos dizer para cada Post, mostre-me esse post direito ou vamos dizer, loop através de cada post e me mostrar esse post, certo? Bem, acredite nisso em um segundo. Mas a maneira como fazemos isso é muito semelhante ao que temos na página de índice. Certo? Isso é o que isso está fazendo é dizer para cada post, me mostre essas coisas. Então vamos fazer a mesma coisa que vamos dizer. Postar que cada um e então, um por enquanto, vamos apenas imprimir as postagens Título. Certo. Então vamos dizer H dois postar esse título. Mas isso quebra. E por que ele quebra? Porque no posto é nulo. Temos que ir para o nosso controlador. Esqueci de fechar essa etiqueta. Temos que ir para o nosso controlador. Isso está nos mostrando esta página e dizer-lhe para ir buscar os posts e armazená-los neste na variável posts. Então, o controlador de páginas, nós poderíamos ver que agora a ação de boas-vindas não faz nada. Mas podemos fazer exatamente o que a ação do índice está fazendo, certo? Está colocando em postagens para postar, então vamos fazer isso. E agora você pode ver que temos o título para cada post. Mas nós realmente queremos, hum nós queremos mostrar tudo certo? E aprendemos mais cedo sobre seco, certo. Não se repita. Basicamente queremos que cada post seja assim, certo? Queremos este título. Queremos o formato simples para o conteúdo e queremos este carimbo de data/hora na parte inferior, mas em um texto menor e em grande. Então, em vez de , você sabe, escrever tudo isso do zero, nós vamos fazer uso de uma visão parcial. E já vimos um para o formulário, certo? Basicamente, você diz renderizar forma e ele, tipo, copia todo esse HTML aqui. Então vamos para a nossa página do show e levaremos tudo aqui. Vou deixar este alerta aqui, mas vamos levar o resto, e eu vou cortá-lo. E eu vou criar um novo arquivo aqui, hum, e salvá-lo. E como é um modelo parcial, nós sempre começamos com um sublinhado, e eu vou chamá-lo de sublinhado post dot html dot grb. Certo, porque este é um modelo mostrando um post, e eu vou bater, salvar e então em nossa tela de boas-vindas, certo? São vista bem-vinda. Vou dizer “render um o Post”. Mas eu não posso apenas dizer render Post. Eu tenho que dizer renderizar postagens de barra E isso é porque ele está em uma pasta diferente, certo? Estamos na vista de boas-vindas e é por aqui. E essa parcial está na pasta de postagem. Queremos mantê-lo lá porque está relacionado. Sabes, Teoh, os nossos postos são um objecto. Então vamos fazer isso. E então atualizamos e recebemos esse erro. E a razão é que, basicamente, temos esse erro de Neil novamente. Right At Post é nulo. Então o que temos que fazer é que Teoh tem que basicamente temos acesso a esse objeto postado , então temos que passar para a parcial. Então o que temos que fazer é que Teoh tem que basicamente temos acesso a esse objeto postado , Então temos que dizer Post é igual a postar em quando atualizamos, nós ainda obtê-lo. Isso é porque agora, em nossa parcial, nós não podemos usar isso em nós temos que usar post regular e nós atualizá-lo. Parece bom. No entanto, agora nossa página do show está quebrada. Não vemos nada. Isso é porque nós temos que fazer a parcial aqui também. Então temos que dizer render post. E neste caso, vamos passar o correio de novo. Mas o nome do posto é na costa aqui, certo? Isso porque no post controller show usa set post, que define no post aqui. Então fazemos isso, e lá vamos nós. O último eso, acho que agora podemos apagar isto completamente, certo? Então, bem-vindos, vamos deixar isso e a última coisa que quero fazer aqui são duas coisas. Primeiro, quero um pouco de espaçamento entre estes postos. Depois que eu renderizar uma postagem em particular, eu vou adicionar algumas linhas e você faz isso com a tag B R,o que significa quebra de linha, e nós vamos adicionar quatro delas. Depois que eu renderizar uma postagem em particular, eu vou adicionar algumas linhas e você faz isso com a tag B R, que significa quebra de linha, Então agora temos um pouco de espaçamento. E finalmente, quero que este título seja um link para esse bloco individual, certo? Isso é para aquele post individual porque, você sabe, é assim que a maioria dos blogueiros trabalha. Então vamos voltar para o nosso post parcial e aqui está o nosso cabeçalho. Certo. Nós vamos agora dizer link para o título que você sabe, o Texas ainda vai ser este título, mas então ligado ao post, e agora é totalmente clicável. Então aí está. Agora desenhamos nossa página inicial. Temos uma página de gerenciamento, podemos ver postagens individuais e os formulários para edição e criá-los parecem realmente bons. Então vamos criar um commit a partir deste borrão de migalhas. Sempre gosto de rever o código que escrevi para ver, sabe, que não deixei nada em nada disso. Sempre gosto de rever o código que escrevi para ver, sabe, E então podemos dizer, estilizado o uso de andaimes pós coloca artesanato e hit commit na próxima lição, vamos adicionar outro tipo de post, que nos permite, uh, postar imagens no blog. Então teremos. Teremos texto, mas também teremos imagens. Te vejo então. 10. Adicione posts de imagem: Eles estão tão na última lição que usamos bootstrap para fazer nosso blawg parecer realmente bom. - Então nós entramos em todo o código do andaime e o modificamos para que ele conforme Teoh - as classes de bootstrap. - E nesta lição, vamos adicionar uma maneira para os usuários postarem imagens. - Então nosso blawg terá imagens, bem como mensagens de texto. - Então, aqui vamos nós. - Vamos para a nossa página do post show. - Certo. Então, postes de barra, na verdade, escolhem um diferente. - Eu não vou escolher um. - Eu escolho este. - E vamos verificá-lo em nosso código e goto app, - views posts e, em seguida, sublinhar post dot html Papai ou estar certo, - Isto é o que estamos usando no modelo show, bem como na nossa tela de boas-vindas onde você - veja todos os posts eso estavam em Underscore Coast e vamos adicionar outro campo ao nosso banco de dados, que basicamente nos diz que tipo de postagem três usuários postou. Os dois tipos serão imagem e texto, o que já temos para entrevistar aqui. O que vamos dizer é, se postar essa imagem que desculpe, se postar esse tipo for igual a imagem. - Então, por agora, vamos apenas tirá-lo. - Vai salvar mostrar a saúde da imagem, - fazer o que já estamos fazendo, - certo, - que é mostrar o conteúdo e formatá-lo usando um formato simples E dizemos fim. - E se atualizarmos, - nós realmente obtemos esse erro e destaca a linha que escrevemos aqui verificando o tipo e - ele diz tipo de método indefinido. Basicamente, não temos nada no banco de dados dizendo que tipo de post é esse Post. - Então vamos criar isso. Então abra seu terminal e vamos criar um novo campo no banco de dados. - Agora, - se você se lembra quando criamos os posts Scaffold, - nós temos uma migração de banco de dados que era basicamente um conjunto de instruções para construir este banco de dados - tabela. Então o que vamos fazer é criar outra migração usando os trilhos, gerar comando de migração, e eu vou apertar Enter e podemos ver como a usamos. Nós basicamente dizemos que os trilhos geram migração, e depois o nome e uma lista de campos. - E vimos isto mais cedo com andaime. - E para cada campo, - nós damos o tipo e não se preocupe com índice por enquanto. Então vamos dizer que os trilhos geram migração e vamos adicionar um campo ao banco ao Post Stable chamado kind. - Então, vamos dizer adicionar tipo às postagens e digitar assim com cada palavra em maiúscula. - Também é conhecido como camelo cased porque isso vai ajudar a gerar algum código para nós. - Digamos que os rials geram migração, adicionam postagens em espécie a postagens, e então vamos especificar o campo que estamos adicionando. Então vamos adicionar um campo chamado Kind, e vai ser do tipo string. - E agora vou tocar em “Enter”. - Temos um novo ficheiro de migração. - Se atualizarmos aqui, - agora recebemos um erro dizendo que a migração está pendente e que nosso aplicativo está congelado. - O que temos que fazer é executar a migração. Mas antes de fazermos isso, vamos dar uma olhada. - Então temos um novo arquivo aqui no DB Migrate. - Chama-se Ad Kind dois posts. - Então o que ele está fazendo é adicionar uma coluna à tabela de postagens. - A coluna é chamada tipo, - e é do tipo string que parece bom para mim. - Então vamos correr. Vai dizer rake Devi migrar e a migração foi executada se atualizarmos aqui, não teremos mais erros. Mas agora queremos ser capazes de criar uma imagem, certo? Ainda vemos o texto porque não é uma postagem de imagem, certo? - Então nossa visão olhou para ele. - Essa é a imagem gentil que não é. - Então faça isso em vez disso. - Então vamos realmente encontrar este post em nosso banco de dados. - E vamos mudar para uma postagem de imagem. - Então abra seu console digitando o conselho de trilhos. - E se você se lembra, você confinou o posto dizendo “Post Dot “encontrar 18. - Certo? Esse é o nosso post, e eu vou dizer que P é igual a poste, não encontrar 18. Então o nosso post é agora P direito tem um i. D. Tem algum conteúdo, e se olharmos para o tipo, é novo. Digamos que o tipo de ponto p é igual a imagem, e isso não é suficiente, certo? - Temos que dizer para salvar e salvá-lo. Atualiza no banco de dados e atualizamos. - Agora diz: “ Mostre a imagem”. - Então vamos fazer algo com a imagem. Vamos voltar para a nossa visão, e primeiro quero mostrar-te o que vamos fazer. Há uma tag HTML chamada imagem e você dá a ela uma fonte, e essa fonte é basicamente a URL de onde a imagem está localizada. Encontrei aqui uma boa imagem de alguns biscoitos de chocolate e vou copiar lá, Earl. - Agora, - Eu só quero ter certeza de que o Earl é um tipo de arquivo de imagem, - e isso é apenas olhando aqui ele tem toe tem dot jp g ou talvez ah, - PNG ou presente para, - você sabe, - uma das imagens tipos. - Basicamente. - Então, se eu fiz isso e isso é apenas um exemplo, - certo, - você pode ver a fonte da imagem nós vamos colocar uma imagem em nossa página, - o que é muito legal. - Mas também podemos usar um método de trilhos. Podemos dizer tag de imagem e depois passar que vocês são todos, e isso fará exatamente a mesma coisa. - Esqueci o sinal de igual, o sinal de igual. Se você não se lembrar imprime o resultado, na verdade, se eu me livrar dele, você pode ver que não vemos nada, então precisamos do sinal de igual aqui. - Então a etiqueta de imagem faz a mesma coisa. Posso até inspecionar o elemento aqui e ver que ele produz esse html, certo? - Diz fonte da imagem e, em seguida, a nossa fonte. - Então é bem legal. Então o que vamos fazer aqui é, se o Post for de boa imagem, então vamos definir seu campo de conteúdo para essas imagens. Vocês são todos, então vamos dizer imagem tag post dot conteúdo e então eu vou apagar isso - atualizar. - Temos uma imagem quebrada. Então o que precisamos fazer em nosso terminal é definir esse conteúdo, certo? Então vamos dizer conteúdo p dot e vamos usar a mesma imagem, esta aqui, certo. - Então, diremos que o conteúdo p dot é igual a isso e salve-o agora ele será atualizado. - Lá está ele. Mas uma coisa que não me agrada é que esta imagem é um pouco larga demais, e é difícil vê-la aqui. Mas se você olhar para ele em nosso fluxo aqui, você pode ver que nosso texto termina aqui. Mas a nossa imagem está a passar por cima, e o que podemos fazer é que podemos, na verdade , enfraquecer dizer isso no Lee, sabe, ser assim tão grande, e a maneira como vamos fazer que está usando alguns CSS muito básico. Geralmente tentei que usássemos bootstrap para tudo. - Mas bootstrap não tem nada que faça isso. - Então, uma maneira de adicionar CSS e realmente a maneira recomendada é entrar em ativos e, em seguida, estilo - folhas e, em seguida, colocar em seu CSS aqui. - Mas vamos fazer algo um pouco mais simples só porque requer menos passos. Vamos colocar o CSS diretamente aqui, e fazemos isso usando os atributos de estilo. - E então você abre uma string e dizemos que a largura da imagem deve ser 100%. - Agora, - quando eu atualizo, - você vê como ele encolheu um pouco e se alinha com este conteúdo - então isso é perfeito. A próxima coisa que vamos fazer é agora, não temos uma maneira de criar uma postagem de imagem do nosso formulário, certo? - Nós só fizemos isso no console, então vamos adicionar outro campo aqui para basicamente escolher o tipo de post que você quer e - nós vamos usar um botão suspenso, - um menu suspenso. - Desculpe-me. Então vamos entrar nessa forma de você, que está na forma de postagens, e basicamente vamos adicionar outro grupo de formulários e vamos adicionar um rótulo, certo? Exceto que essa gravadora vai dizer “gentil” e então aqui, vamos fazer uma entrega, certo? Então vamos nos certificar de que está tudo bem, e parece . Então vamos dar um título, e depois vamos fazer uma lista e depois colocar o conteúdo. - Então, a maneira de criar um menu suspenso com HTML é usando uma tag select. - E eu vou criar um vazio aqui só para que você possa vê-lo. Mas se você notar um padrão, há um jeito de fazer isso. - E o caminho dos trilhos é dizer, - f dot select type. - Você sabe, - nós atualizamos aqui, - nós recebemos um erro. - Por quê? - Porque está à espera de outra discussão. - Não podemos apenas dizer “selecione “o tipo que temos a dizer. - Escolher o tipo de quê? - E vamos selecioná-lo a partir da imagem ou do texto. - Certo? - Então a maneira de fazer isso é dar uma lista e listas em Ruby. - Como eu mencionei antes chegando colchetes. - Também é conhecido como um array, - então vamos dizer que o tipo pode ser teste ou imagem e então nós salvamos e atualizamos -, - e nós temos isso. - Mas não parece tão bom. - Então temos que fazer uma espécie de bootstrap drop down. - Então, se você entrar em ah CSS e, em seguida, formulários e controles suportados e você rolar para baixo, - você pode ver que nós temos selecionar aqui, - e isso é o que eles se parecem em bootstrap. - Então tudo o que temos que fazer é adicionar esta classe é igual a controle de formulário. Então, se voltarmos ao nosso código e dissermos que classe é igual a controle de formulário, salvo e atualizar, veremos que não fez o que pensávamos que iria dilatar. - E isso porque Select tem outro argumento. - Depois das escolhas, - você dá algumas opções e só então você dá as opções HTML. E quando estamos adicionando uma classe, é uma opção HTML. Isso é um pouco confuso, mas basicamente temos que dizer para não fazer nada aqui. - Uh, - no caminho para fazer isso é apenas dizer, - uh, - uh, - é um haxixe vazio, - certo? Assim aqui e agora, quando o atualizamos, parece um formulário de bootstrap. - Então vamos tentar usar este formulário agora. - e vai criar um post de imagem e vai dizer, - Eu tenho outra imagem aqui para um cheesecake. - Copie a URL e dizemos “queijo “e depois fazemos o quê? - Sabe o que dissemos que faríamos, certo? - Vamos colocar o conteúdo aqui e vamos enviá-lo. No entanto, quando olhamos para o correio, não está a fazer o que pensávamos que ia fazer bem. - Não é criar uma etiqueta de imagem e vamos ver porquê. Então, sempre que algo inesperado acontece, a primeira coisa que você deve fazer é sempre olhar para esse registro em seu banco de dados. - Então temos este post com a idéia de 20. - Vamos voltar ao nosso console e verificar. Então vamos dizer que P é igual a postagens ponto Encontrar 20 certo? - Tem um i. - D. - Tem esse título. - Até tem esse conteúdo. Mas quando dizemos bondoso, na verdade é nulo, e pode ser surpreendente que seja nulo, porque o escolhemos desta lista, certo? - Mas se você se lembrar, - quando enviamos o formulário, - ele vai para a nossa ação de criação no controlador de postagens. - Então vamos ver o que está fazendo aqui. Está criando um novo post com os programas de postagem, e é assim que esperamos que os parâmetros sejam tipo de título e conteúdo. No entanto, eu meio que perdi por causa dessa coisa do Post Paramus mais cedo. - Eu disse que era um recurso de segurança de trilhos. - É definido aqui em baixo, - como basicamente, - diz, - nunca confie em parâmetros do Onley assustador da Internet permitir que a lista branca passe, - e a lista branca basicamente significa que é uma lista de parâmetros que nós permitir. E podemos ver aqui esta licença, que está em Lee deixando a nossa forma. - É basicamente pegar o título e o conteúdo e qualquer outro parâmetro como a nossa espécie. - Por exemplo, - está ignorando, - então vamos adicionar tipo a esta lista. A ordem não importa, mas eu só queria ser consistente com o formulário. - E agora, - se usarmos esta forma novamente, - bem, - digamos queijo, - também. - Vamos dizer que é uma imagem e bem ritmo em cheesecake. - U R L Quando criamos, funciona . - Então vamos deletar esse outro post que não funcionou bem com queijo. - E aí está. - Agora temos um blawg que suporta postagens de texto e imagem. - Bastante doce. - A última coisa aqui é criar um commit para obter hub. E vamos rever as nossas mudanças primeiro, nas nossas postagens. Controlador, adicionamos tipo aos parâmetros permitidos, certo? Não estamos confiando nas coisas da Internet assustadora, na forma que adicionamos uma seção para esse tipo, e tem um direito seleto para soltar que tem essas duas opções, e está usando a classe bootstrap na forma que adicionamos uma seção para esse tipo, e tem um direito seleto para soltar que tem essas duas opções, no post show, certo? - Então, quando visualizamos um post agora, verifique o tipo e se for uma imagem, então criamos uma tag de imagem. Caso contrário, nós apenas imprimimos o conteúdo formatado bem, e estes dois últimos são esta é a mudança real em nosso banco de dados. Esqueci-me de mencionar isto, por isso é bom que estejamos a rever quando se executa uma migração. - Muda este ficheiro. - Db barra esquema dot r b. - Ele faz isso assim que você executar a migração, - e este arquivo é basicamente manter o controle de como nosso banco de dados parece para que você possa ver - que nós adicionamos esta linha para o arquivo em. - Além disso, a versão é diferente, e esta versão corresponde à versão na migração, certo? - É um número longo, e é por isso que o carimbam nos trilhos. - Hum, - então isso é tudo o que podemos dizer adicionou suporte para imagens e se comprometeu muito em ver - você na próxima lição. 11. Adicione o de cinas: - Tudo bem. - Ei, - ali. - Nesta lição, - nós vamos adicionar o último pedaço de funcionalidade são blawg. - Vamos adicionar a habilidade aos postes cardíacos para que possam ver que agora temos este botão de coração aqui. E quando você clica nele, acrescenta um coração para que você possa ver que vamos mostrar o número de corações que uma determinada postagem tem. Então, se eu clicar de novo, serão 23, etc. - Sei disso no Tumblr. - Hum, - você sabe, - você pode ver qual usuário recebeu um determinado post ou no Facebook. Você poderia fazer isso também, mas vamos manter bem simples. E nem temos um conceito de usuários, certo? - Então qualquer um pode clicar neste botão e você verá quantos corações ele tem. - Então aqui vamos nós. Estamos de volta ao nosso estado atual da APP, certo? - Sem corações. E para adicionar esta nova funcionalidade, vamos precisar do Teoh. Vamos precisar que o Teoh registre estes corações de alguma forma. Então, para fazer isso, vamos criar uma nova tabela de banco de dados. - Vai ser a mesa dos corações, e vamos precisar de Onley um campo e o campo que precisamos é basicamente precisamos do i - d do Post, certo? Então, se este for o posto número um e eu criarum coração para ele, esse coração um coração para ele, terá um campo no posto e será definido no dedo um. - Então vamos em frente e começar. - Mas nesta lição não foram pode usar um andaime. - Vamos fazer tudo à mão. - E a razão é, - você sabe, - nós já fizemos um andaime. - Sabemos como funcionam. E acho que sabemos o suficiente para ser capaz de fazer um pouco de mawr sem a ajuda de um andaime, porque se você se lembra, gerou muitos códigos para nós. - Então, neste, - nós vamos realmente apenas criar uma migração de banco de dados, - e então nós basicamente vamos seguir os erros que são o aplicativo tem e que tipo de guia - nós para você sabe - o que precisamos fazer a seguir. - Mas ainda precisamos criar uma nova tabela de banco de dados para os corações. - Para isso, precisaremos de uma migração. - Então vamos para o nosso terminal. E se você se lembra, quando você diz que os trilhos geram migração e então vamos nomear a migração de alguma forma vamos dar uma olhada na migração que já temos. - Eso se formos para DP Migrate, - temos esta primeira migração que executamos que criou as postagens e, em seguida, outra que - adicionou o campo tipo. - Então vamos fazer algo muito parecido com este aqui. Então vamos nomear a migração, criar corações, e então teremos um campo para os corações, e esse será o post I d. então vamos dizer post sublinhado i d. Mas desta vez, o tipo não vai ser uma string e não vai ser texto , porque os números são nossos, então vamos usar um novo tipo de tipo chamado inteiro, e agora podemos apertar Enter. Vejo que só criámos um ficheiro, por isso vamos abri-lo. - E aí está, certo. Está criando uma tabela de partes com um campo, e isso parece bom para mim. - Então vamos fazer a migração. - Nós o corremos. - E apenas para verificar, - podemos olhar em nosso arquivo de esquema Devi e agora podemos ver que temos outra tabela aqui para - corações, - e tem o post I d cool. - Então vamos tentar criar um coração em nosso console primeiro. - Então abra seu console vai dizer conselho trilhos. - By the way, - você também pode dizer trilhos ver tão certo, - se temos um post enfraquecer dizer p igual a post que eu sabia e que funciona. - Então devemos ser capazes de dizer que H é igual ao coração que o ponto sabia para criar um coração. - Mas quando fazemos isso, temos esse erro e diz que não foi iniciado coração constante. Basicamente, o que está dizendo é que não temos um modelo de coração. Temos uma tabela de corações na base de dados, mas ainda precisamos de um modelo para interagir com a Ruby. Então o que vamos fazer é criar um novo modelo, e vamos criá-lo do zero. Então, se virmos o nosso modelo, é um arquivo muito simples. - Então eu vou criar um novo arquivo clicando com o botão direito aqui e dizendo novo arquivo e aperte - salvar, - e nós vamos chamá-lo de coração ponto R b e coração ponto R B vai ser muito semelhante a este - modelo pós. - Na verdade, podemos copiá-lo. Mas em vez de postar um coração e agora podemos sair daqui dizendo desistir e depois voltar dizendo Conselho trilhos, agora você diz que h é igual a ponto duro sabia que temos algo muito legal. Então poderíamos dizer “h dot save “e temos um coração, certo? - Uh, - h dot i d h dot pós ideia é nula. Mas, você sabe, não faz sentido ter um coração onde não há ideia de pós, certo? Vamos querer ter certeza de que cada vez que criarmos um coração, ele tem um dado de um post associado a ele. Então, para fazer isso, vamos para o nosso modelo e vamos adicionar algo que é conhecido como validação. - E vamos olhar para os trilhos, - guia Teoh para ler um pouco sobre validações. Basicamente, o que uma validação diz é que você pode definir quando o seu modelo é válido ou não. - Então, - por exemplo, - queremos que todos os corações tenham um post i d. - Então, podemos dizer que podemos dizer ao nosso aplicativo não dedo do pé Vamos salvar um coração a menos que tenha um post i d -. - E a maneira como fazemos isso é usando este método valida e, em seguida, especificando o campo e - dizendo presença verdadeira. - Então vamos em frente e fazer isso. - Bem, - digamos, valida a presença do Post I d. - Verdadeiro. - E agora vamos parar e reiniciar o console ferroviário Mar. - Agora, se eu disser que h é igual a coração ponto conhecido e h ponto salvar ele realmente não salvar direito ele diz - falso. - Também podemos ver se é válido apenas dizendo, - h ponto válido com um ponto de interrogação e podemos ver que é falso. - Mas vamos encontrar um poste. - Temos um post um. Então, se dissermos que o post I d é igual a um ponto h válido agora é verdadeiro, para que possamos salvá-lo. - Mas vamos limpar nossos corações por enquanto. Então diremos que o coração “Destruir Oh “, e apagou os dois. Se dissermos contagem de pontos cardíacos agora, vai ser zero. Então, agora que apoiamos a criação de corações, vamos entrar em nossa visão e ter algo que nos diga quantos corações de Post específicos tem. entrar em nossa visão e ter algo que nos diga quantos corações de Post específicos - Certo? - Então vá para as visualizações de aplicativos. Os postes iam fazer isso diretamente aqui. Estamos basicamente nesta fileira aqui do lado esquerdo. Ainda vai dizer quando foi postado, mas aqui à direita, vai nos dar o número de corações. - Então, - como, - você sabe, - cinco corações, - por exemplo. - Então, se formos para a exibição de posts e depois vamos para mostrar, - lembre-se que ele renderiza este parcial chamado post, - então vamos para postar e, em seguida, aqui em baixo é onde temos o nosso postado no texto. Então a primeira coisa que faremos é tornar este texto pequeno também, então parece o mesmo. - E vamos colocar um espaço reservado aqui por enquanto. - Bem, - dizendo nove corações e você verá que é apenas se alinha diretamente com o postado em - o que não é o que queremos. Então vamos usar aquele ajudante chamado Pull, certo? - Vimos isso mais cedo, e lá vamos nós. - Incrível. Então, agora, em vez deste nove, eu vou ficar em minúsculas, mas em vez deste nove, vamos querer colocar um código rubi, certo? E o que vamos dizer é que temos acesso a este post, então vamos querer dizer “Post Dot Hearts” e isso nos dará o número de postagens, o número de corações. - Lamento que o Post tenha. Então, se a atualizarmos, teremos um erro. - E diz que destaca esta linha e diz “Coração método indefinido para postar”. E isso é porque o nosso modelo ainda não sabe sobre corações, certo? Não sabe nada, e não tem código aqui. Então o que precisamos fazer é dizer que desde que o Hearts guardou o Post, eles são na verdade identidades associadas. - E vamos ver o que isso significa. - Se você for para os guias de trilhos, - há um capítulo inteiro sobre associações de registros ativos - e basicamente ele permite que dois modelos se comuniquem um com o outro. - Então, se você tem algum tipo de estrutura certa no nosso caso, - um post em particular pode, - ele pode ter muitos corações onde você pode ter muitos corações. - Então, há na verdade uma associação aqui chamada tem muitos, - e eles têm este diagrama aqui, - o que é um pouco confuso à primeira vista. Mas, basicamente, neste exemplo, eles têm um cliente que pode ter muitas encomendas. - E já que esse é o caso. - Cada pedido tem um cliente, - eu d associado a ele. - Então isso significa que cada fronteira sabe sobre o cliente. - Mas também cada cliente precisa saber sobre o pedido. Então o que precisamos fazer no nosso modelo é dizer que tem muitos corações. E agora, se nos refrescarmos, é tudo o que precisamos fazer e descemos aqui. - Tem zero corações. Então vamos criar um coração só para ver se funciona, certo? - Vai dizer idade é igual ao coração ponto conhecido e então vamos dizer, - h ponto post i D é igual a um ponto h direito salvar Refrescante. - E lá vamos nós. - Isso é muito legal. - Então, se olharmos para o nosso post, - podemos agora dizer corações p dot e você pode ver que você tem esta pequena lista de volta aqui. Digamos que eu tenha coração, criei outro coração. É igual ao ponto do coração criar com o post I d. - Agora, se eu disser p dot corações Oh, - eu tenho que dizer p dot reload, - e isso é só porque nós maneira que nós adicionamos algo ao banco de dados depois que nós já atribuímos - o post para mijar. Então nós temos esses dois postos esses dois corações agora para que possamos dizer p que corações direita ou p ponto - corações que. - Mas podemos dizer, - H Dot Coast? - Certo? Queremos ser capazes de dizer isso porque queremos ter uma associação bidirecional mais tarde, vamos fazer algo com este post de ponto H. Então a maneira de fazer isso é se entrarmos nos corações, , modelo. - Dizemos que o coração pertence ao hospedeiro. - E se você olhar aqui, - eles explicaram, - pertence a onde ele pertence pertence. - Lá vamos nós. Então, pertence a nós temos o mesmo pedido de cliente, mas pertence a É que você pode dizer fronteira ponto cliente ou, no nosso caso, - coração ponto post e tem muitos é para que você possa ir para o outro lado, certo? - Você pode dizer “Post Dot Hearts”. Então, fazemos isso e devemos agora ser capazes de dizer “h dot host “, exceto que ainda temos esse erro porque precisamos do Teoh. - Atualize nosso console. Basicamente, quando executamos o console, não tínhamos esse quando executamos o console, não tínhamos essecódigo ainda, então ele não sabe sobre ele. código ainda, - Então vamos deixar o nosso conselho dizer desistir e então direito novamente nós podemos definir o coração apenas o último - coração que temos. E agora podemos dizer h dot post e quando fazemos isso, ele retorna o objeto post. - Então nós podemos eles até dizer algo como h dot ambos parar título direita ou h ponto post ponto - conteúdo. Podemos até enlouquecer e dizer, “ h dot host dot partes e podemos dizer algo como o coração parou o primeiro ponto post, etc, etc. - Mas estou indo longe com isso. - Não precisamos saber tudo isso. - Então agora temos corações e posts estão associados uns com os outros, - mas não temos uma maneira de criá-los através do nosso aplicativo diretamente através da nossa interface. - Então vamos em frente e fazer isso. Vamos adicionar um botão que fica aqui, e quando você clicar nesse botão, vai criar um coração para nós. - Então o primeiro passo, - vamos colocar esse botão no lugar, - como um espaço reservado. - Então vamos voltar a esta vista e temos o título aqui. - Vamos colocar um botão ao lado dele para que possamos dizer aqui. - Queremo-lo à direita. Então, vamos dizer que a classe Div é igual a total, certo? - E por enquanto, - vamos apenas dizer botão ou na verdade, - podemos dizer que é um coração e nós o temos. - Mas podemos ver que não se alinha corretamente. - E este é Ah, - isso é muito parecido com o problema que tivemos aqui em nosso valete. - É porque a forma como funciona a pesquisa é meio descolada. - Então a maneira de consertar isso é colocar isso antes. Então, uma vez que fizermos isso, ele se alinha corretamente. - Legal. - Então, como criamos esse objeto do coração? Vamos precisar que o Teoh tenha um formulário que quando clicarmos no botão, ele envia o formulário , e depois ele vai para o nosso controlador. Aquele controlador vai criar o nosso coração para nós, e depois vai nos redirecionar para outro lugar. - Então vamos começar criando um formulário. E talvez não se lembre de como criamoso formulário para postagens aqui porque estava usando um andaime. talvez não se lembre de como criamos - Então vamos segui-lo. - Vamos seguir. - A nova direita. - Quando postagens novas, ele renderiza um formulário que é este parcial aqui. E, uh, eu só vou remover isso por enquanto. - Isto é uma coisa de erro. - Na verdade, sabes que mais? - Na verdade, não precisamos disso. - Não vamos usá-la. - Então é muito mais simples de olhar agora. E basicamente, cria uma tag de formulário html com esta primeira linha dizendo formulário para postagem, e então tem um monte de campos e, finalmente, este é o botão de enviar. cria uma tag de formulário html com esta primeira linha dizendo formulário para postagem, e então tem um monte de campos e, finalmente, Então, este formulário para o posto está recebendo isso no posto do nosso controlador, certo? - Estamos na nova visão do Post, - que usa o controlador de posts e a nova ação - e podemos ver que no Post é postagem nova. - Poderíamos dizer isso e seria exatamente o mesmo código. Então vamos fazer algo muito parecido para o nosso coração. Em vez disso, vamos dizer que a forma para Heart Dot sabia fazer f, o vamos dizer que a forma para Heart Dot sabia fazer f, que significa criar um formulário e, dentro dele, teremos algumas coisas. Mas antes de fazermos isso, vamos atualizar nossa página e ver se funciona e temos um erro aqui. - Diz método indefinido, - corações, - caminho e isto deve parecer um tipo de corações familiares. O caminho é como os corações que você conde, e quando você usa o formulário para ele precisa de uma garota para enviar o formulário. Mas ainda não temos um U R L porque se você olhar para rotas de estupro, não temos nenhuma rota que seja especificamente para corações. - Então vamos criar por aí. - Então vamos para o nosso arquivo de rotas, - que está em rotas de configuração. - O Darby. - E vamos ver isso para postagens. - Usamos este método de recurso. - Recurso é método, - então vamos dizer que Recurso é corações e tem que ser plural. - Nós corremos Krauts taxa novamente e podemos ver que ele criou muitas e muitas rotas aqui. - Isso provavelmente é demais porque o único que realmente nos importa é a única rota para criar um coração. - Então, a maneira que podemos simplificar isso é dizendo, - recurso é corações Onley para criar, então Onley criar um monte de rotas para esta ação - para a ação criar. E agora, se fizermos rotas de rake, podemos ver que só temos uma rota para corações, e isso é tudo o que precisamos. - Você nunca deve ter coisas que seu APP não está usando porque então ele só torna muito - mais difícil de entender. Então podemos ver que o formulário agora vai se submeter a este coração, caminho ou coração, Earl. - E vai para o controlador de corações e criar ação. Então, atualizamos e acho que precisamos de um botão de submissão. Então vamos dizer “f dot submetam “, e vai ter um coração nele. - Mas também precisamos de mais uma coisa que precisamos passar ao longo do i d do Post. Mas neste caso, não vai ser algo que o usuário vai digitar, vai ser predeterminado, certo? - Porque esta visão parcial é renderizada para um post específico ao qual temos acesso. - Então o que vamos fazer é usar o que é conhecido como um campo escondido. Então, se você for para trilhos, campo escondido Mm, este aqui. - Basicamente cria uma entrada, - mas o tipo é chamado de oculto, - então não é mostrado para o usuário, - e precisamos definir o valor certo. Então, no nosso caso, teremos uma entrada escondida para o Posto I D. e seu valor será que os posts i d. - Então, neste caso, será um. - Então a maneira como fazemos isso é dizer f dot hit in field, - a idéia post, - e então a atualização de valor. - Podemos agora olhar para o HTML que foi gerado aqui. - Então, - hum, - você vai para a direita, - clique nele e vá para inspecionar o elemento, - e você pode ver que são formados para a direita. Esse cara criou essa etiqueta de formulário, e está se submetendo a cortes de corações, que é ótimo, porque essa é a nossa rota aqui, certo? - É corações de barra e o método é post, - o que é ótimo porque este método é post, - e então ele tem Você pode ignorar isso. - Isso é apenas algumas coisas que rastreiam anúncios por segurança. Mas você pode ver que ele tem essa entrada, um chamado de coração poste i d e o valor é um. - Certo? - Então, se fôssemos para um posto diferente, - hum , - digamos, - então o valor é diferente, - certo? - São 18, porque este é o poste 18. - Então isso é muito legal. - Então temos isso. - E agora o que nós queremos dio eu vou para o original porque nós já estávamos lá é nós - queremos Teoh. - Queremos clicar neste botão, certo? - E queremos que isso crie um coração. - Então vá em frente e clique nele. - E não surpreende que tenhamos um erro. é Quando o formulárioéenviado, , primeiro lugar, corresponde a esta rota, corresponde a esta rota, mas depois tenta ir para o controlador de corações e a ação de criação. - Mas este erro diz que não existe um controlador cardíaco. Então temos que criar um, e vamos criar um, assim como criamos o modelo à mão. - Então vá para o aplicativo e, em seguida, controladores e nós temos o nosso controlador de postagem. - Temos o controlador de páginas, - hum, - certo. Clique na pasta e diga novo arquivo e salve, e vamos chamá-lo de “Controlador de Corações”, certo? - É um arquivo rubi. - Fazemos isso e vamos dar uma olhada no que ele realmente precisa, certo? - Então podemos copiar esta primeira linha, - e em vez de post controller, - vamos dizer corações controlador e clique final, - e ele precisa de uma ação de criação, - certo, - porque é onde esta rota está indo. Então, vamos dizer que surdos criam. Então, o que faz essa ação? - O que queremos que faça? - Vou fechar alguns destes. - Então é um pouco mais simples. - Ok, então nós temos esses dois controladores, certo? Se olharmos para o nosso controlador, a ação de criação, o que ele faz, não é? Primeiro de tudo, ele cria um novo post dizendo, aquele novo com o Paramus que está recebendo no nosso caso, o Paramus. - Eles vão ser, uh, vai ser o post I d. - Vai ser isto. - Então tenta salvá-lo. - E se salvar, vai para o Post. Caso contrário, vai para outro lugar. - Então, vamos copiar isto. Mas vamos dizer que coração é igual a programas cardíacos, e não temos essa coisa de coração Haram, temos que defini-la. Então vamos copiá-lo daqui, mas também vamos torná-lo privado. E o que este particular significa é que este método só pode ser chamado de dentro deste arquivo, mas isso não é tão importante. Então vamos mudar isso para programas cardíacos, e vamos dizer que o ponto do Haram requer coração e o campo que permitiram é a ideia do post legal. - Então ele cria um novo coração usando os gramas do coração. E se o coração salvar, vamos dizer para ir ao poste. - Certo? Então podemos dizer “coração ponto post “porque nós configuramos isso mais cedo, , em nosso modelo bem no nosso coração, dizemos que pertence à postagem, e isso nos permite fazer isso, e vamos dizer: Sucesso vai dizer que coração esse post Caso contrário, , nós não vamos fazer isso. - Não vamos ao novo formulário porque não temos um. Então, na verdade, vamos dizer redirecionar para a rota que você é? - L e dar um aviso dizendo tinha um problema para criar essa parte. - Legal. - Então vamos experimentá-lo. - Nós atualizamos aqui, - e então nós clicamos no botão e no coração do post e vamos tentar novamente. - Temos três. - Experimente, e temos quatro. - Incrível. Acho que a última coisa que precisamos fazer é deixar isto um pouco mais agradável. - E vamos usar bootstrap. - Então vamos usar um botão de bootstrap. Acho que podemos usar este perigo, porque é vermelho Eso se voltarmos para a vista vamos Teoh sublinhar Coast. Podemos dizer que classe é igual a botão, certo? - E, em seguida, botão perigo, - que é bem aqui. - Então, se nos refrescarmos, ficará bem incrível. - Mas acho que podemos fazer melhor do que isso. Essa maneira de fazer um coração, há um personagem especial para corações. Essa maneira de fazer um coração, Então eu vou pesquisar nosso personagem html do coração e podemos ver que temos esse símbolo do coração. Então eu vou pesquisar nosso personagem html do coração e podemos ver que temos esse símbolo do coração Então vou copiá-lo diretamente dos resultados do Google, e vou me livrar disso, e vou colocá-lo no lugar. - Então lá vai você. Agora podemos fazer qualquer postagem que quisermos, e isso é muito doce. - Então lá vamos nós. - Nós podemos postes cardíacos foram, - você sabe, - praticamente nossa própria versão do Tumblr - e eu estou muito feliz com isso. Então vamos criar o nosso compromisso final e vamos rever tudo, certo? - Então o modelo postal agora sabe sobre seus muitos corações na forma aqui. - Nós nos livramos de toda essa coisa de erro porque nós não estávamos realmente usando de qualquer maneira. - Hum, - no post view nós adicionamos uma seção para os corações que tem um formulário que nós enviamos para o nosso - controlador de corações e também na parte inferior estavam mostrando a contagem cardíaca. - Adicionamos uma nova rota, - mas neste tempo usamos recurso está em Lee para a ação de criação. - Então só criamos um ano oral em vez de muitos deles. de Nosso esquemade banco de dados mudou porque adicionamos outra tabela. - Então nós temos estes, - você sabe, - esta nova tabela e um novo esquema de virgem usando o carimbo de data/hora desta migração. - E temos outros arquivos novos, certo? - Temos o controlador de corações, - que cria um novo coração baseado nos parâmetros que ele recebe e no modelo de corações, - que garante que temos um post I d e também estabelece um pertence à associação. Isto permite-nos fazer o “coração dot post “, o que estamos a fazer aqui no controlador. - Certo? Estamos dizendo para redirecionar as postagens do coração do pé. Isso é tudo. - Podemos criar um commit dizendo partes adicionadas e cometer incrível. Na próxima lição, colocaremos nosso aplicativo on-line usando um serviço chamado Hiroko. - Vejo-te então. 12. Coloque seu aplicativo em online: Ok, bem-vindo de volta. Então, nesta lição, vamos colocar nosso aplicativo on-line usando um serviço chamado Roku. Agora, Roku é uma plataforma de hospedagem Web muito fácil de usar que se integra perfeitamente com trilhos e com git. Então é perfeito para nós. Então vá em frente e inscreva-se para uma conta. Depois de fazer isso, vá em frente e pegue o cinto de ferramentas Hiroko. É um conjunto de ferramentas que facilitam a interação com o Roku três ou a linha de comando para que você possa colocar seu aplicativo on-line ou implantá-lo com apenas um comando. Então vamos baixá-lo e executar o instalador se continue. Continuar instalado para todos os usuários. Instale sua senha. Ei, nós vamos. Está instalando. Tudo feito. Ótimo. Feche isso. E agora vamos abrir o nosso terminal. Então você quer ir para o seu diretório de projetos? Então desmoronar er decadente e apenas certifique-se de que você está no lugar certo. E agora o que queremos fazer é entrar no reboque, Roku através do nosso terminal. Então diga, Roku, faça o login. E agora coloque em suas credenciais o que vai dizer aqui que ele quer gerar uma chave, dizer sim ou por quê? E certifique-se de que você não comete nenhum erro aqui. Depois de ter feito isso, você pode criar um aplicativo no Roku apenas dizendo Roku criar quando você deve ver algo como isso, ele cria um aplicativo com um nome aleatório. Eso temos Salty Mountain 8499 e isso nos mostra um seu l aqui e depois essa coisa, que é o endereço do get. Este vai ser o Conde da nossa aplicação. Mas se você for até ele agora, vai dizer que é um aplicativo novo. Mas não é a nossa aplicação. Então a próxima coisa que precisamos fazer é implantar ou empurrar nosso aplicativo para ela, Roku, mas antes Mas antes de fazer isso, precisamos fazer um pouco de configuração em nosso e assim abrir texto tão chato e abrir este arquivo chamado Arquivo JEM. Então este é o arquivo que lista todas as bibliotecas que estamos usando suas todas as bibliotecas ruby . Então, a primeira biblioteca nós estamos usando seus trilhos e, em seguida, um monte de outras coisas aqui, um, este 1º 1 aqui SQL luz três. Esta é a biblioteca que usamos para interagir com nosso banco de dados em nosso computador, e se chama Sequel Light 3. Esta é a biblioteca que usamos para interagir com nosso banco de dados em nosso computador, E esse é o tipo de banco de dados que estamos usando você pode realmente ver. É uma maneira muito leve de armazenar coisas em um banco de dados. Você pode ver que ele realmente irá armazenar coisas em um arquivo real. Este é o que usamos desenvolvimento, não as sequelas três. Mas de qualquer forma, Hiroko usa um tipo diferente de banco de dados. Então nós fazemos. Ele usa um banco de dados chamado Post GRESs. Mas o que é bom sobre os trilhos é que você pode trocar bancos de dados sem realmente ter que mudar qualquer um de seu código. Tudo o que você tem a fazer é dizer ao seu aplicativo. Teoh, use essa biblioteca em particular. Então, quando estamos desenvolvendo em nosso computador e, em seguida, indo para o host local 3000 que é um comumente conhecido como modo de desenvolvimento ou seu ambiente de desenvolvimento. Então o que nós vamos fazer é dizer para continuar a usar Sequel luz três enquanto estamos em nosso ambiente de desenvolvimento, e a maneira de fazer isso é dizer, desenvolvimento de grupo fazer, e em seguida, em dentistas e, em seguida, terminar, E então seu Roku, que é nosso aplicativo na Internet, é um ambiente chamado produção, então vamos dizer que na produção, use pós GRES em vez disso. E a maneira de fazer isso é Jem P D. P. G. é a jóia rubi ou a biblioteca rubi para interagir com o vestido postado. Esta é realmente toda a configuração que precisamos para dialogar. Mas uma última coisa. Precisamos entrar em nosso terminal e realmente instalar esta biblioteca porque tudo o que fizemos aqui foi tipo de Este é o arquivo que diz o que deveríamos estar instalando, mas ele realmente não instalou. É como a maneira que precisamos executar nossas migrações depois de criá-las. Então vá para o seu terminal e apenas diga pacote instalar, e é realmente isso. Tudo o que precisamos fazer agora é fazer um commit fora disso e, em seguida, empurrar todo o nosso código, incluindo isso. Comprometer-se em Hiroko. Então vá para o hub e você deve ver que temos arquivos aqui. Isso mudou. O 1º 1 é o que mudamos, certo? Nós adicionamos, uh, nós removemos esta linha e nós adicionamos essas linhas e este segundo salto arquivado arquivo de bloqueio. É ah, não é um arquivo que você modificou diretamente, mas quando você executa o pacote, instale-o. Na verdade, faz algumas mudanças aqui. Basicamente, você pode ver que ele adicionou PG em dois lugares, e se você abrir o arquivo, você pode tipo de acompanhar. O que está acontecendo? Mas se não o fizeres,não é grande coisa. Mas se não o fizeres, É basicamente dizer quais bibliotecas você está usando e, em seguida, qualquer coisa que está recuada significa que esta biblioteca é dependente dessas outras bibliotecas. Então esta ação Mailer Library, seja lá o que for, está usando essas duas outras bibliotecas. Então, quando você instala o Action Mailer, ele precisa ir e instalá-los. Mas isso não é tão importante. Podemos criar um commit e enfraquecer, digamos adicionar adicionou pós GRES uh quatro. Harajuku e hit cometer incrível. Então agora o que resta é apenas Teoh para empurrar nosso código para Harajuku, e a maneira como você faz isso é usar um comando get, uh, E não há no momento. Não há como fazer isso através do aplicativo Get Hub, então vamos apenas fazê-lo através do nosso terminal. Mas é um comando muito simples. Você acabou de dizer “empurrar “, o que significa que vai empurrar nosso código para os servidores Hiroko. Roku e, em seguida, mestre e pressione enter. E o que master significa é que significa o branch que você está usando o branch git que você está usando. E a menos que você use outros ramos, o único ramo ou usando nosso ganho é Roku. Há um monte de coisas avançadas que você pode fazer com o Git, mas nós não vamos fazer nada disso neste curso. Então você deve ver que, um, Roku está recebendo nosso empurrão Red. É detectado ou trilhos em, hum e nós vamos ter que esperar alguns minutos, especialmente para esta primeira instalação. Então, aguente firme. E parece que terminou. Uh, basta rolar para cima e certifique-se de que você não vê nenhum erro longo. Você realmente só deve ver esta saída. E agora o nosso aplicativo está online, e nós podemos realmente ir para ele para que você possa copiar este URL, ou você também pode apenas dizer Roku aberto. E isso vai abri-la no seu navegador da Web. E parece que temos um erro, e não é fácil, entendeu? Só a partir desta mensagem, por que recebemos o erro. Mas eu sei porquê. É porque quando você empurra seu casaco para Harajuku. Ele não executa suas migrações para você. Você tem que ir dizer a ele para executá-los. Então, se você se lembra, nós temos essas três migrações. Então nós temos que agora basicamente construir nosso banco de dados no Roku. E a maneira de fazer isso é dizer, Roku executar e, em seguida, o comando que fazemos localmente, certo? Então rake db migrar. Então, se fôssemos executar uma migração localmente, diríamos apenas Rick, Debbie Migrate. Mas quando dizemos Harajuku run rate db migrar, ele vai e faz isso no Roku. Legal. E você pode ver agora que ele executou os três comandos em sua Agu. Digamos que executamos esse comando novamente. Não vai executar nenhuma dessas migrações porque elas já correram. Incrível. Então, agora, se atualizarmos nosso aplicativo lá, nós o temos. Mas como você pode ver, há algo que parece errado. Não há postos em lado nenhum, certo? Parece que estamos começando do zero. E isso porque quando você implanta em um novo ambiente como fizemos, , nós implantamos no ambiente de produção Roku. Se o banco de dados não tem nada nele para começar. Então o que vamos fazer a seguir é escrever algum código que irá preencher nosso aplicativo com alguns dados. Isso também é conhecido como ceding seu banco de dados. Então, se você entrar em texto sublime e você entrar na pasta DB, você tem este arquivo de sementes. Agora, o que este arquivo, uh, é é basicamente um arquivo onde você pode colocar seus dados padrão e então você pode executar este comando rake db seed. E ele vai colocar todos esses dados em seu banco de dados. E este é um arquivo RB. Então estamos colocando Ruby normal. Certo? Então eu limpei nosso conteúdo localmente, então agora temos quatro postagens. Temos uma receita loira. Temos esta imagem de chocolate Goodness, temos abertamente, uh, uh, que é a minha padaria favorita em ah, em Nova York. E finalmente, temos essa receita de cheesecake, então vamos copiar tudo isso em nosso banco de dados. Então vamos começar com a receita de cheesecake. O que vamos dizer aqui é que vamos dizer que o anfitrião um é igual a Coast Dot sabia, e diremos que o título do post um é igual a cheesecake épico. Certo. Posto um. Desculpe, tipo de postagem de um ponto é uma imagem. E, em seguida, costa um ponto conteúdo é igual a este conteúdo. Vá. Vamos salvá-lo. E agora vamos criar algumas partes para isso. Então você pode realmente apenas dizer postar um ponto coração parou, criar. E se quisermos fazê-lo duas vezes, podemos copiar ou colar ou podemos dizer algo como dois pontos vezes dio fazer isso. Então isso vai passar por isso duas vezes, e cada vez vai criar o coração. Então nós temos o nosso cheesecake mais legal, e eu vou rotulá-lo cheesecake próximo onde você pode ir para Heavenly. Então, vamos apenas mostrar que existem muitas maneiras diferentes de criar objetos. E Ruby, vou fazer isto um pouco diferente. Então nós vamos dizer abertamente, e desta vez eu vou dizer post dois igual post dot sabia, mas eu já vou dar-lhe o título. Então eu vou dizer, título amorosamente e eu também vou dar-lhe o tipo que é texto. E então eu vou definir o conteúdo aqui só porque é um pouco mais longo e eu vou bater, salvar, salvar, e então, bem, bem, eu realmente gosto desta padaria. É a minha padaria favorita no Brooklyn. Então, se eles dizem cinco vezes Mas em vez de fazer nós podemos realmente dizer este post para pato corações não criar e ele vai fazer exatamente a mesma coisa. Incrível. Vamos entrar em pedaços de chocolate Goodness, eu vou te mostrar 1/3 caminho. Então, nesses dois, usamos o novo, uh, método. E então batemos em salvar. Mas nós podemos realmente apenas criá-lo de uma só vez usando criar, certo, então podemos dizer post Doc criar e então podemos dizer título seu chip luta. Deus, nós também podemos recuar assim Às vezes é um pouco mais fácil de ler se tivermos muito tempo. Se temos texto longo imagem tão gentil e, em seguida, o conteúdo ainda precisamos adicionar alguns corações para que possamos dizer post três Desculpe, podemos dizer oito pontos vezes Khowst três Que coisas difíceis criar Cool. O último é a nossa receita loira. Então nós voltamos aqui, mas este vai ser um pouco mais complicado porque ele tem muitos e muitos textos, incluindo essas novas linhas sobre essas aspas duplas, que as aspas duplas vão interferir com a maneira como você adiciona Criar uma string e rubi direito porque é também aspas duplas. Poderíamos tentar usar aspas simples, mas eu vou adivinhar Sim, ele tem aspas simples aqui é bem assim que há 1/3 maneira de criar strings e Ruby e isso está usando algo chamado aqui, Doc, e eu explico. Mas primeiro, vamos configurá-lo direito Então vamos dizer post quatro é igual a post dot known e vamos dizer título é este tipo é texto e agora postar conteúdo de quatro pontos para dar-lhe uma string realmente longa. O que você faz é dar esses dois sinais a menos que Thies para tipo de flechas. E então, hum, você só dá o nome. Nomeie esta string. Então vamos dizer conteúdo em letras maiúsculas, não importa qual é o nome. E então, no fundo, vamos dizer conteúdo também, e no meio, vai ser todo o nosso texto, certo? E você pode ver que o texto sublime sabe que é uma string ainda porque é ah, ainda é amarelo direito em todas essas cordas ou amarelo. Então agora podemos pegar em tudo isso, copiá-lo e colá-lo, e ainda temos que salvar este post para a razão certa que usamos o novo método. Então vamos até o fundo, digamos, postar para não salvar, e então podemos adicionar alguns corações. Então vamos adicionar, uh, seis corações. Aqueles quatro corações presos, criá-lo salvo. E vamos criar um commit. Então vamos dizer. Adicionado arquivo de sementes e vamos dizer commit. E agora vamos precisar empurrar nossas coisas de volta para o Roku. Certo. Então o que precisamos fazer é usar o mesmo comando que usamos anteriormente, certo? Seja empurrada para ela. O Roku. Mestre, Toda vez que você cria um commit localmente, você tem que empurrá-lo para o Roku. Legal. Hiroki recebeu nosso compromisso. Se atualizarmos a página, ela ainda não terá nossos dados. Então o que precisamos fazer é executar esse rake db Seed Command no Roku. Então é uma corrida de Hiroko. E então o nome disso comanda uma semente Devi ancinho. Legal. Eu corri. E se atualizarmos a página, teremos todas as nossas coisas. Muito legal. Incrível. Então isso é tudo por esta lição.