Я настолько недавно закончил школу Flatiron School (с 28 сентября 2020 года по 8 марта 2021 года), что даже не уверен, что я еще выпускник. Однако после того, как мой последний обзор проекта был завершен и пройден, я хотел пройти каждую фазу и поговорить о том, что требуется, что будет изучено и что особенно помнить в будущем для будущих студентов.

Для каждой фазы я рассмотрю следующие ключевые моменты:

  • Каким должен быть проект;
  • Основные используемые инструменты;
  • Требования к проекту;
  • Что нужно помнить во время проекта; а также
  • Что нужно иметь в виду для следующего проекта.

Этап 1. Основы программирования

Проект: интерфейс командной строки (CLI), который предоставляет данные из внешнего источника (например, веб-страницы). Создан на Ruby.

Основные инструменты

  • Жемчужина Нокогири.
  • Жемчужина OpenURI.

Требования к проекту

  • Вы должны иметь возможность делать выбор в системе меню в интерфейсе командной строки, чтобы получить больше информации об этом выборе.
  • Используйте хорошие объектно-ориентированные шаблоны проектирования.

Что нужно помнить

Этот проект действительно важен для понимания объектно-ориентированного программирования (ООП) и станет вашим первым опытом использования драгоценных камней для выполнения функций, которых у вас обычно не было бы.

По сути, вы извлекаете данные с веб-страниц, используя гемы Nokogiri и OpenURI в тесном тандеме. Фактически, в этом проекте вы, вероятно, не увидите один драгоценный камень без другого. На самом деле вам не нужно разбираться в тонкостях того или иного гема, но OpenURI, по сути, подготавливает временный файл, содержащий данные с веб-страницы. Nokogiri может преобразовать эти данные в HTML, и на основе вывода Nokogiri вы сможете выбрать фрагменты HTML, которые вы действительно хотите отобразить в своем приложении.

Это большая часть борьбы. После того, как вы проанализировали и сохранили свои данные как экземпляры разных классов, и ваши классы полностью заполнены данными, которые вы хотите отобразить в интерфейсе командной строки, оставшаяся часть будет строить систему меню, которая будет отображать параметры и, в зависимости от пользователя, выделение (скажем, путем ввода числа) отобразит что-то новое. Думайте об этом как о сложной системе операторов if-else и поиска.

Если вы боретесь с какой-либо стадией кода, значит, кто-то там тоже определенно боролся с подобной проблемой и задавал тот же вопрос. Скорее всего, вы можете найти его в Google. Я обнаружил, что хорошей привычкой является создание закладок для всех веб-страниц, которые решили вашу проблему; что-то в этом процессе похоже на установку флажка и, следовательно, с большей вероятностью заставит вас вспомнить, чтобы ошибка не повторялась. Кроме того, если вы снова столкнетесь с той же проблемой и в конечном итоге разочаруетесь в поиске ответа, который у вас был несколько дней назад, он будет в ваших закладках!

О чем думать позже

Скорее всего, вы больше никогда не будете использовать Nokogiri и OpenURI до конца этого курса, и, в любом случае, вам не придется. Однако извлечение данных из внешних источников - важный и полезный навык, поэтому его хорошо иметь в своем арсенале.

С другой стороны, классы в Ruby невероятно важны, и стоит познакомиться с переменными класса и переменными экземпляра. Кроме того, единственная фаза, в которой вообще не используется Ruby, - это фаза 4, поэтому убедитесь, что вы понимаете и запоминаете все, чему вас учат.

!!! Боковое примечание на GitHub

Это хорошее время, чтобы изучить основы создания и фиксации репозитория на GitHub. Часто переходить на GitHub - это привычка, которую лучше усвоить на раннем этапе, как для защиты вашей собственной работы, так и в целом в качестве хорошей практики программирования. Обязательно создайте и зафиксируйте свой первый репозиторий в приоритетном порядке и подумайте после первоначальной фиксации: «Что мне нужно реализовать / достичь дальше»? Как только это будет реализовано, зафиксируйте соответствующее повествование.

