Ubuntu для web-разработчика

Сегодня приведу пример установки условно достаточного набора программ для web-разработки в операционной системе Ubuntu (понятно что вкусы у всех разные). К слову сказать, примерно такую конфигурацию я в данный момент и использую.

Версия Ubuntu, а точнее ее модификация Xubuntu с графической средой Xfce вместо Unity, была выбрана 14.04.5 LTS (поддержка до 17 апреля 2019 года). Почему не 16.04? Потому что в репозиториях для 14.04 еще есть PHP 5, а в 16.04 уже PHP 7. Не все текущие проекты с ним на данный момент совместимы. Можно было конечно поставить PHP 5.6 из специального репозитория с пакетами от сторонних разработчиков и под Ubuntu 16.04, но это уже другая тема.

  1. Сначала устанавливаем мультимедиа кодеки, флеш-плеер, шрифты от Microsoft, распаковщик rar архивов:
    1
    2
    3
    
    sudo apt-get install xubuntu-restricted-extras
    sudo apt install msttcorefonts
    sudo fc-cache -fv
  2. Браузер Google Chrome скачал с https://www.google.ru/chrome/browser/desktop/ (Firefox уже есть из коробки).
  3. Устанавливаем LibreOffice, так как идущий в комплекте Gnumeric конечно ест меньше оперативки, но по функционалу не дотягивает до нужного уровня. Например не понимает csv. Итак:
    1
    2
    3
    
    sudo add-apt-repository ppa:libreoffice/ppa
    sudo apt-get update
    sudo apt-get install libreoffice
  4. Знаменитый заместитель Photoshop — GIMP уже был предустановлен, а вот векторного редактора не хватает. Устанавливаем Inkscape:
    1
    2
    3
    
    sudo add-apt-repository ppa:inkscape.dev/stable
    sudo apt-get update
    sudo apt-get install inkscape
  5. Далее система контроля версий Git, которая незаменима при любой разработке, в том числе и web:
    1
    
    sudo apt-get install git

    Если еще не используете, очень рекомендую. Для быстрого вхождения в тему можно почитать книгу про Git о которой идет речь здесь: https://habrahabr.ru/post/150673/

  6. Устанавливаем LAMP, что означает Linux + Apache + MySQL + PHP:
    1
    2
    
    sudo apt-get install tasksel
    sudo tasksel install lamp-server

    Для запуска сервера после установки используем команду:

    1
    
    sudo service apache2 start

    Так же есть команды restart и stop. Шпаргалку по настройке хостов для локальных сайтов напишу позже в отдельном посте.

  7. Установить phpMyAdmin можно по разному. Один из вариантов — скачать с официального сайта https://www.phpmyadmin.net/downloads/. Я просто распаковал архив в папку сайтов в директорию pma (разумеется можно назвать по своему), а потом добавил хост pma к этой директории. Папка с локальными сайтами в моем случае находится в ~/sites/. Подробнее в вышеупомянутом посте про настройку хостов.
  8. Иногда требуется FTP-клиент. Один из довольно удобных — Filezilla:
    1
    
    sudo apt-get install filezilla
  9. Устанавливаем консольный Yandex.disk:
    1
    2
    3
    
    echo "deb http://repo.yandex.ru/yandex-disk/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/yandex.list > /dev/null && wget http://repo.yandex.ru/yandex-disk/YANDEX-DISK-KEY.GPG -O- | sudo apt-key add - && sudo apt-get update && sudo apt-get install -y yandex-disk
    mkdir ~/Yandex.Disk
    yandex-disk setup

    И индикатор для панели:

    1
    2
    3
    
    sudo add-apt-repository ppa:slytomcat/ppa
    sudo apt-get update
    sudo apt-get install yd-tools

    Для запуска индикатора используется команда:

    1
    
    yandex-disk-indicator

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

  10. Удобный просмотрщик изображений с возможностью пакетной обработки XnView можно скачать с http://www.xnview.com/en/xnviewmp/#downloads
  11. Skype для общения с заказчиками берем с официального сайта: https://www.skype.com/ru/download-skype/skype-for-linux/
  12. Очень шустрая утилита для нарезки и склейки PDF - pdftk:
    1
    
    sudo apt-get install pdftk
  13. xCHM для чтения документации в формате CHM соответственно:
    1
    
    sudo apt-get install xchm
  14. Для некоторых вещей которых не хватает в связи с Windows-привычками устанавливаем Wine:
    1
    2
    3
    4
    
    sudo dpkg --add-architecture i386
    sudo add-apt-repository ppa:wine/wine-builds && sudo apt-get update
    sudo apt-get install --install-recommends winehq-devel
    winecfg
  15. А теперь то что не хватает — редактор Notepad++. Устанавливаем Windows-версию с официального сайта. Лучше 32-битную, там нормально работает Plugin Manager. Конечно этот вариант спорный, но мне так привычнее. В качестве альтернативы можно предложить похожий редактор Notepadqq. Но он хотя и позиционируется как замена Notepad++, все же до него не дотягивает. Например нет плагинов и нет возможности ставить метки на полях для быстрого перехода по F2 в длинных файлах. И все же для тех кому он подойдет, вот команды для установки:
    1
    2
    3
    
    sudo add-apt-repository ppa:notepadqq-team/notepadqq
    sudo apt-get update
    sudo apt-get install notepadqq
  16. И наконец — может пригодится если немного не хватает RAM для комфортной работы. Утилита zRam для создания сжатого swap в оперативке. Звучит странно, на первый взгляд, но работает хорошо. Можно комфортно открывать большее количество вкладок в браузере одновременно. Устанавливаем:
    1
    
    sudo apt-get install -y zram-config

