Кратчайшее руководство по процедуре обучения веб-программированию

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

Что вы можете сделать, прочитав эту статью

You will acquire the skills to deliver projects with a unit price of $ 5,000 for free on your own.

Прочитав эту статью, вы сможете создать сайт. Веб-сайт, который необходимо заполнить в этой статье, представляет собой рыночную цену, такую ​​​​как «30-дневная цена срока доставки 5000 долларов США».

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

Преимущества прочтения этой статьи

You can learn programming even if you are completely inexperienced!

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

If you get stuck, you can always consult with the author

В этом самая большая сила данного учебного материала. Что отличает его от других материалов по программированию и онлайн-школ, так это то, что вы лично читаете статьи, написанные лично мной. Благодаря индивидуальному общению вы можете безопасно приобретать навыки программирования в своем собственном темпе. Если вы можете получить DM или ответить на Twitter, мы можем ответить в любое время.

https://twitter.com/soeno_onseo

Learn for free

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

Веб-сайт, который можно создать с помощью этой статьи

Твиттер. Ниже приведено завершенное изображение.

Код завершения (репозиторий github)

Купить компьютер

Тогда я немедленно начну программировать. Если на момент прочтения этой статьи есть «человек, у которого нет персонального компьютера», купите, пожалуйста, персональный компьютер. Все, что вам нужно, это персональный компьютер, и любой персональный компьютер подойдет. Если сомневаетесь, купите 13-дюймовый компьютер MacBook Pro.

Давайте создадим среду

Для программирования требуется «среда разработки». Работа по подготовке к этому называется «строительство среды». Если вы купите новый смартфон, вы загрузите такие приложения, как LINE, Twitter и YouTube, из магазина. Это похоже на загрузку приложения для программирования таким же образом. Те, которые будут загружены здесь, имеют следующие имена.

• Рубин
• Рельсы
• MySQL
• VSCode

Как видите, это все загадочные слова, но запоминать их не обязательно. Когда вы учились пользоваться LINE, вы не проверяли роли и функции LINE одну за другой заранее. С тем же чувством, если вы используете его, вы, естественно, вспомните «что это за приложение», так что давайте работать, не беспокоясь об этом.
Даже в этом случае вы можете подумать, что слово, которое вы не знаете, выходит в перед вами, и вы уже думаете «Это как-то больно…», но подумайте об этом на примере приложения для смартфона. Трудно ли увидеть следующий список слов?

• ЛИНИЯ
• Твиттер
• YouTube
• Фейсбук

Это совсем не больно. Впрочем, это тоже точно такой же «список загадочных слов», как и список выше. Такие слова, как LINE и Twitter, могут быть трудноразличимы для пожилой женщины, которая не разбирается в смартфонах. При изучении программирования вы будете сталкиваться с этим «списком загадочных слов» снова и снова. Многие неопытные программисты, как правило, разочаровываются при встрече с неизвестным, поскольку люди инстинктивно рассматривают неизвестное как «объект страха и неприятия». Однако все «неизвестные слова» превращаются в безобидные слова, такие как «LINE» и «Twitter», когда к ним неоднократно прикасаются. Поэтому я хотел бы, чтобы вы работали над учебой с уверенностью. Теперь давайте приступим к созданию окружения. Во-первых, проверьте ОС вашего компьютера.

Проверим ОС персонального компьютера

Во-первых, давайте поговорим о том, что такое ОС. ОС означает «Операционная система». В переводе на японский это становится «работающим механизмом». Фактически сам персональный компьютер также управляется программой. Все обычные операции, такие как появление экрана персонального компьютера при нажатии кнопки питания, также запрограммированы. Механизм, который их активирует, — ОС. Теперь давайте проверим, какая ОС у вашего персонального компьютера. Как правило, ОС, установленная на вашем компьютере с самого начала, — это Windows или Mac. Взгляните в нижний левый угол экрана вашего компьютера. В случае с Windows есть кнопка с отметкой в ​​виде квадратного флажка, разделенного на четыре части. Если этой кнопки нет, посмотрите в верхний левый угол экрана. Если вы видите кнопку с изображением яблока, ваш компьютер — Mac. С этого момента в учебной программе содержание построения среды будет меняться в зависимости от того, Windows это или Mac, поэтому обязательно проверьте здесь ОС вашего персонального компьютера.

Создание среды Mac

* Если ОС Windows, пропустите это.

Знакомство с инструментами командной строки

Сначала установите на свой компьютер приложение под названием «Инструменты командной строки». Инструменты командной строки — это приложение для вставки приложений. Когда вы устанавливаете приложение на свой смартфон, вы используете App Store для iPhone и Google Play для Android. А для программирования мы используем инструменты командной строки. Теперь приступим. Сначала запустите приложение под названием «Терминал». Нажмите ⌘command + пробел на клавиатуре одновременно. Затем вы увидите поле ввода, подобное изображенному на изображении ниже.

Затем введите «терминал» в это поле ввода и нажмите Enter.

Затем появится следующий экран. Это терминал.

Как программист!!!

What is a terminal?

Это тот черный экран, с которым играет гениальный хакер в фильме. Вводя в терминал различные коды, вы сможете поиграться с функциями вашего компьютера и получить пароль для запуска ракет. Другими словами, терминал — это приложение для взлома вашего компьютера. С сегодняшнего дня вы хакер и по имени, и по факту! (Серьезно) Тогда немедленно взламывайте! !! Я хотел бы пойти, но есть только один момент, который нужно проверить заранее. Это версия ОС. Вы уже объяснили, что такое ОС. ОС представляла собой программу, запускающую персональный компьютер, но есть версия, которая является программой. В зависимости от версии ОС выполняемая работа будет немного меняться, поэтому сначала проверим версию. Нажмите значок яблока в левом верхнем углу экрана компьютера и выберите «Об этом Mac». Затем вы должны увидеть Catalina или Mojave после символов macOS на экране ниже.

В случае с Catalina будет отображаться показанный выше экран. Теперь команды, которые должны выполняться на Catalina и Mojave, различаются. Если вы вызвали Каталину, сделайте следующее:

Catalina

chsh -s"bin/zsh
xcode-select --install

Если вы вызвали Мохаве, сделайте следующее:

Mojave

xcode-select --install

Когда вы запустите команду, вы увидите экран с надписью «Чтобы запустить команду xcode-select, инструменты разработчика командной строки…». Итак, нажимаем «Установить» и «Согласен» по порядку. Дождитесь завершения установки, затем нажмите «Готово».

Введение доморощенного

Далее я установлю кое-что под названием Homebrew.
Homebrew — это приложение, используемое для установки/удаления пакетов. Пакет — это сам язык программирования или его файл конфигурации.
Это приложение, которое можно использовать, установив приложение под названием «Инструменты командной строки», представленное ранее. Это также «приложение для приложений», так в чем же разница с инструментами командной строки? Я думаю, вы это почувствуете. В предыдущей главе мы объяснили инструменты командной строки в «абстрактной аналогии», такой как App Store, чтобы углубить понимание, но здесь мы изменим направление и объясним на «суперконкретном примере». И инструменты командной строки, и Homebrew предназначены для «включения команд». Другими словами, если вы понимаете, чем отличаются «команды, которые можно использовать» между двумя концепциями, разница становится очевидной. Хорошо думать о «неизвестной концепции», с которой вы сталкиваетесь при обучении программированию, как об абстрактной концепции, но если вы будете помнить об этих конкретных моментах, вы углубите свое понимание. Теперь давайте посмотрим на разницу между командами. Во-первых, команды, которые будут доступны в инструментах командной строки:

xcode-select --install

Далее команды, которые будут доступны в Homebrew, следующие.

brew install rbenv
brew install readline

Подводя итог истории на данный момент, «Инструменты командной строки — это приложение для получения самого приложения, и вы можете использовать такие команды, как xcode-select-install», «Homebrew — для получения частей приложения. Если вы можете объяснить, что сможете использовать такие команды, как brew install rbenv в своем приложении, вы можете сказать, что понимаете.
Пока я объяснял, но Инструменты командной строки и Homebrew редко появляются в будущем, так что вам не нужно помнить их. Однако, столкнувшись с «неизвестной концепцией», с которой вы столкнетесь в будущем при обучении программированию, пожалуйста, не нарушайте это «отношение к пониманию». Все причины разочарования новичков сводятся к «заброшенному пониманию».
Это грустная история, но 90 % людей недовольны даже теми учебными материалами, которые помечены как «учебные материалы, которые не вызывают разочарования». Конечно, я изо всех сил пишу эту книгу, чтобы избежать фрустрации, но не я, а читатель, на самом деле решает не фрустрировать.

Installation method

Во-первых, давайте погуглим с «Homebrew». Появится результат поиска «пакет для macOS (или Linux)…-Homebrew», так что получите к нему доступ. Затем отобразится следующий экран. Скопируйте строку символов, например «bin/bash…», чуть ниже слова «Install».

Затем сделайте это в терминале. Однако перед выполнением выполните команду cd. Эта команда cd является аббревиатурой от «change directory», что буквально переводится как «изменить каталог». Каталог — это «папка».

cd
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

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

brew update
sudo chown -R `whoami`:admin"usr/local/bin

Первая строка обновляет Homebrew до последней версии, а вторая строка изменяет разрешения Homebrew. Я опущу подробные объяснения, поэтому, если вам интересно, обратитесь к учителю Google. На этом установка Homebrew завершена! Если вам это надоело, сделайте перерыв за чашечкой кофе. Создание окружения не составляет большого труда. Все хотят играть с заказом Fate Gundo, как только покупают новый смартфон, поэтому я не особо воодушевляюсь во время установки. Это интересно только после начала игры. В этой статье игра начинается с «Давайте разметимся».

Знакомство с Ruby и Ruby on Rails

Установите язык программирования Ruby и Ruby on Rails на свой компьютер.

What is Ruby

Язык программирования. Язык программирования подобен японскому или английскому языку в мире персональных компьютеров. Существуют разные языки, но на этот раз я буду использовать Ruby. Чтение рубиновое. Это красивая драгоценность, которая светится красным. Он самый твердый после алмаза. Кажется, что рубины в реальном мире используются для осей роскошных часов, но рубин в мире программирования является более важным материалом и так же распространен, как кипарис.

What is Ruby on Rails?

Ранее я упоминал, что Рубин — это кипарис, но кипарис часто используется в качестве дерева при строительстве дома. Программирование похоже на строительство дома на пустом месте, поэтому построить первый скелет может быть довольно сложно. Вот тут-то и появляется Ruby on Rails. Это то, что называется фреймворком, но в основном это фреймворк дома. Поскольку он длинный, я буду сокращать его до Rails. Rails делает это очень простым, потому что вы можете создать «дом», называемый веб-сайтом, из фреймворка, а не из основ. Работа по установке проста, потому что вам нужно только ввести команду. Выполняемая команда немного отличается в зависимости от ОС, поэтому перед ее выполнением проверьте свою версию macOS.

Catalina

brew install rbenv ruby-build
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc
brew install readline
brew link readline --force
RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
rbenv install 2.5.1
rbenv global 2.5.1
rbenv rehash
gem install bundler
gem install rails --version='5.2.3'
rbenv rehash
brew install nodejs

Mojave

brew install rbenv ruby-build
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
brew install readline
brew link readline --force
RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
rbenv install 2.5.1
rbenv global 2.5.1
rbenv rehash
gem install bundler
gem install rails --version='5.2.3'
rbenv rehash

