1.1編寫目的

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.

我的一個(gè)朋友最近成立了Secta Leagues 。 一家為在職專業(yè)人士組織體育聯(lián)賽的公司，在該行業(yè)中，公司會(huì)互相進(jìn)行體育比賽。 愿景是提供一個(gè)應(yīng)用程序，允許感興趣的公司為所選運(yùn)動(dòng)項(xiàng)目注冊(cè)團(tuán)隊(duì)，然后允許那些用戶管理其固定裝置并檢查結(jié)果。

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.

挑戰(zhàn)是我的朋友不知道如何編碼。 我也不是。但是，我剛讀完Lean UX，并了解了我們可以構(gòu)建并不總是涉及工程的解決方案的許多方法。

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.

最近，我還讀了這篇中篇文章 ，這啟發(fā)了我嘗試一種類似的方法，即不使用任何代碼(Google表格和Glide)構(gòu)建應(yīng)用。 它需要做更多的設(shè)計(jì)/ UX工作，但是可以很好地用作概念驗(yàn)證。 您可以在此處下載此alpha Secta應(yīng)用程序 ，并將其保存到手機(jī)主屏幕以進(jìn)行查看！ 我在下面概述了我的操作方法。

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.

首先，明確概述您要實(shí)現(xiàn)的目標(biāo)。 我想構(gòu)建一個(gè)名為Secta的應(yīng)用程序，該應(yīng)用程序可以讓用戶注冊(cè)對(duì)各種體育聯(lián)賽的興趣。

最小可行產(chǎn)品(MVP) (Minimal Viable Product (MVP))

• Users can open the app and view available sports leagues and see if they are active (or not).
  用戶可以打開應(yīng)用程序并查看可用的體育聯(lián)賽，并查看他們是否處于活動(dòng)狀態(tài)。
• 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.
  如果他們處于活動(dòng)狀態(tài)，則用戶可以與Secta Leagues聯(lián)系以通過電子郵件注冊(cè)團(tuán)隊(duì)。 如果他們不活躍，他們應(yīng)該能夠注冊(cè)自己的興趣。

視力 (Vision)

• Users can independently enrol in leagues all through the app.
  用戶可以通過該應(yīng)用程序獨(dú)立注冊(cè)聯(lián)賽。
• Each player has a unique login section that takes them to view their teams results.
  每個(gè)球員都有一個(gè)獨(dú)特的登錄部分，可讓他們查看球隊(duì)的成績。
• Teams can view their fixtures, results and player statistics.
  團(tuán)隊(duì)可以查看他們的固定裝置，結(jié)果和球員統(tǒng)計(jì)數(shù)據(jù)。
• Players can communicate their availability for future days & weeks ahead to their team captains.
  玩家可以在未來幾天和幾周內(nèi)與隊(duì)長交流他們的空缺情況。
• Teams can have biographies of their players and view the biographies of their opponents players.
  團(tuán)隊(duì)可以擁有其球員的履歷并查看其對(duì)手球員的履歷。
• Teams can manage their payments to Secta Leagues through the app.
  團(tuán)隊(duì)可以通過該應(yīng)用管理向Secta Leagues的付款。

2.在Glide🛠?上創(chuàng)建一個(gè)應(yīng)用模板 (2. Create an App template on Glide 🛠?)

Go to Glide and create a free account.

轉(zhuǎn)到Glide并創(chuàng)建一個(gè)免費(fèi)帳戶。

Create a brand new Google Sheet and name this file the name of your App (e.g. Secta).

創(chuàng)建一個(gè)全新的Google表格，然后將此文件命名為您的應(yīng)用程序的名稱(例如Secta)。

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

返回至Glide并選擇創(chuàng)建應(yīng)用程序 → 從Google表格中選擇您剛剛創(chuàng)建的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.

現(xiàn)在，Glide將使用您的Google表格作為數(shù)據(jù)源創(chuàng)建一個(gè)應(yīng)用，并自動(dòng)使用它創(chuàng)建一個(gè)應(yīng)用模板。 它應(yīng)該看起來像這樣。

Glide example app with dummy data.使用虛擬數(shù)據(jù)的Glide示例應(yīng)用程序。

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.