152 ФЗ и нужна ли сайту политика конфиденциальности?

Помню данное словосочетание — «политика конфиденциальности» или «privacy policy» раньше видел только в подвале серьезных сайтов. Но насколько помню, ни разу в нее не заглядывал. И зачем простым пользователям интернета такие страшные слова :) .
Но тем не менее в РФ существует Федеральный закон №152 регулирующий и регламентирующий сбор персональных данных. Этими данными могут являться даже просто имя, фамилия и отчество, телефон и так далее. Так что если у вас на сайте есть какие нибудь формы обратной связи и уж тем более форма регистрации, то вы, согласно этому закону, собираете персональные данные. А для этого нужно как минимум уведомить пользователей об этом.
Уже появилось довольно много сервисов помогающих составить Пользовательское соглашение и Политику конфиденциальности. В каких то случаях нужно уведомлять Роскомнадзор. Если у вас коммерческий сайт, например интернет-магазин, скорее всего лучше проконсультироваться с юристом — какие документы и где разместить. Ну и стоит самим разобраться в 152 ФЗ. Ссылок приводить не буду — поиск в помощь.
Почему об этом многие заговорили — потому что есть случаи штрафов. Так что можно игнорировать и иметь вероятность штрафа или что-то предпринять уже сейчас.

Организация рабочего процесса с Trello или замена стикеров на монитор

На вашем мониторе приклеена куча стикеров? Ну или может они уже перекочевали в электронный вид на рабочий стол в виде виджетов? Тогда вам возможно пригодится web-сервис призванный организовать рабочие процессы или же что угодно, как гласит слоган на сайте Trello.com.

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

Структура приложения представляет собой набор произвольно названных досок, каждая из которых может содержать произвольные списки карточек-дел. Карточки можно перемещать между списками или досками. Сами карточки могут содержать фото, вложенные файлы, ссылки, комментарии и еще многое другое. Gold-версия еще больше расширяет возможности кастомизации списков и карточек, но даже обычной более чем достаточно для серьезной работы. Кстати, в текущей версии при создании новой доски в мобильном приложении для Android автоматически создаются три списка по умолчанию: «Нужно сделать», «В процессе» и «Готово» — это довольно удобно. А при создании доски через веб-интерфейс, списки по умолчанию почему-то отсутствуют. Ну, думаю это исправят.

организация чего угодно - Trello.com

Кстати доски бывают приватными, командными и публичными. Можно найти человека в Trello по имени или адресу электронной почты, а затем добавить в качестве участника в определенной доске — и ваши задачи будут синхронизированы. Если кто-то не зарегистрирован в сервисе, его можно пригласить с помощью ссылки (не в Сибирь конечно :) ).