Приведенная выше команда установила на ваш компьютер «Ruby 2.5.1» и «Rails 5.2.3». Номер сзади называется «версия», и чем больше этот номер, тем он новее.

Введение MySQL

Затем установите на свой компьютер что-то под названием MySQL.

What is MySQL

Это один из механизмов управления базой данных. Для начинающих может быть нормально запомнить его как «саму базу данных».

What is a database?

Это место для сохранения данных. Вы можете искать или перезаписывать сохраненные здесь данные позже. Когда вы пишете в Твиттере, персонажи и изображения, которые вы разместили в Твиттере, останутся в Твиттере, пока вы не удалите твит. Это может показаться очевидным, но это правда, потому что в Твиттере есть место для хранения данных, называемое «базой данных». нужны данные. Если вы объедините это с «местом для сохранения самой программы веб-сайта», это будет проблематично по-разному, поэтому я буду использовать механизм, называемый «базой данных», такой как MySQL, который я буду использовать на этот раз. Сама программа на сайте и место хранения размещенных там данных разделены.

Let’s install MySQL

Давайте установим его сейчас. Выполните следующую команду в терминале. Команда выполнения различается в зависимости от версии ОС, поэтому выполняйте ту, которая соответствует вашей ОС.

Catalina

brew install [email protected]
mkdir ~/Library/LaunchAgents 
ln -sfv"usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist 
echo 'export PATH="/usr/local/opt/[email protected]/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Mojave

brew install [email protected]
mkdir ~/Library/LaunchAgents 
ln -sfv"usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist 
echo 'export PATH="/usr/local/opt/[email protected]/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
Let’s set a MySQL password

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

mysql -u root

Затем замените часть PASSWORD следующей команды на пароль, который вы установили сами, и выполните его.

update mysql.user set password=password('PASSWORD') where user = 'root';

Теперь, когда пароль установлен, введите команду «Применить изменение пароля».

flush privileges;

Наконец, давайте остановим MySQL с помощью следующей команды.

exit

На этом настройка MySQL завершена!

Знакомство с кодом VS

Затем поместите что-то под названием VS Code на свой компьютер.

What is VS Code

Тип редактора.

What is Editor

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

Редактор делает код таким красочным и очень помогает при написании кода. Большое количество отображаемых здесь символов — это те, которые вы будете писать сразу, поэтому, пожалуйста, ждите!

Let’s introduce VS Code

Во-первых, это обычный поиск Google. Найдите VSCode и щелкните первый кандидат для поиска Visual Studio Code-Code Editor | Майкрософт Азур.

Отобразится следующий сайт. Нажмите Загрузить сейчас.

Далее появится экран выбора ОС, поэтому нажмите на свой Mac.

Файл с именем VS Code-darwin… zip будет загружен в левом нижнем углу экрана, поэтому щелкните его, как только загрузка будет завершена.

Затем появится следующий экран, поэтому давайте перетащим код Visual Studio в приложение.

Далее, давайте на самом деле запустим VS Code. Чтобы запустить VS Code, вызовите поиск Spotlight с помощью ⌘command + пробел, введите vs и нажмите Enter, чтобы запустить его.

Теперь вы установили VS Code на свой Mac!

Let's make initial settings

Далее сделайте первоначальные настройки для VS Code.

Highlight Ruby typos

Программирование - это немедленная ошибка с единственной опечаткой. Поэтому добавьте функцию проверки опечаток заранее. Теперь найдите искомое слово «ruby» и нажмите «Установить» в правом нижнем углу первого результата поиска.

Automatic code save

VS Code автоматически не сохраняет созданный код в стандартном состоянии. Я стер код, который писал 2 часа! Давайте сделаем эту настройку, чтобы предотвратить такую ​​​​ситуацию. Когда вы нажмете (1) кнопку шестеренки в левом нижнем углу экрана и (2) настройки, вы увидите элемент под названием «Часто используемые элементы» в правой части экрана, а под ним находится элемент под названием «Файлы»: Автосохранение. (3) В раскрывающемся списке указано «выключено», поэтому щелкните его, чтобы изменить на (4) onFocusChange.

На этом создание окружения завершено! Далее мы, наконец, приступим к «кодированию»!

Конструирование среды Windows

* Если ваша ОС — Mac, пропустите этот учебный план.

Введение MySQL

Прежде всего, я поставлю на свой компьютер что-то под названием MySQL.

What is MySQL

Это своего рода база данных. База данных. Слово «данные» имеет широкий спектр значений, но в этом обучении веб-программированию оно относится к «информации о твитах, информации о профилях пользователей и т. д. в Твиттере». Поскольку это «база» этого, «база данных» — это «место, где хранится много информации о твитах».

В программировании есть два основных типа мест хранения данных. Один находится «внутри приложения», а другой — «вне приложения». База данных в основном относится к «вне приложения». Но почему информация о твитах Twitter должна храниться вне приложения? В заключение, это слишком много, чтобы поместиться в приложении. Кроме того, я должен поделиться этим. Если твит находится на смартфоне каждого пользователя, это будет проблематично, когда другие люди попытаются его увидеть, поэтому поместите его в общее пространство, называемое базой данных. С таким чувством веб-сайт, который я собираюсь создать, также нуждается в базе данных, поэтому я представлю базу данных с именем MySQL.

Let's introduce MySQL

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

Когда вы заходите на официальный сайт, нажмите на ярлык «Скачать».

Когда вы окажетесь на странице загрузки, прокрутите немного вниз и нажмите «Загрузки сообщества MySQL (GPL)».

Экран будет называться «Загрузки сообщества MySQL», поэтому нажмите «Установщик MySQL для Windows».

Затем нажмите Ищете предыдущие версии GA?.

На экране появится установщик MySQL 5.7.31, поэтому щелкните нижнюю часть двух загрузок рядом.

На экране появится надпись «Войти сейчас» или «Зарегистрируйтесь для получения бесплатной учетной записи». Нажмите Нет, спасибо, только моя загрузка.

Начнется загрузка файла «mysql-installer-co … msi», так что дождитесь его завершения. Нажмите, чтобы запустить программу установки, когда вы закончите. После запуска установщика, если появится окно «Вы хотите разрешить этому приложению вносить изменения на вашем устройстве?» Появляется, выберите Да для всех, чтобы продолжить. Если появится сообщение «Следующие приложения…», вы можете продолжить с OK. Если программа установки успешно запущена, появится экран «Выбор типа установки». Нажмите "Далее.

Появится экран под названием «Проверить требования», поэтому нажмите «Выполнить».

Появится экран с названием Microsoft Visual C++ 2015–2019 Redistributable (x64). Установите флажок Я принимаю условия лицензии и условия использования и нажмите Установить. Нажмите «Закрыть», когда увидите, что установка завершена.

Вы снова вернетесь к экрану «Проверить требования», поэтому нажмите «Далее».

Если вы видите, что одно или несколько требований к продукту не удовлетворены, нажмите Да, чтобы продолжить.

Экран будет называться «Установка», поэтому нажмите «Выполнить».

Когда все будет завершено, можно нажать «Далее», поэтому нажмите его. Появится экран под названием «Конфигурация продукта», поэтому нажмите «Далее».

Появится экран под названием «Конфигурация продукта». Нажмите "Далее.

На экране под названием «Высокая доступность» также будет показано «Далее».

Тип и сеть также находятся рядом.

Экран будет называться Account and Roles, поэтому введите любой пароль в поле MySQL Root Password. Введите тот же пароль еще раз в поле Повторите пароль. Нажмите «Далее», когда закончите.

Служба Windows перейдет к следующему.

Когда появится экран с названием «Применить конфигурацию», нажмите «Выполнить».

Нажмите Готово, когда закончите.

Конфигурация продукта продолжится с Далее.

Экран будет называться Конфигурация маршрутизатора MySQL. Нажмите Готово.

Это снова будет Конфигурация продукта, так что дальше.

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

Когда появится экран с названием «Применить конфигурацию», нажмите «Выполнить».

Нажмите Готово, когда закончите.

Это будет конфигурация продукта, поэтому нажмите «Далее».

Экран будет называться «Установка завершена», поэтому нажмите «Готово».

Откроются Windows Shell и MySQL Workbench, но они вам не нужны, поэтому закройте их кнопкой x.

PATH setting

Затем установите что-то под названием PATH. PATH — это просто «имя программы», и если вы его установите, вы сможете использовать его с помощью приложения командной строки, которое вы будете использовать позже. Возможно, вы еще этого не понимаете, но как прикоснетесь, так и поймете, так что давайте пока приступим к настройке.

Сначала введите «Переменные среды» в строке поиска в нижней части экрана и нажмите Enter.

Откроется окно с названием «Переменные среды». Щелкните поле переменной переменной среды пользователя в верхней части экрана, которая называется «Путь», и нажмите «Изменить».

Откроется окно под названием «Редактировать имя переменной среды». Нажмите «Создать» в правом верхнем углу экрана.

Так как он будет в режиме ввода, введите «C:¥Program Files¥MySQL¥MySQL Server 5.7¥bin» и нажмите OK внизу экрана.

Вы вернетесь в окно «Переменные среды», нажмите «ОК».

На этом знакомство с MySQL завершено. Далее мы начнем работу по установке Ruby.

Введение Руби

Установите на свой компьютер язык программирования под названием Ruby. Внезапно, вы знаете, что такое программирование?
Программирование — это, по сути, общение с персональным компьютером. А для того, чтобы говорить с персональным компьютером, необходимы «слова», и эти слова являются кодом в программировании. Поскольку код — это слово, существуют «языки», такие как японский и английский. Язык, используемый в коде, называется языком программирования, и на этот раз мы используем Ruby.
Теперь давайте установим Ruby. Во-первых, давайте погуглим с установщиком ruby. Появятся следующие результаты поиска, поэтому нажмите «Загрузки».

Затем найдите и нажмите на сообщение «=› Ruby + Devkit 2.6.6–1 (x64)».

Цифры в 2.6.6–1 могут немного отличаться, поэтому нажмите на цифру со стрелкой, выделенной жирным шрифтом. Затем в левом нижнем углу экрана появится сообщение о загрузке, такое как «ruby installer-devki… exe», поэтому дождитесь завершения загрузки. Когда загрузка будет завершена, нажмите на экран «ruby installer-devki… exe». Далее появится следующий экран. Выберите «Я принимаю лицензию» и нажмите «Далее».

Далее появится следующий экран. Ничего не делайте и нажмите «Установить».

Затем нажмите Далее, чтобы начать установку.

Экран установки будет продолжаться некоторое время, поэтому давайте подождем, пока установка не будет завершена. Когда установка будет завершена, появится следующий экран. Нажмите Готово.

Далее отобразится следующий экран. Введите 1,3 и нажмите клавишу Enter.

Установка Ruby завершена, когда Install MSYS2 и цепочка инструментов разработки MINGW успешно выведены, как показано ниже. Закройте окно с помощью кнопки x в правом верхнем углу.

На этом знакомство с Ruby завершено. Строительство окружения подходит к концу. Далее мы представим кое-что под названием Ruby on Rails.

Что такое Ruby on Rails?

Это карри ру. Это конец объяснения.