下一步是使用所需的所有數(shù)據(jù)構(gòu)建Google表格。 我在這里提供了Google表格示例： Secta League Database 。

Home, 主頁 ， Leagues & 聯(lián)賽和Contact highlighted as my Secta App Tabs.聯(lián)系人的 Secta Leagues Google表格突出顯示為我的Secta應(yīng)用程序選項(xiàng)卡。

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

您不同的表格將成為您應(yīng)用程序的不同標(biāo)簽。 在我的里，我有：

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

  主頁 (英雄圖像，標(biāo)題，摘要，描述，本地聯(lián)賽副本，地圖地址)

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

  聯(lián)賽 ( 聯(lián)賽 類型，英雄形象，活躍狀態(tài)，CTA副本，聯(lián)賽形象，聯(lián)賽詳細(xì)信息)。

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

  聯(lián)系人 (電子郵件，電子郵件副本和其他聯(lián)系方式)。

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

現(xiàn)在，您已經(jīng)使用數(shù)據(jù)創(chuàng)建了Google表格，是時(shí)候開始在Glide上設(shè)計(jì)應(yīng)用了。

3.設(shè)計(jì)與結(jié)構(gòu)👩?🎨 (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:

現(xiàn)在，您可以從這些選項(xiàng)中選擇布局。 布局會(huì)更改數(shù)據(jù)在應(yīng)用程序中的顯示方式。 您可以為應(yīng)用程序的每個(gè)選項(xiàng)卡使用不同的布局。 對(duì)于應(yīng)用程序的“ 主頁”部分，我選擇了“詳細(xì)信息”布局。 但是對(duì)于L eagues選項(xiàng)卡，我選擇了Tiles布局。 您可以在以下可用的布局選項(xiàng)中進(jìn)行選擇：

Various layout options available on Glide.Glide上提供了各種布局選項(xiàng)。

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.

根據(jù)您選擇的布局，您將必須說明Glide應(yīng)該從哪個(gè)數(shù)據(jù)源(表格，列，行)中獲取數(shù)據(jù)。 因?yàn)槭褂玫氖恰霸敿?xì)信息”布局，所以我必須添加“ 組件”并指定每個(gè)組件應(yīng)從Google表格中獲取其數(shù)據(jù)的位置。

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.

組件是可以在詳細(xì)信息頁面上配置的功能設(shè)計(jì)模塊。 有各種預(yù)先構(gòu)建的組件，例如媒體(例如圖像，視頻，地圖)，文本(標(biāo)題，富文本，普通文本)，按鈕(功能不同)等。

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.

我選擇了一些與“我的主頁”部分相關(guān)的信息，并指定了這些組件在Google表格中應(yīng)檢索其數(shù)據(jù)的位置。 然后，它們會(huì)自動(dòng)出現(xiàn)在App UI上，請(qǐng)參見下文。

Illustrating Components and how they related to the Google Sheet. Note: Not all data is visible in the screenshot.說明組件及其與Google表格的關(guān)系。 注意：并非所有數(shù)據(jù)在屏幕截圖中都是可見的。

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:

對(duì)于某些組件，您希望它們執(zhí)行操作。 因此，對(duì)于我的主要CTA“探索聯(lián)賽”，我希望它鏈接到該應(yīng)用程序的另一部分：聯(lián)賽。 我的導(dǎo)航上已經(jīng)有此部分，但是我可以使用完全相同的數(shù)據(jù)創(chuàng)建另一個(gè)視圖，并使此Button組件鏈接到此新應(yīng)用程序屏幕，如下所示：

How to make a Button component link to an action (e.g. link to another App page).如何使Button組件鏈接到動(dòng)作(例如，鏈接到另一個(gè)App頁面)。

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.

然后，您可以根據(jù)需要添加任意數(shù)量的組件，直到擁有所需的UI，然后將每個(gè)組件連接到Google表格中的正確數(shù)據(jù)源，然后配置它們各自具有的唯一設(shè)置。

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.

