У вас есть отличная проектная идея с ERD и каркасом, готовыми к работе. Вам не терпится погрузиться в Rails и JavaScript… но теперь, когда вы думаете об этом… с чего начать?

Оглавление

  1. "Вступление"
  2. Обзор
  3. Ранние шаги
  4. Настройка вашего Rails API
  5. Настройка внешнего интерфейса JavaScript
  6. "Заключение"
  7. "Хочу больше? Другие ресурсы для ознакомления! »

Введение

У вас есть распорядок, когда вы начинаете новый проект? Лично я всегда держу рядом с собой записную книжку. Не для записи идей, а для того, чтобы пролистать свои заметки (да, я все еще пишу свои заметки от руки ✍🏼) и найти, где я записал, как создать свой проект.

Чтобы быть более эффективным (и избежать лишних сокращений), я решил напечатать свои заметки и оставить их здесь. Это обзор того, как настроить ваш проект специально для серверной части Rails API и внешнего интерфейса JavaScript, но общие шаги по созданию проекта одинаковы.

Для тех, кто похож на меня и нуждается в напоминании или только учится настраивать ваш проект, давайте приступим!

Обзор

По сути, это один проект, но два репозитория; один обрабатывает серверную часть, а другой - интерфейсную часть. На вашем локальном компьютере у вас может быть два файла в одной папке проекта, однако, когда вы отправляете свой код в GitHub, вам нужно будет сделать свои коммиты в соответствующем репо (т.е. изменения в вашем интерфейсе будут перенесены в ваш интерфейс на GitHub) .

Ранние шаги

Вы также можете создать репозиторий GitHub после создания интерфейса Rails API и JavaScript на локальном компьютере. Если вы хотите сделать это таким образом, ознакомьтесь с как добавить существующий репозиторий в GitHub. В противном случае ниже описано создание репозиториев удаленно сначала и , а затем локальное клонирование.

  1. Создайте новую папку проекта на локальном компьютере, где вы хотите разместить свой проект.
  2. Создайте два репозитория на GitHub, один для внешнего интерфейса, а другой для серверной части (чтобы создать новый репозиторий на GitHub, ознакомьтесь с документацией).
  3. Клонируйте репозитории на локальный компьютер в созданную вами папку проекта.

Теперь мы можем приступить к настройке вашего внешнего и внутреннего интерфейса!

Настройка вашего Rails API

Я настроил свою базу данных с помощью Postgres, потому что ее проще развернуть, чем SQLite. Если у вас не установлен Postgres, вы можете скачать его здесь. Но если вы еще не уверены, чего хотите, не беспокойтесь! Вы всегда можете переключиться с SQLite на Postgres позже; ознакомьтесь с статьей Брендена Торнтона, чтобы узнать, как это сделать.

  1. cd в папку, которую вы клонировали для бэкэнда
  2. Создайте новый Rails API с помощью:
rails new <my_app_name> --database=postgresql --api

Примечание: --database = postgresql создает базу данных с помощью Postgres.

3. В вашем Gemfile раскомментируйте:

gem ‘rack-cors’

Бонус: это для ваших исходных данных, но вы также можете настроить gem 'activerecord-reset-pk-sequence', который сбросит идентификатор вашей Active Record. таблица до нуля.

4. В вашем терминале запустите:

bundle install

5. Раскомментируйте следующий код в config / initializers / cors.rb.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

6. Создайте свои модели, миграции, контроллеры и файлы маршрутов с помощью:

rails g resource <model_name> <attribute:datatype>
rails g resource Book title:string pages:integer author:belongs_to

Примечание. Не забудьте добавить свои ассоциации! Вы можете использовать макрос own_to для настройки внешних ключей и ассоциации own_to. Однако это означает, что вам нужно сначала создать на основе has_many; Другими словами, модели, которые являются независимыми / не полагаются на информацию других. Подумайте об этом: вы не можете создать книгу без автора.

Интересный факт: обычно вы также получаете папку просмотров, но из-за того, как вы создали приложение (rails new ‹my_app_name› --database = postgresql --api), оно настраивает генераторы на пропуск папки просмотров.

7. Создайте базу данных Postgres с помощью:

rails db:create

8. Запустите миграции и создайте схему с помощью:

rails db:migrate

9. Укажите нужные маршруты в routes.rb.

Примечание. Вы получите все маршруты RESTful автоматически (в приведенном выше примере они будут выглядеть как ресурсы: книги), но если вы знаете, что они вам не понадобятся, все вы можете самостоятельно написать то, что вам нужно.

10. Создайте начальные данные в вашем db / seed.rb и засейте их с помощью:

rails db:seed

Настройка внешнего интерфейса JavaScript

Вы можете изменить имена файлов и добавить больше файлов / папок (например, если вы хотите разделить свой логин) по мере того, как вы строите свой проект по своему усмотрению. Это всего лишь базовая настройка, чтобы вы начали!

  1. cd в папку, которую вы клонировали для интерфейса
  2. Создайте HTML-файл; вы можете сделать это вручную или в своем терминале с помощью:
touch index.html

3. Создайте файл JavaScript; вы можете сделать это вручную или в своем терминале с помощью:

touch index.js

4. Создайте файл CSS; вы можете сделать это вручную или в своем терминале с помощью:

touch styles.css

5. Свяжите файлы JavaScript и CSS в файле HTML:

<link rel="stylesheet" href="styles.css">
<script defer src="index.js"></script>

Примечание. Отсрочка в нашем теге скрипта такова, что наш файл JavaScript загружается после того, как все остальное на нашей странице было загружено.

Заключение

Вот и все, у вас получилось! Все должно быть в порядке, и теперь вы можете начинать кодирование 🥳

Большое спасибо за чтение и удачи в вашем проекте! Мой последний совет: поскольку ваш сервер Rails (rails s) должен будет работать, пока вы работаете, в вашем терминале должны быть открыты как минимум две вкладки.

Если вы нашли эту статью полезной, ознакомьтесь с моей связанной статьей « Запросы на выборку и действия контроллера: подключение внешнего интерфейса к серверной части ». Следуйте за мной на Medium, чтобы узнать больше!

Хотите еще? Другие ресурсы, которые стоит посетить!

Настройка вашего проекта

📖 https://dev.to/sylwiavargas/recipe-for-rails-backend-1m4i
📖 https://medium.com/@ethanryan/creating-a-new-rails-api-with -a-postgresql-database-488ffce649d9
📖 https://github.com/learn-co-curriculum/rails-js-project-setup
📖 https://github.com / learn-co-curriculum / mod3-project-week-setup-example

Как связать CSS и JavaScript в файле HTML

📖 https://dev.to/pauljwil/linking-to-css-and-javascript-in-an-html-file-306m