Является ложью. Это ложь, чтобы закончить объяснение, но это правда, что это карри ру. Вдруг представьте, когда ваш ребенок спросил вас: «Папа! Приготовь рис с карри!» Прежде всего, что вы делаете? Вы можете пойти в супермаркет и купить рис и соус карри. Думайте о Rails как о соусе карри, который вы можете бесплатно найти в супермаркете под названием Интернет.
Процесс создания веб-сайта с использованием только языка программирования Ruby подобен «покупке земли, посадке семян риса и специй, сбору урожая, смешивание специй и приготовление риса с карри, чтобы сделать рис с карри». Это вещь. Это немного пугает, не так ли?
История настолько запутана, что я уже не знаю, что это такое, но в любом случае Rails делает создание веб-сайта намного проще и веселее. Это удобно, так что давайте использовать его.

Install Ruby on Rails

Как я уже давно объяснял, сама работа по установке очень проста. Сначала введите «команда» в поле поиска в нижней части экрана и нажмите Enter.

Потом …

Ja ja-nn!!!

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

Инженер-ветеран может сказать: «Глупо чувствовать себя хорошо, просто прикоснувшись к командной строке, лол», но это нормально. Важно не быть признанным другими, а гордиться своей работой. Желание быть признанным другими может быть разбито другими, но сердце, которое вы признаете в себе, не может быть разбито никем.

Теперь введите gem install rails -v «5.2.3», где мерцает толстое подчеркивание, и нажмите Enter. Давайте взломать!!!

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

Взлом завершен.

Знакомство с кодом VS

What is VS Code?

Это удобное приложение для написания кода. Это что-то вроде редактора. Существует множество типов редакторов, но лично я рекомендую этот VS Code. Кстати, это аббревиатура от Visual Studio Code и VS Code. Причина, по которой я рекомендую его, заключается в том, что его легко использовать даже для новичков, и при этом его функциональность может быть расширена. Итак, давайте представим это немедленно.

Let's introduce VS Code

Давайте сначала погуглим с VS Code. Результат поиска «Редактор кода Visual Studio | Microsoft Azure». Кликните сюда.

Перейдите на сайт, подобный приведенному ниже, и нажмите «Загрузить сейчас».

Экран выбора ОС продолжится, поэтому нажмите Windows.

Начнется загрузка, поэтому нажмите на экран VS Code User Setup… exe в левом нижнем углу экрана, как только он будет завершен.

Отобразится экран настройки. Если вы согласны, нажмите Далее.

Появится экран для указания места установки, поэтому нажмите «Далее».

Появится экран для указания папки меню «Пуск». Нажмите "Далее.

Появится экран выбора дополнительных задач. Отметьте «Создать значок на рабочем столе» и нажмите «Далее».

Когда появится экран с надписью «Все готово к установке», нажмите «Установить».

Начнется установка, поэтому подождите немного, пока она не завершится. Когда вы увидите экран с надписью «Завершение работы мастера настройки кода Visual Studio», нажмите «Готово».

Затем VS Code будет запущен следующим образом.

На этом знакомство с VS Code завершено! Далее произведем начальные настройки для VS Code.

Highlight Ruby typos

Введем удобную функцию, проверяющую опечатки на языке программирования «Руби». Как и в случае с японской локализацией, на этот раз выполните поиск с рубином и нажмите «Установить» в правом нижнем углу. На этот раз, в отличие от времени японской локализации, перезапускать не нужно.

На этом настройка Ruby завершена!

Automatic code save

Ужасающая природа работы с персональным компьютером связана с «сохранением файлов». Например, если вы плотник, если вы работаете над строительством дома, он автоматически сохранится в реальном мире в виде «дерева с гвоздями». Однако, когда мы, инженеры, всегда забываем процесс «сохранения файлов», это все пустые пузыри. Работать в таком состоянии слишком страшно, поэтому давайте настроим его на автоматическое сохранение написанного вами кода.
Сначала нажмите на значок шестеренки в левом нижнем углу экрана VS Code и выберите настройку в появившемся меню.

Откроется вкладка «Настройки». Щелкните раскрывающееся меню с надписью «Выкл.» в элементе «Файлы: автоматическое сохранение» в столбце «Часто используемые элементы» и нажмите «FocusChange».

Настройка автоматической покупки завершена.

Pin VS Code launch icon to taskbar

Наконец, давайте упростим запуск VS Code. Черная полоса, закрепленная внизу экрана Windows, называется «панелью задач», и вы должны настроить ее так, чтобы значок VS Code всегда отображался на этой панели задач. Это легко настроить, щелкните правой кнопкой мыши значок VS Code на панели задач и выберите Закрепить на панели задач. На этом настройки закончены!

На этом создание окружения завершено. С этого момента, наконец, пришло время кодировать!

* С этого момента работа стандартна для Mac/Windows *

Давайте создадим приложение

Спасибо за настройку окружения. С этого момента я еще ничего не объяснял о программировании, но сразу сделаю твиттер. Нет, у меня нет никаких предварительных знаний! ?? Может быть и так, но в этом нет никакой проблемы. Многие люди, изучающие программирование, сначала пишут справочник, а затем разбираются в основах и т. д., а затем «сначала изучают», но в этой книге представлен метод «сначала действовать». "является. Вам не нужно ничего знать, так что давайте все равно напишем код. Писать код гораздо быстрее, чем учиться.

Если вы обнаружите что-то, чего не понимаете при написании кода, выполните соответствующий поиск в Google и т. д. Читать только книгу без написания кода — это все равно, что смотреть видео о тренировке мышц и не двигать телом. Если вы хотите быть мускулистым, просто нагрузите мышцы. Теперь давайте откроем VS Code. После открытия одновременно нажмите Ctrl + Shift + @ (в Windows: Ctrl + Shift + @). Затем появится терминал. Теперь давайте выполним следующую команду.

mkdir projects
cd projects
rails new twitter -d mysql
cd twitter

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

посмотрим в инете

Теперь, когда приложение создано, давайте просмотрим его в Интернете. Команда для просмотра — rails s.

rails s

Когда вы вводите эту команду,

=> Booting Puma
=> Rails 5.2.4.4 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.6 (ruby 2.5.1-p57), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

Сообщение будет воспроизведено, и терминал нельзя будет использовать. Это связано с переходом в «состояние запуска сервера». Только в этом случае вы можете просматривать приложение в Интернете. Чтобы выйти из этого состояния, нажмите control+C (ctrl+C) на клавиатуре. Будет воспроизведено следующее сообщение, сервер будет остановлен, и терминал станет доступен. Для Windows дополнительное сообщение «Вы уверены, что хотите завершить пакетное задание?» Появится, поэтому введите y и нажмите Enter.

^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2020-10-09 15:16:23 +0900 ===
- Goodbye!
Exiting

Теперь, когда вы знаете, как остановить сервер, давайте снова запустим сервер.

rails s

Давайте просмотрим приложение в Интернете прямо сейчас! Его легко просматривать, просто введите http://localhost:3000/ в адресной строке Chrome.

Да, вы сразу попадете на такой экран ошибки. Это «экран ошибки Rails». На ярко-красном экране ярко-красные символы, и есть ощущение ошибки. Вы столкнетесь с этим много раз в будущем, поэтому давайте привыкнем к нему сейчас.
Причина ошибки также указана на экране ошибки. Это называется «Отказано в доступе для пользователя root» @ «localhost» (используя пароль: НЕТ)». В переводе на японский это означает, что я пытался получить доступ к MySQL, но отказался, потому что у меня не было пароля. Кажется, что это дополнительная осторожность, но это также доказательство того, что система безопасности работает хорошо.
Теперь давайте передадим информацию о пароле MySQL на сторону приложения, чтобы устранить ошибку.

С этого момента работа для Mac и Windows отличается.

MacOS

* Для пользователей Windows пропустите этот раздел.

Прежде всего, для повышения эффективности работы мы сделаем «Открыть папку» с помощью VS Code. Мне нужно выполнить работу по «отображению домашней папки в Finder», поэтому я сделаю это. Во-первых, давайте откроем Finder. Что такое Искатель? Если это так, нажмите Command + пробел, введите «Finder» и нажмите Enter. Экран, который выходит, является Finder. После открытия Finder выберите «Домой» в верхнем меню «Перейти».

Когда вы дома, нажмите Command + клавиши со стрелками вверх. Затем отобразится домашняя папка (метка дома), поэтому перетащите ее в «Часто используемые элементы» на боковой панели в левой части Finder. Затем ваше имя пользователя будет отображаться с отметкой дома в «Часто используемых элементах», и вы готовы к работе.

Теперь откройте папку с VS Code. Если вы нажмете команду + O в VSCode, появится экран для открытия файла, поэтому нажмите значок домика на боковой панели → проекты → твиттер → ОК.

Если VS Code перезапускается и в левой части экрана появляется такое отображение, как app, bin, config…, все в порядке! В этом состоянии вы можете открыть файл, просто выполнив поиск в списке слева и щелкнув его, без необходимости открывать файл один за другим.

Затем передайте информацию о пароле MySQL вашему приложению Rails. Выполните следующую команду в терминале.

EDITOR="code -w" rails credentials:edit

Это запустит редактор под названием «vi» на вашем терминале.

Этот редактор vi немного специфичен в использовании. Во-первых, вы не можете редактировать, потому что ввод с клавиатуры не принимается сразу после запуска. Для редактирования вам нужно нажать клавишу i один раз, чтобы войти в «режим INSERT». Давайте немедленно нажмем клавишу i. Это нормально, если в нижней части экрана отображается «-INSERT-». Теперь добавим две строчки кода:

Для части, которая говорит «あ な た の MySQL パ ス ワ ー ド», введите пароль MySQL, который вы установили при установке 4–3–4 MySQL. Когда вы закончите, нажмите Esc один раз, введите: wq и нажмите Enter. Это закроет редактор vi и сохранит ваши изменения.
Затем поиграйте с файлом database.yml. Если вы нажмете команду + P в VSCode и наберете «данные», в качестве кандидата появится database.yml, поэтому просто нажмите Enter. Рядом с 17-й строкой есть пустой столбец «пароль:», поэтому давайте добавим описание ‹% = Rails.application.credentials [: mysql] [: password]%›.

Вы готовы к работе! Давайте немедленно перезапустим сервер (rails) и заходим на http://localhost:3000.

К сожалению, я все еще получаю ошибку. Это ошибка «У MySQL нет базы данных». Устранить эту ошибку легко, и ее можно устранить, выполнив следующую команду: Обратите внимание, что вам необходимо остановить сервер для выполнения следующих команд, поэтому не забудьте остановить сервер с помощью Ctrl + C перед вводом команды.

rails db:create

Давайте снова пойдем по рельсам. Если вы видите экран ниже, вы добились успеха! Ура !!

На этом запуск приложения завершен!

Windows

* Для пользователей MacOS пропустите этот раздел.

Прежде всего, для повышения эффективности работы мы сделаем «Открыть папку» с помощью VS Code. Нажмите ctrl+K на VSCode, затем дополнительно нажмите ctrl+O. После этого появится окно «Открыть папку». На боковой панели в левой части экрана нажмите Windows (C :) → Пользователь → (ваше имя пользователя) → проекты → twitter → Выбрать папку (кнопка внизу справа). давай сделаем это. Это нормально, если в левой части экрана отображаются различные папки и т. д.

Затем предоставьте приложению Rails информацию о пароле MySQL. Для этого я использую команду rails created: edit, но так как эту команду нельзя использовать без ее настройки, сначала установите ее. Введите «controll» в строке поиска справа от значка Windows в левом нижнем углу экрана и нажмите Enter.

