angelhack_我的团队如何撼动AngelHack Seattle Hackathon

angelhack

This was my second time participating in a Hackathon, and it was a truly enriching experience! We were able to call APIs, connect to the back-end database, and build most of the app’s front-end logic and functionalities using JavaScript.

这是我第二次参加Hackathon，这是一次真正的丰富体验！ 我们能够调用API，连接到后端数据库，并使用JavaScript构建应用程序的大多数前端逻辑和功能。

I participated in the Capital One DevExchange Hackathon earlier this year with little to no coding experience. It helped me manage my own expectations and gain an idea what the judges were expecting.

我今年初参加了Capital One DevExchange Hackathon，几乎没有编码经验。 它帮助我管理了自己的期望并了解了法官的期望。

评审标准 (The Judging Criteria)

• good pitch
  音调好
• working demo
  工作演示
• impact on society
  对社会的影响
• scalability
  可扩展性

有什么帮助 (What Helped)

• Attending the City University of Seattle for a Master of Science program in Computer Science.

  参加西雅图城市大学的计算机科学理学硕士课程。

• Online coding resources (like freeCodeCamp and Udemy)

  在线编码资源(如freeCodeCamp和Udemy )

• Going to meetups (check out Meetup.com)

  参加聚会(请访问Meetup.com )

• Medium

  中

• A lot of great mentors.
  很多伟大的导师。
• Awesome team members!
  很棒的团队成员！

应用程式 (The App)

We developed a solution to solve a common problem: share bikes being left in unsuitable places. This creates problems for the environment, and bike-sharing companies incur extra costs and penalties. Our solution crowdsources workers to help move share bikes to appropriate locations, which decreases clutter and benefits both the community and bike share companies.

我们开发了一种解决方案来解决一个常见问题：将自行车留在不合适的地方。 这给环境带来了问题，并且自行车共享公司产生了额外的成本和罚款。 我们的解决方案将工作人员众包，以帮助将共享单车移动到适当的位置，从而减少了混乱情况，并使社区和共享单车公司受益。

Our app includes a web platform that enables bike sharing companies to publish bike moving tasks that will be completed by crowdsourced workers. The web application includes a map-based UI that displays transport routing paths and lists jobs for users by distance. It also provide incentives for workers with rewards such as cash, bike share credits, and gift cards.

我们的应用程序包括一个网络平台，自行车共享公司可以通过该平台发布自行车移动任务，这些任务将由众包工人完成。 该Web应用程序包括一个基于地图的UI，该UI显示传输路由路径并按距离列出用户的作业。 它还为工人提供了奖励，例如现金，自行车共享积分和礼品卡。

用于构建应用程序的技术 (Technology Used to Build the App)

• HTML/CSS
  HTML / CSS
• JavaScript
  JavaScript
• Node.js
  Node.js
• Heroku
  Heroku

团队 (The Team)

前端逻辑和功能-Google API和后端连接 (Front-end logic and functions — Google API & Back-end Connection)

Clark Jason Ngo - Volunteer Software Developer - SolutionsResource Inc. | LinkedInView Clark Jason Ngo's profile on LinkedIn, the world's largest professional community. Clark Jason has 15 jobs listed…www.linkedin.com

Clark Jason Ngo-志愿者软件开发人员-SolutionsResource Inc. | 领英(LinkedIn)在全球最大的专业社区领英( LinkedIn)上 查看Clark Jason Ngo的个人资料。 Clark Jason列出了15个职位... www.linkedin.com

前端用户体验/用户界面-响应式Web设计 (Front-end User Experience/User Interface — Responsive Web Design)

Chelsea Galvez - IT Intern - Esterline Korry Electronics | LinkedInView Chelsea Galvez's profile on LinkedIn, the world's largest professional community. Chelsea has 6 jobs listed on…www.linkedin.com

切尔西·加尔维兹(Chelsea Galvez)-IT实习生-Esterline Korry Electronics | Business Wire 领英(LinkedIn)在全球最大的专业社区领英( LinkedIn)上 查看Chelsea Galvez的个人资料。 切尔西(Chelsea)上有6个职位 。www.linkedin.com

前端逻辑和功能-Google API和自行车功能 (Front-end logic and functions — Google API & Bike Functions)

Michael Eizaguirre | LinkedInView Michael Eizaguirre's profile on LinkedIn, the world's largest professional community. Michael's education is…www.linkedin.com

