Метка: проект

Web-интерфейс с нуля на NodeMCU ч. 1

Как я купил себе новую игрушку

Как-то раз я решился купить себе немного электронной атрибутики прямо с AliExpress’a. И именно тогда я столкнулся там с этим чудом: NodeMCU V3 на базе ESP8266. Маленькая Arduino Nano не просто загрустила, а вообще перестала кочевать и сейчас застряла в немного другом проекте.

Изображение NodeMCU V3 на базе ESP8266 с AliExpress
Вообще, я выделил для себя следующие преимущества данного модуля:

  • WIFI, который может одновременно быть точкой доступа и быть подключенным к другой точке
  • CH340, который позволяет через USB эмулирует все «сладости» COM-порта
  • MicroUSB, а не Mini — то есть из коробки можно подкинуть обычный «шнурок» от твоего андроида
  • 80MHZ(160MHZ от одной строчки) — 16MHZ Arduino Nano просто сидит на месте по сравнению с NodeMCU
  • 4MB Flash-памяти — приятное дополнение, хотя оно может ввести в заблуждение, так это не RAM-память, которой там всего 80 KB
  • Цена — 140-150 рублей за штуку. Немного дороже. чем голый ESP8266, но зато тут куча «вкусных плюшек»
  • Arduino IDE — возможность собирать прошивку прямо из этой среды

Из минусов пока не понравилось следующее:

  • Единственный аналоговый порт ввода/вывода, который причем еще и работает в диапазоне 3.3В

Немного про IDE

Когда я начал писать проект под эту плату, я делал это при помощи Arduino IDE. Но эта недоIDE избивает любого: того, кто пытается писать больше 100 строк, того, кто пробует написать что-то нормальное. Достаточно дернуть файл через Notepad++, подправить в нем строки, а затем вернутся обратно, чтобы увидеть прыгающие строки с разными отступами. Про какую-то гибкость, удобство и логику тут вообще нет смысла говорить, потому что в среде отсутствуют многие элементарные настройки.

Вторая попытка была на Visual Studio 2015 с плагином vMicro, позволяющим быстро создать проект под платформу Arduino и ей подобные. Все было неплохо, пока плагин не отвалился после конца Trial-режима.

Слава богу на горизонте появился некий хабровчанин, который призывал всех опомниться и попробовать некую VisualCode Studio. PlatformIO — отличный плагин для этой среды, и он отлично сейчас себя зарекомендовал, без проблем собирая мой проект.

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

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

Поднимаем Web-сервер на этой малютке

Поднимается сервер буквально в четыре строки:

ESP8266WebServer server(80);
void setup {
    ...
    server.on("/page", method);
    server.begin();
    ...
}
void loop {
    ...
    server.handleClient();
    ...
}

Перечисляем адреса страниц соответственно необходимым методам, «поднимаем» сервер, а затем уже в loop-методе циклично обрабатываем все события с помощью handleClient().

Перед этим конечно пришлось немного поднастроить WiFi в NodeMCU:

WiFi.setAutoConnect(false);
IPAddress apIP(192, 168, 1, 1);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP(ssid);
IPAddress myIP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(myIP);

Первая строка здесь имеет очень важное значение. Первые мои версии проекта работали так, что NodeMCU подключалась к моему домашнему WiFi. Потом я конечно убрал эти параметры и начал создавать точку доступа. И тут я заметил небольшую странность: дома мой код работал без единой осечки, а в институте просто творилось нечто, каждые 5-10 секунд все зависало напрочь.

Разгадку я обнаружил через несколько дней — оказывается, что все это время NodeMCU пыталась подключаться к моему домашнему WiFi. А соответственно, если такой точки не было, то плата начинала жутко тупить. Даже не смотря на то, что у меня больше не было ни строчки, намекающей на подключение к WiFi.

Короче — эта строка отвечает за то, чтобы плата не пыталась автоматически подключаться к последней использованной точке.

Все остальное тоже не несет каких-то трудностей: указываем ip точки, gateway и маску, название точки — дальше запускаем нашу точку WiFi.softAPIP(). И на всякий случай, проверяем через ip через Serial.

В следующей части я рассказываю, как передавать данные в реальном времени на несколько клиентов сразу

Student App — Две недели работы и…

За две недели работы было произведено не очень много изменений:

  • В первую очередь, произошел первый рефакторинг кода через полгода после создания прототипа. Часть кода была перемещена в классы Old*.java, а также я попытался минимизировать зависимости. Теперь, когда мне предоставят доступ в БД системы, я смогу очень легко реализовать новые классы и методы, которые будут легко взаимодействовать с остальным приложением.
  • Был реализован парсер для http://press.tstu.ru/.
  • Соответственно, контент из парсера теперь будет показывать страница новостей.
    Это заняло больше 50% времени, так как реализация всего для меня была первым опытом.
  • Каждую новость теперь можно просмотреть отдельно, нажав на нее. Данный функционал был сначала сделан одним методом, а после прочтения документации на тему «Android Fragment» был переделан на основе этого класса. Но здесь требуются доработки.
  • Также мне очень хотелось попробовать систему контроля версий Git — я перенес приложение из Google Drive в нее, и теперь не беспокоюсь, что что-то может произойти с исходниками. Теперь я буду стараться выбрасывать на сайт также и changelog’и — это будет намного лучше.

Из видео ниже можно увидеть весь доступный сейчас функционал.

Этапы разработки

1 Этап Выбор платформы

Android Studio
Android Studio
XCode
XCode

Выбор платформы имеет свои плюсы и минусы, как в Native, так и в Cross-Platform виде. Предпочтение отдается все таки «нативной» разработке, так как приложение будет зависеть в частности от серверного API. А значит, половина работы будет максимально эффективно выполняться на удаленном сервере.

2 ЭтапРазработка интерфейса для Android и iOS

renovation-instruments-2

 

3 ЭтапСоздание методов для получения новостей с tstu.ru

Кажется, что у новостной ленты, которая расположена на сайте, нету базы данных. Скорее всего придется использовать методы парсинга для получения массива данных о последних событиях. Будем использовать RSS-ленту, которая обеспечивает очень удобный и легкий способ получения новостей! =)

4 ЭтапНаписание собственного API для клиентского приложения

5 ЭтапПодключение клиентского приложения к серверному API

bigstock-loud-computing-conc-44222482

6 ЭтапАдаптация клиентского приложения под пользовательские интересы

С помощью различных методов будет определено, что важно для студента, а что лишь будет «пылиться на полке». В интересах также заинтересовать студента в учебе, через какие-либо функциональные возможности.

7 Этап — Анализ привлекательности TSTU Student App в студенческой среде

7

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

Новые изменения в приложении TSTU Cabinet

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

И только где-то ближе к 20.07.16 пришло осознание, что не хватает бокового современного меню навигации. Оно облегчило мою жизнь в первую очередь. Да и его реализация получилась достаточна красива.

Также из полученных данных я попробовал извлечь имя студента и его простые характеристики. Из скриншотов ниже можно оценить нововведения.

Screenshot_20160720-004913Screenshot_20160720-004917
 

 

Проект «TSTU Cabinet»

Добавил страницу описания старой-новой идеи: личного кабинета студента университета в виде приложения для Android.

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

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

Упор этого приложения делается в то, что в будущем, намного удобнее будет скачать приложение с приятным и простым интерфейсом прямо с Google Play, и просто получать уведомления о новых оценках, событиях и достижениях.

Увы, но никто не задумывается о том, как можно привлечь внимание молодого поколения, и воспользоваться этим во многих сферах института

kab_img
Пример скриншота этого кабинета

.