Затем нажмите «Система и безопасность» → «Система» → «Дополнительные параметры системы» → «Переменные среды», чтобы открыть окно «Переменные среды». Когда откроется окно переменной среды, нажмите «Создать» (N)… вверху, введите «EDITOR» в качестве имени переменной и «code» -w в качестве значения переменной и нажмите «ОК». Если вы можете зарегистрироваться следующим образом, все в порядке.

Затем закройте окно «Переменные среды» и окно «Свойства системы», нажав «ОК», затем закройте и снова откройте VS Code, чтобы применить это изменение. Теперь, когда вы можете использовать команду, давайте выполним следующую команду в терминале.

rails credentials:edit

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

Для части, которая говорит «あ な た の MySQL パ ス ワ ー ド», введите пароль MySQL, который вы установили при вводе MySQL. После ввода нажмите ctrl + S → ctrl + W. После этого файл будет закрыт, а ваши изменения будут сохранены.
Далее отредактируйте файл database.yml. Нажмите Ctrl + P, чтобы вызвать строку поиска, где вы можете ввести «данные» и нажать Enter. Рядом с 17-й строкой файла database.yml есть столбец «пароль:», который пуст, поэтому давайте добавим description<%= Rails.application.credentials[:mysql][:password] %>.

Вы готовы к работе! Запустим сервер (rails) и заходим на http://localhost:3000.

К сожалению, я все еще получаю ошибку. Это ошибка «У MySQL нет базы данных». Устранить эту ошибку легко, и ее можно решить, выполнив следующую команду: Обратите внимание, что вам необходимо остановить сервер для выполнения следующих команд, поэтому обязательно остановите сервер с помощью Ctrl + C → y → Enter перед вводом команды.

rails db:create

Давайте снова пойдем по рельсам. Если вы видите экран ниже, вы добились успеха! Ура!!

Давайте сделаем так, чтобы это выглядело круто

Что ж, приятно иметь возможность отображать до Yay!, но то, что вы хотите отобразить, — это экран Twitter, а не Yay!. Немного порадовавшись запуску приложения Rails, давайте сначала «отобразим созданный вами файл», чтобы отобразить экран Twitter. Нажмите command + P (Ctrl + P) на клавиатуре, введите route.rb в появившемся поле ввода и нажмите Enter. Этот файл называется «маршрутизация», и, как следует из названия, это файл, который записывает «маршруты». Давайте отредактируем файл следующим образом.

Добавлен корень «tweets#index». На этот раз это root, а не route. Оба являются «корнями», но на этот раз маршрут означает «корень». Остальные tweets#index означают «индексное действие контроллера твитов». Это не имеет смысла. Я пойму смысл позже, так что теперь все в порядке, что это не имеет смысла.

Теперь давайте снова получим доступ к http://localhost:3000.

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

rails g controller tweets

Часть, называемая rails g controller, — это фиксированная фраза, а tweets — это имя контроллера. Таким образом, в программировании часть «фиксированная фраза» и «самоопределяемая часть» часто разделяются, поэтому обязательно имейте это в виду.

После создания контроллера снова перейдите на http://localhost:3000.

Неизвестное действие. Это ошибка, которая говорит, что вы находитесь в пути, но у вас нет пункта назначения. Итак, давайте создадим «файл вида (внешнего вида)», который будет местом назначения.

Чтобы сделать это, сначала нажмите команду + N (Ctrl + N), затем команду + S (Ctrl + S). Я думаю, что имя файла в исходном состоянии — Untitled-1, но давайте изменим его на index.html.erb. Кроме того, задайте место сохранения файла для проектов/twitter/app/views/tweets.

Затем давайте получим доступ к http://localhost:3000.

Если вы видите пустой экран, вы добились успеха. Поздравляем! Как будто. Это доказательство того, что созданный ранее index.html.erb отображается. Тогда я немедленно отправлюсь в Твиттер.
Во-первых, давайте отобразим птицу в Твиттере. Нажмите command + P (Ctri + P), введите application.html.erb и нажмите Enter. Затем отредактируйте 7-ю строку отображаемого файла следующим образом.

С этим изменением значки, похожие на пиктограммы, будут доступны в файлах с именем «HTML», которые вы собираетесь редактировать. Это включает в себя птицу Twitter, поэтому я покажу это. Теперь отредактируйте созданный ранее index.html.erb следующим образом.

Если вы хотите изменить редактируемый файл в будущем, нажмите command + P (Ctrl + P), введите имя файла в поле поиска и нажмите Enter. Вы можете искать файл прямо из дерева в левой части экрана VS Code и щелкнуть по нему, но по мере того, как количество файлов будет увеличиваться по мере продолжения разработки, его будет сложно найти, поэтому укажите это «имя файла "на ранней стадии. Если у вас есть привычка «открываться», возможно, вы сможете добиться большей «производительности» по сравнению с другими начинающими инженерами.

Теперь давайте получим доступ к http://localhost:3000.

Он небольшой, но вы должны увидеть черную птицу Twitter в левом верхнем углу экрана. Поздравляем! Далее, давайте изменим цвет птицы. Отредактируйте файл с именем tweets.scss. Когда я открываю файл, там около 3 строк зеленых букв, но они мне не нужны, поэтому используйте команду + A (Ctrl + A), чтобы выделить все и удалить их. После этого напишите следующее.

Затем птица Твиттера изменится на цвет, похожий на птицу Твиттера. Ура!
После этого начинается работа по повторению подобных вещей. Кстати, файл с именем index.html.erb, который был изменен первым, называется «HTML-файл», а файл, который был изменен после этого, называемый tweets.scss, называется «CSS-файлом».
HTML означает для «Языка гипертекстовой разметки». Многие из веб-страниц, которые вы видите в Интернете, состоят из этого HTML.
CSS означает «каскадные таблицы стилей». Это лист, чтобы украсить внешний вид HTML и сделать его модным. Поскольку HTML и CSS используются как набор, их часто называют «HTML и CSS» и рассматривают как своего рода язык программирования.

HTML в основном использует «теги» для создания внешнего вида. Класс ‹i = «fab fa-twitter»›‹/i›, который вы написали ранее в index.html.erb, называется «i tag». Если вы напишете ‹div›‹/div›, это будет называться тегом div, и есть множество других тегов, каждый из которых имеет различные характеристики. Часть, называемая классом, называется «классом» и используется для обозначения тега. На этот раз я дал им два имени: fa и fa-twitter. Если вы дадите ему такое имя, вы сможете изменить внешний вид, например .fa-twitter {[Введите здесь фиксированную фразу внешнего вида]}, как я написал ранее в CSS.

Создать внешний вид веб-страницы намного проще, чем вы думаете. Это просто повторение работы, которую я только что проделал: «напишите тег с именем в HTML и напишите фиксированную фразу, которая выглядит как это имя в CSS». Это неожиданно интересная задача, и специалистов по этой задаче иногда называют фронтенд-инженерами. Момент изменения внешнего вида кода — одно из непреодолимых удовольствий программирования.
Далее отредактируем index.html.erb и tweets.scss следующим образом.

Ну, что я сделал с этим, так это то, что я зажал синюю птицу тегом div с оболочкой имени класса. Что происходит с этим…

На фоне птицы было что-то вроде черной полосы. Это потому, что я применил CSS background-color: black; в класс-оболочку и обернул его вокруг птицы. Это больше похоже на то, как если бы вы положили его в пакет, называемый оберткой, а не в сэндвиче.
Возможно, вы еще не уверены, но это также задача, которую вы выполняете много раз, так что вы привыкнете к ней через месяц. Давайте продолжим понемногу!
Давайте продолжим работу по разметке (создание файла представления с помощью HTML и CSS).

Код сразу увеличился. Может быть сложно написать все это сразу, поэтому вы можете скопировать и вставить это. Что я сделал с этим кодом, так это разделил экран твиттера на левый и правый. Я хотел бы, чтобы вы вспомнили, что я пытаюсь создать экран, подобный показанному ниже в Твиттере.

Чтобы сделать этот экран, боковая панель с меню, такими как «Главная» и «Поиск тем» в левой части экрана, называется оберткой слева, а экран с профилями и твитами в правой части экрана называется оберткой. -правильно. Я назвал его и воспроизвел этот макет следующим образом.

Левая сторона красная, а правая — синяя для простоты понимания, поэтому цветовая схема немного болезненна. Вам на самом деле не нужны эти красный и синий фоновые цвета, поэтому давайте их удалим. Чтобы удалить его, подведите курсор к строке, где находится удаляемый код, и нажмите command + X (Ctrl + X), чтобы быстро его удалить.

Что произошло, когда я обновил экран после попытки удалить его? Отображаются только птицы, а остальные думаю черные. При этом вы не можете определить границу между оберткой слева и оберткой справа. Итак, давайте нарисуем границу, чтобы вы могли видеть границу. Давайте добавим границу: 1px сплошной $ sub-color; под частью & -left {} CSS.

Теперь вы должны увидеть границу! Цвет может быть светлым и плохо различимым, но этот выглядит лучше. Трудно сказать в двух словах, но когда дело доходит до дизайна, может быть проще создать современный дизайн, если вы понимаете, что нужно избегать общей разницы в цвете.
Теперь давайте завершим левая боковая панель. Во-первых, давайте выровняем все значки, кроме птицы, в левой части экрана.

Теперь попробуйте обновить экран. Потом, думаю, появится много иконок и будет весело!

Здесь я расскажу о том, как указать имя класса, например fab fa-twitter, для значка. Вы можете узнать это, зайдя на сайт под названием fontawesome. При доступе к https://fontawesome.com/ в левом верхнем углу экрана появится поле поиска под названием Значки поиска…, поэтому найдите здесь Twitter. Затем появится значок Twitter, поэтому щелкните его, чтобы перейти на отдельную страницу значка.

i-тег типа ‹i class = «fab fa-twitter»› ‹/ i› написан на отдельной странице, поэтому, если вы нажмете на него, этот i-тег будет скопирован как есть. В этом состоянии вернитесь в VS Code и нажмите command + V (Ctrl + V) в index.html.erb. Если вы можете вставить i-тег и отобразить его, вы добились успеха! Есть множество других значков, поэтому может быть интересно найти и вставить их.
Теперь давайте упорядочим расположение значков, которые мы только что разместили. Отредактируйте файл tweets.scss. Сначала перепишите часть & -left {} следующим образом.

Здесь я объясню код один раз. Существует обозначение & -left, что означает «CSS будет применяться к HTML с именем класса -left, следующим за родительским элементом». «Родительский элемент» — это обертка, как видно из обертки слева.

<div class="wrapper">
  <div class="wrapper-left"></div>
</div>

В обертке и обертке слева часть, называемая оберткой, является общей в качестве имени класса. Если вы прикрепите часть имени класса родительского элемента к дочернему элементу таким образом, вы можете применить его с помощью следующего CSS.

.wrapper{
  &-left{
    // CSS to apply
  }
}

Кроме того, этот метод записи можно сделать, потому что на этот раз он использует что-то вроде эволюции CSS, называемой SCSS, вместо обычного CSS, но в Rails это можно использовать как стандарт, и это очень удобно, поэтому, пожалуйста, используйте его во что бы то ни стало. Давайте вспомним. Это может показаться немного сложным, но я уверен, что привыкну к этому, потому что я буду прикасаться к нему много раз, поэтому я в порядке со спокойной душой.

Теперь вернемся к http://localhost:3000/ и обновим экран.

