Beacon Management frontend¶
A web application has been created to manage the beacon information that exists in the backend. Using our API it can create new beacons with specific information and remove them from the database. There is no user management since this is used for development and demo purposes and we needed to save time.
Setup¶
First ensure that the backend api is setup and running at localhost port 3000.
navigate to beacon-frontend folder of the project.
Run npm install which will install the dependencies for the project.
Run npm run build which will transpile the typescript into javascript, bundle all the code into a single javascript file and create an html file.
Open the html file in beacon-frontend/dist/index.html in a browser. A connection with the backend api will automatically be made to retrieve and modify the beacons.
Usage¶
Viewing beacons¶
The beacons that exist in the database are listed in the table. If no beacons are available in the database the table is hidden.
Adding beacons¶
New beacons can be added by filling out the required information in the add beacon component. If the information provided is valid and no beacon with the same id already exists, the new beacon will be created and added to the table. The api can then be used to retrieve information about the beacon using the id.
If a beacon is added successfully a green notification will be shown on the bottom right of the screen.
Removing beacons¶
To remove a beacon, its id need to be selected from the dropdown of the beacon removal control. If no beacons exist in the database then the component for deleting the beacons is not shown.
Svelte components¶
The frontend has been divided in different components to isolate functionality and make the code easier to understand and extend. These are svelte components that are defined using .svelte files and are stored in the components folder of the frontend project. Each component can be imported within another svelte component and be added to the view with syntax similar to that of a standard html component.
Tech stack¶
The web application is made with svelte which allows fast development with very concise syntax. Variables can easily be binded to input controls and the is very little boilerplate code required.
Typescript is used to make it easily extendable and provide type checking and completion that speeds up development as well as preventing errors.
When running a local server it uses vite and this allowed us to speed up development with on demand compilation of modules during development so we don’t have to rebuild or refresh the page every time a change is made to the code.