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)