Embedded Files
On this page, you will be able to see the notes and resources used in the delivery of the workshop.
On this page, you will be able to see the notes and resources used in the delivery of the workshop.
Contents
Contents
1) What is a Progressive Web App?
1) What is a Progressive Web App?
"A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript.
It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices.
Since progressive web apps are a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play."
2) App preview
2) App preview
Using your mobile phone, go to the following website:
https://ucsfutureproof.glideapp.io/
Alternatively, you can visit the link using your laptop.
Either way, this will give you a preview of the app we created for this event using a free service called Glide.
Watch the video on the right to learn more --->
3) Getting started with glide
3) Getting started with glide
To make your own version of this app you'll need to:
Go to the Glide Apps Website: https://www.glideapps.com/
Sign in using your Google account. (If you don't have one then you can make one for free here)
Make a copy of the above app by visiting: https://ucsfutureproofwkshop.glideapp.io/
We will spend the rest of the workshop walking through the creation of this app, if you have any questions as we go along - just ask!
4) Planning your App
4) Planning your App
Before you create your app it can be helpful to write down a user story, which describes how a typical person might make use of it .
What will they see when they look at the app?
What information will the app allow them to view?
What will the app allow them to do?
This can be written in whatever way suits you best, as a bullet list, a few paragraphs or as a Mind Map.
For MindMaps we recommend www.mind42.com (it's free!).
5) Building your spreadsheet
5) Building your spreadsheet
Once you have planned your app, you should have a good idea of the number of sections/pages it will contain and the kind of data that each page needs to provide to people when they look at it.
At this point you are ready to create your Google Spreadsheet, this will hold all of the data & information which your app will provide to people.
In most cases, you'll want one tab/worksheet for every page/section you'll have on your app.
For each worksheet, you'll want to have columns with column headings that describe the data you are going to show to your client.
You then place the actual data in the row below, making sure the data matches up with the column description...
6) Adding HTML (Advanced!)
6) Adding HTML (Advanced!)
You may have noticed that some of the cells have HTML code in them rather than plain text.
You don't need to add in HTML but it can be handy if you want to format the text in your app in a particular way.
We use a free online HTML editor to help us do this, as we can just format the text how we like (it's a bit like using MS Word) and then the HTML code is automatically generated for us - this is then pasted into the spreadsheet.
7) Constructing Your App
7) Constructing Your App
Now you are ready to start using Glide to construct your app.
As this workshop is only 30 minutes long, we don't have time to cover all aspects of using Glide to create an app however you can watch the video tutorial on the right for a complete overview.
For now, we'll just provide a brief tour of the Glide interface and show how each of the pages on the app work with the data in the backend spreadsheet.
8) Further Information
8) Further Information
Below you'll find links to every online resource that was showcased in the workshop.
Below you'll find links to every online resource that was showcased in the workshop.
Google Account Creation - You need a Google account to use Glide Apps.
Glide Apps Website - This is the website that you will use to make your web app.
Glide Apps Templates - A series of ready-made templates you can tweak.
Event App Template - This is a version of the app you created in this workshop.
Google Drive - This is where the back end spreadsheet that powers your app is stored.
Glide Documentation - This is the online manual for Glide.
Glide Support Forums - If you have a question about using Glide, this is a good place to go to get answers from fellow Glide users.
Adalo - This is an alternative to Glide and is well worth checking out!
Page updated
Google Sites
Report abuse