contents.md

Курс 2016 года: введение в веб программирование для художников через conversational interfaces (CI) и связь с предыдущими пройденными материалами (arduino, max msp). Часть курса "технические основы" в Школе Фотографии и Мультимедиа имени Родченко.

Список занятий:

1. Вводное: подготовка окружения, командная строка, введение в meteor.js
2. Простейший бот, что такое API, работа с модулями в node.js
3. Сохранение версий программы, совместная работа и публикация кода с помощью git
4. Работа с сохраниением данных: insert, update, find, fetch. Демострация данных
5. Что такое NAT, какие бывают сервера, что такое ssh, ассинхронные ключи, деплой приложения
6. Управление Arduino из meteor.js
7. Удаленное управление по сети, ssh tunnel

More is coming...

lesson01.md

Занятие 01 – Вводное

Подготовка окружения

Все инструкции даны для unix систем (Mac OS или Linux). Windows-пользователи могут а) искать аналогичные команды для dos б) установить использовать Linux, например Ubuntu 14.04 внутри Windows (с помощью VMware, Virtual Box) или рядом.

• только для mac: нужно установить command line tools – на сайте выбрать подходящую для вашей системы версию или просто использовать ссылку:
• для 10.11
• для 10.10
• для 10.9
• для 10.8
• только для mac: установить пакетный менеджер (программу для простой установки программ из командной строки) homebrew – нужно выполнить команду /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" в терминале
• устанавливаем git – систему контроля версий: – для mac: загрузить и установить с сайта
• для Ubuntu: выполнить sudo apt-get install git-all
• установить node.js – программу, которая позволит выполнять JavaScript код на сервере (а не только в браузере)
• установить meteor.js – node.js фреймворк
• установить sublime text

Начало работы с командной строкой

Большая часть работы будет происходить в командной строке (Command line interface, CLI, терминал, консоль) – разновидности текстового интерфейса, позволяющем управлять многими системами компьютера и другими программами с помощью ввода команд.

Команды обычно строятся по такому принципу: команда --флаг значение_флага -ф параметр например: ls -a -l . – командой здесь является ls, параметром . что означает текущую директорию, а двумя короткими флагами будут -a и -l

Все принимаемые параметры и вообще синтаксис любой команды можно узнать выполнив, например: open --help или open -h.

Список команд, которые нам понадобятся:

• cd – дословно "change directory" – позволяет перейти из одной директории (папки) в другую. например cd meteorprojects сразу после открытия терминала перенесет вас в папку ~/meteorprojects если она существует
• open – команда, позволяющая открывать файлы/папки из командной строки. например open . откроет finder с той папкой, в которой мы сейчас находимся
• ls – команда, показывающая список файлов в папке. если выполнить с флагами ls -alh то команда покажет все файлы, включая скрытые, в столбик, с размером файлов.
• meteor, git

Начало работы с meteor.js

1. Необходимо открыть терминал, и перейти в папку, где вы будем хранить приложения: cd name_of_direcory
2. Создать новое meteor-приложение: meteor create name_of_your_project
3. После успешного создания, перейти в приложение cd name_of_your_project
4. Запустить метеор meteor
5. После того, как ваше приложение запуститься, текущее окно терминала (вы можете открыть их несколько) будет показывать статус запущенного приложения и выводить ошибки или сообщения для отладки, поэтому при любой проблеме, стоит туда заглядывать

Для завершения работы с метеором необходимо завершить работающий в терминале процесс с помощью комбинации клавиш Cntr+C

Структура приложения и принцип работы meteor.js

После создания приложения (выполнения команды meteor create name_of_your_project) появилась новая папка с названием, которое вы использовали. Эта папка содержит исходный код простейшего приложения на meteor.js поделенный на server и client.

• Код из папки server выполняется на сервере, с помощью node.js, имеет доступ к вашим файлам, ресурсам в интернете и системам компьютера.
• Код из папки client выполняет в каждом браузере, который откроет ваше приложение и имеет доступ только к тому, что разрешит ему браузер, например: реагирование на нажатие кнопок на странице и наведение мыши, отправка запросов на сервер, манипуляция визуальным контентом страницы.
• Код из любых других папок доступен и на клиенте и на сервере.
• Файлы из папки public становятся доступны "на клиенте", что значит, файл положенный в папку public/images/test.jpg будет доступен по адресу http://localhost:3000/images/test.jpg
• Файлы из папки private становятся доступны "на сервере". Например текстовый файл, который вы хотите проанализировать лучше положить в private/text_file.txt и затем получить к нему доступ на сервере с помощью кода var text = Assets.getText('text_file.txt');.
• Файл settings.json это так называемый файл конфигурации. В нем необходимо хранить все ваши ключи, записывая их в JSON-формате – специальной форме записи текста, которую легко конвертировать в данные внутри программы. Например вы можете записать ваш секретный ключ (пароль или любую другую информацию, не имеющую отношения к самой программу) в такой форме:

