Основы Git и первый коммит компонента на Github

Заканчиваем с подготовкой к началу активной разработки.

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

Синхронизация с сервером

После того, как мы связали наш локальный проект с удалённым сервером, в PhpStorm появились новые пункты в контектном меню: - Выгрузить файлы на сервер

  • Скачать файлы с сервера
  • Синхронизировать удалённые и локальные файлы

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

Мы выгружаем проект в первый раз, перезаписывать там нечего - поэтому смело кликаем Upload to MODXCloud. После этого можно проверить наличие файлов в админке. -

Теперь нам нужно переименовать заготовку modExtra в Sendex. Для этого воспользуемся скриптом rename_it.php. На моём сервере ссылка получается вот такая:

http://c2263.paas2.ams.modxcloud.com/Sendex/rename_it.php

Если открыть её без параметров, то скрипт требует указать новое имя:

You need to specify a new name of component in this file on line 9, or send it via $_GET["name"].

Окей, изменяем ссылку и указываем новове имя:

http://c2263.paas2.ams.modxcloud.com/Sendex/rename_it.php?name=Sendex

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

Мы даже можем его собрать и установить, прямо сейчас, но тогда он создаст нам ненужные демо-таблицы в БД, так что это мы сделаем после написания своей схемы и генерации модели.

В админке уже видно новые файлы, а вот в проекте все по старому. Значит, их нужно синхронизировать. Учитывая, что в локальном проекте мы ничего не меняли, можно кликнуть Download from MODXCloud - IDE предупредит, что может перезаписать файлы. Спасибо, мы в курсе. -

Теперь удаляем старые ненужные файлы и директории: - /core/components/modextra/

  • /assets/components/modextra/
  • rename_it.php
  • rename_it.sh

Если вы предусмотрительно активировали в настройках Deployment пункт Automatic upload, то все изменения будут сразу синхронизироваться: Пожалуйста, помните, что автоматическая синхронизация работает в одну сторону - от локального компьютера на сервер. Если вы редактируете файлы проекта через админку сайта - нужно синхронизировать эти изменения вручную.

Ну вот, теперь наш проект готов для первого коммита на GitHub.

Работа с GitHub

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

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

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

После установки возвращаемся в PhpStorm и бежим в настройки. Там есть поиск, в котором вводим git и видим совпадения: Вводим и проверяем данные для доступа на GitHub, а затем указываем и проверяем путь к исполняемому файлу git (не знаю, где он будет на Windows - придётся поискать).

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

Жмём в меню VCSEnable version control, выбираем git и сохраняем. -

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

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

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

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

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

Еще одно отличие Git - это формат хранения. Он не лезет в ваши файлы, сохраняя всё нужно в одной директории .git. Фактически, Sendex/.git - это и есть репозиторий. Именно поэтому нам нужны было удалить старую директорию, которая была репозиторием modExtra.

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

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

.idea

Таким образом, мы отключи слежение за служебной директорией PhpStorm внутри проекта.

Удобно, не правда ли? Так зачем же тогда нужен GitHub? А вот затем, чтобы связать все ваши компьютеры, флешки и прочие хранилища одного проекта. Можно назвать GitHub центральным хранилищем кода. В настоящее время он хостит огромное количество проектов, которые разрабатываются разными людьми, и всё это не превращается в хаос. Кстати говоря, MODX разрабатывается там же.

Файл README.md в корне проекта будет служить кратким описанием, поэтому я немного его изменил и теперь можно делать первый коммит, то есть фиксирование кода. Это будет как бы точка сохранения, на которую мы сможет потом откатиться, если что.

В PhpStorm это делается просто. Открываем вкладку Changes внизу IDE, и выбираем Commit changes в контекстном меню. перед отправкой изменений в репозиторий IDE показывает нам все изменённые файлы (а это сейчас весь проект), и просит ввести описание изменений. -

В первом комите изменений как бы нет, поэтому и пишем "First commit". Далее жмём commit и игнорируем предупреждения об ошибках в коде - больно уж умный этот PhpStorm! На вкладке Version control будет лог работы Git - ну вдруг, интересно?

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