迈克尔·埃扎奎尔| LinkedIn 在全球最大的专业社区 LinkedIn上 查看Michael Eizaguirre的个人资料。 迈克尔的教育是... www.linkedin.com

前端用户界面—线框图| 沥青 (Front-end User Interface — Wireframing | Pitch)

Yi-Tung (Jayson) Chen - Vice President External - Taiwanese Student Association at the University…View Yi-Tung (Jayson) Chen's profile on LinkedIn, the world's largest professional community. Yi-Tung (Jayson) has 2…www.linkedin.com

Chen Yi-Yong(Jayson)Chen-大学副校长-台湾学生协会… 在全球最大的专业社区LinkedIn上查看Chen Yi-Yong(Jayson)的个人资料。 Yi-Tung(Jayson)有2… www.linkedin.com

后端| 团队负责人| 导师 (Back-end | Team Lead | Mentor)

Stephen Chan - Software Development Engineer (Alexa Machine Learning) - Amazon | LinkedInView Stephen Chan's profile on LinkedIn, the world's largest professional community. Stephen has 5 jobs listed on their…www.linkedin.com

Stephen Chan-软件开发工程师(Alexa机器学习)-亚马逊| Business Wire LinkedIn 在全球最大的专业社区 LinkedIn上 查看Stephen Chan的个人资料。 斯蒂芬在他们的网站上列出了5个工作... www.linkedin.com

典型的2天黑客马拉松的时间表 (Timeline of a Typical 2-Day Hackathon)

Day 1 8:00 AM : Doors Open & Breakfast9:00 AM : Opening Ceremony, Sponsor Welcomes, & Team Building10:00 AM : Coding Kick Off1:00 PM : Lunch2:00 PM : Sponsor Breakout Sessions 6:00 PM : Dinner8:00 PM : Venue Closes

第1天 8:00 AM：开门和早餐9:00 AM：开幕式，赞助商欢迎和团队建设10:00 AM：编码启动1:00 PM：午餐2:00 PM：赞助商分组会议6:00 PM：晚餐8 ：00 PM：场地关闭

…我们编码到12:00 PM，在3:00 AM才回到家… (… We coded until 12:00 PM, got home at 3:00 AM …)

Day 2

第二天

8:00 AM : Venue Opens8:00 AM : Breakfast12:00 PM : Lunch1:00 PM : Code Freeze & Submission Deadline on hackathon.io 1:30 PM : A/V Check2:00 PM : Demos 4:00 PM : Winners are Announced / Prizes!

8:00 AM：场地开放8:00 AM：早餐12:00 PM：午餐1:00 PM：hackathon.io的代码冻结和提交截止时间1:30 PM：A / V Check2：00 PM：Demos 4:00 PM：获奖者被宣布/奖品！

挑战 (The Challenge)

The rapid growth of bike sharing in cities worldwide has led to millions of abandoned bicycles blocking streets and sidewalks, disrupting people’s daily lives and leaving piles of debris behind. Our goal was to help cities solve their problem of bike-share oversupply.

在世界各地的城市中，自行车共享的快速增长导致数百万辆废弃的自行车阻塞了街道和人行道，破坏了人们的日常生活，并留下了许多碎屑。 我们的目标是帮助城市解决他们的问题供过于求的自行车共享。

So…to the drawing board!

所以……到绘图板上！

白板 (Whiteboarding)

Before we even started coding, we spent a few hours thinking about what the problem really was. We thought about it both from a social perspective and from the bike-sharing companies’ perspectives.

在开始编码之前，我们花了几个小时思考问题的实质。 我们从社会角度和共享单车公司的角度进行了思考。

Instead of tackling the whole problem, we wanted to address a “specific” area in the problem. So here’s the process we went through:

除了解决整个问题，我们还想解决问题的“特定”领域。 因此，这是我们经历的过程：

简化问题陈述 (Simplify the Problem Statement)

Bikes at undesired location.

自行车在不希望的位置。

Next, we asked ourselves what we wanted to achieve in the long run instead of doing a quick-fix.

接下来，我们问自己，从长远来看，我们想要实现什么，而不是快速解决。

As my change management class at CityU taught me: requirements-led vs benefits-led.

正如我在城大的变更管理班教给我的那样：以需求为主导vs以利益为主导。

制定最终状态 (Formulate the End State)

Better distribution of bikes.

更好地分配自行车。

Now that we had defined our End State (bikes at desired locations), we brainstormed on what challenges lay ahead to reach that End State.

