fcn从头开始_从头开始构建移动应用

fcn从头开始

I’ve been building mobile apps professionally for two years now, however I’ve only recently built an iOS app from scratch as a side project. This blog post is a summary of what I’ve learned and resources I used, I hope it will help or inspire you to get started on your own app.

我已经专业构建移动应用程序两年了，但是直到最近我才从头开始构建iOS应用程序作为附带项目。 这篇博客文章是对我所学知识和所用资源的总结，希望它能帮助或激发您开始使用自己的应用程序。

起步强劲 (Starting strong)

Perhaps the most important part of the process is the beginning, this is where you’ll lay the foundations to ensure that the project is easy to come back to and a pleasure to work on.

也许过程中最重要的部分是开始，这是您奠定基础的基础，以确保该项目易于重做并乐于进行。

线框 (Wireframing)

With mobile apps I find it crucial not to develop blind, i.e you should have some idea of what you’re building and how it will look. To help with this you can do a quick sketch, either on paper or digitally. This helps inform what the entire app will look like. Below is a quick wireframe of the side project I was working on, an educational CBT app.

对于移动应用程序，我发现至关重要的是不要盲目发展，也就是说，您应该对所构建的内容以及外观有一些了解。 为了解决这个问题，您可以在纸上或数字方式下快速绘制草图。 这有助于告知整个应用程序的外观。 下面是我正在从事的辅助项目的快速线框图，这是一个教育性的CBT应用程序。

Here are some free resources to help you design a wireframe:

以下是一些免费资源，可帮助您设计线框：

• Canva (free digital design resource)

  Canva (免费的数字设计资源)

• Adobe Color (free colour palette generator)

  Adobe Color (免费调色板生成器)

• Google Autodraw (free icon generation)

  Google Autodraw (免费图标生成)

• Sketchize (free wireframe layouts)

  草图化(免费线框布局)

• Miro (a free collaborative whiteboarding resource)

  Miro (免费的协作白板资源)

规划 (Planning)

Once you have some idea of what you want to build then I suggest you break down the tasks you can think of into small manageable goals. This way you will avoid burnout and track progress efficiently. I recommend using Trello to track these tasks (easter egg: put 🎉 in the done column and drag a task in there).

一旦您对要构建的对象有了一些了解，那么我建议您将可以想到的任务分解为可管理的小型目标。 这样，您将避免倦怠并有效地跟踪进度。 我建议使用Trello来跟踪这些任务(复活节彩蛋：将🎉放入“完成”列中，然后将任务拖到其中)。

技术选择 (Choice of technology)

At this point you’ll probably know what you want to write your app in but you may not know how to architect your app or what the backend will look like.

此时，您可能会知道要编写应用程序的内容，但可能不知道如何构建应用程序或后端的外观。

应用架构 (Application Architecture)

The architecture of an application is important, it ensures that all the applications you write will be consistent, easy to work on and easy to pick up again. There are several architecture choices when it comes to native development, these have the goal of avoiding bloated classes (especially ViewControllers in iOS and Fragments/Activities in Android) and spaghetti code. Here’s a brief summary of a few that we’ve looked into at Brightec:

应用程序的体系结构很重要，它可以确保您编写的所有应用程序都保持一致，易于使用并易于再次使用。 在进行本机开发时，有多种体系结构选择，其目的是避免过大的类(尤其是iOS中的ViewControllers和Android中的Fragments / Activities)和意大利面条式代码。 这是我们在Brightec中研究的一些内容的简短摘要：

(MVP pattern source)

(MVP模式源)

The view represents a ViewController (or Fragment/Activity), the view is dumb (contains no business logic). The presenter addresses all UI events on behalf of the view (i.e what to display when) and calls the data methods in the model. There can only be one presenter for each view. The model represents the data portion or business logic of the app (the comms with the backend, processing data etc.). Here’s a great blog post if you want to go more in depth with this pattern. This is the pattern we mostly use on iOS at Brightec, it’s also the pattern I used for the side project.

该视图表示一个ViewController(或Fragment / Activity)，该视图是愚蠢的(不包含任何业务逻辑)。 演示者代表视图解决所有UI事件(即，什么时候显示)，并调用模型中的数据方法。 每个视图只能有一个演示者。 该模型表示应用程序的数据部分或业务逻辑(与后端的通信，处理数据等)。 如果您想进一步了解这种模式，这是一篇很棒的博客文章。 这是我们在Brightec的iOS上最常用的模式，也是我在副项目中使用的模式。

(MVVM source)

(MVVM源代码)