Почему-то значки вдруг становятся вертикальными. Это странно. Я объясню причину. Давайте снова посмотрим на код, который мы только что добавили.

Вертикальное выравнивание обусловлено влиянием i {display: block;}. Прежде всего, это обозначение i {}, что означает «пожалуйста, примените CSS к тегу i». Я думаю, что это как-то было понято. Точно так же, если вы пишете что-то вроде div {}, вы можете применить его к тегу div. То же самое относится и к другим тегам.
Теперь самое главное — display: block ;. Существует несколько видов этого дисплея, и есть две вещи, о которых обязательно нужно помнить.

display: block;
display: inline;

Элементы с отображением: блок; называются «блочными элементами», а элементы с display: inline; называются «встроенными элементами».
В зависимости от того, какая из этих двух работ будет меняться, характеристики внешнего вида. Важным моментом на этот раз является то, что «блочные элементы хотят выстраиваться вертикально», а «строчные элементы хотят выстраиваться горизонтально». Есть много других отличий, но давайте сначала вспомним вот это.

И, что более важно, почти всегда «один из них работает как начальное значение» для любого тега. Начальное значение тега i является встроенным элементом. Другими словами, i-теги будут «бок о бок» без какого-либо CSS. Другими словами, если вы хотите расположить теги i вертикально, вам нужно расположить их вертикально с помощью display: block ;. Поэтому я сделал это исправление ранее.
Теперь, когда вы знаете, почему значки выстроены вертикально, давайте двигаться дальше.
На самом деле, я бы хотел переписать index.html.erb следующим образом…

Код очень грязный и его трудно увидеть. В частности, длинное имя класса wrapper-left-icon написано много раз, что трудно увидеть. Писать это кажется мучением. Поэтому писать не буду. Отныне я буду знакомить вас с «Советами», с помощью которых можно добиться того же, что написать это, не написав это.
Сначала я объясню только базовые знания, прежде чем переходить к хитростям.
Внезапно , нажмите command + P (Ctrl + P) и введите tweets_controller.rb и нажмите Enter. Затем отредактируйте файл следующим образом.

Вы можете подумать, что этот индекс где-то уже видели, но вполне нормально думать, что он относится к index.html.erb, который много раз редактировался. Я дал @content в тот индекс и написал, что в нем был тест.
Я говорю о том, что это значит, но в заключении, этот @content можно посмотреть на index.html.erb. Сразу покажем.

@content отображается в верхнем левом углу экрана. Это не имеет смысла. Вы хотите отобразить не сам @content, а строку «test», которую вы в него вставили. На самом деле, если вы хотите отображать @content в HTML, вам нужен специальный тег. Итак, давайте исправим это следующим образом.

Отображение @content в верхнем левом углу экрана теперь должно измениться на Test. Поздравляем!
Теперь я знаю, что могу поместить текст в @content и отобразить его, но я понятия не имею, что означает эта концепция. Мы говорили о «Советах по простому написанию HTML», не так ли? Ладно, не волнуйся. Этот трюк можно реализовать, применив этот @content. Итак, давайте изучим только еще одно базовое знание.
В качестве приложения к трюку сделайте вариант во множественном числе под названием @contents вместо @content, и «поместите два или более текста» в это @contents. Раньше я помещал в @contents только один текст «Это тест», теперь я буду помещать в @contents три текста «Яблоко», «Горилла» и «Труба». Если вы сможете это сделать, вы сможете использовать «Советы по простому написанию HTML». Сразу отредактируем tweets_controller.rb следующим образом.

Кроме того, ‹% = @content%›, написанный ранее в index.html.erb, также изменен на ‹% = @contents%›. Затем ["Apple", "Gorilla", "Trumpet"] будут отображаться как есть. Это еще не сработало, поэтому давайте перепишем запись ‹% = @contents%› в index.html.erb следующим образом.

Мне удалось отобразить три строки символов по вертикали! Тот факт, что они расположены вертикально, означает, что количество тегов div, для которых написан только один, увеличилось до трех.
Ну, я упоминал ранее, что не хочу много раз писать wrapper-left-icon. Другими словами, если вы используете этот тег ‹%@contents.each do | content |%› ‹%end%›, вы можете заполнить все иконки одним описанием. Давайте сделаем это прямо сейчас!

Теперь давайте обновим экран http://localhost:3000/. Если ничего не изменится, вы добились успеха. Несмотря на это, код в index.html.erb на удивление короткий. Код HTML, который требовал 32 строки, теперь умещается в 10 строк. Замечательно.
Однако, хотя придумывать разные штуки хорошо, внешний вид совсем не изменился. Что ты хотел сделать? Я думаю, что это так, поэтому я объясню, что я хотел сделать. В завершение пробую добавить текст типа Главная или Поиск темы справа от значка. Поскольку необходимо было разделить класс для значка и текста, который будет написан справа от него, необходимо сначала создать класс с именем wrapper-left-icon для части значка, а писать столько хлопотно раз, так что я буду говорить о трюке сделал.

Короче говоря, после этого я буду писать все более и более сложный HTML для «каждой иконки», но если я проделаю этот трюк «Поскольку есть 9 иконок, я буду писать сложный HTML 9 раз повторно. Это означает, что вам нужно написать только один раз вместо проблем, которые обычно возникают. Теперь давайте продолжим создавать класс с именем wrapper-left-text для вставки текстовой части. После применения трюков вам нужно написать этот класс только один раз.

Кстати, дисплей немного развалился. Там, где я хочу, чтобы значки и текст были выровнены горизонтально, они выстроены вертикально.
Причина свертывания дисплея заключается в том, что для тега i установлено значение display: block; для того, чтобы расположить значки вертикально. Поскольку только значки расположены вертикально, текст, который вы хотите разместить рядом с ними, переворачивается и прикрепляется к нижней части, а следующий тег i также располагается вертикально, поэтому он выглядит как текущий дисплей.
Единственный способ для этого нужно сделать вывод, что display: block; следует применять к большему количеству родительских элементов. Сначала удалите display: block; тега i.

Далее мы дополнительно разделим левый элемент-оболочку. В частности, новый тег div с именем wrapper-left-content предоставляется в разделе wrapper-left для переноса левого-обертки-значка и обертки-левого-текста.

Однако, если ничего не делать, CSS не будет работать для левого значка оболочки и левого текста оболочки. Итак, давайте исправим эти два элемента на wrapper-left-content-icon и wrapper-left-content-text.

Он блестяще расположен по вертикали! Это приятно. Кстати, приятно, что они расположены вертикально, но дисплей немного дребезжит, так что это тоже исправлю. Часть & -left {} исправлена.

Что я сделал, так это применил около 3 CSS к части & -icon {}. Причина дребезжания дисплея заключалась в том, что «ширина значка была разной в зависимости от типа значка». По этой причине мы использовали два свойства: width: 20px; и display: inline-block ;, чтобы выровнять ширину значков. width — это свойство, определяющее ширину элемента. отображение: встроенный блок; — это свойство для указания «встроенного блочного элемента», который не является ни встроенным, ни блочным элементом. На этот раз это не очень важно, поэтому я не буду объяснять это подробно, но это похоже на использование встроенных и блочных элементов.

Иконки выстроены аккуратно! Это замечательно.
Далее давайте сопоставим символы в части, которая говорит «ここに文字を表示» рядом со значком, с фактическим отображением Twitter. Измените описание tweets_controller.rb и index.html.erb.

Теперь, когда код усложняется, я добавлю еще немного. Такие вещи, как @contents и @icons, называются переменными. Переменная похожа на коробку, в которой хранится строка. Обычно в ящик можно поместить только одну строку, но, как я уже объяснял, вы также можете поместить несколько строк.

@content  = "りんご" # Only one character string can be entered
@contents = ["りんご", "ごりら", "ラッパ"] # Contains multiple strings

Если вы заключите переменную в символ [] и разделите содержимое символом «,» (запятая), она станет тем, что называется массивом. Массив можно преобразовать обратно в переменную, используя имя массива ‹%.each do | переменная |%› обработка переменной ‹% end%›, которая была введена некоторое время назад. Это описание называется «каждый оператор». Имейте в виду, что массивы и операторы each часто используются как наборы. А в программировании есть более высокая версия массива, которая называется «хеш». Хэш — это «массив, в котором каждый элемент может быть назван». В частности, это выглядит следующим образом.

@content  = "りんご" # Only one character string can be entered
@contents = ["りんご", "ごりら", "ラッパ"] # Contains multiple strings
@contents = [fruit: "りんご", animal: "ごりら"] # The element is named

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

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

Потом,

@icons.each do |icon|
  icon[:class]
  icon[:text]
end

Затем вы можете получить содержимое хеша. После этого, если вы включите это в HTML,

Это становится. Эта область может показаться сложной, но вы скоро к ней привыкнете, так что давайте продолжим с чувством типа «Ясно! Я хорошо понимаю!». В любом случае важно двигать руками. Теперь давайте настроим внешний вид боковой панели. Отредактируйте & -left {} в tweets.scss.

Появилось новое свойство padding. Это свойство для создания зазора, а 10px указывает размер зазора. px — это единица размера, не так ли? Чем больше число, тем шире разрыв. Есть разные способы использования отступов, но на этот раз я применил padding: 10px 0; к классу контента. Если вы пишете padding: 10px 0 ;, это означает, что верхний и нижний зазоры равны 10px, а левый и правый зазоры равны 0px. Кроме того, если вы просто пишете padding: 10px ;, это означает, что промежуток между верхним, нижним, левым и правым краями составляет 10 пикселей, так что имейте в виду. Также возможно заполнить только одно место сверху, снизу, слева и справа, и в этом случае это будет написано как padding-left: 10px; (в дополнение к левому можно использовать верхний, правый, нижний).

Как видите, простое выравнивание зазоров сделает изображение намного лучше. Это свойство заполнения очень важно для работы с разметкой, поэтому давайте постепенно освоим его использование.
Теперь давайте закончим боковую панель. В реальном Твиттере цвет текста меняется, когда вы наводите курсор на значок или текст на боковой панели. Давайте воспроизведем это.

Добавлена ​​часть &: hover {}. Это называется псевдоклассом зависания, а зависание над элементом иногда называют «зависанием», но здесь вы можете добавить обработку при зависании. На этот раз я указал два свойства для псевдокласса hover. курсор: указатель; изменяет форму курсора при наведении курсора со стрелки на форму пальца, и это действительно дает «ощущение щелчка». Остальное color:#00ACEE;, но это свойство для изменения цвета текста. # 00ACEE называется цветовым кодом и представляет собой метод выражения цветов в шестнадцатеричных числах, который может выражать около 17 миллионов различных цветов. Это безумно удобно, потому что может выразить 17 миллионов цветов всего 6 цифрами! Далее, давайте сделаем возможным фактические ссылки на отдельные страницы с боковой панели в левой части экрана. Во-первых, создайте связанную страницу заранее. Отредактируйте route.rb следующим образом.