Часто повторяющаяся последовательность коммитов на GitHub:

  1. git add .
  2. git commit -m "some message for the commit"
  3. git push

Последовательно это читается простым английским языком как: «подготовьте все изменения в файлах для фиксации и каждому из этих файлов присвойте это сообщение. Затем отправьте эти изменения в мой репозиторий ».

На самом деле я не поощряю это. Это означает, что незначительные изменения в других файлах, которые вы могли изменить в процессе, будь то исправление опечатки или добавление комментария на потом, попадают в большую фиксацию под неуместным повествованием.

Если вы используете Visual Studio Code, лучше всего просмотреть изменения в каждом файле (вы можете сравнить изменения до и после) и определить, что изменилось. Когда вы будете удовлетворены внесенными вами изменениями, добавьте комментарий для файла, щелкнув значок «+» в разделе «Изменения», чтобы подтвердить его, нажмите Ctrl + Enter (или эквивалент для Mac) и проработайте каждый измененный файл. После того, как вы это сделаете, вы можете ввести git push в терминале или, как вам удобнее, нажать.

Этап 2: веб-фреймворки

Проект: система управления контентом (CMS). Создан на Ruby при помощи Синатры.

Основные инструменты

  • Sinatra
  • ActiveRecord
  • HTML
  • bcrypt (необязательно?)

Требования к проекту

  • Используйте структуру модель-представление-контроллер.
  • Используйте ActiveRecord.
  • ≥2 модели.
  • ≥1 has_many отношения, ≥1 belongs_to отношения.
  • Иметь учетные записи пользователей.
  • Проверить уникальность данных для входа в систему.
  • Пользователи должны иметь возможность создавать, читать, обновлять и удалять (CRUD) свои собственные ресурсы, а также не иметь возможности создавать, обновлять и удалять ресурсы других пользователей.
  • Проверяйте неправильные вводимые пользователем данные, чтобы данные не доходили до базы данных.

Что нужно помнить

После этого вы больше не будете использовать Sinatra. С другой стороны, Active Record по-прежнему играет важную роль в фазах 3 и 5, поэтому хорошее понимание имеет решающее значение. Ассоциации Active Record также чрезвычайно важны и могут значительно облегчить вашу жизнь в будущем, поэтому сохраняйте эту страницу в закладках.

Изучая SQL в этом курсе, признайте его важность, но не слишком переживайте из-за этого в этом курсе. Гем ActiveRecord заботится о большом количестве SQL под капотом, позволяя вам сохранять, редактировать, удалять и читать данные из базы данных, не копаясь в реальном коде SQL. Когда вы доберетесь до Rails, вы наверняка увидите, как строки SQL запускаются в фоновом режиме, поэтому определенно сохраняйте признательность за него, даже если вы не занимаетесь кодированием с его помощью.

Убедитесь, что вы хорошо разбираетесь в создании новых пользователей. Я считаю, что шифрование паролей на данном этапе не является обязательным, хотя познакомьтесь с bcrypt и тем, что он может для вас сделать; нетрудно понять, на что он способен и насколько он эффективен при шифровании паролей пользователей или, потенциально, других конфиденциальных данных.

Старайтесь избегать внешней логики, имея дело с логикой, насколько это разумно, в вашем контроллере, а затем отображать ее в вашем представлении, иначе ваши представления могут стать беспорядочными.

Если у вас есть время, сейчас хорошее время немного поиграться с CSS. Стилизация с помощью CSS на самом деле не является обязательным требованием до фазы 5, но если вы хотите универсальности, как разработчика полного стека, вы не хотите продавать себя, пропуская это.

О чем думать позже

В ретроспективе этот этап является очевидным предшественником этапа 3. Хотя Sinatra хорош в отображении представлений и настройке внешнего вида страницы в зависимости от данных, уже сохраненных в базе данных, вы обнаружите, что код становится очень повторяющимся и утомительным по частям. . Практически невозможно сохранить код DRY (Don’t Repeat Yourself), как бы вы ни старались. Однако Ruby on Rails знает об этом и отлично справляется с этой проблемой. Flatiron часто намеренно заставляет вас делать что-то по-старому, прежде чем пробовать новый, улучшенный (хорошо!), Чтобы вы лучше понимали, почему существуют определенные технологии и как эти технологии решают проблемы прошлого.

