-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (164 loc) · 13.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta property="og:title" content="nwHacks 2020: Rebuild">
<meta property="og:url" content="https://nwhacks-2020.github.io/">
<meta property="og:description" content="Android application which creates a mesh network to automatically share vital disaster information data between nearby devices without Wi-Fi or cell service. (nwHacks 2020, 2nd Place)">
<meta property="og:image" content="https://nwhacks-2020.github.io/res/img/team/presenting.jpg">
<title>Rebuild</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="lib/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="res/css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#6992C7">
<meta name="theme-color" content="#F8F8FF">
</head>
<body>
<header>
<img class="img-fluid d-block mx-auto" id="banner" src="res/img/logos/header.svg">
</header>
<div id="about-content">
<p class="mt-5">
<a href="https://play.google.com/store/apps/details?id=com.nwhacks2020.rebuild" target="_blank"><span class="accent">Rebuild</span></a> is an Android application which creates a mesh network to automatically share vital disaster information data between nearby devices, without Wi-Fi or cell service.
</p>
<p>
The project was created during January 11-12 for <a href="https://www.nwhacks.io/" target="_blank">nwHacks 2020</a>, an annual hackathon hosted by nwPlus at the University of British Columbia.
</p>
<p><i>
Our team won <span class="accent"><strong>2nd place</strong></span> out of 145 teams and 769 hackers.
</i></p>
<div class="d-block mx-auto py-4" style="text-align: center;">
<a href="https://github.com/nwhacks-2020" target="_blank">
<img class="d-inline px-4 company-logo" src="res/img/tech/github.png" alt="GitHub" title="View the source code on GitHub">
</a>
<a href="https://play.google.com/store/apps/details?id=com.nwhacks2020.rebuild" target="_blank">
<img class="d-inline px-4 company-logo" src="res/img/tech/google-play.png" alt="Google Play" title="Download the app on Google Play">
</a>
</div>
<img class="img-fluid d-block mx-auto mb-5 pt-3" src="res/img/team/presenting.jpg" alt="Team picture">
<hr>
<h1 class="my-4">The Inspiration</h1>
<p>
We took inspiration chiefly from one of our team members' home country, <strong>Nepal</strong>. The country is <a href="https://www.bbc.com/news/world-asia-32484266" target="_blank">ravaged by earthquakes several times every century</a>, destroying homes, communities, and livelihoods. Though seeming catastrophic to us, the phenomenon simply is an unavoidable fact of life for Nepalese people. When an earthquake hits, power lines, water, and food can be unavailable for wide swathes of the country, which endangers citizens who need immediate aid but can no longer communicate through traditional phone lines or internet channels.
</p>
<img class="img-fluid d-block mx-auto mb-2 pt-3" src="res/img/nepal-earthquake.jpg" alt="Team picture">
<p><sup><i>
Picture by Narendra Shrestha, <a href="https://www.nationalgeographic.com/news/2015/04/150425-nepal-earthquake-faults-geology-science/" target="_blank">National Geographic</a>.
</i></sup></p>
<p>
Not only are earthquakes a common issue in Nepal, but they are a pressing issue throughout the entire west coast of North America, which has been famously <a href="https://www.newyorker.com/magazine/2015/07/20/the-really-big-one" target="_blank">overdue for a massive earthquake</a> which we are woefully unprepared for.
</p>
<p>
Another key inspiration was <a href="https://play.google.com/store/apps/details?id=mobi.firedepartment" target="_blank">PulsePoint Respond</a>, a mobile application which registers app users who can perform CPR. Whenever an emergency situation arises, 911 dispatch can send an alert to all nearby app users who are able to perform CPR, in order to administer first aid as quickly as possible. This leverages the ability to crowdsource strangers to assist nearby people in need - an important aspect of our solution.
</p>
<p>
In essence, our goal was to create a technological solution to assist recovery efforts and support citizens in receiving immediate aid - during an emergency where internet and cellular networks are crippled.
</p>
<h1 class="my-4">Solution</h1>
<p>
Our solution is Rebuild, an Android application. Users share and receive information about <strong>nearby resources and dangers</strong> by placing icons on a map. The application then creates a mesh network - a set of communication channels which connect many nearby devices - between other phones with the same application. Resource and danger information is <strong>automatically transferred</strong>, ensuring that users have the most recent support and survival data.
</p>
<!-- 4 screenshots -->
<div class="d-block mx-auto py-4" style="text-align: center;">
<img class="d-inline rounded px-4 img-half" src="res/img/screenshots/1-splash.png" alt="Splash Screen" title="Splash Screen">
<img class="d-inline rounded px-4 img-half" src="res/img/screenshots/2-onboarding.png" alt="Onboarding Screen" title="Onboarding Screen">
</div>
<div class="d-block mx-auto py-4" style="text-align: center;">
<img class="d-inline rounded px-4 img-half" src="res/img/screenshots/3-map.png" alt="Map Screen" title="Map Screen">
<img class="d-inline rounded px-4 img-half" src="res/img/screenshots/4-create-marker.png" alt="Create Marker Screen" title="Create Marker Screen">
</div>
<p>
What makes Rebuild unique and effective is that <strong>it does not require wifi or cell service</strong> to share and receive data. The mesh network created by the application between phones is the core of this application, and allows information sharing when all other systems are incapacitated.
</p>
<p>
In short, this solution provides the capability for many citizens to communicate essential information in an emergency situation across great distances.
</p>
<h2 class="my-4">The System</h2>
<p>
For many years, a <strong>decentralized network</strong> has been the dream of entrepreneurs and technologists. A decentralized mesh network consists of nodes which convey information between each other, and therefore does not (always) require a centralized server, or dedicated connection to existing infrastructure for communication. One of the most famous examples is HBO's <a href="https://www.imdb.com/title/tt2575988/" target="_blank">Silicon Valley</a>. Bringing such a concept into widespread adoption would mean the ability to create a community or communication system outside of the vices of the traditional internet and cellular system - unlocking possibilities never before considered.
</p>
<p>
We took the concept of the decentralized network and applied it to the emergency situation where internet and cellular networks are unavailable - in which case, mobile phones consist of the nodes which communicate information between each other. This is called our <strong>mesh network</strong> between mobile devices. In Rebuild, this communicates between different devices to share information - namely, the markers with local resources and dangers. Nearby devices share their markers with each other, and when people wander to different areas, the markers will continue to be shared with more and more people.
</p>
<a href="https://app.cloudcraft.co/view/93f9befa-bb10-4f0a-a9f5-b05742a9fb1c?key=7m4dyfatpBoCM2DO7HK-9Q" target="_blank">
<img class="img-fluid d-block mx-auto my-4" src="res/img/tech/architecture-mesh-network.png" alt="Architecture Diagram: Mesh Network">
</a>
<p>
Take someone who is <strong>farther from the marker than the connection distance between two devices</strong>, and therefore unable to connect to someone currently at the marker broadcasting the location. As long as they are connected to another person on the mesh network who has the marker registered, they will be able to receive the location and see it on their map.
</p>
<a href="https://app.cloudcraft.co/view/acc3dec0-a442-4c71-8156-e968d1c060e0?key=LM8q2qVk0XgExLwc5BC5Ig&interactive=true&embed=true" target="_blank">
<img class="img-fluid d-block mx-auto my-4" src="res/img/tech/architecture-distance.png" alt="Architecture Diagram: Sending Information Across Distances">
</a>
<h3 class="my-4">Android Application</h3>
<a href="https://www.android.com/" target="_blank">
<img class="img-fluid d-block mx-auto py-4 company-logo" src="res/img/tech/android.svg" alt="Android logo">
</a>
<p>
The mobile application is built on Android, and primarily consists of two distinct sections:
</p>
<ol>
<li>A view of all current markers with a button to add markers, and</li>
<li>A passive set of background services which handle the mesh network connections and sharing/receiving of markers.</li>
</ol>
<p>
We built our mesh network on Android's <a href="https://developers.google.com/nearby/connections/overview" target="_blank">Nearby Communications API</a>. Our mesh network service constantly attempts to connect with nearby devices using the same application and maintains these connections up to a distance, which we verified to be at least <strong>70 metres and around a corner</strong>.
</p>
<p>
The second background service handles messaging, and every so often will share the device's list of markers with all currently connected devices. When markers are received, duplicates are eliminated and unique new markers are instantly added to the map. We verified the sharing and refresh rate to sometimes be <strong>within 10 seconds</strong>, even in a hall crowded with people and other devices.
</p>
<h3 class="my-4">UX/UI Design (Figma)</h3>
<a href="https://www.figma.com/" target="_blank">
<img class="img-fluid d-block mx-auto py-4 company-logo" src="res/img/tech/figma.png" alt="Figma Logo">
</a>
<p>
To visually understand how users would navigate and use the application, user flows were created using <a href="https://www.figma.com/" target="_blank"><strong>Figma</strong></a> and passed to the developers.
</p>
<p>
To learn more about the creative process for Rebuild, visit Michelle Swolfs' portfolio <a href="https://michelleswolfs.myportfolio.com/rebuild" target="_blank">here</a>.
</p>
<h1 class="my-4">Results</h1>
<img class="img-fluid d-block mx-auto mb-5 pt-3" src="res/img/team/finalist.jpg" alt="Team picture">
<p>
We placed <b class="accent">2nd</b> in the hackathon out of 145 teams and 769 hackers.
</p>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">
Congrats to Rebuild for winning 2nd place at <a href="https://twitter.com/nwplusubc?ref_src=twsrc%5Etfw">@nwplusubc</a> this weekend! <a href="https://twitter.com/hashtag/nwHacks2020?src=hash&ref_src=twsrc%5Etfw">#nwHacks2020</a> <a href="https://t.co/Bw0ms7wHED">pic.twitter.com/Bw0ms7wHED</a>
</p>
— Major League Hacking (@MLHacks) <a href="https://twitter.com/MLHacks/status/1216764728007184385?ref_src=twsrc%5Etfw">January 13, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p class="my-4">
The judges consisted of:
<ul>
<li> Google Developer Advocate <a href="https://www.linkedin.com/in/ryanmatsumoto" target="_blank"><strong>Ryan Matsumoto</strong></a>,</li>
<li> Bloomberg Software Engineer <a href="https://www.linkedin.com/in/calvinchengcc/" target="_blank"><strong>Calvin Cheng</strong></a>,</li>
<li> Hootsuite Software Developer <a href="https://www.linkedin.com/in/rpdjacinto" target="_blank"><strong>Rafael Jacinto</strong></a>, and</li>
<li> UBC Research Coordinator <a href="https://www.linkedin.com/in/jacquelinepashby" target="_blank"><strong>Jacqueline Ashby</strong></a>.</li>
</ul>
</p>
<hr class="my-4" />
<h1 class="my-4">About the Team</h1>
<p></p>
The creators of this project are
<a href="https://github.com/jleung51" target="_blank">Jeffrey Leung</a>,
<a href="https://michelleswolfs.myportfolio.com/" target="_blank">Michelle Swolfs</a>,
<a href="https://github.com/praneershrest" target="_blank">Praneer Shrestha</a>,
<a href="https://github.com/AmirNaghibi" target="_blank">Amir Naghibi</a>, and
<a href="https://github.com/SheaJanke" target="_blank">Shea Janke</a>.
</p>
<img class="img-fluid d-block mx-auto my-4" src="res/img/team/working.jpg" alt="Team picture">
<hr>
<p>
<i>Disclaimer: This page was created after the hackathon's completion.</i>
</p>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="lib/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</div></body>
</html>