Основы 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


Комментарии ()

  1. Виталий Князь 13 ноября 2013, 11:03 # 0

    классная вещь. только почему при клике на ссылку «Наверх» открывается страница:
    bezumkin.ru/training/course1/
    1. Василий Наумкин 13 ноября 2013, 11:05 # 0
      Прокрутка вверх находится в правом нижнем углу страницы, это ссылка на родительский раздел.

      Щас переменую.
      1. Илья Уткин 13 ноября 2013, 23:22 # 0
        Только по идее-то «Следующая заметка» является предыдущей (как по времени, так и по смыслу). Я на секунду вошел в состояние когнитивного диссонанса)))
        1. Василий Наумкин 14 ноября 2013, 05:28 # 0
          Точно, поправил!
      2. Виталий Князь 13 ноября 2013, 11:59 # 0
        Есть ли возможность записывать видео? Звук не так важен, главное чтобы было видно действия…

        К примеру:

        Теперь удаляем старые ненужные файлы и директории:
        /core/components/modextra/
        /assets/components/modextra/
        rename_it.php
        rename_it.sh
        У меня нет такой папки в директориях:
        /core/components/
        /assets/components/
        В корне сайта лежит Sendex, в ней был modExtra.
        1. Василий Наумкин 13 ноября 2013, 12:01 # 0
          Этих директорий на сервере и не будет — они переименованы скриптом в sendex.

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

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


          В каждый момент времени, в директории Sendex на сервере и на локальной машине должно быть всё одинаково.
          С сегодняшнего момента сотояние проекта видно и на GitHub — еще проще сравнивать.
          1. Виталий Князь 13 ноября 2013, 12:45 # 0
            так понял что удалить нужны вот эти директории (которые «четкие»)
            1. Василий Наумкин 13 ноября 2013, 12:57 # 0
              Верно!
        2. Виталий Князь 13 ноября 2013, 13:16 # 0
          Если вы еще не удалили директорию Sendex/.git, то сейчас самое время это сделать, потому что нам нужно создать новый локальный репозиторий.
          13:12:12 Created Git repository in D:\project\Sendex
          Но в директории не отображается папки .git:

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

          Либо включить отображение скрытых файлов и папок.
          1. Василий Наумкин 13 ноября 2013, 14:02 # 0
            Спасибо за уточнение!
          2. Виталий Князь 13 ноября 2013, 13:22 # 0
            Далее жмём commit и игнорируем предупреждения об ошибках в коде — больно уж умный этот PhpStorm!
            Как вариант, чтобы избежать таких сообщений, можно отключить настройку (по крайней мере я так делал, потому что не отправлялся коммит в битбакет)

            1. Василий Наумкин 13 ноября 2013, 14:01 # 0
              Можно и так, но я не отключаю, потому что когда идут правки компонента после выпуска — там уже не должно быть таких ошибок.

              Ну и каждый может под себя настроить проверку кода. В общем, не могу прям посоветовать всем это дело отключать.
            2. Купчинский Михаил 13 ноября 2013, 13:32 # 0
              Василий, не совсем понял, где вводить команду «git remote add origin github.com/----user----/Sendex.git» если работаешь на windows машине.
              1. Виталий Князь 13 ноября 2013, 13:57 # 0
                Решение от меня.

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

                3.

                Сменил директорию на ту где проект лежит:
                cd d/project/Sendex/
                Ввел команду (у каждого собственно своя):
                git remote add origin https://github.com/sentyakov/Sendex.git
                
                Перезапустил phpStorm (мб и не надо было...)

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


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

                Как-то работает:
                github.com/sentyakov/Sendex
                1. Василий Наумкин 13 ноября 2013, 13:59 # 0
                  Это надо вводить в консоли Windows.

                  Если не знаешь, как туда попасть — то вот, Виталий помогает =)
                  1. Купчинский Михаил 13 ноября 2013, 14:24 # 0
                    это я все сделал. Только скачал клиента с самого GitHub -а. Ноу меня при выполнении этой команды выдает сообщение что то типа о том что Sendex уже есть. Но на самом github пусто
                    1. Василий Наумкин 13 ноября 2013, 14:25 # 0
                      Покажи, что именно выдаёт?
                      1. Купчинский Михаил 13 ноября 2013, 14:34 # 0
                        1. Василий Наумкин 13 ноября 2013, 14:45 # 0
                          Ну, значит все ок. Ты же удалял директорию .git перед этими манипуляциями?
                          1. Купчинский Михаил 13 ноября 2013, 14:51 # 0
                            Да но когда пытаюсь выполнить вторую команду то выскакивает вот это:
                            1. Купчинский Михаил 13 ноября 2013, 14:54 # 0
                              либо вот с командной строки :
                              1. Купчинский Михаил 13 ноября 2013, 15:14 # 0
                                Вроде что-то сдвинулось. После перезапуска phpStorm и попытки выполнить Push выдало ошибку: «fatal: unable to access 'https://githun.com/k-m-e/Sendex.git/': Failed connect to githun.com:443; No error». Может фаервол не пускает?
                                1. Василий Наумкин 13 ноября 2013, 15:15 # 0
                                  Failed connect to githun.com:443;
                                  Будь внимательнее.
                                  1. Купчинский Михаил 13 ноября 2013, 15:29 # 0
                                    поменял в файле config githun.com на github.com и все сработало))). Как всегда подводит невнимательность.
                                    1. Василий Наумкин 13 ноября 2013, 15:32 # 0
                                      Ура!
                                2. Василий Наумкин 13 ноября 2013, 14:56 # 0
                                  Ну тогда нужно опять удалить директорию .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
                                  Это я команды для консоли написал — так быстрее.
                    2. Алексей Карташов 13 ноября 2013, 16:58 # 0
                      Я понимаю, что консольный хардкор — это здорово :), но!

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

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




                      1. Василий Наумкин 13 ноября 2013, 17:09 # 0
                        Ну и отлично, еще один способ работы — каждый выберет себе, что больше нравится.
                        1. Купчинский Михаил 13 ноября 2013, 17:33 # 0
                          У меня он и стоит. Но что-то он давал ошибку поначалу. Видно какая-то последовательность действий у меня была не правильная. Пришлось качнуть приведенный выше от сюда code.google.com/p/msysgit/downloads/list. Теперь вроде все ОК и с этим.
                          1. Alex Vakhitov 13 ноября 2013, 18:22 # 0
                            Если говорить о гуишных клиентах, то на мой взгляд лучший это source tree, настоящий комбайн.
                            1. Олег Трубин 13 ноября 2013, 19:30 # 0
                              В phpstorm в настройках нужно указать exe-файл. В случае использования этого клиента ты какой указывал?
                              1. Василий Наумкин 13 ноября 2013, 19:40 # 0
                                Это же родной клиента GitHub, там все сразу работает.
                                1. Алексей Карташов 13 ноября 2013, 20:22 # 0
                                  Да, там всё сразу работает и пользоваться этим клиентом можно отдельно от phpstorm.

                                  Но вместе с этим клиентом ставится консольный клиент под названием Git Shell (ярлык на него лежит в папке Пуск -> GitHub -> Git Shell).
                                  Ярлык этот ведёт на файл «C:\Users\\AppData\Local\GitHub\GitHub.appref-ms --open-shell», который запукает виндовый PowerShell (не cmd) с настроенным git'ом и системными переменными окружения и уже здесь можно юзать git-команды. Но не знаю, можно ли адрес этого файла вставить в phpstorm (не, можно-то — можно, но заработает ли?) — здесь пробовать надо.
                                  1. Василий Наумкин 13 ноября 2013, 20:28 # 0
                                    Наверное, и на windows можно просто установить экзешник:
                                    1. Алексей Карташов 13 ноября 2013, 20:38 # 0
                                      А это, скорей всего, он и есть. Я при установке, емнип, включал чекбокс — устанавливать ли этот самый «Command Line Tools» или нет. Это, скорей всего, для тех, кто при установке отказался.

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


                                      Если выбрать «Custom», то можно указать путь хоть к тому же msysgit'у — тут уж кому как удобнее и кто что установил. Хотя для самого гуишного клиента разницы, вроде как, быть не должно.
                                      1. Andrei Kilin 13 ноября 2013, 23:02 # 0
                                        git.exe лежит чуть глубже:
                                        c:\Users\username\AppData\Local\GitHub\PortableGit_0f65...9ef87\bin\git.exe
                              2. Илья Ершов 14 ноября 2013, 12:47 # 0
                                Хрень какая-то… Пользуюсь виндовым клиентом Git'а. Прописал в .gitignore:
                                .idea

                                А оно всё равно отслеживает всё содержимое этой папки… пробовал по разному:
                                .idea
                                .idea/
                                .idea/*
                                1. Василий Наумкин 14 ноября 2013, 12:54 # 0
                                  Видимо, файлы уже добавлены в историю версий, поэтому их нужно исключить при помощи git rm.

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

                                  Вот здесь больше информации.
                                2. Олег Трубин 14 ноября 2013, 12:50 # 0
                                  Все файлики стали коричневыми, это значит, что они не добавлены в репозиторий. Нужно добавить их через контекстное меню, в котором появился новый пункт Git, и они позеленеют.
                                  Пытаюсь добавить файлы в репозиторий и получаю сообщение об ошибке. См. скриншот. Как бы это побороть?

                                  1. Василий Наумкин 14 ноября 2013, 12:59 # 0
                                    Попробуй отключить проверку CRLF


                                    Сними галочку — это замена символов переноса строки.
                                    1. Олег Трубин 14 ноября 2013, 13:15 # 0
                                      Спасибо за ответ, но снятие галочки не помогло.
                                      Я пользуюсь 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
                                      ошибка исчезла. Но вот не знаю, не «аукнется» ли мне это в будущем.
                                      1. Василий Наумкин 14 ноября 2013, 13:17 # 0
                                        Не должно.

                                        Я сам далеко не мега-мастер в Git, пользуюсь только основными возможностями.
                                        1. Alex Vakhitov 14 ноября 2013, 13:43 # 0
                                          Чтобы не аукнулось можно поставить
                                          git config --global core.safecrlf true
                                          
                                          это предотвратит автозамену переводов строк, ну и можно в phpStorm включить определенный тип перевода строк
                                          1. Олег Трубин 14 ноября 2013, 13:59 # 0
                                            и как считаешь какой тип выставить? У меня сейчас по умолчанию виндовый \r\n есть ли какой-то смысл его менять?
                                            1. Alex Vakhitov 15 ноября 2013, 11:23 # 0
                                              Если работаешь один или вся команда на вин, то можно все оставлять как есть и все настройки оставлять прежними, если нет то исправлять ошибку которую вызывает core.autocrlf true, это довольно распространенная штука и нагуглить how to статью с решением проблемой не будет
                                    2. Алексей Марченко 15 ноября 2013, 12:48 # 0
                                      Василий, что то я наверное упустил нет пункта «Add to VCS»

                                      Где что мог упустить? Спасибо!
                                      1. Василий Наумкин 15 ноября 2013, 14:34 # 0
                                        Дык это тоже самое.

                                        Похоже, в версии для Windows немного иначе называется.
                                        1. Алексей Марченко 15 ноября 2013, 14:57 # 0
                                          У меня Linux. Кстати. при тыканье вообще ничего не происходит…
                                          так ладно разбираюсь… спасибо
                                          1. Василий Наумкин 15 ноября 2013, 15:02 # 0
                                            Если Linux (поздравляю, кстати!), то просто зайди в директорию проекта из консоли и набери
                                            git add .
                                            Это добавит все новые файлы в индекс Git.
                                            1. Алексей Марченко 15 ноября 2013, 15:10 # 0
                                              А вот так сработало )))) гуд!!! Спасибо!
                                              уже лет 10 как на linux… хороша система…
                                              1. Василий Наумкин 15 ноября 2013, 15:14 # 0
                                                Для разработки — вообще лучшая.
                                                1. Алексей Марченко 15 ноября 2013, 15:22 # 0
                                                  ну я в разработке недавно, все одминил…
                                                  UPD у меня PhpStorm-6.0.3 был вот и разница в названии, обновил до 7-го… все ок стало!!!
                                                  И пункт стал как и надо «Add to VCS»
                                                  1. Василий Наумкин 15 ноября 2013, 15:23 # 0
                                                    Ну и ладушки!
                                      2. Михаил 29 ноября 2013, 17:48 # 0
                                        А у меня нету такого пункта. Файлики серые ) Вот тут
                                        1. Михаил 29 ноября 2013, 17:55 # 0
                                          А все сделал. Невнимательность.
                                          в консоли git add.
                                        2. Михаил 29 ноября 2013, 18:40 # 0
                                          А кстати вопрос. Получается Мы делаем изменения, потом делаем коммит. Это все сохраняется на локалке, верно? А потом делаем пуш и на гитхабе все перезаписывается. А в чем прикол контроля версий? Я что то поменял, пушнул, все новое, кто то поменял, пушнул и ппц че я там делал. Или я не так понял?
                                          1. Alex Vakhitov 29 ноября 2013, 19:09 # 0
                                            Пушатся только изменения, а не весь код, так что ничего тому что ты написал не угрожает. Самый большое достоинство это когда ты делаешь свою часть, другой разработчик свою, третий свою и тд. и благодаря гиту ты можешь видеть историю всех изменений, всегда держать у себя правильную версию файлов и плюс в репозитории всегда правильный собранный код
                                            1. Михаил 29 ноября 2013, 19:29 # 0
                                              А можно будет вернуть изменения например до такого то коммита?
                                              1. Alex Vakhitov 29 ноября 2013, 19:31 # 0
                                                Да, можно. Еще можно делать ветки для экспериментов и быстрого возврата к исходному коду, или включения в репозиторий
                                            2. Василий Наумкин 29 ноября 2013, 19:54 # 0
                                              Просто посмотри историю живого проекта, например miniShop2.

                                              У каждого пункта есть Browse code и можно читать код на любом этапе разработки.
                                              1. Михаил 29 ноября 2013, 20:23 # 0
                                                Спасибо. Буду разбираться. пока не въехал.
                                            3. Михаил 25 января 2014, 21:26 # 0
                                              Пересел на линукс, делаю все заново, вопрос. Установил git apt-get install git а куда он установил? Не могу указать путь. Не найду что то
                                              1. Василий Наумкин 25 января 2014, 22:05 # 0
                                                Обычно /usr/bin/git
                                                1. Михаил 25 января 2014, 22:31 # 0
                                                  И вправду. раз 5 искал там не находил О_о. Спасибо! буду дальше осваивать. Кстати линукс тема)
                                                  1. Василий Наумкин 25 января 2014, 22:32 # 0
                                                    Да, для работы — самое то.

                                                    Удачи!
                                              Добавление новых комментариев отключено.