Ну а теперь нам осталось только связать наш удалённый проект с GitHub и отправить изменения в него, чтобы их могли видеть все желающие. К сожалению, я не нашел как это сделать прямо в PhpStorm, поэтому придётся через командную строку.

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

Как видите, для отправки имеющегося репозитория (а это именно наш случай), нужно выполнить в коммандной строке:


git remote add origin https://github.com/bezumkin/Sendex.git
git push -u origin master

Причем, вторую команду можно запустить уже из PhpStorm. Обязательно отмечаем ветку master, в которую нужно отправить наш коммит: -

Ну вот наш проект и на GitHub! По идее, вы теперь вы можете сделать себе его форки (ответвления) и присылать мне свои коммиты, но на на сегодня хватит.

В комментариях подсказывают, что можно добавить локальный репозиторий в клиент GitHub, и оттуда уже запулить его на удалённый сервер. -

Тоже хороший вариант.

Заключение

Сегодня мы выгрузили наш проект на сервер, переименовали, синхронизировали изменения и добавили систему контроля версий. Мы даже выгрузили наш репозиторий на GitHub, чтобы все интересующиеся могли наблюдать за прогрессом нашиего курса =)

На следующем занятии продумываем логику работы компонента, пишем схему и генерируем модель БД.

← Предыдущая заметка
Разбор структуры компонента, зачем нужны assets, core и \_build
Следующая заметка →
Продумываем логику работы, определяем схему и модель БД
Комментарии (65)
Виталий Князь
13.11.2013 11:03

классная вещь. только почему при клике на ссылку "Наверх" открывается страница: > http://bezumkin.ru/lessons/course1/

bezumkinВасилий Наумкин
13.11.2013 11:05

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

Щас переменую.

ilyautkinИлья Уткин
13.11.2013 23:22

Только по идее-то "Следующая заметка" является предыдущей (как по времени, так и по смыслу). Я на секунду вошел в состояние когнитивного диссонанса)))

bezumkinВасилий Наумкин
14.11.2013 05:28

Точно, поправил!

Виталий Князь
13.11.2013 11:59

Есть ли возможность записывать видео? Звук не так важен, главное чтобы было видно действия...

К примеру:

Теперь удаляем старые ненужные файлы и директории: /core/components/modextra/ /assets/components/modextra/ rename_it.php rename_it.sh

У меня нет такой папки в директориях: > /core/components/ /assets/components/

В корне сайта лежит Sendex, в ней был modExtra.

bezumkinВасилий Наумкин
13.11.2013 12:01

Этих директорий на сервере и не будет - они переименованы скриптом в sendex.

А вот на локальной машине директории никто не переименовывал, поэтому после синхронизации в PhpStorm должны появиться директории sendex, и остаться modextra - их то мы и удаляем.

В общем, в итоге дерево и на сервере и на локальной машине выглядит вот так:

В каждый момент времени, в директории Sendex на сервере и на локальной машине должно быть всё одинаково. С сегодняшнего момента сотояние проекта видно и на GitHub - еще проще сравнивать.

Виталий Князь
13.11.2013 12:45

так понял что удалить нужны вот эти директории (которые "четкие")

bezumkinВасилий Наумкин
13.11.2013 12:57

Верно!

Виталий Князь
13.11.2013 13:16

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

13:12:12 Created Git repository in D:\project\Sendex

Но в директории не отображается папки .git:

открывать надо через адрес в файловом менеджере windows. > D:\project\Sendex\.git

Либо включить отображение скрытых файлов и папок.

bezumkinВасилий Наумкин
13.11.2013 14:02

Спасибо за уточнение!

Виталий Князь
13.11.2013 13:22

Далее жмём commit и игнорируем предупреждения об ошибках в коде — больно уж умный этот PhpStorm!

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

bezumkinВасилий Наумкин
13.11.2013 14:01

Можно и так, но я не отключаю, потому что когда идут правки компонента после выпуска - там уже не должно быть таких ошибок.

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

k-m-eКупчинский Михаил
13.11.2013 13:32