我現(xiàn)在想創(chuàng)建另一個(gè)App頁面以顯示可用的聯(lián)賽。 由于我已經(jīng)在Google表格中將其創(chuàng)建為表格，因此Glide會(huì)自動(dòng)將其創(chuàng)建為標(biāo)簽頁并在其中填充內(nèi)容。

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應(yīng)該從中檢索每個(gè)數(shù)據(jù)點(diǎn)的位置。 我對(duì)樣式的一些細(xì)節(jié)也有更多的靈活性。 這些稱為屬性。 從卡片尺寸，文本樣式到圖像是否應(yīng)具有圓角，我都可以選擇。 在此示例中，與我最相關(guān)的事情是通知用戶聯(lián)賽是否活躍。 因此，我將其作為覆蓋標(biāo)記進(jìn)行了此操作，并通知Glide從我的Google表格的active_not_active列中獲取此數(shù)據(jù)。

The different properties I can configure with the Cards Layout.我可以使用Cards Layout配置不同的屬性。

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.

然后，每張卡都會(huì)打開一個(gè)唯一的“詳細(xì)信息”頁面，其中包含聯(lián)賽的更詳細(xì)描述以及注冊(cè)球隊(duì)的主要CTA。

The details page for the Football Card.足球卡的詳細(xì)信息頁面。

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.

我已將“按鈕組件”配置為“表單按鈕”，這意味著它將打開一個(gè)表單，用戶可以在其中輸入有價(jià)值的信息，例如他們想要注冊(cè)團(tuán)隊(duì)的公司和聯(lián)賽。所有這些條件都是取自我的工作表標(biāo)簽“用戶輸入表單”。 然后添加各種組件，一些是文本輸入，一些是日期輸入或多項(xiàng)選擇。

Form Button Component configuration in Glide.Glide中的“表單按鈕組件”配置。

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

用戶點(diǎn)擊提交后，用戶輸入的數(shù)據(jù)將在Google表格中填充Glide自動(dòng)創(chuàng)建的新標(biāo)簽。

Automatically populated tab created by Glide in my Google Sheet, containing users who are interested in registering a team and their contact details for me to get in touch with them. A member of the Secta Leagues team could then get in touch with the user.由Glide在我的Google表格中自動(dòng)創(chuàng)建的標(biāo)簽，其中包含對(duì)注冊(cè)團(tuán)隊(duì)感興趣的用戶及其聯(lián)系方式，以便我與他們聯(lián)系。 然后，Secta Leagues團(tuán)隊(duì)的成員可以與用戶聯(lián)系。

4.聯(lián)系支持📞 (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.

該應(yīng)用程序的主要用例之一是將感興趣的用戶與Secta Leagues聯(lián)系起來。 為此，有一個(gè)專門的聯(lián)系部分。

A low fidelity Contact page with contact details made from Glide Components.低保真聯(lián)系頁面，其中包含由Glide Components制作的聯(lián)系方式。

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節(jié)中所述，我選擇了Details布局，將其連接到Google表格中的Contact選項(xiàng)卡，然后添加了相關(guān)的Components，將它們鏈接到正確的列數(shù)據(jù)。

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

用戶發(fā)送電子郵件時(shí)，他們的請(qǐng)求將保存在Glide自動(dòng)創(chuàng)建的新標(biāo)簽中。

A new tab automatically created by Glide containing all of the content of the users email.由Glide自動(dòng)創(chuàng)建的新標(biāo)簽，其中包含用戶電子郵件的所有內(nèi)容。

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.

希望我已經(jīng)向您展示了使用零代碼和可在Google表格中創(chuàng)建的實(shí)時(shí)數(shù)據(jù)來創(chuàng)建原型應(yīng)用程序有多么容易。 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.

我主要是為了學(xué)習(xí)和實(shí)踐我在Lean UX中閱讀的一些內(nèi)容，但是在整個(gè)過程中，我認(rèn)為僅使用Glide和Google Sheets就可以滿足Secta League需求的功能齊全的應(yīng)用程序。 當(dāng)然，補(bǔ)充一點(diǎn)點(diǎn)的設(shè)計(jì)和UX可以很好地解決問題。

翻譯自: https://uxdesign.cc/build-an-app-without-writing-a-single-line-of-code-with-google-sheets-and-glide-1efcb0173055

1.1編寫目的

總結(jié)

以上是生活随笔為你收集整理的1.1编写目的_1.目的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。