Arquivo da categoria: Rails

Is there documentation for the Rails column types?

  • String:
    • Limited to 255 characters (depending on DBMS)
    • Use for short text fields (names, emails, etc)
  • Text:
    • Unlimited length (depending on DBMS)
    • Use for comments, blog posts, etc. General rule of thumb: if it’s captured via textarea, use Text. For input using textfields, use string.
  • Integer:
    • Whole numbers
  • Float:
    • Decimal numbers stored with floating point precision
    • Precision is fixed, which can be problematic for some calculations; generally no good for math operations due to inaccurate rounding.
  • Decimal:
    • Decimal numbers stored with precision that varies according to what is needed by your calculations; use these for math that needs to be accurate
    • See this post for examples and an in-depth explanation on the differences between floats and decimals.
  • Boolean:
    • Use to store true/false attributes (i.e. things that only have two states, like on/off)
  • Binary:
    • Use to store images, movies, and other files in their original, raw format in chunks of data called blobs
  • :primary_key
    • This datatype is a placeholder that Rails translates into whatever primary key datatype your database of choice requires (i.e. serial primary key in postgreSQL). Its use is somewhat complicated and not recommended.
    • Use model and migration constraints (like validates_uniqueness_of and add_index with the :unique => true option) instead to simulate primary key functionality on one of your own fields.
  • Date:
    • Stores only a date (year, month, day)
  • Time:
    • Stores only a time (hours, minutes, seconds)
  • DateTime:
    • Stores both date and time
  • Timestamp
    • Stores both date and time
    • Note: For the purposes of Rails, both Timestamp and DateTime mean the same thing (use either type to store both date and time). For the TL;DR description of why both exist, read the bottom paragraph.

Referência

Share and Enjoy !

0Shares
0 0

Rails – Command Line Rake

  • db:create creates the database for the current env
  • db:create:all creates the databases for all envs
  • db:drop drops the database for the current env
  • db:drop:all drops the databases for all envs
  • db:migrate runs migrations for the current env that have not run yet
  • db:migrate:up runs one specific migration
  • db:migrate:down rolls back one specific migration
  • db:migrate:status shows current migration status
  • db:rollback rolls back the last migration
  • db:forward advances the current schema version to the next one
  • db:seed (only) runs the db/seed.rb file
  • db:schema:load loads the schema into the current env’s database
  • db:schema:dump dumps the current env’s schema (and seems to create the db as well)
  • db:setup runs db:schema:load, db:seed
  • db:reset runs db:drop db:setup
  • db:migrate:redo runs (db:migrate:down db:migrate:up) or (db:rollback db:migrate) depending on the specified migration
  • db:migrate:reset runs db:drop db:create db:migrate

Referência

Share and Enjoy !

0Shares
0 0

Criando um CRUD com Angular 2 + Rails 5

Introdução ?

Os Apps profissionais seguem há algum tempo na direção de ter uma divisão entre o backend (API) e o front end (Cliente Web), recentemente foi lançado a versão 2 do Angular (que tem pouco a ver com a versão 1) e também a versão 5 do Rails (que tem muito a ver com a versão 4 ? ), nesse tutorial eu vou demonstrar como conectar essas duas tecnologias para criar um App incrível \o/.

Nós vamos criar um CRUD de uma pequena aplicação de FAQ, e para fazer isso mais rapidamente nós vamos usar uma ferramenta bem legal que chama Angular-CLI (command line interface), que vai nos permitir gerar o projeto Angular 2, os components e os services facilmente (similar aos generates do Rails).

O que vamos aprender?
  1. Como criar um CRUD em uma aplicação Rails 5
  2. Como criar um CRUD em uma aplicação Angular 2
  3. Como conectar o Rails 5 com o Angular 2
INGREDIENTES
Objetivos

Criar um Pequeno App que nos permita criar questões para um FAQ, com o front end em Angular 2 e o Backend no Rails 5.

Passo a Passo
  • Rails 5
    1. Criar o Projeto Rails Api
    2. Gerar o CRUD
    3. Incluir o CORS
  • Angular 2
    1. Criar o Projeto Angular usando o Angular-CLI
    2. Configurar nosso projeto
    3. Criar nossos components
    4. Criar nosso service
    5. Editar nossas views
    6. Conectar tudo isso ?
Mãos à Obra \o/
Parte 1 – Criando o projeto Rails 5

Primeiro vamos gerar o nosso projeto Rails 5 API que vai ser consumido via JSON pelo projeto Angular 2.

  1. Para começar, rode no seu console o comando para gerar o projeto:

    *a flag –api significa que o rails vai configurar o projeto como uma API pra gente

  2. Agora vamos gerar nosso scaffold, rode:
  3. Rode as migrations:
  4. Agora vamos configurar o CORS para que nosso APP possa receber chamada de outros domínios, primeiro no seu Gemfile adicione:

    *O que é CORS

  5. Rode o bundle, para instalar a Gem:
  6. Agora no arquivo config/application.rb, substitua o conteúdo por:
  7. Para testar, rode o servidor e visite http://localhost:3000/questions
  8. Pronto \o/, nossa aplicação Rails já está pronta. Agora vamos para o Angular 2 ?

 

Pausa para o Merchan do BEM! ?
BOOTCAMP ONE BIT CODE – SUBA DE LEVEL NO MUNDO DO RUBY ON RAILS