Василий, не совсем понял, где вводить команду "git remote add origin https://github.com/----user----/Sendex.git" если работаешь на windows машине.

Виталий Князь
13.11.2013 13:57

Решение от меня.

1. Скачал и установил программулю отсюда https://code.google.com/p/msysgit/downloads/list 2. Запустил её (вроде бы её?!) 3.

Сменил директорию на ту где проект лежит:

cd d/project/Sendex/

Ввел команду (у каждого собственно своя):


git remote add origin https://github.com/sentyakov/Sendex.git

Перезапустил phpStorm (мб и не надо было...)

Еще я указывал данные для авторизации в гитхаб в настройках

Ну а потом все по инструкции.

Как-то работает: https://github.com/sentyakov/Sendex

bezumkinВасилий Наумкин
13.11.2013 13:59

Это надо вводить в консоли Windows.

Если не знаешь, как туда попасть - то вот, Виталий помогает =)

k-m-eКупчинский Михаил
13.11.2013 14:24

это я все сделал. Только скачал клиента с самого GitHub -а . Ноу меня при выполнении этой команды выдает сообщение что то типа о том что Sendex уже есть. Но на самом github пусто

bezumkinВасилий Наумкин
13.11.2013 14:25

Покажи, что именно выдаёт?

k-m-eКупчинский Михаил
13.11.2013 14:34

bezumkinВасилий Наумкин
13.11.2013 14:45

Ну, значит все ок. Ты же удалял директорию .git перед этими манипуляциями?

k-m-eКупчинский Михаил
13.11.2013 14:51

Да но когда пытаюсь выполнить вторую команду то выскакивает вот это:

k-m-eКупчинский Михаил
13.11.2013 14:54

либо вот с командной строки :

k-m-eКупчинский Михаил
13.11.2013 15:14

Вроде что-то сдвинулось. После перезапуска phpStorm и попытки выполнить Push выдало ошибку: "fatal: unable to access 'https://githun.com/k-m-e/Sendex.git/': Failed connect to githun.com:443; No error" . Может фаервол не пускает?

bezumkinВасилий Наумкин
13.11.2013 15:15

Failed connect to githun.com:443;

Будь внимательнее.

k-m-eКупчинский Михаил
13.11.2013 15:29

поменял в файле config githun.com на github.com и все сработало))). Как всегда подводит невнимательность.

bezumkinВасилий Наумкин
13.11.2013 15:32

Ура!

bezumkinВасилий Наумкин
13.11.2013 14:56

Ну тогда нужно опять удалить директорию .git, и сделать все заново:

git init
git add .
git commit -a -m "First commit"
git remote add origin https://github.com/bezumkin/Sendex.git
git push -u origin master

Это я команды для консоли написал - так быстрее.

Алексей Карташов
13.11.2013 16:58

Я понимаю, что консольный хардкор - это здорово :), но!

У гитхаба же есть прекрасный гуишный клиент, разобраться с которым - дело 5ти минут. А дальше весь процесс отправки коммитов в удалённый репозиторий - всё через него.

В своё время не заставил себя осилить пять гит-команд - с тех пор только им (клиентом этим) и пользовался :)

bezumkinВасилий Наумкин
13.11.2013 17:09

Ну и отлично, еще один способ работы - каждый выберет себе, что больше нравится.

k-m-eКупчинский Михаил
13.11.2013 17:33

У меня он и стоит. Но что-то он давал ошибку поначалу. Видно какая-то последовательность действий у меня была не правильная. Пришлось качнуть приведенный выше от сюда code.google.com/p/msysgit/downloads/list. Теперь вроде все ОК и с этим.

alex.vakhitovAlex Vakhitov
13.11.2013 18:22

Если говорить о гуишных клиентах, то на мой взгляд лучший это source tree, настоящий комбайн.

Олег ТрубинОлег Трубин
13.11.2013 19:30

В phpstorm в настройках нужно указать exe-файл. В случае использования этого клиента ты какой указывал?

bezumkinВасилий Наумкин
13.11.2013 19:40

Это же родной клиента GitHub, там все сразу работает.

