Как моя команда качала Анжехак Сиэтл Хакатон

Автор оригинала: Clark Jason Ngo.

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

Я участвовал в столице один хакатон Devexchange в начале этого года с небольшим количеством опыта кодирования. Это помогло мне управлять своими собственными ожиданиями и получить представление о том, что ожидают судьи.

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

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

Что помогли

Посещение Городский университет Сиэтла Для магистра научной программы в информатике.
Онлайн-ресурсы кодирования (например FreeCodecamp и UDEMY Несомненно
Перейти к встречам (проверить Meturep.com )
Середина
Много великих наставников.
Удивительные члены команды!

Приложение

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

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

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

HTML/CSS.
Javascript
Node.js.
Heroku

Команда

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

День 1 8:00 утра: Двери Open & Breake 9:00 утра: Церемония открытия, Спонсор приветствует, и команда здания 10:00 утра: кодирование kning 13:00 вечера: обед 2:00 вечера: Спонсор прорывных сеансов 6:00 вечера: ужин 8:00 ВЕЧЕРА: Место проведения закрывается

… Мы закодировали до 12:00 вечера, вернулись домой в 3:00 утра …

День 2

8:00 утра: Место проведения открывается 8:00 AM: Завтрак 12:00: Обед 1:00:00: Код Freeze & Delize Andline на Hackathon.io 13:30: A/V Проверка 2:00: Demos 4: 00 вечера: Победители объявляются/призы!

Соревнование

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

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

Доктор

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

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

Упростите заявление о проблеме

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

Поскольку мой класс управления изменениями в Cityu научил меня: требования-светодиод против преимуществ.

Сформулировать конечное состояние

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

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

Определите желаемую и нежелательно
Определить велосипеды в нужном месте
Обеспечить стимулы для людей:

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

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

Решать одну проблему

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

Предположения: Chariting Chariing Bike предоставляет данные о «желаемых» и «нежелательных» местах.

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

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

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

Мы отправились от Whiteoboarding до лучшего визуального макета, используя Figma Отказ

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

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

Это было очень заманчиво интегрировать aws lambda, agora или подойдут из-за прохладных призов от спонсоров события.

Но мы знали, что «принуждение» технологии, как решение, может не закончить хорошо.

Google Cloud Apis

Задний план сервера и конечная точка

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

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

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

С ценностями широты и долготы мы смогли создать маршрут, точку A и Point B, а также маркеры значков велосипедов.

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

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

В этот момент мы были сделаны с кодированием логики и функциональности. Так что на передний конец.

Интерфейс интерфейса

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

На верхнем левом экране мы создали кнопку Toggle, которая показывает навигационную панель. Бар навигации включает в себя «Найти», «Cash Out», «Уведомления», «Справка» и «Настройки».

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

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

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

Когда велосипед достигает желаемого местоположения, который является точкой B, Adialog Box вернет статус, что задание было завершено!

Кодовые фрагменты

переменные

var requestURL = 'https://whispering-stream-27392.herokuapp.com/job/';
      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, чтобы он, когда он генерирует новый путь, предыдущий путь будет удален.

Функции Google API INITMAP () и CALLATEALATEADDDISPLAYROUTE ()

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, которая отображает карту на нагрузке. Вы можете установить увеличение и центр карты.

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

Функции ChangeJobstatus (), выборов (ID), Jobavailable ()

function changeJobStatus(jobId, status, worker) {
// need to send id, status and workervar data = {};
var url = "https://whispering-stream-27392.herokuapp.com/job/" + 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);
    });
  });
}

Макияж Это функция, которая генерирует велосипед значок маркера, а также стили его. Он использует CalculateAnddisplayRoute Функция для генерации своего синего пути.

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

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

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

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

23 команды разбили и судьи обсудили …

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

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

Там нет денежной премии или какой-либо эквивалентной для подноса. Тем не менее, это был хороший опыт и, по крайней мере, мы получили хвастовство человека.:)

Приз

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

Код для премии премии воздействия причин: Одноразовая награда была выдана на каждом событии. В конце Глобального серии Hackathon проекты награды высочайших воздействий выбирают Группа эксперта, включая инициативу Чан Цукерберга и другие. Лучшие пять команд получают официальное приглашение в Hackcleerator.

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

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

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

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

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

Résumé Builder, который также предлагает учебники и курсы, основанные на ваших желаемых навыках.

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

Оригинал: “https://www.freecodecamp.org/news/cjn-cashcycle-angelhack-seattle-hackathon-2018-d3f42a26ddcb/”