Ну и напоследок, так как этот сайт преимущественно про web-разработку, логично упомянуть, что Trello может быть хорошим инструментом для взаимодействия заказчика сайта и исполнителя. Можно вести список текущих задач, а так же отдельные списки по планируемым доработкам. Как уже упоминалось выше, к карточкам-задачам можно прикреплять скриншоты, ссылки на другие проекты, комментарии и так далее. А если разработку ведет команда, роль инструмента еще более возрастает. Какие то доски могут быть доступны и разработчикам и заказчику(ам), а какие-то чисто разработчику. Можно разграничить взаимодействие более узко — например участвуют только программисты или только дизайнеры. Вобщем простор достаточный.

Конечно Trello не единственный подобный сервис, однако он заслуживает рассмотрения. Особенно если учесть, что львиная доля функционала — бесплатна.

Все еще используете Denwer? Пора попробовать Open Server!

Сразу сделаю оговорку для тех, кто использует для web-разработки среду *NIX — конечно, это намного логичнее разрабатывать на том, на чем и будет работать. Спору нет.

Ну а тем кто все же не покинул мир Windows :) да и еще разрабатывает с помощью этой платформы сайты, пора пересмотреть свой пакет приложений. Например вместо Denwer почему бы не попробовать Open Server, который, кстати, стартовал уже довольно давно — летом 2010. За это время он обрел версию 5.2.6. А количество скачиваний перевалило за миллион. Вобщем проект устоявшийся и к тому же очень функциональный.

настройка Open Server

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

Кстати, если вы хотите вести разработку на PHP 7, то здесь Open Server не заменим. Denwer уже порядком устарел — в последней версии на данный момент доступен лишь PHP 5.3. Вобщем, как ни хорош был когда то Denwer, кажется ему пришла достойная замена.

SQLite в Unity

