• Среда Windows 10
  • Разрешение 1920x1080
  • Поддержка сенсорных событий
  • Подключение к Интернету
  • Список всех колледжей и университетов в Калифорнии с информацией
  • Расходы
  • Размеры студенческого тела
  • Доступные степени
  • Видео о зачислении

Платформа

Для его создания естественным выбором для меня стала платформа Электрон. Как я уже упоминал ранее, я пишу с использованием веб-технологий, когда это возможно. Это частично из-за моего опыта, но также из-за моей философии. Electron - это оболочка, которая позволяет разработчикам писать HTML, CSS и JavaScript, которые работают как собственное приложение. Есть некоторые споры о возможности Electron создавать нативные приложения, потому что это оболочка, но в конце концов это сработало, и это работало хорошо, и это единственный реальный тест.

Для самой карты я использовал отличную платформу Mapbox. Я выбрал его по двум причинам: философские; их приверженность открытому исходному тексту восхитительна, технологична; их API - это мечта использовать в отличие от Google Maps, финансовых; это бесплатно для нашего масштабного проекта, историческое; Я использовал его (немного) раньше. API хорошо работает с источниками GeoJSON, а Mapbox GL JS сверхбыстрый, поддерживает сенсорные события и, конечно же, написан на том же языке, что и остальная часть приложения. Если вы не знакомы с GeoJSON, это формат данных для географической информации, который можно анализировать с помощью JavaScript.

Процесс

Первое, что нужно было сделать, - это получить данные, предоставленные нашим контактным лицом, Тимом Варкентином. С Тимом было здорово работать, и он предоставил нам все необходимые данные. В данном случае это было четыре таблицы, каждая с данными о школах. Я преобразовал их в GeoJSON, используя Atom в файле CSV. Я чувствовал, что это был более быстрый подход, чем написание сценария для его преобразования. Вот образец данных GeoJSON:

[{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-121.750944, 38.537281]
},
"properties": {
"marker-symbol": "college-uc",
"title": "UC Davis",
"address": "1 Shields Ave., Davis, CA",
"video": "https://youtube.com/embed/PAwB_t_iM7U",
"degrees-offered": ["Bachelor's", "Master's", "Doctorate"],
"student-population": 34508,
"student-ratio": 18,
"city-size": "Suburb: Small",
"campus-housing": true,
"tuition-2016": 13951,
"housing-2016": 14571,
"expenses-on-campus-2016": 34377,
"expenses-off-campus-2016": 29243,
"average-scholarship": 15547,
"collegeType": "uc"
}
}]

Координаты я получил с помощью пакетного геокодера.

Следующим шагом было соединение скелета приложения. Это был мой первый проект Electron, поэтому я использовал инструмент под названием Neutron для начальной загрузки некоторых работ. (Честно говоря, я в основном выбрал Neutron из-за его перезагрузки в реальном времени. В конце концов, он оказался бесценным для предварительной обработки, линтинга и упаковки. В будущем я, вероятно, создам свою собственную цепочку инструментов, но для новичков это было действительно полезно .) Запустив npm start в каталоге Neutron, Electron запустит приложение и автоматически построит его при изменении файлов в каталоге src.

Как это работает

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

index.html использует API Mapbox, jQuery, шрифты, API Vimeo и предотвращает масштабирование дисплея. Первоначальное тестирование показало, что без мета-тега области просмотра, объявляющего user-scalable=no, растяжение экрана пятью пальцами приведет к масштабированию всего интерфейса. Это часть поведения по умолчанию Webkit (движка Electron). Индекс также содержит скелет, включая значки фильтров, оболочки для различных динамических элементов и компас SVG (северная стрелка изменяется при повороте карты с помощью преобразования CSS). Наконец, для страницы требуются сценарии утилит и основные сценарии.

Основной скрипт открывает файл GeoJSON с информацией о колледжах, выполняет некоторые преобразования и сохраняет их в памяти. Оттуда он инициализирует API Mapbox. Мы используем измененный базовый стиль улиц, который уменьшает количество отображаемых данных, по сути ограничивая его названиями дорог и городов. На базовом слое из OpenStreetMap также есть много университетских городков, которые я выделил. Несколько замечаний о реализации:

Во-первых, границы карты динамические. Карта предназначена только для просмотра Калифорнии (опять же, люди любят делать то, что им запрещено), но есть колледж под названием Palo Verde College на границе Калифорнии и Аризоны. При полном уменьшении масштаба пользователь должен иметь возможность видеть этот колледж, даже если панель колледжа открыта. При увеличении масштаба мы не хотим, чтобы пользователь просматривал Аризону. В событии масштабирования карты есть прослушиватель, который динамически устанавливает максимальную восточную границу.

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

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

Есть четыре разных типа колледжей: CSU, UC, частные и общественные. Пользователи должны иметь возможность визуально различать их, глядя на карту. Пользователи также должны иметь возможность сортировать список колледжей по типу, при этом необходимо фильтровать отображаемые значки. Между некоторыми простыми фильтрами jQuery и Mapbox API это было довольно просто сделать.

При создании стиля мне пришлось включить значки для каждого типа колледжа в студии Mapbox, чтобы они были доступны при вставке GeoJSON, отсюда и свойство marker-symbol.

Также есть «видимый» фильтр. Этот фильтр уменьшает список справа, чтобы показать только колледжи, которые находятся в области просмотра пользователя. Это достигается с помощью слушателей событий масштабирования, перемещения и поворота на карте, которые запрашивают видимые объекты.

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

Студенты могут просматривать информацию и открывать видеомодалы, если они доступны. Когда выбрано несколько колледжей, при нажатии кнопки «Сравнить колледжи» отображается таблица с данными выбранных колледжей.

Вывод

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

Этот проект не мог бы быть успешным без работы, я уверен, тысяч людей: авторов данных OpenStreetMap, разработчиков и сообщества Mapbox, сообщества NodeJS и Electron, команды jQuery и сообщества Neutron - даже не не говоря уже о сотнях организаций, задействованных в инструментах, на которых были построены упомянутые выше. Я горжусь тем, что работал над этим приложением, благодаря силе сообщества разработчиков ПО с открытым исходным кодом, которое сделало это возможным. Компания Pacific Sky получает деньги за проект, но я надеюсь, что работа, которую я проделал здесь, может быть использована другими и распространена по всей Калифорнии, если не будет адаптирована для многих других штатов.