Este é o último final de semana para se inscrever no primeiro Bootcamp online do OneBitCode!
Neste curso, nós vamos criar do zero um site similar ao Airbnb usando Rails 5 como Api e Angular 2 como cliente Web.
O curso vai ter vídeo aulas semanais, live de 2 horas por semana, suporte total às dúvidas e um Slack exclusivo para os alunos desenvolverem network.
O curso vai ser ÉPICO, então confere a Landing Page dele e faça parte do grupo de alunos One Bit Code! \o/
Conheça o Bootcamp!

Parte 2 – Criando o App Angular 2

Agora sim começa a parte mais emocionante complicada, vamos criar nosso APP Angular 2 e para fazer isso vamos usar o Angular-CLI.

Dependências

Primeiro, vamos começar com as dependências.

  1. Você vai precisar ter o NPM instalado na sua máquina. Para instalar no Ubuntu:

    Para instalar no Mac:

  2. Agora você precisa instalar o Angular-CLI:
Criação do App

Finalmente, vamos a criação do App.

  1. Para gerar o projeto, rode na pasta desejada (fora do projeto Rails) no console:
  2. Agora vamos ver se tudo funcionou corretamente, dentro do projeto, rode no console:
  3. Acesse no seu browser, http://localhost:9000, deve aparecer uma mensagem dizendo que funcionou ?
  4. Agora vamos gerar nossos components, rode:

    *Os components são o coração do Angular 2, eles são a principal maneira que nós criamos elementos, definimos as views e a lógica

  5. Depois rode:
  6. Agora vamos gerar nosso Modelo de dados, crie uma pasta no caminho “/src/app/questions/” com o nome shared (“/src/app/questions/shared”).
  7. Depois crie um arquivo dentro dessa pasta chamado “question.ts” e coloque o seguinte conteúdo:
  8. Vamos criar nosso Service (ele serve para o Angular 2 conversar com a API), no console rode o comando:
  9. Agora vamos adicionar o router outlet para fazer nossas rotas funcionarem, no nosso arquivo ‘src/app/app.componet.html’ substitua o conteúdo por:
  10. Agora nós vamos criar o nosso arquivo de rotas (que vai gerenciar nossas URLs), no caminho “src/app/” crie o arquivo “app.routing.ts” e preencha ele com o seguinte conteúdo:
    *Note os comentários no código

  11. Agora nós precisamos alterar nosso arquivo ‘src/app/app.module.ts’ para incluir nosso arquivo de rotas e algumas dependências do projeto, seu arquivo deve ficar assim:
    *Note os comentários no código

  12. Agora nós vamos editar nossos components, para começar vamos editar nosso componente de listagem, no arquivo ‘/src/app/questions/questions.component.ts’ substitua o conteúdo por:
    *Note os comentários no código

  13. Pronto, a parte lógica da listagem está ok (exceto pelo service ainda), agora vamos editar a aparência da aplicação, no arquivo ‘/src/app/questions/questions.component.html’ adicione o seguinte html:
  14. Agora vamos para o próximo component, no arquivo /src/app/questions/question-form/question-form.component.ts’ cole o seguinte código para podermos editar e criar questions:
    *Note os comentários no código

  15. Pronto, a parte lógica da edição/criação está ok (exceto pelo service ainda), agora vamos editar a aparência da aplicação, no arquivo ‘/src/app/questions/question-form/question-form.component.html’ adicione o seguinte html:
  16. Excelente, nossos components estão ok, agora vamos configurar nosso service. No arquvio ‘src/app/questions/shared/questions.service.ts’ susbstitua o conteúdo pelo seguinte código:
    *Note os comentários no código

  17. Pronto \o/, agora vamos testar.
  18. Rode no seu console:
  19. Acessando no browser, seu resultado deve ser similar a este:
    captura-de-tela-de-2016-12-10-02-49-37* É claro que não é um Faq muito bonito, mas ele funciona e é suficiente para demonstrar a integração ?
  20. Agora você pode criar novas questões, editá-las e deletá-las \o/, parabéns nós conseguimos!

 

CONCLUSÃO

Pronto, conseguimos fazer o nosso não tão simples CRUD, mas valeu a pena :). É claro que esse é um tutorial introdutório apenas para te dar uma visão geral de como o Angular 2 e o Rails 5 podem se comunicar e também para abrir um pouco a sua mente para a estrutura do Angular 2. Mas tenho certeza que você notou a riqueza dos dois frameworks e as possibilidades ilimitadas que eles trazem se usados juntos ?

Como de costume o Código completo da aplicação está no Github, caso você queria clonar o código, clique aqui para ver a parte do Angular 2 e clique aqui para acessar a parte do Rails 5. Aproveita e me segue lá \o/

Apenas informando novamente que o Bootcamp do OneBitCode está com as inscrições abertas (quase fechando já) e nesse bootcamp nós vamos nos aprofundar muito no Rails 5 e também no Angular 2 (fullstack) através da criação de um clone do Airbnb, então se você ainda não viu a landing page, VEJA CLICANDO AQUI. Vai ser épico, não deixe essa chance passar! \o/

Se você ficou com dúvidas ou tem sugestões de posts para o Blog comenta aí em baixo ou me adiciona no Facebook clicando aqui.

 

Share and Enjoy !

0Shares
0 0