Хранение данных в базе данных, извините за тавтологию — это очень удобно. Сегодня мы рассмотрим как организовать подключение к встраиваемой БД SQLite в Unity. Это, на мой взгляд, гораздо лучше чем использовать PlayerPrefs. В примере используется Unity 5.3.1f1.

  1. Создаем БД любым доступным инструментом. Я использовал менеджер SQLite в виде плагина к Firefox. Файл БД надо сохранить в папке [путь_к_вашему_проекту_Unity]\Assets\StreamingAssets\. В примере используется имя файла db.bytes.
  2. Нам понадобятся библиотеки для доступа к SQLite. Скачать их можно отсюда. Скачиваем и распаковываем куда нибудь архив SQLite4Unity3d. Копируем папку Assets\Plugins\ из распакованного архива в [путь_к_вашему_проекту_Unity]\Assets\Plugins\.
  3. Теперь создаем в папке [путь_к_вашему_проекту_Unity]\Assets\Scripts\ файл DataService.cs:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    
    using SQLite4Unity3d;
    using UnityEngine;
    #if !UNITY_EDITOR
    using System.Collections;
    using System.IO;
    #endif
    using System.Collections.Generic;
     
    public class DataService  {
    	public SQLiteConnection _connection;
     
    	public DataService(string DatabaseName){
    #if UNITY_EDITOR
    		var dbPath = string.Format(@"Assets/StreamingAssets/{0}", DatabaseName);
    #else
            	// check if file exists in Application.persistentDataPath
            	var filepath = string.Format("{0}/{1}", Application.persistentDataPath, DatabaseName);
     
            	if (!File.Exists(filepath))
    		{
    			Debug.Log("Database not in Persistent path");
    			// if it doesn't ->
    			// open StreamingAssets directory and load the db ->
    #if UNITY_ANDROID 
    			var loadDb = new WWW("jar:file://" + Application.dataPath + "!/assets/" + DatabaseName);  // this is the path to your StreamingAssets in android
    			while (!loadDb.isDone) { }  // CAREFUL here, for safety reasons you shouldn't let this while loop unattended, place a timer and error check
    			// then save to Application.persistentDataPath
    			File.WriteAllBytes(filepath, loadDb.bytes);
    #elif UNITY_IOS
    			var loadDb = Application.dataPath + "/Raw/" + DatabaseName;  // this is the path to your StreamingAssets in iOS
    			// then save to Application.persistentDataPath
    			File.Copy(loadDb, filepath);
    #elif UNITY_WP8
    			var loadDb = Application.dataPath + "/StreamingAssets/" + DatabaseName;  // this is the path to your StreamingAssets in iOS
    			// then save to Application.persistentDataPath
    			File.Copy(loadDb, filepath);
    #elif UNITY_WINRT
    			var loadDb = Application.dataPath + "/StreamingAssets/" + DatabaseName;  // this is the path to your StreamingAssets in iOS
    			// then save to Application.persistentDataPath
    			File.Copy(loadDb, filepath);
    #endif
    			Debug.Log("Database written");
    		}
    		var dbPath = filepath;
    #endif
    		_connection = new SQLiteConnection(dbPath, SQLiteOpenFlags.ReadWrite | SQLiteOpenFlags.Create);
    		Debug.Log("Final PATH: " + dbPath);     
    	}
    }

    Этот код взят практически без изменений из проекта SQLite4Unity3d. Оттуда убраны лишние методы которые приведены там просто для примера. А так же переменная _connection сделана публичной. Как видно класс кроссплатформенный. Его можно использовать как под Windows, так и под Android или iOS. Я тестировал только на Android.

  4. Далее надо создать классы таблиц БД, к которым будем обращаться из Unity. Ниже приведен пример класса для таблицы Items. Вам нужно будет создать свои классы для каждой таблицы в согласии с вашими наименованиями полей и типами хранимых данных. Названия классов повторяют имена таблиц в БД, а наименования переменных-членов класса соответственно идентичны полям в таблице. Называем как нибудь файл скрипта, например Tables.cs, и сохраняем также в папку [путь_к_вашему_проекту_Unity]\Assets\Scripts\ :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    using SQLite4Unity3d;
     
    public class Items  {
     
    	[PrimaryKey, AutoIncrement]
    	public int Id { get; set; }
    	public string Item { get; set; }
    	public string Type { get; set; }
    	public string Subtype { get; set; }
    	public int Weight { get; set; }
    }
  5. Для иллюстрации работы с БД привожу пример:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    
    using UnityEngine;
    using System.Collections.Generic;
     
    public class PlayerScript : MonoBehaviour {
    	public DataService ds;
     
    	// Use this for initialization
    	void Start () {
    		// подключение к БД
    		ds = new DataService("db.bytes");
     
    		// создание таблицы (таблица будет создана на основании данных класса Items, код которого приведен выше)
    		ds._connection.CreateTable();
     
    		// аналог запроса INSERT INTO `Items` (`Item`, `Type`, `Sybtype`, `Weight`) VALUES ("Flyer", "aircraft", "glider", 500)
    		ds._connection.Insert (new Items{
    			Item = "Flyer",
    			Type = "aircraft",
    			Sybtype = "glider",
    			Weight = 500
    		});
     
    		// аналог запроса SELECT * FROM `Items` WHERE `Id`=1
    		Items item1 = ds._connection.Table ().Where (x => x.Id == 1).FirstOrDefault ();
    		// для примера выводим в консоль отладки значение поля Weight у записи с Id = 1
    		Debug.Log(item1.Weight);
     
    		// удаление таблицы Items
    		ds._connection.DropTable();
    	}
     
    	// Update is called once per frame
    	void Update () {
     
    	}
    }

    Как видно из комментариев, сначала создается таблица Items на основании одноименного класса. Затем в нее вставляется запись. Следующим запросом из записи извлекаются данные и выводятся в консоль отладки. В конце таблица уничтожается.
    Чтобы протестировать этот код в вашем проекте, прикрепите его к какому нибудь объекту на сцене.

Кстати, вместо команды Insert можно использовать Update для обновления данных или InsertOrReplace для вставки или замены. Только в этом случае нужно добавить в объект еще и поле Id, для того чтобы можно было идентифицировать запись:

1
2
3
4
5
6
7
ds._connection.InsertOrReplace (new Items{
	Id = 1,
	Item = "Flyer",
	Type = "aircraft",
	Sybtype = "glider",
	Weight = 1000
});

Понятно что в примере приведены простейшие запросы, но этого уже достаточно чтобы начать использовать SQLite в Unity.
В заключение ещё один момент. При компиляции проекта для Andriod, Unity выдал ошибку — ему не понравились «лишние» кроссплатформенные библиотеки SQLite в папке Assets\Plugins\. Пришлось на время компиляции убрать оттуда вложенные папки WP8, x64 и x86. После компиляции возвращаем их назад, а то теперь проект не будет запускаться в отладчике Unity. Может есть более удобное решение, но я пока его не нашел (да и не искал).