Фаза 3: Ruby on Rails

Проект: система управления контентом (CMS). Создан с использованием Ruby on Rails.

Основные инструменты

  • Активная запись
  • bcrypt
  • OmniAuth
  • HTML
  • Рельсы (конечно!)

Требования к проекту

  • ≥1 has_many отношения.
  • ≥1 belongs_to отношения.
  • ≥2 has_many :x, through: :y отношений.
  • Используйте разумные подтверждения.
  • ≥1 метод области действия Active Record уровня класса.
  • Аутентификация пользователя (регистрация, вход и т. Д.).
  • Разрешить вход с таких сайтов, как Facebook, Twitter, GitHub и т. Д.
  • Разрешить вложенные ресурсы с использованием URL-адресов RESTful.
  • Показать ошибки проверки.
  • Сохраните код СУХОЙ.

Что нужно помнить

Переход от фазы 2 к фазе 3 важен, и вам напомнят о такой градации при переходе от фазы 4 к фазе 5.

Сразу же при создании приложения вы столкнетесь с огромным количеством файлов - вы еще не видели файловую структуру такого размера. Однако важно отметить, что следующие каталоги - единственные, которые вам действительно когда-либо понадобятся:

  • app/models, app/views и app/controllers;
  • config/routes.rb;
  • Большая часть, если не все, каталога db/; а также
  • Gemfile

Когда я создавал свой проект, я решил временно скрыть (не удалять!) Другие каталоги, чтобы иметь более четкое представление о соответствующих папках и файлах, к которым мне нужно было получить доступ. Скорее всего, наступит время, когда вам нужно будет отобразить эти каталоги, чтобы расширить их или даже добавить еще один файл в один (config/initializers/omniauth.rb может быть одним из них), поэтому будьте уверены, зная, как это сделать, и зная, какие из них уже скрыты.

При внедрении OmniAuth, чтобы разрешить сторонние входы, вы, вероятно, будете много искать в Google, чтобы исправить определенные проблемы, которые у вас есть. Не стесняйтесь задавать вопросы преподавателю или однокурсникам; все знают, что это может быть очень неудобной частью этого проекта.

В ваш Gemfile я бы порекомендовал добавить gem 'pry-rails', чтобы вы могли вставлять binding.pry строк в середину кода, связанного с Rails. Это спасает жизнь, если вы не совсем понимаете, что происходит под капотом на данном этапе вашего приложения, и особенно полезно для проверки параметров.

Постарайтесь хорошо понять переменные экземпляра и то, как они передаются в представление .erb, потому что вас спросят об этом в обзоре.

Изучая маршруты, изучите их досконально и поймите соглашения RESTful как можно лучше. Эти условности снова возникают на этапе 5.

Узнайте о методах области видимости Active Record на уровне класса и подумайте о том, как их использовать на раннем этапе. Они могут быть невероятно полезны при выполнении более эзотерических и необычных SQL-запросов и, однажды написанные, очень просты в использовании снова и снова, сохраняя ваш код СУХИМ.

Как и на этапе 2, старайтесь избегать логики внешнего интерфейса.

О чем думать позже

Это будет последний раз, когда вам придется иметь дело с файлами .erb в этом курсе, и последний раз, когда вы будете работать с Ruby для создания представлений; теперь все это будет обрабатываться с помощью JavaScript, поскольку следующие два проекта будут одностраничными приложениями, а не системой веб-страниц.

С точки зрения чистого Rails, это почти все, что есть на самом деле. Вы можете проявить смекалку и реализовать другие жемчужины, чтобы определенным образом упростить себе жизнь, но Rails разработан с учетом расширения: поскольку ваше приложение может расти в размере, легко добавить к нему еще один маршрут и другое представление, где это было бы более обременительно использовать только Синатру.

Этап 4: JavaScript

Проект: одностраничное приложение (SPA). Создан с использованием JavaScript.

Основные инструменты

  • Рубин на рельсах
  • HTML / CSS

