Bridges to Prosperity is a web application that was cross-functionally built during Lambda Labs. This application was worked on by 5 web developers, which were split into 3 front-end developers and 2 back-end developers, and 3 data science engineers. The purpose of this application is to display bridge data, which included bridges built and bridges proposed, on a visual map component.

通往繁荣的桥梁是一个在Lambda Labs期间跨功能构建的Web应用程序。 该应用程序由5位Web开发人员处理，这些开发人员分为3位前端开发人员和2位后端开发人员，以及3位数据科学工程师。 此应用程序的目的是在可视地图组件上显示桥梁数据，其中包括已建桥梁和建议桥梁。

Firstly, I’d like to talk about Bridges to Prosperity. Their official website can be found here:

首先，我想谈一谈繁荣的桥梁。 他们的官方网站可以在这里找到：

Bridges to Prosperity has the goal of building footbridges to allow travel between difficult or impassable terrain. These bridges will allow for easier access to important areas such as education locations and healthcare centers.

通往繁荣的桥梁的目标是建造人行天桥，以允许在困难或无法通行的地形之间旅行。 这些桥梁将使人们更容易进入重要区域，例如教育地点和医疗中心。

Given that the Bridges to Prosperity organization has such a noble cause, it inspired my team to create the best product that we could possibly provide.

鉴于“通往繁荣的桥梁”组织有如此崇高的事业，它激发了我的团队创造我们可能提供的最佳产品。

I was part of the front end team for this product. Lambda provided us a simple, bare-bones, React application for us to build upon. Coming out of the computer science portion of the Lambda curriculum, where we focused on data structures and algorithms for 2 months, I was excited to get back into web development and using React.

我是该产品前端团队的一员。 Lambda为我们提供了一个简单的，简陋的React应用程序供我们构建。 从Lambda课程的计算机科学部分开始，我们专注于数据结构和算法两个月，我很高兴回到Web开发并使用React。

The first part of building the front end of this application was the planning process. I started out by creating a simple wireframe so that the team could easily visualize how the application would look before any code was actually written. Having this wireframe also made it easy for me to go in and make adjustments and for anyone to make recommendations without having to commit to any code being written or rewritten. We all came to an agreement for how the wireframe was looking and then moved onto the next step of the process, assigning duties.

构建此应用程序前端的第一部分是计划过程。 我首先创建一个简单的线框，以便团队可以在实际编写任何代码之前轻松地可视化该应用程序的外观。 有了这个线框，我也可以轻松地进行调整和任何人提出建议，而不必承诺要编写或重写的任何代码。 我们都就线框的外观达成了协议，然后移至流程的下一步，分配职责。

Trello is what we used to assign duties between every member of the team. I mainly used Trello to communicate what I was currently working on, what needed to be worked on and to see what the other members of my team were currently working on. Trello has this neat checklist feature that allowed me to easily create custom checklists that I was able to assign to myself and any other member of my team. We also used it to link specific pull request from GitHub to the individual tasks on the Trello cards.

Trello是我们过去在团队每个成员之间分配职责的工具。 我主要是使用Trello来交流我当前正在做的事情，需要做的事情以及查看团队其他成员当前正在做的事情。 Trello具有此整洁的清单功能，使我能够轻松创建自定义清单，然后将其分配给自己和团队的其他任何成员。 我们还使用它将来自GitHub的特定提取请求链接到Trello卡上的各个任务。

The last step in our planning process before any code was written was deciding on what Map technology would work best for this web app. To my surprise, there were many to choose from. There is Plotly, Google Maps, but what we decided to use as a team was MapBox. I liked the customizability options that it provided and how easy it was to implement with the dataset that we were given.

在编写任何代码之前，我们规划过程的最后一步是确定哪种Map技术最适合此Web应用程序。 令我惊讶的是，有很多选择。 有Plotly，Google Maps，但我们决定使用的团队是MapBox。 我喜欢它提供的可定制性选项，以及使用给定的数据集实现它的难易程度。

Now that I had a majority of the planning process completed, I felt very comfortable with the direction the application was going in. This meant that it was time to code.

现在，我已经完成了大部分规划过程，我对应用程序的开发方向感到非常满意。这意味着该是编写代码的时候了。

When starting out any project the first thing I like to focus on is functionality. I like to figure out what are all the actions that need to happen within the application, break them down into their own tasks, and work on each of them until they are fully functional. I will also prioritize each task into which ones are most important to reaching a minimum viable product for release. This aids me in reaching a solid point so that I can get users to actually use the application. I decided that the most important feature that should be worked on first was the Map display.

开始任何项目时，我首先要关注的是功能。 我想弄清楚在应用程序中需要执行的所有操作是什么，将它们分解成各自的任务，并对每个任务进行处理，直到它们完全起作用为止。 我还将优先考虑每个任务，其中最重要的任务是使发布的产品变得可行。 这有助于我达到一个坚实的基础，从而使用户可以实际使用该应用程序。 我决定首先应该使用的最重要的功能是地图显示。

