DigEx Major Project 1/GRDE3014 Exercise7: Single Page Application (SPA)
DigEx Major Project 1/ GRDE3014 7A:Vanilla SPA Overview 7B:Haircuts SPA Setup
7A: Vanilla SPA Overview OBJECTIVE Building Single Page Applications (SPAs) from scratch is rather time consuming, so it's best to use an existing framework or template. For our Haircuts app we'll be using a framework called Vanilla SPA -which gives us all the base or "boilerplate" code we need to get up and running with a new SPA fast! In this exercise we'll download he Vanilla SPA framework and explore the files, views and major objects / components.
STEP1. Downloadthe Vanilla SPA zip from Blackboard:2. Extract the Zipand you should see two folders, one for the frontend, and once for the backend:1 vanilla-spa
STEP Watch the following video tutorial2TOPICS COVERED:•Vanilla SPA backend setup•Vanilla SPA frontend setup•views•App.js•Auth.js•Router.js•Toast.js•Custom componentsWatch / Download video https://cloudstor.aarnet.edu.au/plus/s/xRQ9H3SVP6sCmWX(54mins)
End of Exercise
7B: Haircuts SPA SetupOBJECTIVENow we're familiar with the Vanilla SPA framework, let's use it to create our Haircuts app! In this exercise we'll setup our views and customise the sign up form to allow two types of users to sign up: customers and hairdressers (accessLevel), as well as adding a bio field.RESOURCES / DOCS•Shoelace
STEP
- Downloadthe Haircuts Logo zip from Blackboard:
- Extract the Zipand you should see 2 versions of the logo:1haircuts-logo.zip
STEP Watch the following video tutorial1TOPICS COVERED:•Haircuts App setup:•Change Logo•Change colours•Create views:•Guide•Hairdressers•Haircuts•Favourite Haircuts•Update Sign Up form•Update Edit Profile formWatch / Download videohttps://cloudstor.aarnet.edu.au/plus/s/jcK9EvqN9oUhEou(35 mins)
End of Exercise 1.A2 Prep:By this stage you should have your visual design language and information architecture complete, and can now begin on your high fidelity mockups. Remember your mockups need to be of professional standard, utilising all your design theory foundations to create an engaging and usable app interface.2.A2 Prep:T o finish off your second assessment you need to outline the technical specificationsfor your app, grouped in to frontend and backend. Be sure to consider the components you'll need for your SPA and any third-party libraries.HOMEWORK Build a Single Page Application with JavaScript (No Frameworks)https://www.youtube.com/watch?v=6BozpmSjk-YWhat is a Single Page Application (SPA) and How Does it Workhttps://www.youtube.com/watch?v=wlVmmsMD28wSPAs vs MPAs/MVC -Are Single Page Apps always betterhttps://www.youtube.com/watch?v=F_BYg2QGsC0Recommended reading / viewing