Алексей Карташов
13.11.2013 20:22

Да, там всё сразу работает и пользоваться этим клиентом можно отдельно от phpstorm.

Но вместе с этим клиентом ставится консольный клиент под названием Git Shell (ярлык на него лежит в папке Пуск -> GitHub -> Git Shell). Ярлык этот ведёт на файл "C:\Users\\AppData\Local\GitHub\GitHub.appref-ms --open-shell", который запукает виндовый PowerShell (не cmd) с настроенным git'ом и системными переменными окружения и уже здесь можно юзать git-команды. Но не знаю, можно ли адрес этого файла вставить в phpstorm (не, можно-то - можно, но заработает ли?) - здесь пробовать надо.

bezumkinВасилий Наумкин
13.11.2013 20:28

Наверное, и на windows можно просто установить экзешник:

Алексей Карташов
13.11.2013 20:38

А это, скорей всего, он и есть. Я при установке, емнип, включал чекбокс - устанавливать ли этот самый "Command Line Tools" или нет. Это, скорей всего, для тех, кто при установке отказался.

В данный момент у меня вообще вот так:

Если выбрать "Custom", то можно указать путь хоть к тому же msysgit'у - тут уж кому как удобнее и кто что установил. Хотя для самого гуишного клиента разницы, вроде как, быть не должно.

k07nAndrei Kilin
13.11.2013 23:02

git.exe лежит чуть глубже: c:\Users\username\AppData\Local\GitHub\PortableGit_0f65...9ef87\bin\git.exe

ershov.ilyaИлья Ершов
14.11.2013 12:47

Хрень какая-то... Пользуюсь виндовым клиентом Git'а. Прописал в .gitignore: .idea