To get the map to display within our application, I first had to understand how Mapbox worked. To get it up and running was actually quite easy and intuitive. I just imported it into the React application and created a component that would render it onto the page. It required some minor code set up to create the map and to get it to display on the page just required me to assign height and width. And just like that, the map was usable within our application. The next issue was to get the map to display at the correct location, Rwanda Africa.

为了使地图显示在我们的应用程序中，我首先必须了解Mapbox的工作方式。 使其运行起来实际上非常容易且直观。 我只是将其导入到React应用程序中，并创建了一个将其呈现到页面上的组件。 它只需要我分配高度和宽度，就需要一些次要的代码来创建地图并将其显示在页面上。 就像那样，地图在我们的应用程序中可用。 下一个问题是使地图显示在正确的位置，卢旺达非洲。

This just required me to assign a default coordinate onto the map object when it is loaded onto the page. I used the React “useState” hook in combination with the “useEffect” hook to accomplish this. I hard codded the default coordinates within the application that was assigned to the state of the component, the “useEffect” hook would then be called which would create the map and pass onto the map object, which is provided by the MapBox library. This would then set up the Map that when it first loads it would display Rwanda rather than its default setting of the United States. Now that we had the map at the right location we needed to bring in the data to populate it with.

这只是要求我在将地图对象加载到页面上时为其指定默认坐标。 我将React的“ useState”钩子与“ useEffect”钩子结合使用来完成此任务。 我辛苦地编写了应用程序中分配给组件状态的默认坐标，然后将调用“ useEffect”钩子，该钩子将创建地图并传递到MapBox库提供的地图对象上。 然后，将设置地图，使其在首次加载时显示卢旺达而不是其默认设置美国。 现在我们将地图放置在正确的位置，我们需要引入数据来填充它。

Now that we had the map loading at the correct location, the next thing we had to do was populate it with some data. At this point, I actually took a step away from the Mapbox component and started working on some styling to get the layout of the page looking nice. Meanwhile, my partner Joo Woon figured out how to display markers on the map. This was a decision we both agreed upon. I felt more comfortable with working on the styling and felt that I could accurately replicate any styling aspects given. Having us split into our own work areas also further productivity by giving us two separate tasks to work on.

现在，我们已将地图加载到正确的位置，接下来要做的就是用一些数据填充地图。 至此，我实际上离开了Mapbox组件，开始进行一些样式设计，以使页面的布局看起来更漂亮。 同时，我的搭档Joo Woon想出了如何在地图上显示标记。 这是我们双方都同意的决定。 我对进行样式工作感到更自在，并觉得我可以准确地复制给出的任何样式方面。 让我们分为两个自己的工作领域，还可以通过给我们两个单独的任务来提高工作效率。

After Joo Woon got the markers to display with dummy data and I did all of the styling, the data needed to be populated with the API endpoint given from our backend. I had more experience working with React’s context API than Joo Woon, so I came in and worked out this functionality. I made the fetch call to the API our backend created and populated the data in our frontend Context API. This allowed for us to receive all of the data points we needed for our interface.

在Joo Woon使标记与虚拟数据一起显示并且我完成了所有样式之后，需要使用后端提供的API端点填充数据。 我在使用React的上下文API方面比在Joo Woon方面拥有更多的经验，所以我进来并研究了此功能。 我对后端创建的API进行了fetch调用，并在前端Context API中填充了数据。 这使我们能够接收接口所需的所有数据点。

At this point in our application, we had reached MVP for release one. Reaching MVP is always a great feeling because I know that I have completed everything that is expected of me for this release. I can then work with much less pressure on additional features while waiting for further instruction. During this time I worked on additional styling and adding an additional details section that populated when markers were clicked on the map.

至此，在我们的应用程序中，我们已经达到了版本1的MVP。 达到MVP一直是一种很棒的感觉，因为我知道我已经完成了此发行版预期的所有工作。 然后，我可以在等待更多说明的同时，减轻其他功能的压力。 在这段时间里，我从事其他样式的工作，并添加了一个附加的详细信息部分，该部分在地图上单击标记时填充。

For release 2 of the product, we plan on implementing more visualization, filtering features for the bridges, and displaying further details about villages affected by the bridges built. We also already have additional features being worked on by the team. Robert is building out a table that displays the data set in an easily digestible manner, in which a user can go in and edit, add or delete bridge information.

对于产品的版本2，我们计划实现更多的可视化，桥梁的过滤功能，并显示有关受所建桥梁影响的村庄的更多详细信息。 我们的团队已经在使用其他功能。 Robert正在构建一个表格，该表格以易于消化的方式显示数据集，用户可以在其中输入和编辑，添加或删除网桥信息。