{
	"login": "your login here",
	"key": "private key number here"
}

Затем сохранить эту информацию в файл settings-test.json и запустив метеор с помощью команды meteor --settings settings-test.json получить доступ к вашим данным в программе с помощью кода var login = Meteor.settings.login;

lesson02.md

Занятие 02 – Написание простейшего бота

Написание первой программы

Для начала, чтобы облегчить задачу обучения веб-программированию, которое строиться сразу на трех 'языках': html, css, js, мы попробуем написать программу, которая использует только одну часть из перечисленного: js. Для этого прекрасно подходят чат-боты, которые являясь программой, используют интерфейс уже готового приложения. Будь то Telegram, Messenger или Slack. Мы начнем обучение с Telegram как наиболее дружелюбного к начинающим разработчикам сервиса.

Коротко опишем то, что хотим сделать: создать чат-бота, который по присланному сообщению будет искать картинку на flickr и присылать ее обратно тому же пользователю.

Разобъем на микрозадачи:

1. Зарегистрировать чат-бота в телеграме
2. Подключить к телеграму нашу программу и получить сообщения от пользователей
3. При получении сообщения отправлять пользователю, приславшему текст "hello world" в ответ

Что такое API и как с этим работать

API расшифровывается как application programming interface, то есть некоторый интерфейс, но не графический как для пользователя, а программный, для того, чтобы одна программа могла общаться с другой. API можно разделить на две категории: официальные api – те, для которых написана документация, рассказано как ими пользоваться и написаны специальные sdk – software development kit облегчающие работу разработчика и неофициальные – незадокументированные api, которые в любой момент могут измениться и перестать работать и к которым чаще всего нет никаких sdk.

Для работы с telegram нам понадобиться это самое sdk или другими словами модуль или пакет (package) который будет содержать код для работы с telegram api приема и отправки сообщений, а мы, в нашей программе, сможем использовать только абстрактные методы для отправки и приема сообщений.

Но все по порядку:

1. Создаем нашего бота. Пишем пользователю @botfather в телеграм, говорим ему /newbot, пишем имя бота и его юзернейм и получаем в ответ ссылку на бота и токен – другими словами ключ для управления нашим ботом.
2. Добавляем наш ключ в файл settings.json в формате

{
	"telegram": {
		"token": "paste_your_token_in_place_of_this_text"
	}
}

3. Запускаем или перезапускаем наше метеор-приложение, если оно уже работало, с флагом --settings, а именно: meteor --settings settings.json
4. Находясь в папке метеор-приложения выполняем команду npm install node-telegram-bot-api --save, которая установит пакет для работы с telegram api, который мы нашли в гугле набрав telegram nodejs api

Написание бота

Так как программа, которую мы пишем будет выполняться на сервере и не будет иметь никакого интерфейса, то мы открываем файл server/main.js и добавляем туда код:

import TelegramBot from 'node-telegram-bot-api';

Команда, которая загрузит код подключенного пакета в переменную TelegramBot.

var telegram = new TelegramBot(Meteor.settings.telegram.token, {polling: true});

Подключиться к серверу telegram и начнет принимать данные и ждать от нас других команд.

Эта команда, как и все последующие, взяты из официальной страницы используемого пакета найденного на официальном репозитории: node-telegram-bot-api

telegram.on('message', function(){
	console.log(msg);
});

Команда, которая при получении сообщения, выведет его в терминал ('залогирует') для отладки.

После этого можно сохранить файл main.js и метеор автоматически перезагузиться.

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

{ 
  message_id: 303,
	from: { id: 198431062, first_name: 'Valia' },
	chat: { id: 198431062, first_name: 'Valia', type: 'private' },
	date: 1463096618,
	text: 'test'
}

Это ничто иное как, объект сообщения, которое пришло нам от пользователя с именем 'Valia' и номером 198431062 в приватном чате с таким же номером. 1463096618 здесь это дата в unix-формате, который заключается в количестве секунд, прошедших с 1 января 1970 года.

Теперь мы можем вместо одной строчки console.log(msg); поместить код, который будет отвечать этому же пользователю

telegram.on('message', function(){
	console.log(msg);
	bot.sendMessage(msg.chat.id, "Hello world, " + msg.from. first_name);
});

где bot.sendMessage() - функция, которая отправит текстовое сообщение msg.chat.id – это id чата (который мы берем из присланного нам объекта msg) в который нужно отправить это сообщение (обязательный параметр) "Hello world" – текст сообщения (обязательный параметр)

Более широкий туториал по чат-боту для телеграма