А оно всё равно отслеживает всё содержимое этой папки... пробовал по разному: .idea .idea/ .idea/*

bezumkinВасилий Наумкин
14.11.2013 12:54

Видимо, файлы уже добавлены в историю версий, поэтому их нужно исключить при помощи git rm.

Попробуй выполнить в консоли:

git rm .idea

Вот здесь больше информации.

Олег ТрубинОлег Трубин
14.11.2013 12:50

Все файлики стали коричневыми, это значит, что они не добавлены в репозиторий. Нужно добавить их через контекстное меню, в котором появился новый пункт Git, и они позеленеют.

Пытаюсь добавить файлы в репозиторий и получаю сообщение об ошибке. См. скриншот. Как бы это побороть?

bezumkinВасилий Наумкин
14.11.2013 12:59

Попробуй отключить проверку CRLF

Сними галочку - это замена символов переноса строки.

Олег ТрубинОлег Трубин
14.11.2013 13:15

Спасибо за ответ, но снятие галочки не помогло. Я пользуюсь msysgit. Ранее я сделал как указано здесь http://githowto.com/ru/setup

git config --global core.autocrlf true
git config --global core.safecrlf true

сейчас выполнил обратную операцию:

git config --global core.autocrlf false
git config --global core.safecrlf false

ошибка исчезла. Но вот не знаю, не "аукнется" ли мне это в будущем.

bezumkinВасилий Наумкин
14.11.2013 13:17

Не должно.

Я сам далеко не мега-мастер в Git, пользуюсь только основными возможностями.

alex.vakhitovAlex Vakhitov
14.11.2013 13:43

Чтобы не аукнулось можно поставить


git config --global core.safecrlf true

это предотвратит автозамену переводов строк, ну и можно в phpStorm включить определенный тип перевода строк

Олег ТрубинОлег Трубин
14.11.2013 13:59

и как считаешь какой тип выставить? У меня сейчас по умолчанию виндовый \r\n есть ли какой-то смысл его менять?

alex.vakhitovAlex Vakhitov
15.11.2013 11:23

Если работаешь один или вся команда на вин, то можно все оставлять как есть и все настройки оставлять прежними, если нет то исправлять ошибку которую вызывает core.autocrlf true , это довольно распространенная штука и нагуглить how to статью с решением проблемой не будет

DarkLelikАлексей Марченко
15.11.2013 12:48

Василий , что то я наверное упустил нет пункта "Add to VCS" Где что мог упустить ? Спасибо !

bezumkinВасилий Наумкин
15.11.2013 14:34

Дык это тоже самое.

Похоже, в версии для Windows немного иначе называется.

DarkLelikАлексей Марченко
15.11.2013 14:57

У меня Linux. Кстати . при тыканье вообще ничего не происходит ...... так ладно разбираюсь .. спасибо

bezumkinВасилий Наумкин
15.11.2013 15:02

Если Linux (поздравляю, кстати!), то просто зайди в директорию проекта из консоли и набери

git add .

Это добавит все новые файлы в индекс Git.

DarkLelikАлексей Марченко
15.11.2013 15:10

А вот так сработало )))) гуд !!! Спасибо! уже лет 10 как на linux .... хороша система ..

bezumkinВасилий Наумкин
15.11.2013 15:14

Для разработки - вообще лучшая.

DarkLelikАлексей Марченко
15.11.2013 15:22

ну я в разработке недавно, все одминил ... UPD у меня PhpStorm-6.0.3 был вот и разница в названии , обновил до 7-го .. все ок стало !!! И пункт стал как и надо "Add to VCS"

bezumkinВасилий Наумкин
15.11.2013 15:23

Ну и ладушки!

ElectricaМихаил
29.11.2013 17:48

А у меня нету такого пункта. Файлики серые ) Вот тут

ElectricaМихаил
29.11.2013 17:55

А все сделал. Невнимательность. в консоли git add .

ElectricaМихаил
29.11.2013 18:40

А кстати вопрос. Получается Мы делаем изменения, потом делаем коммит. Это все сохраняется на локалке, верно? А потом делаем пуш и на гитхабе все перезаписывается. А в чем прикол контроля версий? Я что то поменял, пушнул, все новое, кто то поменял, пушнул и ппц че я там делал. Или я не так понял?

alex.vakhitovAlex Vakhitov
29.11.2013 19:09

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

ElectricaМихаил
29.11.2013 19:29

А можно будет вернуть изменения например до такого то коммита?

alex.vakhitovAlex Vakhitov
29.11.2013 19:31

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

bezumkinВасилий Наумкин
29.11.2013 19:54

Просто посмотри историю живого проекта, например miniShop2.

У каждого пункта есть Browse code и можно читать код на любом этапе разработки.

ElectricaМихаил
29.11.2013 20:23

Спасибо. Буду разбираться. пока не въехал.

ElectricaМихаил
25.01.2014 21:26

Пересел на линукс, делаю все заново, вопрос. Установил git apt-get install git а куда он установил? Не могу указать путь. Не найду что то

bezumkinВасилий Наумкин
25.01.2014 22:05

Обычно /usr/bin/git

ElectricaМихаил
25.01.2014 22:31

И вправду. раз 5 искал там не находил О_о. Спасибо! буду дальше осваивать. Кстати линукс тема)

bezumkinВасилий Наумкин
25.01.2014 22:32

Да, для работы - самое то.

Удачи!

bezumkin
Василий Наумкин
19.03.2024 03:45
Pinia, как и Vuex нужны для обмена данными между компонентами. Хранлища - реактивные. Если вывод фо...
bezumkin
Василий Наумкин
14.03.2024 13:13
Спасибо!
Андрей
14.03.2024 10:47
Василий! Как всегда очень круто! Моё почтение!
russelgal
russel gal
09.03.2024 17:17
А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал ...
inetlover
Александр Наумов
27.01.2024 00:06
Василий, спасибо! Извини, тупанул.
bezumkin
Василий Наумкин
22.01.2024 04:43
Давай-давай!
bezumkin
Василий Наумкин
24.12.2023 11:26
Спасибо!
bezumkin
Василий Наумкин
27.11.2023 02:43
Ура!
bezumkin
Василий Наумкин
25.11.2023 08:30
Vesp тянет 2 зависимости: vesp-frontent для фронта и vesp-core для бэкенда. Их можно обновлять, но э...
bezumkin
Василий Наумкин
22.11.2023 08:09
Отлично, поздравляю!