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可以很好地解決問題。