ios开发 mvp实践

by Léna Faure

莱娜·福雷(LénaFaure)

实践中开发人员的工作流程-我们如何在30天内建立MVP (The developer’s workflow in practice — how we built our MVP in 30 days)

As a web developer, I often get to start projects from scratch and make decisions for a bunch of elements, from the technical stack to the final look & feel of the app.

作为一名Web开发人员，我经常从头开始项目，并为从技术堆栈到应用程序最终外观的一系列元素做出决策。

Especially when the stakes behind a project are high, this process can be overwhelming.

特别是当项目背后的风险很高时，此过程可能会令人不知所措。

I want to share our experience of one month into the City of Paris Startups Program, and the steps our team took to achieve a first operating version of the app.

我想分享一个月的巴黎市启动计划经验，以及我们团队为实现该应用程序的第一个运行版本所采取的步骤。

Some context first: AlloAnim is a web app designed to help the City of Paris find available after-school staff instantly.

首先考虑一下背景： AlloAnim是一款网络应用程序，旨在帮助巴黎市即时找到课余工作人员。

The goal is to have after-school employees create and update their profile and availabilities as often as possible. This will allow the City of Paris to have direct access to a real-time updated database of available staff.

目标是让课后员工尽可能频繁地创建和更新其个人资料和可用性。这将使巴黎市可以直接访问现有职员的实时更新数据库。

Our team is made of two people. One is Product Owner, Christian Bockarie. Christian was the person who identified the pain-point while working as a City of Paris school staff.

我们的团队由两个人组成。其中一位是产品负责人Christian Bockarie。克里斯蒂安(Christian)是担任巴黎市学校教职员工时发现痛点的人。

The other is a developer (yours truly), responsible for building the full-stack app within a 5 months period.

另一个是开发人员(实际上是您自己)，负责在5个月内构建完整的应用程序。

Our headquarters are at the open innovation community lab La Paillasse. We work alongside the Startup ViteUnLieu, that helps organizations easily find conference rooms in Paris, with Jean Karinthi as Product Owner and Christophe Robillard as Lead Developer.

我们的总部位于开放式创新社区实验室La Paillasse 。我们与Startup ViteUnLieu一起工作，它可以帮助组织轻松地在巴黎找到会议室，产品负责人Jean Karinthi和首席开发人员Christophe Robillard 。

The stack we chose is Ruby on Rails for the back end and ‘vanilla’ (plain, no frameworks) JavaScript on the front end.

我们选择的堆栈是在后端使用Ruby on Rails，在前端使用“ vanilla”(纯文本，无框架)JavaScript。

We want to integrate React as soon as possible, but for the prototyping phase we are sticking with good old JavaScript.

我们希望尽快集成React，但是在原型设计阶段，我们坚持使用旧JavaScript。

So how did we create a working product from scratch in one month? Here are the main steps we took to ship this first version successfully.

那么，我们如何在一个月内从头开始创建一个有效的产品呢？这是我们成功发行第一个版本所采取的主要步骤。

1.拥抱敏捷精神 (1. Embrace the Agile Spirit)

We worked with a coach for two days to learn the basics of Agile development.

我们与教练一起工作了两天，以学习敏捷开发的基础知识。

The main take-away of Agile is that you have to work in very close collaboration with your final users. The goal is to iterate over every version of your app based on the feedback they provide.

敏捷的主要收获是您必须与最终用户紧密合作。目的是根据应用提供的反馈来遍历每个版本的应用。

This way you are less likely to build something that people don’t need, don’t like, or don’t know how to use.

这样，您就不太可能构建人们不需要，不喜欢或不知道如何使用的东西。

2.在现实生活中快速与用户会面 (2. Quickly meet with users in real-life)

Christian managed to quickly get us a decisive meeting with the head of after-school staff in an elementary school.

克里斯蒂安(Christian)设法使我们与小学的课后工作负责人举行了决定性的会议。

We engaged in a meaningful conversation about how she currently handled her staffing problem. We learned what functionality she would absolutely need to have in our upcoming web tool.

