Build an Audio-to-Text Note-taking App
Day 2 of 14DaysofAI Day 1 of 14DaysofNoCode
Max Haining
|
73 steps
|
6 minutes
Glideapps
Sign-up & upgrade to the "Explorer" plan
1
Sign up for an account at [Glide](https://glideapps.com/?utm_source=14daysofai-lesson&utm_medium=referral&utm_campaign=14daysofai) and go through the onboarding tutorial before heading back to your dashboard.
To complete this lesson, you'll need to upgrade to Glide's "Explorer" plan. Details of how to do this can be found[here](https://community.glideapps.com/t/100-days-of-nocode-ai-welcome-faqs/74604).
Configure your app's database
2
Once you've finished signing up, and you've upgraded to the "**Maker**" plan, navigate to your Glide dashboard and click "**New app**".
3
Select the "**Blank**" template.
4
Click "**Create app**".
5
Click "**Data**".
6
Click inside the "**Empty Table**" field and rename this table "**audio storage**". \ \ This will be the table within your database that stores your transcriptions.
7
Click the drop-down menu button within the "**Name**" column.
8
Click "**Edit**".
9
In the "**Name**" field, add the text "**Audio URL**".
10
Click this drop-down menu to select the data type.
11
Select "**URL**" from the drop-down menu.
12
Click "**Save**".
13
Click the drop-down menu in the "**Description**" column.
14
Click "**Delete**".
15
**Click the + icon** to add a new column.
16
Add "**Speech to text**" in the "**Name**" field.\ \ Click the drop-down menu to select the data type.
17
Select "**AI**" > "**Audio to Text**".
18
Click this icon.
19
Select "**Audio URL**".
20
Click "**Save**".
21
**Click the + icon** to add a new data table. You're now going to add a table within the database that stores the audio files.
22
Select "**Blank table**".
23
Rename this table "**saved notes**".
24
Click the drop-down menu icon within the "**Name**" column.
25
Click "**Edit**".
26
Add "**Notes**" to the "**Name**" field and click "**Save**".
27
Click the **+ new column** icon.
28
In the "**Name**" field, add the text "**Audio URL**".
29
Click the drop-down menu to select the data type.
30
Select "**Basic**" > "**URL**" from the drop-down menu.
31
Click "**Save**".
Configuring the recording screen
32
Select "**Layout**".
33
Click the **+ icon** within the "**Navigation**" menu.
34
Select "**Screen from data**" > "**audio storage**". What you're doing here is creating the screen within your app with a recording function.
35
In the "Components" section, **click the X on the "Collection" component** to remove it.
36
Click this + icon to add a component.
37
In the search field, **type "audio"** and then **click the "Audio Recorder" component.**
38
Add another component by clicking this button.
39
Search again for "audio" and **select the "Audio" component.**
40
Click this button to add one final component.
41
Search for "hint" and **select the "Hint" component**.
42
Select the "**Audio Recorder**" component.
43
In the component menu that appears on the right-hand side of the page, **click the "Save To" drop-down menu.**
44
Select "**Audio URL**".
45
In the "**Design**" section, change the "**Uploading Text**" to "**Transcribing**".
46
**Select the "Audio" component** from the left-hand menu.
47
Ensure that within the "**Data**" section, the "**Audio**" setting is set to "**Audio URL**".
48
Select the "**Hint**" component from the left-hand menu.
49
Replace the "**Description**" with the text "**Save**".
50
Click the drop-down icon menu.
51
Select the + icon.
52
Click "**Actions**".
53
Select the "**Title**" name and replace the text with "**Save this note**".
54
Click "**Add action...**"
55
Click to open this drop-down menu.
56
Click "**Data**" > "**Add row**"
57
Click the drop-down menu within the "**Table**" setting.
58
Select "**saved notes**"
59
Click the drop-down menu for the "**Notes**" settings.
60
Select the "**Speech to text**" option.
61
Click this icon.
62
Select "**Audio URL**".
Configuring the "Saved Notes" screen
63
**Click this + icon** within the "**Navigation**" menu.
64
Click "**saved notes**".
65
Click the "**audio storage**" screen.
66
Now it's time to test your app!\ \ If everything is working as expected, you'll now record some speech, click "Save this note" to trigger the transcription process, and it will save this information in your "audio storage" data table.\ \ Click "**Record**" and just record a short recording, something like "Testing, Testing, 1, 2, 3".\ \ Depending on your device, you may receive a prompt asking for permission to use your microphone. Allow these permissions if prompted.
67
Click "**Stop**" when you're done recording.
68
Click the "**Save this note**" button.
69
Select the "**Data**" menu.
70
Within the "**audio storage**" table, you should now see the URL of your recording followed by the transcribed text in the "**Speech to text**" field.
71
Click "saved notes" to see the front-end screen that displays your transcriptions.
72
The "**saved notes**" screen should display your recorded notes!
73
Congratulations! You've created an audio-to-text app! \ \ You've learned how to configure data tables, you've added two front-end screens displaying the recording function and your saved notes and you've triggered your recordings to save directly into a data table.\ \ That's some pretty awesome work. 😎\ \ You don't need to publish your app to complete today's lesson, though if you would like to publish your app, you can click the "Publish" button in the top-right hand corner of the page within the app editor and follow the instructions.\ \ What will you transcribe next?
