Build an App from Google Sheets in Under 20 Minutes — Transcript

Full transcript

1. 0:00What if I told you that you could turn
2. 0:01your plain old Google sheet into a
3. 0:03working app in under 20 minutes without
4. 0:05writing a single line of code? By the
5. 0:07end of this video, you'll have a running
6. 0:09live app that connects to your Google
7. 0:10Sheets and enables your team to get work
8. 0:12done, manage their deliverables, and
9. 0:14track deadlines.
10. 0:16Hey there, I'm Alex Nolles from
11. 0:18automationhelpers.com and we help
12. 0:20companies get set up and automated using
13. 0:23industryleading portals, apps, and
14. 0:25integrations. In this tutorial, I am
15. 0:27turning an internal Google sheet into a
16. 0:30live app that helps our team manage,
17. 0:32track, and get work done. I'll show the
18. 0:35same data powering three app builders.
19. 0:37Firstly, using AI builders, Zite, and
20. 0:40Lovable, and then we'll look at softer.
21. 0:42I'll also cover limitations, best
22. 0:44practices, and which tool to choose
23. 0:47whether you're building for you, your
24. 0:49team, or client. Okay, so we're going to
25. 0:51be using this Google sheet to build out
26. 0:53an app. It's a CRM or a customer
27. 0:56pipeline tracker. We've got details
28. 0:58about the clients, contacts, and
29. 1:00check-ins. Now, rather than having our
30. 1:02team manage everything within Google
31. 1:04Sheets, which isn't the most intuitive
32. 1:06platform, we could build a customized
33. 1:08front-facing app that manages this data,
34. 1:11but gives them a more intuitive way to
35. 1:13get things done. Now, we're first going
36. 1:15to jump in and see how easy it is to
37. 1:17build an app using a simple prompt, much
38. 1:19like you would prompt chatbt. So, if we
39. 1:22jump into Z or lovable, the process is
40. 1:24the same. You're given that prompt input
41. 1:27box and you can ask it anything. Now,
42. 1:29here is where you could really save
43. 1:30yourself some time and definitely a
44. 1:31headache. Ensuring that you prompt it
45. 1:34correctly. Everyone will jump in and
46. 1:36just type a simple sentence saying,
47. 1:38"Hey, I want you to build for me a CRM
48. 1:40tracker." However, we've already got the
49. 1:42data. So it's better that we actually
50. 1:44export this data as a CSV file, bring it
51. 1:48into chatgpt and ask chatgpt to provide
52. 1:52for us a prompt that we should then give
53. 1:54to zite. Of course, you'll then want to
54. 1:56review that prompt and ensure it does
55. 1:58relate to you. But this is a much better
56. 1:59way of getting your app readymade
57. 2:01without spending hours of prompting back
58. 2:04and forth. Now I've already prepared a
59. 2:06specific prompt using my data from the
60. 2:09Google sheet. So I'm just pasting it
61. 2:10into the input. Build me an internal
62. 2:12client management app powered by this
63. 2:15Google sheet. It will then come back to
64. 2:16me and ask for the Google sheet. The
65. 2:18clients tab should be the main record.
66. 2:20Display a list of clients with search
67. 2:22filters, status highlights, etc. I won't
68. 2:25go through all of it. When I click into
69. 2:27a client, show I'm being very specific
70. 2:30on what I want to see. Pull related
71. 2:32contacts and check-ins linked by the
72. 2:34client ID. You can filter. Add an action
73. 2:37button to log a new check-in. Create
74. 2:40save views. my accounts at risk clients,
75. 2:42yada yada. Now, what we're going to do
76. 2:44is we're going to prompt zite to
77. 2:45actually build that. While we wait for
78. 2:47that to come back and ask for the Google
79. 2:49sheet, we'll jump into Lovable and we'll
80. 2:51paste the same prompt right there and
81. 2:54see what we get. So, Zite has come back
82. 2:57and it's asked me for the Google sheet I
83. 2:59want to connect. Now, you can build apps
84. 3:01without actually connecting a Google
85. 3:03sheet. It'll just ask you at a later
86. 3:05time to connect it or you can use the
87. 3:07native Zite databases which were
88. 3:10recently released. If you want to learn
89. 3:11more about that, make sure to check out
90. 3:13our video on that. So, I've added my
91. 3:16Google sheet and now it's going to sync
92. 3:18my cells and rows to the app itself.
93. 3:21Here on Lovable, because the prompt that
94. 3:23I use actually asked the AI model to
95. 3:26connect to a Google sheet, it's coming
96. 3:28up with not an error but a pause. It's
97. 3:30asking for me to connect a Superbase
98. 3:32database to Lovable. Now, I don't have a
99. 3:35Superbase database for this example. And
100. 3:38unfortunately, Google Sheets doesn't
101. 3:40connect to Lovable. So, we're just going
102. 3:42to prompt it to build a CRM for us so
103. 3:43you can see what it does. So, on Zite,
104. 3:46you can connect to a direct database
105. 3:49natively on the Zite or fill out
106. 3:51ecosystem. Now you also have the ability
107. 3:53to connect to Google Sheets, Air Table
108. 3:56and they're also rolling out notion,
109. 3:57monday.com, Smart Suite among other
110. 4:00platforms. Whereas lovable currently we
111. 4:02can just connect to Superbase or we can
112. 4:04take it out externally after we've built
113. 4:06it and connect it via a server. So if
114. 4:09you are looking for a quick app build
115. 4:10that you and your team can work
116. 4:12internally and I will suggest that these
117. 4:14app builders are only used for small
118. 4:16teams, well Z's definitely going to be a
119. 4:18better option for you. Not only do you
120. 4:20have built-in forms, scheduling, and
121. 4:23native databases, you've got more
122. 4:24options of connecting to a data source,
123. 4:26and an easier and more intuitive UI.
124. 4:29While Lovable is being quite slow, we've
125. 4:32got Zite ready connected to our Google
126. 4:34Sheets. And the CRM or the customer
127. 4:38management pipeline tracker can be
128. 4:40viewed. So, we'll just go full screen so
129. 4:42you can see what we've got here. We can
130. 4:43see our total clients, our total annual
131. 4:46reoccurring revenue. If we check our
132. 4:48Google sheet, we need to ensure that all
133. 4:50this is correct. So here we can see our
134. 4:52clients, we've got six. That's correct.
135. 4:55And the total of this. Yep, that does.
136. 4:59Quick maths. But if we jump back into Z,
137. 5:02what else have we got here? We can
138. 5:04actually change by the account owner.
139. 5:06That's awesome. If we jump back in here,
140. 5:08we'll notice we got Alex Dan. Alex Dan.
141. 5:11Now, you might usually create a
142. 5:12different worksheet for each individual
143. 5:14department or person. This really saves
144. 5:17that. And like I said, it's interactive
145. 5:19and it's intuitive. You've also got
146. 5:21industry filters, health filters. Now,
147. 5:24you might see that and say, "Hey, we've
148. 5:25got one at risk. Why don't we see any at
149. 5:28risk in this filter?" Well, that's
150. 5:29because we've still got Alex selected.
151. 5:31If we swap that to Dan, there we go.
152. 5:34However, we can't deselect anything
153. 5:37unless we click clear filters. So, we're
154. 5:39not done with this. We can jump through
155. 5:41the tab navigation. We've got expansion,
156. 5:44renewals, nothing in there, at risk, we
157. 5:47saw that earlier, and my accounts. Now,
158. 5:49we currently don't have that enabled on
159. 5:52our version. We're just going to jump
160. 5:53out of the full screen here. But what
161. 5:56you can set up is actual login
162. 5:58permissions and roles. So, if Alex jumps
163. 6:01in and he selects that my accounts tab,
164. 6:04it will show him the clients and
165. 6:06customers that are assigned to him. And
166. 6:09same with Dan, vice versa. We will just
167. 6:12quickly add that so that you can see
168. 6:13what it looks like only when needed.
169. 6:16We'll click add login. And if we take a
170. 6:18look at the preview, we're just waiting
171. 6:20for that to update. Now, each time that
172. 6:22you do make changes to your app, you
173. 6:24will have to go through this process. It
174. 6:26is doing the building for you. It's
175. 6:28coding on the back end. It's writing the
176. 6:30script. So, let's be patient. And
177. 6:32speaking about patience, we jump into
178. 6:34Lovable. And here we can see that we've
179. 6:36got a similar build for our CRM. We've
180. 6:40got my accounts at risk clients
181. 6:42renewals. We can also see that this is
182. 6:45actually dummy data. It's not the data
183. 6:47from our CRM. And so that means the next
184. 6:49step from here would be to take this out
185. 6:52and actually connect the dots. Whereas
186. 6:54in Zite before we begin the build, it's
187. 6:57already done for us. So if there's any
188. 6:59discrepancies or issues in that lovable
189. 7:01build, you're not forced to just
190. 7:03continuously change the code or keep it
191. 7:05in lovable and ask AI to make the
192. 7:08updates. Zit's definitely an easier and
193. 7:11quicker process to build. Now from here
194. 7:13we'll see now here we can see that
195. 7:16signin process. So whenever now here we
196. 7:19can see that sign-in process. Whenever
197. 7:20someone lands on the app they'll ask to
198. 7:22sign in they'll then select their email
199. 7:25jump in and they will have a customized
200. 7:27and unique view depending on how you set
201. 7:30it up. Now I will quickly just mention
202. 7:32that we've got the workflows here on the
203. 7:34back end that's collecting that data.
204. 7:36We've got the database which we could
205. 7:38connect. That's the native database I
206. 7:40mentioned to you earlier. But we are
207. 7:41building on Google Sheets so we don't
208. 7:43need to worry about that. Next step.
209. 7:45Well, perhaps you're not happy with the
210. 7:46app and you want to update, improve, and
211. 7:49change. You can either prompt directly
212. 7:52to the AI model so it has an overall
213. 7:55edit experience. Or you can select the
214. 7:57edit icon here and get down to the
215. 7:59nitty-gritty. Let's say for instance, we
216. 8:01wanted more padding on these cards here.
217. 8:03Or perhaps we wanted a drastic change.
218. 8:05We could select AIEit. We know that
219. 8:08that's focusing and targeting that
220. 8:09container. And then we ask for it to
221. 8:11make its updates. So building out your
222. 8:13app with Zite, it's going to take you a
223. 8:15bit of back and forth until you're
224. 8:16completely happy with it. But how quick
225. 8:18can it build a beautiful, interactive,
226. 8:20and intuitive app for you and your team
227. 8:23and possibly your client. Now the reason
228. 8:26I say possibly your client is because
229. 8:28there are some limitations in regards to
230. 8:30how this works security and permission
231. 8:33aware which we'll talk about soon
232. 8:35enough. But let's now take a look at how
233. 8:37we could build an app with softer. The
234. 8:39difference between Zite and Softer is
235. 8:42that Zite is an AI first app builder and
236. 8:46softer actually is more of a template
237. 8:48drag drop and build builder. In saying
238. 8:52that though, we do have the option to
239. 8:53build out an app using the generative
240. 8:55AI. So, let's give that a go. Now,
241. 8:59again, we're going to use that same
242. 9:00prompt and we're going to ask to preview
243. 9:02our app. Now, software only gives us a
244. 9:05200 character limit, so it's used up
245. 9:07quite quickly. So, we're just going to
246. 9:08prompt it simply just so you can see the
247. 9:11AI capabilities. But, there is a
248. 9:13difference here between Z and Softer.
249. 9:15Softer isn't focused in AI. It gives you
250. 9:17guard rails so that you can build
251. 9:20polished apps without having to worry
252. 9:22about issues. You might find that in
253. 9:24your building process with Zite, you can
254. 9:25take it too far, the AI gets confused,
255. 9:28or the layout is over skewed, overrun,
256. 9:31and chaotic. That's just what happens
257. 9:33with AI. Not only that, because you're
258. 9:36using an AI prompt, it's a consistent
259. 9:38back and forth of the model, and it can
260. 9:40take quite a long time to build
261. 9:42something you envision. Whereas, if
262. 9:44you're given the building blocks from a
263. 9:45platform like Softer, it can be a
264. 9:48quicker process to build what you
265. 9:49envisioned. And here we can see the
266. 9:51generated template that was created by
267. 9:54Softer. Now, personally, I'd go with one
268. 9:56of their other templates. I know that
269. 9:57they have some beautifully crafted and
270. 9:59professional templates, but there is a
271. 10:01positive there because it is structured
272. 10:03correctly. It's got tab navigation.
273. 10:05you're ready to go and all you would
274. 10:07need to do is to connect your actual
275. 10:10data source, the Google Sheets to the
276. 10:12content copy. Here we can see source. We
277. 10:15could select copy generated data and
278. 10:17what it would do would be then to create
279. 10:20a database for you natively in software
280. 10:22with the example data, but we already
281. 10:24have our data. Select Google Sheets.
282. 10:27You'll then need to select the document
283. 10:29or the spreadsheet, our CRM customer
284. 10:31pipeline, and then the worksheet that
285. 10:33this data source relates to this block
286. 10:35with. So, we'll have our clients. We'll
287. 10:38wait for that to load. It will auto map.
288. 10:40We can sort, change page, etc. We won't
289. 10:43get too deep into this because we have
290. 10:44plenty of videos on softer. We do love
291. 10:47softer as a platform. We've also got
292. 10:49action buttons that we can include, but
293. 10:51again, I will point you to our playlists
294. 10:54on softer. go ahead and check those out
295. 10:56and learn more about this platform. But
296. 10:58from here, you could build out your
297. 11:00separate pages. You could have a form
298. 11:02for new clients to be onboarded, for
299. 11:05your sales team to report on check-ins,
300. 11:07and so on. And if we preview the front
301. 11:10end of that just quickly built app. Here
302. 11:12we can see we've got a journey, a
303. 11:15carefully crafted journey for our users.
304. 11:18If I just log in here and here we can
305. 11:20see we've got a customized experience
306. 11:23specifically for me Alejandro our
307. 11:25clients here we've also got deals that
308. 11:28we're able to navigate through as well
309. 11:31as interactions
310. 11:33and then from there you can toggle
311. 11:35between the different viewpoints which I
312. 11:38didn't actually mention when we were in
313. 11:39Z. We jump back our viewports here. Now,
314. 11:44I will mention that you will want to
315. 11:45double check on your iPad and handheld
316. 11:48device. Phone, fancy way of saying
317. 11:50phone, because sometimes what it shows
318. 11:53you in the live editor is not what
319. 11:55you'll actually see on the live front
320. 11:57end. Now, when it comes to sharing your
321. 12:00apps, a unique URL will be generated in
322. 12:02both platforms. If we jump into Zot,
323. 12:05we'll hit share. We want to publish our
324. 12:07app first. We can access it through
325. 12:09here. add a custom link as well as a
326. 12:12custom domain or embed that onto our
327. 12:14website. The important thing to note
328. 12:16that this sync will be two ways. If you
329. 12:18add new records to the front end, your
330. 12:21app or make edits on your app, those
331. 12:24edits are going to occur in your Google
332. 12:26Sheets, which makes this an exciting way
333. 12:28for you to build a custom experience for
334. 12:30your team to help them get more work
335. 12:32done. Plus, perhaps you are currently
336. 12:35wondering which CRM project management
337. 12:37or work management tool you should pay
338. 12:39for. Instead, you could pay for the
339. 12:41credits to prompt Zite or pay for a
340. 12:43subscription with software and build
341. 12:45multiple apps to manage your CRM, your
342. 12:48content production pipeline, your
343. 12:50project management and deliverables. The
344. 12:53list is pretty endless. Now, when it
345. 12:54comes to the limitations of an AI
346. 12:56powered app builder, well, we've got to
347. 12:58discuss data and security privacy. Zite
348. 13:01is designed as a rapid AIdriven builder,
349. 13:04not as a hardened enterprise platform.
350. 13:07There is limited transparency about how
351. 13:09your data is stored specifically on the
352. 13:10native database. And if you are storing
353. 13:13on Google Sheets for instance, well,
354. 13:14that's already not the best practice.
355. 13:16There's also no audit or logging trails,
356. 13:19so you can't see where things have gone
357. 13:21wrong or god forbid data has been
358. 13:24breached. And if you've got sensitive
359. 13:26client data making one small mistake in
360. 13:28the way that you built the app or
361. 13:30configured the roles and permissions,
362. 13:33well, there's a chance that it will be
363. 13:35breached. Bottom line is that Zite is a
364. 13:38fantastic tool for internal prototypes,
365. 13:40proof of concepts, and team tools. Zite
366. 13:44enables you to speed up priority and
367. 13:45ensure only the right and correct
368. 13:48information is shown so things are less
369. 13:50chaotic for your team. Now, because Zite
370. 13:52lacks compliance asurances and data
371. 13:54privacy measures, using a tool like
372. 13:56softer when you're building your
373. 13:57client-f facing tools, well, that's
374. 13:59definitely a better practice. And also,
375. 14:01if your team is handling sensitive,
376. 14:03sensitive data internally, maybe an AI
377. 14:06powered app build is not the best tool
378. 14:08for you. And that's when you would look
379. 14:10to a tool like Softer is built for
380. 14:12client portals and external apps. It
381. 14:15shines when you need to share data with
382. 14:17clients, partners or external users
383. 14:19because you can create password
384. 14:21protected portals, role-based dashboards
385. 14:23and public sites. This too can connect
386. 14:26to Google Sheets, Air Table and they
387. 14:28also offer native databases. Unlike fast
388. 14:31AI first builders, softer has mature
389. 14:34access controls and compliance features,
390. 14:36role-based access, hidden fields, and
391. 14:38secure backends which make it safer for
392. 14:41sensitive client data. So when you
393. 14:43compare a tool like Zite or Lovable with
394. 14:46Softer when considering your internal
395. 14:48tools or building apps for your
396. 14:50business, well, while Zite is fast and
397. 14:53helps you get off the ground quickly, a
398. 14:55tool like Softer is definitely a safer
399. 14:57production avenue. So if you're looking
400. 14:59to build apps to streamline your
401. 15:01workflows or automate your processes,
402. 15:03don't hesitate to reach out to us at
403. 15:05automationhelpers.com
404. 15:07where our team of experts are offering a
405. 15:09free 30inut consultation. So book yours
406. 15:11today.