我们就她目前如何处理人事问题进行了有意义的对话。我们了解了她在即将到来的Web工具中绝对需要的功能。

The pain-point and need for our product proved to be definitely real. This was enough to get us started on a Minimum Viable Product (MVP). This is a product version with the necessary functionalities to be the first usable version of our product.

事实证明，我们产品的痛点和需求确实是真实的。这足以使我们开始使用最低可行产品(MVP)。这是具有必要功能的产品版本，是我们产品的第一个可用版本。

3.编写用户故事 (3. Write User Stories)

User stories are a way for a non-technical Product Owner and a Developer to perfectly understand each other on what needs to happen for the app to fill its purpose.

用户案例是非技术产品所有者和开发人员相互了解应用程序以达到其目的所需发生的一种方式。

They are written on the model: “As a < type of user >, I can < some goal > (so that < some reason >).”

它们写在模型上：“作为<用户类型>，我可以<达到目标>(因此<出于某种原因>)。”

So an example of one of our simple user stories was: “As a member of after-school staff, I can create a profile with my personal information”.

因此，我们的一个简单用户故事的一个例子是：“作为课余人员的一员，我可以使用我的个人信息创建个人资料”。

User stories fit together to form a Story Map, which is the global visual plan for building the app over time.

用户故事适合在一起形成一个故事地图，这是随着时间的推移构建应用程序的全局视觉计划。

The development cycle of the product is then sliced into sprints.

然后将产品的开发周期切成sprint。

Each sprint contains a given number of user stories that will be coded into functionalities.

每个冲刺都包含给定数量的用户案例，这些案例将被编码为功能。

Our first sprint typically contains all the user stories that are needed for a usable Minimum Viable Product.

我们的第一个冲刺通常包含可用的最低可行产品所需的所有用户案例。

The Story Map and the content of the sprints are free to change at each iteration of the product. This usually coincides with a feedback session with users.

故事地图和冲刺的内容可以在产品的每次迭代中自由更改。这通常与与用户的反馈会话相吻合。

As users give feedback on the developed functionalities, the User Stories evolve and adapt to match the actual use of the app.

随着用户对开发功能的反馈，用户故事会不断发展并适应实际应用的使用。

4.设置敏捷工作流程 (4. Set up an Agile workflow)

I was lucky enough to work alongside the other startup’s talented developer Christophe Robillard, who gained an impressive experience with Agile workflows and developer productivity from his previous experience in Government Startups Program.

我很幸运能与另一家初创公司的才华横溢的开发人员Christophe Robillard一起工作，他从之前在政府初创公司计划中的经验中获得了关于敏捷工作流程和开发人员生产力的令人印象深刻的经验。

每日站立会议 (Daily Stand-Up Meetings)

Taken from the Scrum methodology, the daily stand-up is a standing meeting held on each day of a sprint. We talk to each other every beginning of the day for 5–15 minutes. We stand if we are physically together, or talk on the phone if we work remotely.

从Scrum方法学中得出，每日站立是在冲刺的每一天举行的一次常设会议。我们在一天的开始之间互相交谈5-15分钟。如果我们身体在一起，我们会站立；如果我们是远程工作，我们会通电话。

It helps set the context for the coming day’s work and commit to the tasks that have to be tackled next.

它有助于为下一天的工作设置背景，并致力于接下来必须解决的任务。

开发积压 (Dev Backlog)

The sprint backlog gets visible by putting it on a task board, where each row on the board is a user story. Smaller, individual tasks are written on ‘cards’.

通过将sprint待办事项放在一个任务板，板上的每一行都是一个用户故事。较小的个人任务写在“卡片”上。

Team members update the task board continuously throughout the sprint by writing new cards or moving the cards. For example, a card could be moved from column “To do” to column “Doing”.

团队成员在整个sprint中通过写新卡片或移动卡片来连续更新任务板。例如，可以将卡片从“待办事项”列中移出在“正在执行”列中。

You can easily recreate this task board on the Gitlab issue board or on Waffle.io for a digital alternative.

您可以在Gitlab发行板上或Waffle.io上轻松地重新创建此任务板，以进行数字替代。