既然我们已经定义了最终状态(在理想的位置骑自行车)，我们就如何达到最终状态进行了集思广益。

定义挑战 (Define the Challenges)

1. Define desired and undesired
   定义期望和不期望的
2. Identify bikes within desired location
   确定所需位置的自行车
3. Provide incentives for people to:
   激励人们：

• move the bike to another desired location

  将自行车移至其他所需位置

• not park their bike at undesired location

  不要将自行车停在不希望的位置

As we didn’t have enough time to build the app, this led to choosing one and making assumptions.

由于我们没有足够的时间来构建该应用程序，因此需要选择一个并进行假设。

解决一个挑战 (Tackle One Challenge)

“Move the bike to another desired location,”

“ 将自行车移到另一个需要的位置， ”

Assumptions: bike-sharing company provides data on “desired” and “undesired” locations.

假设：自行车共享公司提供“所需”和“不需要”位置的数据。

Idea: Crowd sourcing

想法：众包

Have the bike-sharing companies use our services, and we get people to move bikes from point A to point B.

让自行车共享公司使用我们的服务，然后让人们将自行车从A点移到B点。

创建用户故事 (Create User Stories)

We went from whiteboarding to a better visual layout using Figma.

我们使用Figma从白板过渡到更好的视觉布局。

选择最佳技术 (Pick the Best Technology)

We focused on the problem at hand and used the technology we thought was best to address it.

我们专注于眼前的问题，并使用了我们认为最能解决该问题的技术。

It was very tempting to integrate AWS Lambda, Agora, or Fit Bit because of the cool prizes from the sponsors of the event.

集成AWS Lambda，Agora或Fit Bit的想法非常诱人，因为该活动的赞助商提供了很多奖励。

But we knew that “forcing” a technology as a solution might not end well.

但是我们知道，“强制”技术作为解决方案可能不会很好地结束。

Google Cloud API (Google Cloud APIs)

后端服务器和端点 (Back-end Server and Endpoint)

We hosted our data on Heroku and generated a JSON file.

我们将数据托管在Heroku上并生成了JSON文件。

Our JSON endpoint assumes that the bike-sharing company provides us with the starting latitude and longitude and destination latitude and longitude, etc.

我们的JSON端点假设自行车共享公司向我们提供了起始纬度和经度以及目的地纬度和经度等。

测试Google Map API (Testing Google Map APIs)

With the latitude and longitude values, we were able to create the route, point A and point B, and Bike Icon Markers.

使用经度和纬度值，我们能够创建路线，A点和B点以及“自行车图标标记”。

Clicking a Bike Icon would generate a blue path and two points, A and B. it also changes the zoom level to the midpoint of the blue path.

单击“自行车图标”将生成一条蓝色路径以及两个点A和B。它还将缩放级别更改为蓝色路径的中点。

We also have an option dropdown that changes mode to “walking” and the blue straight line will change to dotted and also reroute to the best “walking path”.

我们还有一个选项下拉菜单，可将模式更改为“行走”，蓝色直线将变为虚线，并重新路由至最佳“行走路径”。

At that point, we were done with coding the logic and functionalities. So on to the front end.

到那时，我们完成了对逻辑和功能的编码。 所以到前端。

前端用户界面 (Front-end User Interface)

We made a responsive web design and created simple yet elegant dialog boxes.

我们进行了响应式网页设计，并创建了简单而优雅的对话框。

At the top left screen, we created a toggle button the shows the navigation bar. The navigation bar includes “find”, “cash out”, “notifications”, “help” and “settings”.

在左上方的屏幕上，我们创建了一个切换按钮，其中显示了导航栏。 导航栏包括“查找”，“兑现”，“通知”，“帮助”和“设置”。

Clicking “Find” will generate a list of jobs available and is an alternative to clicking a Bike Icon. Distance and Reward are shown in the list.

单击“查找”将生成可用的作业列表，是单击“自行车”图标的替代方法。 距离和奖励显示在列表中。

Choosing a job from the Job List or clicking a Bike Icon will pop out a dialog box asking the user to accept the job. The dialog box also shows a summary of the distance and estimated time completion for the job selected.

从“作业列表”中选择一个作业或单击“自行车”图标将弹出一个对话框，要求用户接受该作业。 该对话框还显示所选作业的距离和预计完成时间的摘要。

Clicking “Accept This Job” will start the trip. The map will be centered on the bike’s GPS. A dialog box will show remaining Distance and Reward for completing the Job.