Добавлены строки с 3 по 13. resources: tweets, only: [: index] означает определение действия индекса в контроллере твитов, но это не важно, так как указывает только уже реализованные части. Важным моментом является описание get имя действия в коллекции do ~ end после этого, и если вы напишете так, вы можете создать другую страницу типа http://localhost:3000/tweets/notification . , об этом.
Однако, даже если вы получите к нему доступ сейчас, вы должны получить сообщение об ошибке Неизвестное действие Не удалось найти действие уведомление для контроллера твитов. Это связано с тем, что нет HTML-файла с именем представление для отображения, например index.html.erb. Другими словами, если вы хотите получить доступ к http://localhost:3000/tweets/notification, вам просто нужен HTML-файл с именем notification.html.erb.
Место для его создания — приложение / просмотры/твиты/, но вот простой способ создать файл, так что я его представлю. Сначала отобразите боковую панель в левой части VS Code с помощью команды + B (Ctrl + B) и найдите app/views/tweets/. После этого щелкните правой кнопкой мыши твиты, выберите Новый файл, введите notification.html.erb и нажмите Ввод.

Теперь у вас должен быть доступ к http://localhost:3000/tweets/notification! Однако, поскольку экран черный и пустой, я хотел бы отобразить ту же боковую панель, что и index.html.erb. Чтобы отобразить боковую панель в уведомление.html.erb, вы можете скопировать весь код в index.html.erb, что неэффективно. Это потому, что когда вы хотите изменить содержимое боковой панели, вам нужно изменить как index.html.erb, так и уведомление.html.erb. Если вы создаете другие темы, такие как theme.html.erb или message.html.erb, вам нужно будет изменить боковую панель для этой страницы, что будет иметь большое значение. Чтобы предотвратить это, мы сделаем вырезать только часть боковой панели как другой HTML. Во-первых, давайте создадим файл с именем _sidebar.html.erb в папке app/views/layouts. Затем отредактируйте его следующим образом.

Я просто скопировал оболочку слева от index.html.erb. После этого я вызову это на index.html.erb.

‹%=render’/layouts/sidebar’, {icons: @icons}%› — описание звонка. Теперь попробуйте получить доступ к http://localhost: 3000, и если вы видите боковую панель, как будто ничего не произошло, все готово. После этого пропишем это и в уведомление.html.erb.

Теперь у вас должен быть доступ к http://localhost:3000/tweets/notification и вы должны получить NoMethodError. Часть @icons.each выделена и говорит о неопределенном методе каждый для nil: NilClass. Это означает, что @icons равен нулю. nil означает пустой, что означает, что переменная @icons пуста.
Причина, по которой я получаю эту ошибку, заключается в том, что вывод заключается в том, что @icons не указан в уведомление.html.erb для отображения боковой панели . Иными словами, @icons был присвоен index.html.erb, который я редактировал ранее. Причина, по которой @icons была передана в индекс, заключается в том, что она была обработана в tweets_controller.rb.

Вам это знакомо. Это файл, который я объяснял ранее о том, как хэшировать. @Icons даются там, где пишется def index ~ end. Итак, если вы напишете def уведомление ~ end и добавите содержимое индекса, ошибка будет решена! Однако, если вы сделаете это, вам придется выполнять хлопотную работу по «исправлению как индекса, так и уведомления каждый раз, когда вы изменяете боковую панель», что приводит к беспорядку. Итак, внесите следующие исправления.

Определена функция с именем set_icons, которая выполняется процессом с именем before_action. Это before_action удобно, а если так написать, то при попытке отобразить файл представления в app/views/tweets будет выполняться указанная функция (def set_icons ~ end this time) без разрешения. Будет. Теперь вы можете указать @icons как для index.html.erb, так и для уведомления.html.erb. Если вы зайдете на http://localhost:3000/tweets/notification, то увидите, что ошибка устранена. Теперь вы успешно создали «экран уведомлений», который отличается от «домашнего экрана»!
После этого продолжайте создавать все следующие файлы, кроме «уведомления», и сделайте все содержимое таким же, как index. html.erb.

• topic.html.erb
• message.html.erb
• bookmark.html.erb
• list.html.erb
• profile.html.erb
• info.html.erb

После создания вышеуказанных файлов создайте ссылку на значок, чтобы можно было щелкнуть боковую панель для перехода на эти страницы. Ссылка — это кнопка, по которой можно перейти на другую страницу. Вы не можете получить доступ к созданным ранее страницам, таким как http://localhost:3000/tweets/notification, прямо сейчас с экрана. Это ссылка, которая делает это доступным.
Тогда я немедленно сделаю ссылку. Что касается того, как создать ссылку, вы можете создать ссылку, используя тег и написав элемент ‹a href="адрес назначения ссылки"›, который будет связан ‹/a›. Сначала добавьте адрес назначения ссылки в хэш tweets_controller.rb с именем ссылка.

Затем примените это и к _sidebar.html.erb. Есть часть под названием ‹div class = «wrapper-left-content»› ~ ‹/ div›, но это ‹a href=»‹%=icon[:link]%›» class=»wrapper-left- Replace с содержанием «› ~ ‹/a›.

Кроме того, поскольку тег a является встроенным элементом, если боковая панель отображается как есть, вертикально расположенные значки будут располагаться рядом. Итак, давайте отредактируем часть & -content {} файла tweets.scss.

Добавлено 3 свойства. Так как дисплей: блок; располагается вертикально, цвет: # E0E0E0; автоматически становится синим. Поскольку цвет тега возвращается к белому, text-decoration: none; автоматически добавляется в тег a. Он используется для удаления подчеркивания.
Теперь вы можете перемещаться по странице, щелкнув значок! Однако в настоящее время единственный способ проверить, на какой странице вы находитесь, — это проверить адресную строку в верхней части страницы, что немного сложно понять. Итак, давайте сделаем текущую страницу более понятной, добавив процесс «отображения иконки текущей страницы синими буквами». Отредактируйте tweets.scss и _sidebar.html.erb.

«Условная ветвь» была добавлена ​​в часть тега. Поскольку это сложное описание, можно пройтись по нему сейчас, но чтобы объяснить его кратко, используйте описание action_name, чтобы получить текущее имя действия, и добавлен класс, называемый активным для элемента, который соответствует ему, чтобы выделить символы. на странице, к которой вы в данный момент обращаетесь, синим цветом.

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

Сохраняйте свои твиты

Мы создадим «функцию публикации твитов», которую можно назвать основной функцией Twitter. Чтобы кратко объяснить, что такое функция публикации твитов, это «функция сохранения символов, опубликованных в твиттере, в MySQL». Я включил «MySQL» в работу по созданию среды в начале этой книги, но MySQL — это место для сохранения твитов, и, получая твиты, сохраненные в MySQL → отображая их, «твиты, подобные Twitter», сохраняются и отображается. «
Теперь давайте создадим функцию твита. Сначала создайте файл с именем «модель». Модель — это файл, отвечающий за взаимодействие между двумя разными приложениями, MySQL и Rails. Теперь давайте запустим твит команды rails g model в терминале, чтобы создать файл модели.

rails g model tweet

После выполнения появится сообщение типа create db/migrate/20201201060234_create_tweets.rb, поэтому давайте щелкнем его, удерживая нажатой команду (Ctrl).

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

t.string: text — это текст твита, а t.timestamps — время твита. Теперь, когда вы готовы сохранить свой твит, давайте запустим этот файл миграции. Давайте запустим команду rails db: migrate в терминале.

rails db:migrate

Если вы видите что-то вроде create_table(:tweets)->0.0125s, вы добились успеха. Вы только что создали таблицу твитов для хранения своих твитов. После этого вы можете создать твит, отправив «код для создания твита» в таблицу твитов. Давайте запустим код, чтобы сразу создать твит. Наберите рельсы c в терминале. Потом, думаю, что остановится на отображении irb(main):001:0›. Это называется консолью rails, и это удобная консоль, которая позволяет вам делать то же самое, как если бы вы писали Ruby на сайте, который вы пишете. Теперь давайте наберем Tweet.new (текст: «Это тестовый твит»). Сохраните здесь.

rails c
Tweet.new(text: 'test tweet.').save

Затем создать твит (4,8 мс) ВСТАВИТЬ В «твиты» («текст», «создано_в», «обновлено_в») ЗНАЧЕНИЯ («тестовый твит», «2020–12–01 06:50:18», «2020–12 Я думаю, вы увидите журнал типа -01 06:50:18'), но это доказательство того, что вы смогли создать твит.
Выполнив имя модели кода .new (имя столбца: содержимое) . сохранить таким образом, вы можете создавать данные на MySQL. Модель — это концепция, аналогичная таблице, появившейся ранее, но думайте о ней как о концепции, которая представляет «саму структуру» или «всю таблицу», а не данные в таблице. Столбец — это тип данных, определенный в таблице, и на этот раз мы реализовали «текст твита» и «дату создания» в виде «текстового столбца» и «столбца created_at» соответственно.
Это немного сложная история, но важно то, что вы можете создать твит, выполнив Tweet.new(). Сохранять. Если вы можете выполнить это на tweets_controller.rb, вы можете сказать, что у вас есть функция твита.
Прежде всего, давайте сделаем возможность создавать твиты с экрана веб-сайта. Отредактируйте index.html.erb следующим образом, чтобы создать поле ввода и кнопку отправки.

Затем вы можете создать простое поле ввода. После этого, когда вы нажмете эту «кнопку отправки», просто обратитесь к тексту во входном теге и переместите Tweet.new(). Сохранять. Во-первых, давайте создадим действие создания как запрос, отправляемый при перемещении кнопки. Отредактируйте route.rb и tweets_controller.rb.

Я написал код для определения действия создания в контроллере и выполнения @tweet = Tweet.new(tweet_params) и @tweet.save. Описание разве что params[:tweet][:text].blank? Для того, чтобы не принимать обработку, когда поле ввода пусто. Также была определена новая функция tweet_params, которая называется сильным параметром и защищает сайт от вредоносных запросов (например, попытки украсть пароль зарегистрированного пользователя). Это механизм для. На этом определение действия создания завершено, но должна быть некоторая обработка, чтобы вызвать его с экрана. Итак, давайте отредактируем index.html.erb следующим образом, чтобы добавить этот процесс.

Прибыл новый тег, называемый тегом сценария. Это совершенно другой тип тега, отличный от тегов, которые мы использовали до сих пор, и это тег для встраивания описания языка программирования под названием JavaScript. На этот раз я использую этот JavaScript для выполнения действия создания при нажатии кнопки отправки. Теперь вы можете опубликовать твит, нажав кнопку отправки после ввода твита!
Однако, поскольку сохраненные твиты нигде не отображаются как есть, нельзя сказать, что функция твита еще не завершена. Итак, давайте продолжим создавать «функцию для отображения твитов».
Функцию отображения твитов создать очень просто. Давайте добавим описание Tweet.all.each справа от index.html.erb.

После установки model_name.all.each do |имя переменной| вы можете получить значение, написав имя переменной [:column_name]. Кстати, часть под названием .order (created_at::desc) — это описание «упорядочивания твитов в последнем порядке». Теперь вы должны видеть все свои твиты!

После этого давайте воспользуемся HTML, CSS и JavaScript для улучшения внешнего вида. Объем кода сразу увеличится, но не переживайте, ничего сложного мы не сделали. Если вы хотите быть back-end инженером (инженером, который специализируется на создании системы, а не поиске), вы можете скопировать и вставить сюда. В наши дни такого рода «разметочные работы» иногда полуавтоматизированы, так что в любом случае давайте закончим их быстро, не долго думая, и двинемся дальше.

Внешний вид полный! Я думаю, что это больше похоже на Twitter. Осталось сделать еще одну вещь: «отображать твит в тот момент, когда вы твитите». Теперь, даже если вы введете твит и нажмете кнопку «Твитнуть», новые твиты не будут добавляться, пока вы не обновите экран. Я объясню механизм его добавления.
Сначала создайте файл с именем create.json.jbuilder в папке app/views/tweets. Таким образом, в Rails есть механизм, согласно которому, если вы создадите файл с именем действия в папке tweets, содержимое этого файла будет выполнено после выполнения действия. И давайте напишем следующее в этом файле с именем create.json.jbuilder.

@tweet — это переменная, в которой хранится содержимое твита, ранее использовавшегося в tweets_controller.rb. Сделав этот json.text, можно вернуть его на сторону JavaScript. Это может показаться сложным, но это очень легко сделать, просто «Я хочу отобразить твит на экране после создания твита, поэтому я хочу снова передать содержимое созданного твита в JavaScript, содержание твита было передано на экран в виде json. “

После этого добавьте процесс генерации твита на основе этого к процессу части, написанной как $.get().done(()=›{process}). Процесс, выполняемый описанием $.get(), является концепцией, которая считается «самой важной» в разработке веб-сайтов. Механизм веб-сайта очень прост, пользователь управляет экраном для отправки запроса, и в ответ на это запрос обрабатывается таким механизмом, как «контроллер», который мы только что создали, и база данных (в этом случае, место, где твит сохранен. На этот раз «MySQL»), сохраните информацию, такую ​​​​как твит, там, и отправьте результат пользователю в виде экрана. Механизм веб-сайта заключается в том, чтобы вернуть его. «Запрос-›База данных-›Ответ». По крайней мере, если вы помните только это, я думаю, что в будущем обучение программированию значительно улучшится.

Возвращаясь к истории, $.get() — это тип запроса, называемый GET-запросом. Когда вы запустите это, будет выполнено создание tweets_controller.rb, поэтому процесс «сохранения твита» будет выполнен в базе данных. И когда возвращается ответ, это заключение, create.json.jbuilder. Это вернет часть, называемую методом done, в которой написано $.get(). Готово (() => {процесс}). Все, что вам нужно сделать, это получить json.text, определенный ранее как ответ, обработать его и отобразить как «отображение твитов» на экране списка твитов.

Код, который был объяснен до сих пор, можно преобразовать в следующий. Пожалуйста, перепишите часть $.get() следующим образом.

Переписав то, что было сделано(()=›{процесс}) в сделано ((res)=›{процесс}), можно получить переменную, которая раньше была json.text с именем res.text. .. После этого .prepend (это относится к ‹div class = «wrapper-right-tweets»› ‹/ div›) вызывает $(‘.wrapper-right-tweets’), в котором хранится весь твит. ), то есть «добавить». Огромный кусок HTML, написанный в .prepend(), содержит HTML, написанный в index.html.erb, как есть. Также обратите внимание, что $ {res.text.text} написано в той части, которая отображает текст твита. Поскольку @tweet можно получить с помощью res.text, вы можете получить «текст» в твите, написав res.text.text.
Теперь, когда вы написали код, давайте твитнуть. Если вы можете создать твит в тот момент, когда вы твитите, вы добились успеха! На этом функция твита завершена!