初创企业之间的双周会议 (Bi-weekly meetings between Startups)

To make the meeting efficient and to-the-point, the strategy Christophe shared with us is the following:

为了使会议更加高效和切题，克里斯托夫(Christophe)与我们分享了以下策略：

Set a maximum time for the meeting (30 minutes to 1 hour)
设置会议的最长时间(30分钟至1小时)
Write a sticky note for each subject that will be discussed and talk about only one sticky note subject at a time
为每个将要讨论的主题写一个便签，一次只讨论一个便签主题
Set a 5 minute timer for each sticky note discussion
为每个便签讨论设置5分钟的计时器

If the discussion exceeds 5 minutes, decide between the team if it is worth resetting the timer for an additional 5 minutes.
如果讨论时间超过5分钟，请小组之间决定是否值得将计时器重设5分钟。

This is one of my favorite parts at the beginning of a project — seeking inspiration for UX and UI from other web apps, some of which I use very often.

这是项目开始时我最喜欢的部分之一-从其他Web应用程序中寻求UX和UI的灵感，其中一些我经常使用。

I am always amazed at the creativity and cleverness of the teams behind some of the tools I use. For example, I was inspired by the onboarding process of breaz.io. I also admired the way drivy.com allows users to select a bunch of cars first, then send one message to every owner once the selection is made.

我对使用的某些工具背后的团队的创造力和机敏力感到惊讶。例如， breaz.io的启动过程给了我启发。我也很欣赏drivy.com允许用户首先选择一堆汽车，然后在做出选择后向每个车主发送一条消息的方式。

Here, I’ll present some of the tools that usually help me get started and visualize the app’s interfaces.

在这里，我将介绍一些通常可以帮助我入门和可视化应用程序界面的工具。

运球 (Dribbble)

The search functionality on Dribbble lets you pick the creative brain of great designers who showcase their work.

Dribbble上的搜索功能使您可以吸引展示他们作品的优秀设计师的创造力。

情绪板 (Moodboard)

Moodboard lets you collect, share and comment on designs with your team. This lets everyone get a taste of the inspiration for the website’s interface:

Moodboard使您可以与团队一起收集，共享设计并发表评论。这使每个人都能体会到网站界面的灵感：

Adobe颜色 (Adobe Color)

Adobe Color is the perfect source of inspiration for harmonious palettes. The ‘Explore’ feature lets you browse thousands of inspiring color themes:

Adobe Color是和谐调色板的完美灵感来源。 “探索”功能可让您浏览成千上万个令人鼓舞的色彩主题：

6.创建应用程序的第一个Rails版本 (6. Create the first Rails version of the App)

We set up our models and database with Ruby on Rails and SQLite. We used the ‘Devise’ gem for the authentication system.

我们使用Ruby on Rails和SQLite建立了模型和数据库。我们将“ Devise” gem用于身份验证系统。

I usually develop the front end and back end at the same time. This means I try to work on the design and responsiveness of each functionality as soon as it is born.

我通常会同时开发前端和后端。这意味着我会在每种功能诞生之初就立即对其进行设计和响应。

This never fails to produce some kind of ‘wow!’ effect when presenting the first demos. This first impression can be a decisive factor when users are adopting a product.

这永远不会产生某种“哇！” 演示第一个演示时的效果。当用户采用产品时，第一印象可能是决定性因素。

Some developers prefer to focus on the back end first. Once they get everything in working order, they go back over it for cosmetics further along. However, I find it easier to work on both simultaneously.

一些开发人员更喜欢首先关注后端。一旦一切正常运转，他们便会继续寻找化妆品。但是，我发现同时进行这两个工作更容易。

In our app, the main object is the user. We have quite a road ahead of us to refine the onboarding system and find incentives for the user to return to the app often.

在我们的应用程序中，主要对象是用户。我们还有很长的路要走，以完善入门系统，并找到激励用户经常返回应用程序的动机。

For now, the sign up process is basic and simply has the key information for the MVP to work.

目前，注册过程是基本的，仅包含MVP起作用的关键信息。

