Как моя команда поразила AngelHack Seattle Hackathon

1656575069 kak moya komanda porazila angelhack seattle hackathon

Содержание статьи

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

Я участвовал в Capital One DevExchange Hackathon в начале этого года без практического опыта программирования. Это помогло мне управлять своими ожиданиями и понять, чего ждут судьи.

Критерии судейства

  • хороший шаг
  • рабочая демонстрация
  • влияние на общество
  • масштабируемость

Что помогло

Приложение

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

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

Технология, используемая для создания программы

  • HTML/CSS
  • JavaScript
  • Node.js
  • Героку

Команда

Логика и функции интерфейса — Google API и Back-end Connection

Кларк Джейсон НГО – волонтер-разработчик программного обеспечения – SolutionsResource Inc. | LinkedIn
Просмотрите профиль Кларка Джейсона НГО на LinkedIn, крупнейшем в мире профессиональном сообществе. У Кларка Джейсона перечислено 15 вакансий.www.linkedin.com

Взаимодействие с пользователем/пользовательский интерфейс — адаптивный веб-дизайн

Челси Гальвес – ИТ-интерн – Esterline Korry Electronics | LinkedIn
Просмотрите профиль Челси Гальвес на LinkedIn, крупнейшем в мире профессиональном сообществе. У «Челси» есть 6 вакансий в списке…www.linkedin.com

Логика и функции интерфейса — Google API и Bike Functions

Майкл Эйзагирре | LinkedIn
Просмотрите профиль Майкла Эйзагирре на LinkedIn, крупнейшем в мире профессиональном сообществе. Образование Михаила…www.linkedin.com

Пользовательский интерфейс — Wireframing | Высота

И-Тун (Джейсон) Чен – вице-президент по внешней деятельности Тайваньской студенческой ассоциации в университете…
Просмотрите профиль Yi-Tung (Jayson) Chen на LinkedIn, крупнейшем в мире профессиональном сообществе. И-Тун (Джейсон) имеет 2…www.linkedin.com

Back-end | Руководитель группы Наставник

Стивен Чан – инженер по разработке программного обеспечения (Alexa Machine Learning) – Amazon | LinkedIn
Просмотрите профиль Стивена Чана на LinkedIn, крупнейшем в мире профессиональном сообществе. У Стивена есть 5 вакансий, указанных в…www.linkedin.com

Хронология типичного 2-дневного хакатона

День 1
8:00: Дверь открыта и завтрак.
9:00: церемония открытия, поздравления спонсоров и создание команды
10:00: Начало кодирования
13:00: Обед
14:00 : Спонсорские секционные сессии.
18:00: Ужин
20:00: Место закрытия

…Мы кодировали до 12:00, пришли домой в 3:00…

День 2

8:00: Открытие места проведения
8:00: Завтрак
12:00 : Обед
13:00: замораживание кода и конечный срок подачи на hackathon.io
13:30 : Проверка A/V
14:00 : Демонстрации
16:00: Объявления победителей / Призы!

Состязание

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

Итак… к чертежной доске!

Доска

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

1*Cqc4OCfjT4XdQhzQY4IHqA
Проблема и конечное состояние Визуальный макет страницы

Вместо того чтобы решать проблему в целом, мы хотели рассмотреть «конкретную» область проблемы. Итак, вот процесс, который мы прошли:

Упростите постановку проблемы

Велосипеды в нежелательном месте.

Дальше мы спросили себя, чего мы хотим добиться в долгосрочной перспективе вместо того, чтобы быстро исправить ситуацию.

Как меня научил мой курс по управлению изменениями в CityU: на основе требований и преимуществ.

Сформулируйте конечное состояние

Лучшее распространение велосипедов.

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

Определите вызовы

  1. Определите желаемое и нежелательное
  2. Определите велосипеды в нужном месте
  3. Поощрять людей к:
  • переместить велосипед в другое нужное место
  • не парковать велосипед в нежелательном месте

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

Решите один вызов

Переместите велосипед на другое желаемое место,