单击“接受此作业”将开始旅程。 该地图将以自行车的GPS为中心。 对话框将显示完成作业所需的剩余距离和奖励。

When the bike reaches the desired location, which is point B, adialog box will return a status that the Job has been completed!

当自行车到达所需的位置(即B点)时，对话框将返回状态，表明作业已完成！

代码段 (Code Snippets)

variables

变数

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]);
}

Get the JSON endpoint from Heroku.

从Heroku获取JSON端点。

Initialize directionsDisplay and directionsService so that it when it generates a new path, the previous path will be deleted.

初始化directionsDisplay和directionsService，以便它在生成新路径时将删除先前的路径。

Google API函数initMap()和calculateAndDisplayRoute() (Google API functions initMap() and 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 is a Google API function that renders the map on load. You can set the zoom and center of the map.

initMap是Google API函数，可在加载时呈现地图。 您可以设置地图的缩放比例和中心。

calculateAndDisplayRoute is the function that generates the blue path. We modified the function to be able to show “distance” and “duration”.

computeAndDisplayRoute是生成蓝色路径的函数。 我们修改了功能以显示“距离”和“持续时间”。

函数changeJobStatus()，chooseJob(id)，jobAvailable() (functions changeJobStatus(), chooseJob(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())

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 is a function that generates the Bike Icon marker and also styles it. It uses the calculateAndDisplayRoute function to generate its blue path.

makeBike是一个功能，可生成“自行车图标”标记并设置其样式。 它使用calculateAndDisplayRoute函数生成其蓝色路径。

When the coding was done, it was time to pitch!

完成编码后，就该开始推销了！

We delivered the pitch with energy. We made sure that it had a flow and connected one idea to the others.

我们用精力传递了音高。 我们确保流程顺畅，并将一个想法与其他想法联系起来。

Presentation flow: Problem -> Problem with Numbers -> Present the App -> discuss the App as a solution -> demo.

演示流程：问题->数字问题->演示应用程序->讨论应用程序作为解决方案->演示。

The judges asked about scalability. There’s a lot of bike-sharing companies in the US and other countries, so we could scale internationally.

法官询问了可扩展性。 美国和其他国家/地区有很多共享单车的公司，因此我们可以在国际范围内扩展。

23 teams pitched and the judges deliberated…

23个团队投球，法官们进行了审议……

We thought we wouldn’t win anything, as we didn’t take the challenges from AWS and Agora.

我们认为我们不会赢得任何胜利，因为我们没有接受来自AWS和Agora的挑战。

But we won!

但是我们赢了！

There’s no monetary prize or any equivalent for the runner-up. Still, it was a good experience and at least we got bragging rights. :)

亚军没有任何金钱奖励或任何同等的奖励。 尽管如此，这还是一次很好的经历，至少我们拥有了自吹自rights的权利。 :)

奖项 (The Prize)

Code For A Cause Impact Award Challenge: Build technology that solves a social or environmental problem and positively impacts your local community.

“因果关系代码奖”挑战赛：构建解决社会或环境问题并对当地社区产生积极影响的技术。

Code For A Cause Impact Award Prize: One Impact Award was given out at each event. At the end of the Global Hackathon Series, the top Impact Award projects are chosen by an expert judging panel including the Chan Zuckerberg Initiative and more. The top five teams receive an official invite into the HACKcelerator.

原因影响力奖代码奖：每次活动均颁发一个影响力奖。 在全球黑客马拉松系列赛结束时，由评委(包括Chan Zuckerberg Initiative等)组成的专家评审团评选出最佳的影响力奖项目。 前五支球队收到了正式邀请加入HACKcelerator。

参赛者名单 (List of Participants)

Notable creative Apps from other teams were:

其他团队的著名创意应用程序包括：

A FitBit fitness tracker with a flower image that will bloom upon reaching your daily goal.

带有花朵图像的FitBit健身追踪器，在达到您的日常目标时就会绽放。

A bully reporting tool that allows witnesses and other parties to report.

欺凌者举报工具，允许证人和其他各方举报。

An image scanning App that will check if bike is in a desired location or not.

图像扫描应用程序，将检查自行车是否在所需位置。

Résumé builder that also suggests tutorials and courses based on your desired skills.

简历生成器，还根据您所需的技能为您提供教程和课程建议。

I hope you have enjoyed reading this.

希望您喜欢阅读。

翻译自: https://www.freecodecamp.org/news/cjn-cashcycle-angelhack-seattle-hackathon-2018-d3f42a26ddcb/

angelhack