Требования к проекту

  • Фронтенд, состоящий из HTML, CSS и JavaScript;
  • Бэкэнд, содержащий Rails API;
  • JavaScript использует классы для инкапсуляции данных и поведения;
  • ≥1 has_many отношения в бэкэнде;

Что нужно помнить

JavaScript - это совершенно новая сфера деятельности, и хотя он частично напоминает Ruby, он не является Ruby. Вы можете обнаружить, что for циклы не так интуитивно понятны, или часто забываете поставить let или const перед определением переменной - это нормально. Позвольте себе делать ошибки, воспринимайте новые сообщения об ошибках, которые вы получаете, используйте Google, если вы столкнулись со странной ошибкой.

Это будет ваш первый раз, когда вы будете писать HTML вне файла .erb, и вместо того, чтобы перенаправлять пользователя на новую страницу при нажатии на ссылку, фактически запускает динамический повторный рендеринг страницы. Прежде чем писать какой-либо код, рекомендуется определить, как вы хотите, чтобы ваше приложение выглядело, как вы хотите, чтобы каждая кнопка, форма, ссылка выполняла на самом деле и т. Д.

Сам по себе JavaScript в значительной степени полагается на слушателей событий для внесения изменений в объектную модель документа (DOM) - другими словами, если вы нажмете кнопку или наведете курсор мыши на элемент на странице, JavaScript будет прослушивать это и один раз он слышит это изменение, он выполняет функцию.

Помните, что формат прослушивателя событий соответствует следующему: element.addEventListener(event, function() {...}). Для выбора элемента обычно требуется найти класс или идентификатор HTML, поэтому убедитесь, что вы принимаете правильные решения, когда дело доходит до выбора имени или идентификатора класса. Помните, что HTML-идентификатор уникален для элемента, тогда как имена классов можно использовать в любом количестве элементов.

При настройке бэкэнда Rails рекомендуется запустить:

rails new application-name-backend --api --database=postgresql

Это гарантирует, что ненужный беспорядок в обычном приложении Rails не будет мешать тому, что вы хотите: хранить и предоставлять данные. Кроме того, установка базы данных PostgreSQL - хорошая идея, если вы когда-нибудь захотите развернуть свое приложение в Интернете. См. Мою статью Как настроить PostgreSQL на WSL, если вы работаете на машине с Windows.

Обратите внимание, что по сравнению с этапом 3 требования не такие исчерпывающие. Это означает, что у вас больше возможностей выбрать, каким именно должен быть ваш проект, если вы удовлетворяете этим другим требованиям. Фаза 5 в некотором смысле даже более открыта.

Хорошо разбирайтесь в Fetch API. Это играет важную роль в Фазе 5 и также является ее требованием. Кроме того, как инженеру-программисту вам необходимо понимать Cross Origin Resource Sharing (CORS), и это может стать настоящей головной болью, если вы его неправильно поймете.

JSON довольно интуитивно понятен и очевиден, если вы уже разбирались в хэшах в Ruby, но убедитесь, что вы держите это в курсе на этом этапе до конца.

Узнайте, что означают синхронный и асинхронный в контексте JavaScript. Это очень важно как на этом этапе, так и на следующем.

Если вы замечаете, что ваш код становится беспорядочным и загроможденным; хороший. Это проблема, для решения которой был разработан React. Flatiron School знала это с самого начала и готовит вас к тому, что React может вам предложить и что Redux может улучшить.

О чем думать позже

То, что вы здесь узнали, - это более или менее степень того, что вам нужно знать о ванильном JavaScript. После этого вы не будете использовать addEventListener(), getElementById() или какие-либо функции, которые взаимодействуют с DOM таким образом. React и Redux - это совершенно разные игры с мячом.

Будьте внимательны с ванильным JavaScript и убедитесь, что вы можете удобно реализовать такие вещи, как for циклы и итерации, а также методы массивов и строк. Скорее всего, они вам понадобятся на следующем этапе.

Этап 5: интерфейсные фреймворки

Проект: одностраничное приложение (SPA). Создан с помощью React / Redux.