Предположение: байкшеринговая компания предоставляет данные о «желательных» и «нежелательных» местах.

Идея: краудсорсинг

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

Создание историй пользователей

Мы перешли от доски к лучшему визуальному макету с помощью Figma.

1*7FsjQ4c4fBJteyfZe2yH1Q
Каркасное оформление

Выберите лучшую технологию

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

Было очень соблазнительно интегрировать AWS Lambda, Agora или Fit Bit из-за крутых призов от спонсоров события.

Но мы знали, что форсирование технологии как решения может не закончиться хорошо.

Google Cloud API

1*mOBEDG6sQyci6chHhm5RsOw
API платформы Google

Внутренний сервер и конечная точка

Мы разместили наши данные на Heroku и сгенерировали файл JSON.

1*Og2_xim_thPwdwF3z26uGw
Конечная точка JSON

Наша конечная точка JSON предполагает, что компания по обмену велосипедами предоставляет нам начальную широту и долготу, широту и долготу назначения и т.д.

Тестирование карт API Google

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

1*sNoWwZGORH0nnYxyJ1ArIw
Маркер значки велосипеда | Маршрут

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

1*fOxqoeA-V76zBCUUHjZjUw
Смена «режима» на ходьбу

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

На этом этапе мы закончили кодирование логики и функций. Итак, к передней части.

Пользовательский интерфейс переднего плана

Мы создали адаптивный веб-дизайн и создали простые, но элегантные диалоговые окна.

1*RNcDOlcwVjJmJH8AKeiA4g
Пользовательский интерфейс — Меню

В левом верхнем углу экрана мы создали переключатель, показывающий панель навигации. Панель навигации содержит «найти», «вывести», «уведомления», «справку» и «настройки».

1*UOuwBmpqTYntqNHCXMB6dA
Меню — Найти

Нажатие кнопки «Найти» создаст список доступных вакансий и является альтернативой щелчку значка велосипеда. Расстояние и вознаграждение отображаются в списке.

1*oyZ4wJwVnKwqynMBv8-7qA
Диалоговое окно — Принять задание

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

1*Dy9ZyZdme-nIy4kmBdNilA
Диалоговое окно.

Нажатие кнопки Принять эту работу начнет поездку. Карта будет сосредоточена на GPS велосипеде. В открывшемся диалоговом окне отобразится остаточное расстояние и вознаграждение за выполнение работы.

1*AtnRvvV4w1qIj-zUBB0kyQ
Диалоговое окно.

Когда велосипед достигнет нужного места, то есть точки B, диалоговое окно вернет статус работы выполнена!

Фрагменты кода

переменные

var requestURL = '
      var request = new XMLHttpRequest();
      request.open('GET', requestURL);
      request.responseType="json";
      request.send();
var directionsDisplay = null;
var directionsService = null;
request.onload = function() {
var myJson = request.response;
  for (var i = 0; i < myJson.length; i++) {
    // hidden code: new array from json
    makeBike(xArrSta[i], yArrSta[i], arrId[i]);
  }
populateList(rewardList, distanceList);
populateFirstJob(unmodifiedJson[0]);
}

Получите конечную точку JSON от Heroku.

Инициализируйте directionsDisplay и directionsService, чтобы, когда он генерирует новый путь, предыдущий путь будет удален.

Функции API Google initMap() и CalculateAndDisplayRoute()

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: changingLat, lng: changingLon},
  });
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var selectedMode = document.getElementById('mode').value;
  directionsService.route({
  origin: {lat: staLocLat, lng: staLocLong},
  destination: {lat: endLocLat, lng: endLocLong},
  travelMode: google.maps.TravelMode[selectedMode]}, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
      distance = response['routes'][0]['legs'][0]['distance']['value'];
      duration = response['routes'][0]['legs'][0]['duration']['value'];
      document.getElementById('distance').innerHTML = distance;
      document.getElementById('duration').innerHTML = duration;
    } else {
        window.alert('Directions request failed due to ' + status);
    }
  });
}

