Git Product home page Git Product logo

bord__backend's Introduction

bord__backend

This is the backend part of Project Bord, which mostly contains the work of @pontusolsson03, with a bit of help from @BensinBosse and some guidance from @seetee.

Here´s basically how the API works

Routing - request and response

So basically, my API nowadays spits out HTML, fethced from an SQLite database just by using different URLs. The database is set up so that each user/customer has their own table. In that table they have pages, which basically are what we call the rows. Each row has a page id, a page name, the actual content of the page as well as two separate columns for any NFC cards; primary and secondary. The pages originally come from a folder with HTML files, but in the future they will come from GitHub repositories containing markdown files which are converted to HTML by GitHub (somehow).

We have three main directories, where the main things happen. Firstly we have the controller. In there we have two js-files; controller.js and router.js. Controller is basically the first file spinning the project up on start, deciding what happens when the API is called and who has access to it. Here is where the router is linked, and pointed to as the place to go next. In there we have three GET-routes, and they are dynamic! You see, we build our URIs on two different parameters. You could look at them like localhost:8080/parameter_1/parameter_2. The first one, parameter 1, is called user, and is used to decide which user is logged on, which means it is used to identify which table in the database to fetch data from. The second one, card, is used to determine what row on the database to fetch the content from, in other words what page from that user to load. The name "card" comes from the fact that the value of the parameter is basically the id of the NFC card being read in the frontend.

The GET-routes are, as you´ve probably understood by now, used for fetching data from the API and displaying it in the frontend part of this project. Another route is the PUT-route, used for modifying data in the database. This route doesn´t take any parameters, it is static at /card, and can be called from the frontend, where we have a UI for connecting NFC cards to pages. This is implemeneted to support the ability to chose which specific page to get by scanning a specific card.

Fetching data

The actual connection and function for fetching data from the database is imported from the second main directory; model. Here we have two files; fetch.js and push.js. Here´s where the connection to the database is established, and is where the functions for fetching as well as modifying data in the database based on the arguments passed is stored. These functions are exported, and imported in router.js. This way we don´t have too much code in the router itself, since that would make troubleshooting and reworking very hard and complicated.

Updating the contents of the database

The third main directory is views, where we find the file md_fetch.js. This file is responsible for fetching the HTML files from the repo their respective repo and storing them in the database. This function is at the moment of writing under reconstruction, and some whole new exiting functionality is on it´s way.

Video- and site tips for understanding the basics of a REST API in Node using a database, for those of you who want to continue my work :)

Videos:

Sites:

VSCode extensions I recommend for anyone working on this project (or just in general)

Strongly recommended

  • Auto Close Tag
  • Auto Complete Tag
  • Auto Rename Tag
  • Better Comments
  • Bracket Pair Colorization Toggler
  • EJS language support
  • GitHub Pull Request and Issues
  • HTML CSS Support
  • PowerShell
  • Prettier - Code Formatter
  • SQLite

More optional ones

  • Material Theme
  • Live Server
  • Community Material Theme
  • CodeSnap
  • Tabnine AI Autocomplete
  • Turbo Console Log
  • VSCode Great Icons

It should be noted that Node.js and Npm are required for working on this project: https://nodejs.org/en/download/

bord__backend's People

Contributors

pontalainen avatar bensinbosse avatar seetee avatar williamhansen03 avatar

Stargazers

 avatar

Watchers

Christoffer Lext avatar

bord__backend's Issues

Store JSON in SQL

Add a database to GitHub Pages and store the JSON-data there. Pull data from theme repositories occasionally, convert it to JSON and update the database. Serve requests to the API from the database.

Find node.js hosting

Both GitHub and Netlify only host static web pages. We need hosting for interactive node.js. We have hosting at Loopia, but something else could be a better fit.

Check out wpnode for example.

Make the repository update when "hosted repo" is updated

Basically the public hosted version of this backend is built from this very repository. The hosted version is kind of it´s own build though, just a copy of this repository. When the repo is updated so is the hosted build, but we also need it to be the other way around. When the database in the hosted build is updated with new information, the repository needs to be updated with this new database-version as well.

Store HTML in database instead of JSON

Converting to and from JSON seemed a bit too much and not needed, so we decided to store HTML directly, which can be sent out as the response when API is called.

Abandon ship and migrate the whole project to Laravel

There was no way we would get the old version up and running, almost not even for a demo, so we decided to completely ditch the old backend and invest our remaining time and energy in the Laravel version of this project. Most parts of the NFC functionality can be migrated and used in Laravel, all the colors, images and styles used can also be moved and used in the new version.

The main upsides of this version is the ability to have safe and professional (and working) authentication, even a version built for multiple users of the same theme. It can also be hosted more easily, with the database not requiring some octokit bullsh*t to function even remotely.

Rework the Model

Run SQLite in memory.

  1. Make Controller ask Model 1 for markdown-files for one theme.
  2. Give data to View and convert md to JSON.
  3. Let Model 2 store JSON in SQL
  4. When request comes via API, ask Model 2 for JSON and return it to the API

Make updater (former "converter") run when supposed to

The updater right now runs everytime the user enters the login-page, which is the same for everyone.
Instead, the updater should run everytime the user enters their own home page, which would be a URL like "https://bord.com/fruit". This will also specify for the updater which catalog to read from, and which table in the database to update with set information.

Nothing loads in the browser if the pageId-param is wrong

When the customerId doesn´t exist as a table in the database, a 404-page is loaded, but this doesn´t happen if the same happens with the pageId. Instead nothing happens at all, the browser just keeps on trying to load the URL and no console log of any error happens.

Test final product

Put the two pieces together and make the two halves work together. Just make everything work as intended! This might include:

  • Testing of all the NFC cards, all pages and both at the same time
  • "Making" new customers/users, do everything like how we would set it up for a new customer (including following up on the howto)
  • Test complete project on different devices, double check compatibility
  • Make @seetee try to break it, and if he succeeds... well fix it!

Ready code for final publishing

Make the code ready and suitable for pushing to the hosting service. Might include things like:

  • Correct paths (not absolute local ones)
  • Correct scripts
  • Removal of unnecessary dependencies
  • Code clean-up (remove unncessary comments or not used code)
  • Correct commentary for future bug fixing or further developing
  • Security checks (i.e. SQL in the backend)
  • Looot´s of testing...!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.