Основные инструменты

  • Реагировать
  • Redux
  • Ruby on Rails (особенно если вы создаете свой собственный серверный API)
  • HTML / CSS

Требования к проекту

  • Напишите как можно больше ES6.
  • ≥1 HTML-страница.
  • ≥5 компонентов без состояния.
  • ≥3 маршрута.
  • Используйте react-router и маршрутизацию RESTful.
  • Используйте промежуточное ПО Redux для чтения / записи состояния.
  • Используйте redux-thunk при отправке / получении данных.
  • Используйте Fetch API для GET и POST данных из API.
  • Немного CSS.

Что нужно помнить

Поскольку это заключительный этап, так называемая «проектная неделя» на самом деле больше недели. После этого больше не будет уроков, так что вы не отстанете. Если вам нужно две или даже три недели для завершения вашего проекта, вы можете взять его. Однако я советую зарезервировать обзор проекта как можно раньше, чтобы получить слот, поскольку они могут быть неуловимыми.

Это единственный проект, который явно требует CSS; проекты для Фаз 2–4 просто рекомендуют это. Опять же, как и в Этапе 4, начертите план проекта на бумаге или доске перед тем, как начать.

Проект, собственно говоря, СПА. Не ломайте себе голову, пытаясь создать более одной HTML-страницы, но вам также необязательно избегать этого.

Требование «как минимум пяти компонентов без состояния» может показаться устрашающим, но вы удивитесь, насколько быстро вы будете создавать компоненты. Компоненты в React часто используются для целей пользовательского интерфейса, которые, если принять во внимание, возможно, панель навигации, основную область, страницу «О нас», форму входа и форму регистрации, у вас уже есть пять. Некоторые из них могут не быть полностью апатридами, но добавить что-то сверх этого довольно просто. Перед созданием компонента попытайтесь выяснить, должен ли он быть с сохранением состояния или без него.

Тщательно разбирайтесь в Redux. На приведенной ниже диаграмме показан поток данных через систему Redux, создание Action (содержащее слово, напоминающее то, что должно быть сделано с состоянием, потенциально с полезной нагрузкой) и перенос его в Reducer, который вернет объект JavaScript, похожий на state, побуждая метод createStore() Redux сгенерировать новое состояние и, следовательно, обновить компоненты, подключенные к этому состоянию. Это очень простой обзор, так что потратьте на него время, пока не освоитесь.

Что касается Redux, вы встретите mapStateToProps и mapDispatchToProps. Не просто запоминайте их, но также поймите, почему они важны.

Когда вы проходите процесс изменения состояния Redux / React, всегда помните, что вы никогда не изменяете состояние напрямую и что есть пути, которые вы должны пройти, чтобы сделать это. Есть причина, по которой вы не должны / не можете напрямую изменять состояние, и вы должны узнать почему.

При работе над проектом легко забыть о React и о том, как он сам по себе обрабатывает свойства и состояние; но не забывай. Важно понимать, почему React не справляется с управлением данными и почему Redux является превосходным инструментом, но вы никогда не должны забывать, почему Redux существует, или, фактически, как компонент React также может иногда очень хорошо обрабатывать изменения состояния внутри.

После того, как вы напишете код для redux-thunk, вам не придется много об этом думать. Все fetch() запросы, которые вы делаете, являются асинхронными, но убедитесь, что вы понимаете порядок, в котором события происходят в асинхронных запросах.

О чем думать позже

Все, что вы узнали на этапах 1–5. Если все пойдет хорошо, вы закончите учебу и будете на пути к реализации алгоритмов с нуля с помощью Ruby и JavaScript для подготовки к техническим собеседованиям. Вы можете даже выучить другие языки. Но постарайтесь оставаться в курсе того, что вы узнали, и всегда быть уверенным, рассказывая о своих проектах и ​​о том, что они демонстрируют - никогда не угадаешь, когда интервьюер захочет узнать об этом или, если тебе действительно повезет, кто-то захочет. купите ваше приложение. Ваш проект Phase 5 - это ваш шедевр, ваш главный проект Flatiron School, и поэтому он должен быть самым ярким; не скупитесь на детали.