The model again represents the business logic of the app. The view in this case again represents a ViewController (or Fragment/Activity). The ViewModel is where this architecture differs from MVP, it can be used across multiple views. The ViewModel exposes streams of data that the view displays. The view subscribes to data events which are updated in the ViewModel. MVVM leverages the separation of concerns of MVP but also employs the advantage of data binding. This cuts down on the logic in the view. Brightec uses MVVM in its Android applications. To continue reading about MVVM, there’s a blog post here

该模型再次代表了应用程序的业务逻辑。 在这种情况下，视图再次表示一个ViewController(或Fragment / Activity)。 ViewModel是此体系结构不同于MVP的地方，可以在多个视图中使用。 ViewModel公开视图显示的数据流。 该视图订阅了在ViewModel中更新的数据事件。 MVVM利用了MVP的关注点分离，但也利用了数据绑定的优势。 这减少了视图中的逻辑。 Brightec在其Android应用程序中使用MVVM。 要继续阅读有关MVVM的信息，请点击此处。

(VIPER source)

(VIPER来源)

By far the coolest architecture name. The view is the same as above. However, the presenter contains the view logic to display data, which it receives from the Interactor. It also contains the logic for reacting to user inputs, which it requests from the Interactor. The Interactor mediates the interaction between the Presenter and the data. The entity is a basic data model. The Router contains all the navigation logic. This is a further abstraction to MVVM and MVP as it separates the display and data logic of the presenter. Further reading is available here and here.

迄今为止最酷的架构名称。 视图与上面相同。 但是，演示者包含视图逻辑以显示其从交互器接收的数据。 它还包含对交互器请求的用户输入做出React的逻辑。 Interactor介导Presenter与数据之间的交互。 实体是一个基本的数据模型。 路由器包含所有导航逻辑。 这是对MVVM和MVP的进一步抽象，因为它分离了演示者的显示和数据逻辑。 在这里和这里都有更多的阅读资料。

后端技术选择 (Backend technology choices)

I am no expert on backend/server development so this section is just my recommendation of free services to get you started if your application requires it.

我不是后端/服务器开发方面的专家，因此本节只是我对免费服务的建议，如果您的应用程序需要的话，它可以帮助您入门。

Possibly the prominent free service you can use to get started is Google Cloud Platform (GCP). Google offers a plethora of services including serverless functions, dedicated services, databases, etc. We used a combination of Google Cloud Functions and Google App Engine for the backend of a Slack app we developed recently. GCP integrates with Firebase seamlessly. Firebase is a free collection of services that help developers build better apps. The services include; analytics, crashlytics, app distribution, cloud storage and many more. I exclusively used Firebase to power the backend of the side project I was working on as the free tier allows for a fairly generous number of interactions with the database.

可能可以使用的著名的免费服务是Google Cloud Platform (GCP)。 Google提供了许多服务，包括无服务器功能，专用服务，数据库等。我们将Google Cloud Functions和Google App Engine的组合用于我们最近开发的Slack应用程序的后端。 GCP与Firebase无缝集成。 Firebase是免费的服务集合，可帮助开发人员构建更好的应用程序。 服务包括； 分析，崩溃分析，应用分发，云存储等。 我免费使用Firebase来驱动我正在进行的副项目的后端，因为免费层允许与数据库进行相当大量的交互。

There are alternatives out there like Amazon Web Services, however I’ve not used this much.

那里有诸如Amazon Web Services之类的替代方法，但是我没有使用太多。

与后端通信 (Communicating with the Backend)

If your application requires a backend then you’ll need to communicate with it. This would be the Model section of the above architectures. At Brightec we use the repository pattern to achieve this. There’s plenty of frameworks for storing data locally once you’ve retrieved it from your backend. Some examples are Room, Realm or SQLite.

如果您的应用程序需要后端，则需要与其进行通信。 这将是上述架构的“模型”部分。 在Brightec，我们使用存储库模式来实现这一目标。 从后端检索数据后，有很多框架可以在本地存储数据。 一些示例是Room ， Realm或SQLite 。

You should now be equipped with tools necessary to develop your own mobile app from scratch. I’ll soon be writing about how to test an app you’ve made by yourself and the benefits of developing a side project so be sure to subscribe.

现在，您应该已经具备了从头开始开发自己的移动应用程序所必需的工具。 我很快就会写关于如何测试自己制作的应用程序以及开发附带项目的好处的文章，因此请务必订阅。

Originally published at https://www.brightec.co.uk.

最初在https://www.brightec.co.uk上发布。

翻译自: https://medium.com/swlh/build-a-mobile-app-from-scratch-e9623d373d11

fcn从头开始