Зарегистрируем пользователя

Далее давайте создадим функцию регистрации пользователя. В настоящее время твитить может только один пользователь, поэтому давайте зарегистрируем других пользователей, чтобы они могли твитить. Общий поток реализации пользовательской функции заключается в том, чтобы представить библиотеку Ruby (расширенная функция) с именем gem’devise’, создать контроллер и модель, а также создать экран регистрации пользователя для завершения. Я немедленно поставлю драгоценный камень в Rails. Нажмите command + P (Ctrl + P), введите Gemfile в поле поиска и нажмите Enter. Будет много написанных файлов, но прокрутите вниз и добавьте gem’devise’.

После редактирования этого файла под названием Gemfile каждый раз нужно вводить стандартную команду. Команда представляет собой пакетную установку. При этом станет доступен драгоценный камень под названием devise. Кроме того, если есть терминал, на котором запущен сервер с rails после выполнения установки пакета, остановите сервер с помощью control + C (Ctrl + C) один раз, затем снова с rails и перезапустите сервер. Пойдем.

bundle install
rails s

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

rails g devise:install
rails g devise:controllers users
rails g devise:views
rails g devise user

Первая команда g devise: install устанавливает файл конфигурации devise в ваше приложение Rails. Во втором rails g devise: controllers users создайте контроллер на основе настроек devise, в третьем rails g devise: views создайте файл представления для просмотра с помощью контроллера devise, а в четвертом rails g devise: views I am создание модели пользователя на основе настроек устройства в user. Кроме того, после создания модели вам пришлось отредактировать файл миграции, чтобы создать таблицу. Вы должны увидеть что-то вроде create db/migrate/20201208230221_devise_create_users.rb на экране терминала, поэтому давайте отобразим файл, удерживая нажатой команду (Ctrl) и щелкнув здесь. Написано много всего, но не беспокойтесь об этом, просто добавьте две строчки под частью, где написано create_table: пользователи делают | т |.

Добавьте описание t.string: учетная запись, t.string: имя и введите в столбец учетной записи имя учетной записи, например «@soeno_onseo» в Twitter, и имя пользователя, например «Soeno @ инструктор по программированию». Добавлены столбцы имен для каждого. Затем запустите этот файл миграции.

rails db:migrate

Теперь у вас есть таблица пользователей помимо таблицы твитов, которую вы создали ранее! Тогда я хотел бы сразу зарегистрироваться как пользователь, но так как заранее требуются две настройки, я закончу это первым. Сначала отредактируйте файл application_controller.rb.

В этом описании мы делаем Заставить устройство получать столбец учетной записи и столбец имени. Если вы этого не напишете, даже если вы напишете Имя учетной записи: @soeno_onseo Имя пользователя: Soeno @ Инструктор по программированию во время регистрации пользователя, это будет запись Имя учетной записи: nil (пусто) Имя пользователя: nil ( пустой) будет создан. Имейте в виду, что devise не получит информацию о столбцах, которые вы добавили в файл миграции, если вы не установили application_controller.rb выше, поэтому вам нужно установить это. Далее вторая настройка. Во-первых, давайте получим доступ к http://localhost:3000/users/sign_up.

Есть три поля ввода, сверху вниз: адрес электронной почты, пароль, поле подтверждения пароля. Ну, здесь нет двух полей ввода. Недостаточно полей для ввода столбца счета и имени, описанных ранее. Давайте отредактируем app/views/devise/registrations/new.html.erb, чтобы добавить это.

К тегам form_for() do | добавлены два тега, f.text_field: name и f.text_field: account. ж | ~ конец. form_for () делать | имя переменной | имя переменной.text_field: вы можете создать поле ввода для любого столбца, написав конец имени столбца. Теперь давайте фактически введем значение в поле ввода и создадим пользователя! Введите информацию о пользователе в поле ввода и нажмите кнопку новой регистрации. ВСТАВЬТЕ В «пользователи» («учетная запись», «имя», «электронная почта», «зашифрованный_пароль», «создано_в», «обновлено_в») ЗНАЧЕНИЯ («soeno_onseo», «Soeno @ Programming Instructor», «fumiya.soeno@gmail. com», «Зашифрованный пароль», «2020–12–11 18:51:37», «2020–12–11 18:51. Я думаю, вы увидите журнал вида: 37»). Регистрация пользователя успешно завершена! Кроме того, когда регистрация пользователя завершена, вы должны попасть на индексный экран. Это связано с тем, что исходной настройкой устройства является «автоматическое перенаправление (перемещение) в индекс после завершения регистрации пользователя».

Кроме того, устройство также настроено на автоматический вход в качестве зарегистрированного пользователя после завершения регистрации пользователя. Однако в настоящее время то, вошел ли пользователь в систему, не отображается в индексе, поэтому невозможно определить статус входа с первого взгляда. Итак, давайте сначала отобразим статус входа в систему на индексном экране. Добавить описание user_signed_in? На 12-й строке _sidebar.html.erb.

Затем вы увидите небольшое «true» под «больше» на боковой панели. true — это понятие, часто встречающееся в программировании и называемое «значение true/false». Логические значения — это концепция программирования, обозначающая «да/нет», где «да» выражается как «истина», а «нет» — как «ложь».
user_signed_in? — это своего рода функция, называемая вспомогательным методом, которую можно использовать в Rails и которая возвращает «true», если пользователь вошел в систему, и «false», если пользователь не вошел в систему. Другими словами, теперь вы находитесь в состоянии, когда вы можно войти как зарегистрированный пользователь!

Эту концепцию истинного/ложного можно использовать в «условном переходе», который я представил немного ранее. Процесс выполнения условного ветвления называется «оператор if» и записывается так, как если бы процесс условного выражения завершился. Если часть, называемая условным выражением, становится истинной, процесс выполняется, а если ложной, он не выполняется.
Теперь давайте на самом деле напишем простой пример, используя условное ветвление. Отредактируйте _sidebar.html.erb следующим образом.

Теперь, когда вы переходите к индексу, вы должны увидеть «Вход в систему». Таким образом, условное выражение (в данном случае user_signed_in? Является ли условным выражением) выполняется как истинное в процессе, написанном сразу после оператора if. Кроме того, после этого пишется предложение «else», но это процесс, который выполняется, когда условное выражение ложно.
Затем, если вы выходите из системы в этом состоянии, дисплей должен измениться на «Вы не вошел". Давайте реализуем кнопку выхода.

link_to также является вспомогательным методом Rails, который генерирует тег a, который ссылается на указанную маршрутизацию rails. Что отличается от использования тега a, но вы можете использовать атрибут метода. Существует несколько типов «HTTP-методов», представленных чуть ранее, и в случае с тегом a, если ничего не указано, это будет тип, называемый «GET-запрос», но на этот раз запрос /users/sign_out — это « УДАЛИТЬ". Если вы не укажете его в «Метод», вы получите ошибку с именем RoutingError, поэтому, похоже, вы избежали этой ошибки, используя link_to. Кстати, когда вы нажимаете кнопку выхода, это будет отображаться как «Вы не вошли в систему». Если вы измените это на кнопку входа в систему, это будет как раз в качестве механизма. Сразу изменим это на кнопку входа и добавим CSS кнопки входа/выхода в tweets.scss.

Ну, если вы можете сделать это до сих пор, это окончательный финиш. В настоящее время, даже если вы твитите, имя пользователя будет «Fumiya Soeno», поэтому давайте исправим это, чтобы оно изменилось на имя пользователя, который в данный момент вошел в систему. Во-первых, для этого вам нужно удалить все записи в таблице твитов, поэтому сделайте это.
Сначала запустите mysql -u root -p в своем терминале. Вам будет предложено ввести пароль, поэтому введите пароль MySQL, который вы установили сами.

mysql -u root -p

Если вы видите mysql›, вы успешно вошли в MySQL. Продолжим выполнять следующие команды по порядку.

use twitter_development;
delete from tweets;

Если вы получаете сообщение типа Query OK, затронуто 10 строк (0,00 с), все в порядке! Все записи в таблице твитов были удалены. Теперь запустим выход; чтобы выйти из режима MySQL.

exit;

Теперь давайте выполним работу по связыванию пользователей с твитами. Во-первых, давайте создадим файл миграции с помощью команды rails g migration.

rails g migration AddUserIdToTweets

Вы увидите лог вида create db/migrate/20201211203018_add_user_id_to_tweets.rb. Удерживая Command (Ctrl), щелкните мышью. Затем отредактируйте файл миграции следующим образом.

