A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested companies to register a team for their chosen sport and then allow those users to manage their fixtures and check results.

我的一个朋友最近成立了Secta Leagues 。 一家为在职专业人士组织体育联赛的公司，在该行业中，公司会互相进行体育比赛。 愿景是提供一个应用程序，允许感兴趣的公司为所选运动项目注册团队，然后允许那些用户管理其固定装置并检查结果。

The challenge was that my friend had no idea how to code. And neither do I. However, I had just finished reading Lean UX and learnt of the many ways where we can build solutions that don’t always involve engineering.

挑战是我的朋友不知道如何编码。 我也不是。但是，我刚读完Lean UX，并了解了我们可以构建并不总是涉及工程的解决方案的许多方法。

I recently also read this medium piece that inspired me to try a similar approach of building an app using no code, Google Sheets and Glide. It needs some more design/UX work, but serves pretty well as a proof-of-concept. You can download this alpha Secta App here and save it to your phones home screen to take a look! I’ve outlined how I did this below.

最近，我还读了这篇中篇文章 ，这启发了我尝试一种类似的方法，即不使用任何代码(Google表格和Glide)构建应用。 它需要做更多的设计/ UX工作，但是可以很好地用作概念验证。 您可以在此处下载此alpha Secta应用程序 ，并将其保存到手机主屏幕以进行查看！ 我在下面概述了我的操作方法。

1.目的🎯 (1. Objective 🎯)

First, outline specifically what you want to achieve. I wanted to build an app, called Secta, that lets users register their interest in various sports leagues.

首先，明确概述您要实现的目标。 我想构建一个名为Secta的应用程序，该应用程序可以让用户注册对各种体育联赛的兴趣。

最小可行产品(MVP) (Minimal Viable Product (MVP))

• Users can open the app and view available sports leagues and see if they are active (or not).
  用户可以打开应用程序并查看可用的体育联赛，并查看他们是否处于活动状态。
• If they are active, users can get in touch with Secta Leagues to register a team through email. If they are not active, they should be able to register their interest.
  如果他们处于活动状态，则用户可以与Secta Leagues联系以通过电子邮件注册团队。 如果他们不活跃，他们应该能够注册自己的兴趣。

视力 (Vision)

• Users can independently enrol in leagues all through the app.
  用户可以通过该应用程序独立注册联赛。
• Each player has a unique login section that takes them to view their teams results.
  每个球员都有一个独特的登录部分，可让他们查看球队的成绩。
• Teams can view their fixtures, results and player statistics.
  团队可以查看他们的固定装置，结果和球员统计数据。
• Players can communicate their availability for future days & weeks ahead to their team captains.
  玩家可以在未来几天和几周内与队长交流他们的空缺情况。
• Teams can have biographies of their players and view the biographies of their opponents players.
  团队可以拥有其球员的履历并查看其对手球员的履历。
• Teams can manage their payments to Secta Leagues through the app.
  团队可以通过该应用管理向Secta Leagues的付款。

2.在Glide🛠️上创建一个应用模板 (2. Create an App template on Glide 🛠️)

1. Go to Glide and create a free account.

   转到Glide并创建一个免费帐户。

2. Create a brand new Google Sheet and name this file the name of your App (e.g. Secta).
   创建一个全新的Google表格，然后将此文件命名为您的应用程序的名称(例如Secta)。

3. Go back to Glide and select Create an App → From Google Sheet and select the Google Sheet you just created.

   返回至Glide并选择创建应用程序 → 从Google表格中选择您刚刚创建的Google表格。

Glide will now create an app with your Google Sheet as your data source and automatically create an app template with it. It should look something like this.

现在，Glide将使用您的Google表格作为数据源创建一个应用，并自动使用它创建一个应用模板。 它应该看起来像这样。

The next step is to build your Google Sheet with all of the data that you need. I’ve provided my Google Sheet example here: Secta League Database.

下一步是使用所需的所有数据构建Google表格。 我在这里提供了Google表格示例： Secta League Database 。

Your different Sheets become the different tabs of your app. In mine, I have:

您不同的表格将成为您应用程序的不同标签。 在我的里，我有：

• Home (hero images, title, summary, description, local league copy, map address)

  主页 (英雄图像，标题，摘要，描述，本地联赛副本，地图地址)

• Leagues (types of leagues, hero images, active status, CTAs copy, league imagery, league details).

  联赛 ( 联赛 类型，英雄形象，活跃状态，CTA副本，联赛形象，联赛详细信息)。

• Contact (email, copy of email and other contact details).

  联系人 (电子邮件，电子邮件副本和其他联系方式)。

Now you have created the Google Sheet with your data, it is time to start designing your app on Glide.

现在，您已经使用数据创建了Google表格，是时候开始在Glide上设计应用了。

3.设计与结构👩‍🎨 (3. Design & structure 👩‍🎨)

Now, you choose your layout from these options. Layouts change the way your data is displayed in the app. You can have a different layout per each tab of your app. For the Home section of the app, I’ve chosen the Details layout. But for the Leagues tab, I’ve chosen the Tiles layout. You can choose between these available layout options:

现在，您可以从这些选项中选择布局。 布局会更改数据在应用程序中的显示方式。 您可以为应用程序的每个选项卡使用不同的布局。 对于应用程序的“ 主页”部分，我选择了“详细信息”布局。 但是对于L eagues选项卡，我选择了Tiles布局。 您可以在以下可用的布局选项中进行选择：

Depending on the layout you choose, you will have to state which data source (sheet, column, row) Glide should take your data from. Because I used the Details layout, I have to add Components and specify where each component should take their data from in my Google Sheet.