Below are some screenshots of the MVP in action!

以下是行动中MVP的一些屏幕截图！

Signing up:

报名：

Looking for staff:

寻找工作人员：

The app requires a weekly calendar for the after-school staff to fill in their available time slots. However, I couldn’t find a Rails gem or JavaScript plugin that matched the particular requirements of the MVP.

该应用需要每周日历，供课后工作人员填写其可用时间段。但是，我找不到符合MVP特定要求的Rails gem或JavaScript插件。

So I set out to build a full Javascript weekly availability scheduler, and then integrate it in the Rails app. You can find the JavaScript code here if you are interested.

因此，我着手构建一个完整的每周JavaScript可用性调度程序，然后将其集成到Rails应用程序中。如果您有兴趣，可以在这里找到JavaScript代码。

Version 0 (Display weeks):

版本0(显示周)：

Version 1 (Add specific time-slots and responsive behavior):

版本1(添加特定的时隙和响应行为)：

Version 2 (Integrate in the Rails App — Profile page):

版本2(集成在Rails App中-配置文件页面)：

7.部署实时应用 (7. Deploy the Live App)

The final step is to make the app live. I found Heroku made hosting it a breeze. Deployment is free, and directions are very simple and available directly on the platform.

最后一步是使该应用程序生效。我找到了Heroku 使托管变得轻而易举。部署是免费的，指导非常简单，可以直接在平台上获得。

8.迭代 (8. Iterate)

Finally, it is time to meet the users again, and present them the work you have done during the sprint.

最后，是时候再次与用户见面，并向他们介绍您在sprint中所做的工作。

We usually have 3-week sprints. This gives us time to actually code enough functionalities to have something of substance to discuss. It also lets our club of users breathe between meetings.

我们通常有3周的冲刺。这使我们有时间实际编写足够的功能来进行实质性讨论。它还使我们的用户俱乐部在两次会议之间呼吸。

During the meeting, we listen to the users’ feedback and discuss the app’s functionalities with them.

在会议期间，我们会听取用户的反馈，并与他们讨论应用程序的功能。

Then, we go back to the task board to plan the next sprint… Until next time!

然后，我们返回任务板以计划下一个冲刺……直到下一次！

结论 (Conclusion)

Sticky notes are life. Nothing good in the world would happen without them.

便笺就是生命。没有他们，世界上什么都不会发生。

That’s it for now! We are well into our second sprint and moving sticky notes with stupendous agility.

现在就这样！我们非常擅长第二次冲刺，并以惊人的敏捷性移动便签。

Any tools you use for your own process and would care to share with us are most welcome!

非常欢迎您在自己的过程中使用任何愿意与我们分享的工具！

Edit: AlloAnim prototype has successfully launched and is now being tested and used daily by the City of Paris staff.

编辑： AlloAnim原型已成功启动，现在由巴黎市工作人员每天进行测试和使用。

You can find the Open Source Code here, and a full demo of the app below:

您可以在此处找到开放源代码，并在下面找到该应用的完整演示：

The #startupdeville program is a City of Paris initiative, powered by public agents who have identified a clear pain point while working on the field.

＃startupdeville计划是巴黎市的一项举措，由公共部门提供支持，这些公共部门在野外工作时发现了明显的痛点。

After a selection process and a one-month acceleration, a two-person team (Product Owner + Developer) builds a web app to validate the need for this new service and its adoption by the target users.

经过选择过程和一个月的加速后，一个由两个人组成的团队(产品负责人+开发人员)构建了一个Web应用程序，以验证对这项新服务的需求及其是否为目标用户所采用。

If you enjoyed this piece, please show your love and clap so others can find it! Feel free to follow me on Twitter, as well as the #startupdeville team members, Christian Bockarie, Jean Karinthi and Christophe Robillard

如果您喜欢这首作品，请表现出自己的爱和鼓掌，以便其他人可以找到它！请随时在Twitter和#startupdeville团队成员Christian Bockarie ， Jean Karinthi和Christophe Robillard上关注我

— Léna Faure

—莱娜·佛雷(LénaFaure)