Утверждение external_key: true важно. В качестве содержания твита задается информация «чей твит» с названием «столбец user_id». Теперь давайте запустим этот файл миграции.

rails db:migrate

Кстати, вы не можете твитить с информацией о пользователе как таковой. Осталось сделать еще две вещи, одна из них — отредактировать контроллер. Отредактируйте tweets_params в tweets_controller.rb следующим образом.

Добавлено описание .merge (user_id: current_user.id). merge — это одна из функций Ruby, позволяющая добавлять элементы в хэш. Вы можете дать твиту идентификатор пользователя, присвоив значение current_user.id имени user_id. current_user — это вспомогательный метод разработки, который позволяет вам получить идентификатор текущего пользователя, вошедшего в систему. Тогда давайте чирикать, когда это описание закончится. Я думаю, что имя пользователя по-прежнему «Fumiya Soeno @soeno_onseo», но, изменив описание в праве обертки-твитов-твитов-право index.html.erb следующим образом, оно должно измениться на зарегистрированное вами имя пользователя.

Кроме того, поскольку HTML-код, сгенерированный сразу после твита, также должен быть связан с информацией о пользователе, измените часть JavaScript в файлах create.json.jbuilder и index.html.erb следующим образом.

Если отображаемое имя твита изменилось, он успешен. На этом функция регистрации пользователя завершена!

Давайте сделаем профиль

Далее давайте создадим страницу профиля пользователя. Во-первых, давайте зарегистрируем нового пользователя отдельно от пользователя, который в данный момент вошел в систему. После регистрации отредактируйте route.rb следующим образом.

Добавлены ресурсы: пользователи, только: [:show]. Я определил действие show в пользовательском контроллере. Как только это будет сделано, выполните следующую команду в своем терминале:

rails g controller users

Теперь вы определили новый контроллер, связанный с вашей моделью пользователя, который называется пользовательским контроллером. Я думаю, что в терминале есть журнал под названием create app/controllers/users_controller.rb, поэтому команда (Ctrl) + клик, чтобы открыть его, и написать следующее.

Я определил переменную с именем @user и присвоил ей что-то под названием User.find (params [: id]). User.find() означает найти запись, соответствующую указанному id в скобках .find() из таблицы пользователей и присвоить ее. И я указал params [: id] в качестве идентификатора для поиска. Эти параметры [: id] являются идентификаторами, которые получает действие show, и что они получают, на данный момент не определено. params[:id] определяется, когда пользователь отправляет запрос. Я не думаю, что это хорошая идея, поэтому давайте на самом деле отправим этот «запрос, который передал параметры [: id]». Сначала создайте файл представления, который будет отображаться при отправке запроса с именем app/views/users/show.html.erb.

После этого создайте две ссылки на действие show. Один из «Профиля» на боковой панели, а другой — из твита. Давайте отредактируем tweets_controller.rb и index.html.erb.

↓ index.html.erb (часть JavaScript)

После внесения вышеуказанных исправлений нажмите Профиль на боковой панели и Часть имени пользователя в твите, чтобы подтвердить, что вы попали на страницу, которая выглядит как http://localhost:3000/users/2. . Здесь отображается Show.html.erb, но обратите внимание на URL (адрес) этой страницы. Числа включены как /users/2 . Этот номер представляет собой params [:id], описанный ранее. Поскольку идентификатор первого созданного пользователя равен 1, URL-адрес страницы профиля будет http://localhost:3000/users/1, а второго человека будет 2. Такие страницы, как http://localhost :3000/notification, который я создал до сих пор, не включал числа в URL-адрес, но вы также можете использовать params [: id] для создания URL-адресов, содержащих эти числа. Имейте в виду, что для действия может быть несколько страниц. !
Теперь давайте попробуем отобразить только твиты пользователя на этой странице профиля. Прежде всего, часть index.html.erb, которая генерирует твит, превращается в частичный шаблон как layouts/_tweet.html.erb.

Все, что вам нужно сделать, это загрузить частичный шаблон из show.html.erb!

Обратите внимание, что часть, которая раньше была Tweet.all.each, теперь называется Tweet.where (user_id: @user.id) .each. С этим описанием твиты получаются на основе параметров [: id] вместо всех твитов, поэтому, короче говоря, будут отображаться только «твиты пользователя».
После этого давайте добавим часть профиля пользователя! Кроме того, на этот раз я добавлю пустышку в выписку о профиле, но если вы мотивированы, добавьте «столбец для размещения выписки из профиля» в таблицу пользователей и отобразите ее самостоятельно. Пожалуйста. Этого можно добиться, используя add_column в миграции rails g.

На этом функция профиля завершена!

Давайте сделаем подобную функцию

Далее давайте создадим функцию «лайк», которая особенно важна в социальных сетях! Во-первых, давайте определим подобное действие в route.rb, чтобы оно понравилось.

Появилось новое описание члена do ~ end, предназначенного для получения params[:id] в качестве действия. Подобно пользователям # show, определенным ранее, твиты # like должны ссылаться на информацию «Какой твит вам нравится», то есть на столбец id таблицы твитов, поэтому, написав member do ~ end, params [ : id] должны быть полученным.
Затем создайте таблицу лайков, в которой записи генерируются подобным действием.

rails g model like

Затем отредактируйте файл миграции. Нам нужны внешние ключи для таблиц пользователей и твитов, потому что нам нужна информация «кому нравится какой твит».

Теперь давайте запустим файл миграции!

rails db:migrate

Теперь, когда вы можете сохранять лайки, настройте запуск лайков из JavaScript. Прежде всего, настройте чтение процесса JavaScript, записанного в index.html.erb, в виде отдельного файла JavaScript.
Во-первых, описание ‹script src = «https://code.jquery.com/jquery- 3.5.1.js›‹/script›, но переместите это описание в файл с именем application.html.erb.

application.html.erb — это файл, который загружает Rails перед загрузкой всех файлов представлений. А код ‹script src="https://code.jquery.com/jquery-3.5.1.js› ‹/script›, который я только что переместил, называется jQuery CDN, чтобы расширить функциональность JavaScript. Это было описание для чтения файла из Интернета. До сих пор это читалось только с помощью index.html.erb, но теперь необходимо прочитать его и из show.html.erb, поэтому переместите код в общее место загрузки, как мы сделали с частичным шаблоном. Я чувствую, что позволил тебе.

Продолжайте перемещать код внутри тега стиля index.html.erb в общую часть. Вы можете переместить его в application.html.erb, как и раньше, но есть место получше. Это в app/assets/javascripts. Здесь есть файл с именем tweets.coffee, поэтому переименуйте его в tweets.js и переместите в него код внутри тега script. Кроме того, добавьте описание, чтобы подобное действие выполнялось как событие при нажатии на элемент .fa-heart.

Затем отредактируйте часть кнопки «Мне нравится» в файле _tweet.html.erb. Проверьте наличие записей в таблице лайков и внесите поправку для выполнения условного ветвления в зависимости от наличия записей. «Независимо от того, есть ли запись в таблице лайков» означает «понравился ли вам твит». Если вам это нравится, сердце будет отображаться красным, а если нет, то серым.

Дальше контроллер. Давайте добавим подобное действие.

Наконец, создайте файл с именем like.json.jbuilder в app/views/tweets в результате выполнения подобного действия и отредактируйте его следующим образом.

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

Давайте сделаем следующую функцию

Давайте создадим «функцию подписки», которую можно назвать основной функцией Twitter, а также аналогичной функцией. Вы можете задаться вопросом, запомните ли вы больше, но на самом деле вы можете создать функцию Follow с «почти той же процедурой, что и аналогичная функция». Во-первых, давайте определим действие Follow в route.rb.

Я определил метод get «follow» с членом do ~ end для пользовательского контроллера. член do ~ end был описанием получения params[:id]. Причина, по которой я хочу получить params[:id], заключается в том, что функции follow нужна информация о том, «за кем следить». Далее давайте создадим таблицу подписчиков для хранения информации о том, «кто на кого подписан».

rails g model follow

Ну, что ты делал после этого…? Да, редактирование файла миграции.

Что делать после редактирования файла миграции? Да, rails db: миграция.

rails db:migrate

После этого создайте кнопку подписки на show.html.erb (страница профиля пользователя) и обработайте нажатие кнопки подписки с помощью JavaScript $(document) .on('click','. Follow-button', function () {$ .get ({url: self.attr ('action') …})}), напишите обработку следующего действия, вызываемого здесь, в users_controller.rb, и напишите этот ответ. Напишите его в app/views/users/follow .json.jbuilder.
Информации много и все пока тяжело запомнить, но, кажется, постепенно кое-что понял.

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

Теперь давайте перейдем на страницу профиля пользователя, отличного от текущего пользователя, вошедшего в систему, и проверим, работает ли кнопка подписки. Если вы видите, что количество подписчиков увеличивается или уменьшается, когда вы нажимаете кнопку подписки, функция подписки завершена!

Сделаем функцию уведомления

Это последняя особенность производства Twitter! Наконец, мы реализуем функцию уведомления для функций Like и Follow. Основная идея реализации по-прежнему почти такая же, как у «функции лайка», но в отличие от функции «лайк» и функции «следовать» она реализует не что-то вроде «действия уведомления», а функции «лайк» и «функция подписки». функция уведомления как «часть функции». Для функций «Нравится» и «Подписаться» я сначала отредактировал route.rb, но, как я объяснял ранее, я не определяю «действие уведомления», поэтому мне не нужно редактировать route.rb. Поэтому сначала создайте таблицу уведомлений.

rails g model notification

rails db:migrate

В столбцах notification и notified_by хранятся внешние ключи к таблице пользователей для «кто был уведомлен» и «кто выдал уведомление» соответственно. Кроме того, для уведомлений о лайках мы добавили внешний ключ в таблицу твитов, чтобы определить, какие твиты вам понравились. Наконец, есть столбец «Прочитано», в котором указывается, было ли прочитано уведомление. boolean — это тип данных для ввода «значения достоверности», описанного ранее, и может быть истинным или ложным. На этот раз я введу false, если он не прочитан, и true, если он был прочитан.
Теперь давайте отредактируем контроллер. Добавьте процесс формирования записи для таблицы уведомлений в процессы tweets#like и users#follow.

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

rails c
Like.destroy_all
Follow.destroy_all
Notification.destroy_all
exit

Вы готовы к работе! Затем отредактируйте _sidebar.html.erb и уведомление.html.erb, чтобы увидеть уведомления.

Это завершает экран уведомлений! Поскольку он имеет функцию чтения, убедитесь, что числовое отображение значка уведомления исчезает после прочтения уведомления. Чтобы проверить работу функции уведомлений, снова войдите в систему как другой пользователь, подпишитесь или отметьте другого пользователя как этого пользователя, а затем снова войдите в систему как другой пользователь. Пожалуйста.
Это все для Твиттера! Спасибо за ваш труд. Если вы не понимаете деталей процесса, вы можете поискать код, используемый Google, и он будет установлен как более глубокое знание, поэтому, пожалуйста, попробуйте.

Об учебной программе отсюда и далее

С этого момента я пишу, но http://www.onseo.info/articles/12 по сути является продолжением этой учебной программы. Мы представляем способы более практичного использования Rails, такие как git и AWS, так что попробуйте. Кроме того, если вы найдете содержание статей полезным, пожалуйста, нажмите кнопку хлопка, и это поможет мне писать статьи для начинающих в будущем, поэтому, пожалуйста, не стесняйтесь обращаться ко мне!!!