根据您选择的布局，您将必须说明Glide应该从哪个数据源(表格，列，行)中获取数据。 因为使用的是“详细信息”布局，所以我必须添加“ 组件”并指定每个组件应从Google表格中获取其数据的位置。

Components are design blocks of functionality that you can configure on details pages. There are various pre-built components, such as Media (e.g. images, videos, maps), Text (titles, rich texts, normal text), Buttons (of varying functionality) etc.

组件是可以在详细信息页面上配置的功能设计模块。 有各种预先构建的组件，例如媒体(例如图像，视频，地图)，文本(标题，富文本，普通文本)，按钮(功能不同)等。

I’ve selected a few that were relevant for my Home section and specified where in my Google Sheet these Components should retrieve their data. These then automatically appear on the App UI, see below.

我选择了一些与“我的主页”部分相关的信息，并指定了这些组件在Google表格中应检索其数据的位置。 然后，它们会自动出现在App UI上，请参见下文。

For some Components, you want them to do actions. So, for my primary CTA “Explore Leagues”, I want it to link to another section in the App: Leagues. I already have this section on my navigation, but I can create another view with exactly the same data and make this Button component link to this new app screen, like below:

对于某些组件，您希望它们执行操作。 因此，对于我的主要CTA“探索联赛”，我希望它链接到该应用程序的另一部分：联赛。 我的导航上已经有此部分，但是我可以使用完全相同的数据创建另一个视图，并使此Button组件链接到此新应用程序屏幕，如下所示：

You then add as many Components as you need until you have the UI that you like, connect each component to the correct data source in your Google Sheet and then configure the unique settings they each have.

然后，您可以根据需要添加任意数量的组件，直到拥有所需的UI，然后将每个组件连接到Google表格中的正确数据源，然后配置它们各自具有的唯一设置。

I now want to create another App page to show the available Leagues. Since I have already created this as a sheet in my Google Sheet, Glide has automatically created this as a Tab and populated it with the content.

我现在想创建另一个App页面以显示可用的联赛。 由于我已经在Google表格中将其创建为表格，因此Glide会自动将其创建为标签页并在其中填充内容。

I’ve chosen the Cards style and filled in the Data section where Glide should retrieve each data point from. I have some more flexibility on some of the finer details of the Style too. These are called Properties. I can choose anything from card sizes, text styling, to whether the images should have round corners. In this example, the most relevant thing for me is to inform the user whether the league is active or not. So, I’ve done this as an Overlay Tag and informed Glide to take this data from the active_not_active column of my Google Sheet.

我选择了Cards样式，并在Data部分中填写了Glide应该从中检索每个数据点的位置。 我对样式的一些细节也有更多的灵活性。 这些称为属性。 从卡片尺寸，文本样式到图像是否应具有圆角，我都可以选择。 在此示例中，与我最相关的事情是通知用户联赛是否活跃。 因此，我将其作为覆盖标记进行了此操作，并通知Glide从我的Google表格的active_not_active列中获取此数据。

Each Card will then open up a unique Details page which contains a more detailed description of the league and a primary CTA to register a team.

然后，每张卡都会打开一个唯一的“详细信息”页面，其中包含联赛的更详细描述以及注册球队的主要CTA。

I have configured the Button Component to be a Form Button, which means that it will open up a Form where the user enters in valuable information, such as their company and the league they would like to register a team in. All of this criteria is taken from my Sheet tab “User Input Form”. I then add various Components, some are text entry, some are date entry or multiple choice.

我已将“按钮组件”配置为“表单按钮”，这意味着它将打开一个表单，用户可以在其中输入有价值的信息，例如他们想要注册团队的公司和联赛。所有这些条件都是取自我的工作表标签“用户输入表单”。 然后添加各种组件，一些是文本输入，一些是日期输入或多项选择。

Once the user hits submit, the data the user enters populates a new tab in my Google Sheet that Glide has automatically created.

用户点击提交后，用户输入的数据将在Google表格中填充Glide自动创建的新标签。

4.联系支持📞 (4. Contact Support 📞)

One of the main use cases of the app is to connect interested users with Secta Leagues. For this, there is a dedicated Contact section.

该应用程序的主要用例之一是将感兴趣的用户与Secta Leagues联系起来。 为此，有一个专门的联系部分。

Like described in section 3, I chose the Details layout, connected it to my Contact tab in my Google Sheet and then added in relevant Components, linking them to the correct column data.

像第3节中所述，我选择了Details布局，将其连接到Google表格中的Contact选项卡，然后添加了相关的Components，将它们链接到正确的列数据。

When a user sends an email, their requests are saved in a new tab automatically created by Glide.

用户发送电子邮件时，他们的请求将保存在Glide自动创建的新标签中。

I hope I’ve shown you how easy it can be to create a prototype app, using zero code and with live data that you can create in a Google Sheet. There are many other amazing things that you can do with Glide.

希望我已经向您展示了使用零代码和可在Google表格中创建的实时数据来创建原型应用程序有多么容易。 Glide还可以完成许多其他令人惊奇的事情。

I mainly did this to learn and put into practice some of the stuff I read in Lean UX, but throughout the process of doing this, I think a fully functioning app to serve the needs of Secta League could be fulfilled using only Glide and Google Sheets. Of course, complimented with a bit more design and UX work for good measure.

我主要是为了学习和实践我在Lean UX中阅读的一些内容，但是在整个过程中，我认为仅使用Glide和Google Sheets就可以满足Secta League需求的功能齐全的应用程序。 当然，补充一点点的设计和UX可以很好地解决问题。