Основы 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 и качаем их приложение. С одной стороны, приложение это не обязательно, а с другой - оно установит консольный git, который нам очень нужен.

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

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

Жмём в меню VCS → Enable 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, чтобы все интересующиеся могли наблюдать за прогрессом нашиего курса =)

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

Создание компонентов MODX

65 комментариев

Виталий Князь

13.11.2013, 15:03:41

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

Василий Наумкин

13.11.2013, 15:05:18

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

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

Илья Уткин

14.11.2013, 03:22:24

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

Василий Наумкин

14.11.2013, 09:28:51

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

Виталий Князь

13.11.2013, 15:59:40

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

К примеру:

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

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

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

Василий Наумкин

13.11.2013, 16:01:48

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

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

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

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

Виталий Князь

13.11.2013, 16:45:26

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

Василий Наумкин

13.11.2013, 16:57:57

Верно!

Виталий Князь

13.11.2013, 17:16:30

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

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

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

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

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

Василий Наумкин

13.11.2013, 18:02:48

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

Виталий Князь

13.11.2013, 17:22:29

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

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

Василий Наумкин

13.11.2013, 18:01:46

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

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

Купчинский Михаил

13.11.2013, 17:32:53

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

Виталий Князь

13.11.2013, 17:57:41

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

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

Василий Наумкин

13.11.2013, 17:59:38

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

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

Купчинский Михаил

13.11.2013, 18:24:16

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

Василий Наумкин

13.11.2013, 18:25:33

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

Купчинский Михаил

13.11.2013, 18:34:55

Василий Наумкин

13.11.2013, 18:45:51

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

Купчинский Михаил

13.11.2013, 18:51:19

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

Купчинский Михаил

13.11.2013, 18:54:32

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

Василий Наумкин

13.11.2013, 18:56:08

Ну тогда нужно опять удалить директорию .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, 19:14:18

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

Василий Наумкин

13.11.2013, 19:15:57

Failed connect to githun.com:443;

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

Купчинский Михаил

13.11.2013, 19:29:22

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

Василий Наумкин

13.11.2013, 19:32:56

Ура!

Алексей Карташов

13.11.2013, 20:58:43

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

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

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

Василий Наумкин

13.11.2013, 21:09:23

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

Купчинский Михаил

13.11.2013, 21:33:57

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

Alex Vakhitov

13.11.2013, 22:22:40

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

Олег Трубин

13.11.2013, 23:30:04

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

Василий Наумкин

13.11.2013, 23:40:34

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

Алексей Карташов

14.11.2013, 00:22:17

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

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

Василий Наумкин

14.11.2013, 00:28:03

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

Алексей Карташов

14.11.2013, 00:38:02

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

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

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

Andrei Kilin

14.11.2013, 03:02:06

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

Илья Ершов

14.11.2013, 16:47:20

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

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

Василий Наумкин

14.11.2013, 16:54:51

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

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

git rm .idea

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

Олег Трубин

14.11.2013, 16:50:31

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

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

Василий Наумкин

14.11.2013, 16:59:23

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

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

Олег Трубин

14.11.2013, 17:15:47

Спасибо за ответ, но снятие галочки не помогло. Я пользуюсь 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

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

Василий Наумкин

14.11.2013, 17:17:06

Не должно.

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

Alex Vakhitov

14.11.2013, 17:43:18

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


git config --global core.safecrlf true

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

Олег Трубин

14.11.2013, 17:59:50

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

Alex Vakhitov

15.11.2013, 15:23:10

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

Алексей Марченко

15.11.2013, 16:48:17

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

Василий Наумкин

15.11.2013, 18:34:48

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

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

Алексей Марченко

15.11.2013, 18:57:52

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

Василий Наумкин

15.11.2013, 19:02:26

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

git add .

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

Алексей Марченко

15.11.2013, 19:10:25

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

Василий Наумкин

15.11.2013, 19:14:12

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

Алексей Марченко

15.11.2013, 19:22:39

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

Василий Наумкин

15.11.2013, 19:23:17

Ну и ладушки!

Михаил

29.11.2013, 21:48:42

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

Михаил

29.11.2013, 21:55:30

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

Михаил

29.11.2013, 22:40:21

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

Alex Vakhitov

29.11.2013, 23:09:15

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

Михаил

29.11.2013, 23:29:35

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

Alex Vakhitov

29.11.2013, 23:31:23

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

Василий Наумкин

29.11.2013, 23:54:49

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

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

Михаил

30.11.2013, 00:23:46