initMap это функция Google API, которая воспроизводит карту при загрузке. Вы можете установить масштаб и центр карты.

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

функции changeJobStatus(), selectJob(id), jobAvailable()

function changeJobStatus(jobId, status, worker) {
// need to send id, status and workervar data = {};
var url = " + jobId;
  data.id = jobId;
  data.status = status;
  data.worker = worker;
  var json = JSON.stringify(data);  
  var xhr = new XMLHttpRequest();
  xhr.open("PATCH", url, true);
  xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.onload = function() {
    var users = JSON.parse(xhr.responseText);
    if (xhr.readyState == 4 && xhr.status == "201") {console.table(users);} else {console.error(users);}};
  xhr.send(json);
}
function chooseJob(id) {
    // hidden code: id, starting lat & long, ending lat & long   
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function jobAvailable() {
        changeJobStatus(globalId, "AVAILABLE", "Johnny Cash");
}

функция makeBike()

function makeBike(latitude, longitude, id) {
  var image="bicycle.png";
  if (onBike) {image="rDot.png";}
  if (count > 10) {image="green-marker.png";}
  var size = new google.maps.Size(54, 54);
  if (count > 10) {size = new google.maps.Size(60, 75)}
  var icon = {url: image, scaledSize: size, origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0, 0)};
var Bike = new google.maps.Marker({position: {lat: latitude, lng: longitude}, map: map, zoom: 200, icon: icon});
if (!directionsDisplay) {directionsDisplay = new google.maps.DirectionsRenderer;}
if (!directionsService) {directionsService = new google.maps.DirectionsService;}
Bike.addListener('click', function() {
    map.setZoom(18);
    flag = true;
    map.setCenter(Bike.getPosition());
    hideStartRide();
    bikeId(id);
    $("#dialog-jobOne").show();
    // code: id, starting lat & long, ending lat & long
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    document.getElementById('mode').addEventListener('change', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  });
}

makeBike — это функция, создающая маркер значка велосипеда и стилизующий его. Он использует CalculatorAndDisplayRoute функция создания синего пути.

Когда кодировка была сделана, пора передать!

1*x480o-WeEJ9rUgB0VZeNiw
Питч

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

Поток презентации: Проблема -> Проблема с числами -> Представить приложение -> обсудить программу как решение -> демонстрацию.

Судьи спросили о масштабируемости. В США и других странах много компаний по обмену велосипедов, поэтому мы могли бы масштабироваться на международном уровне.

23 команды выступили, а судьи обсуждали…

1*MR8mQLAMLb5xJrlEKzxqig
Второе место Члены команды LR: Челси Гальвез, Кларк Джейсон Нго, Майкл Эйзагирре, И-Тун (Джейсон) Чен, Стивен Чан

Мы думали, что ничего не выиграем, поскольку не принимали вызовы AWS и Agora.

Но мы победили!

1*vwTftMa2cV5M-Rz9DwQAyw
«Хвостость»

Нет денежного вознаграждения или эквивалента для второго места. Тем не менее, это был хороший опыт, и, по крайней мере, мы получили право хвастаться. 🙂

Премия

0*HOyImtp805CIixCv

Код для вызова A Cause Impact Award: Создайте технологию, которая решает социальную или экологическую проблему и положительно влияет на ваше местное сообщество.

Код для премии A Cause Impact Award: На каждом мероприятии вручалась одна премия Impact Award. В конце серии Global Hackathon лучшие проекты Impact Award выбираются экспертным жюри, включая Инициативу Чана Цукерберга и другие. Пять лучших команд получают официальное приглашение в HACKcelerator.

Список участников

1*Hi0IUQl19LiORjZgVYoaPw
Команды с отличными идеями!

Известные креативные программы от других команд:

Фитнес-трекер FitBit с изображением цветка, который расцветет после достижения ежедневной цели.

Инструмент сообщения о хулиганстве, позволяющий свидетелям и другим сторонам сообщать.

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

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

Надеюсь, вам понравилось это читать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *