Posts

Week 10

Image
This final week I wanted to make sure everything was ready for submission. I informed my team mate that all his code needed to be merged with the development branch by 4pm on the final day so that I could look at fixing any merge conflicts and run last minute checks. When I am happy the checks pass, I will merge into master and should have time to input all the links into the spreadsheet provided. Reflecting on the project I feel that the backend went well, this is because I spent most of my time learning about KOA, NPM, jsdocs and ESLinter using AirBnB rules. Everything just seemed to fall together nicely and look very neat. Jsdocs allowed me to auto generate documentation and output it to a package. I found a nice theme for the docs and included it for the compile script. I still need to learn a bit more about jsdocs as lots of the files have autogenerated wrong which I suspect is because I need to understand what more of the tags do in commenting. ESLinter was good for makin...
Post a Comment
Read more

Week 9

Image
I continued looking into security features this week and worked on learning more about password hashing and types of algorithms out there, one was bcrypt. Bcrypt allows us to build a password security platform that scales with computation power and always hashes every password with a salt. Salting of passwords is done to stop rainbow attacks and is basically a user unique key that is saved with the hashed password to increase the security further. As I soon realised this was a cool feature to implement into the project and I decided to checkout tutorials on how this can be done using node.js. As it turns out there is a bcrypt package that is well documented on npm. https://www.npmjs.com/package/bcrypt Setting out to include this in the project was as simple as embedding methods from the bcrypt library and passing through the original password to be encrypted. I also included the logic for checking if a login attempt password matches the encrypted password. After running a few ...
Post a Comment
Read more

Week 8

This week I wanted to work on getting more of the advanced features working such as the security features and inactive account check. I set out with containing both features into their own component classes. This way if they need to be embedded in other places they could do so with ease. The security features I implemented were security questions these would be inserted by a user on registration of the system until they request a change later through an admin system request. The questions and answers are stored in the database and can be used for password resetting. This was a challenge as I had somehow created a multidimensional object in the state of react. It was only when I managed to debug it that I could see this issue. I then had to break it down into smaller steps in order to resolve. I finally got the object I wanted for the database but it was throwing an error on the backend. On researching the internet I found that some objects need to be parsed to string using ...
Post a Comment
Read more

Week 7

Image
This week I done less research and development and started to work more on the code. With most of the back end now done I turned my attention to the Front-end system. The overall style from using AntDesign for React was boring and I wanted to add my own custom styles. I already have a fair amount of CSS knowledge so knew many ways I could achieve this. I went down a route of splitting CSS files into separate ones for each React component. This way it meant we could keep track on what styles go with what component. Then I imported the css it into the React components the same way other imports are done. I usually use SASS on my front end to compile and build the CSS into one file, but I didn’t have time to setup all the watch commands and explain to my team mate how it all worked. Standard CSS for this project seemed fine and as I was using Ant Design css most of the imported components I used already had good enough styling. Anything I wanted to customise I would just set a...
Post a Comment
Read more

Week 6

Image
This week I wanted to learn more about Postman and how it could benefit me in the development process for a web API. I had already carried out POST requests, but I found a few times nothing happened, and I didn’t know why. Searching the web, I managed to find a few useful tips such as the Postman software has its own control panel to see what exactly happens on the requests. What I found I really enjoy is that it tells you if it errors by displaying the request codes. Another cool feature is that you can toggle between raw or pretty logs. This helps to make the data easy to read from the screen. With the POST Requests you can send a JSON objects data through to the request body. This is very handy for checking if the route you are testing works as intended. I have found myself using this an awful lot already throughout the development of my project. I then ended up researching more about hosting as I would like to host the front and back end at some point. I already mana...
Post a Comment
Read more

Week 5

Image
This week I wanted to learn about HTTP requests and how to pass parameters between the client and the server. I started by looking at the provided examples included in the lab sheet. As I had already created the Registration Form in week 2, I decided to see if I could implement a POST request to the API with the data by using Fetch. To save time I first tested the POST request to the backend using Postman. This is where I had my first problem the validation was failing so I needed to tweak a few of the settings such as adding .allow(‘’) to the optional rule in order to accept blank strings. My second issue was then the datetime needed to be parsed using mysql str_to_date function. My POST request via Postman was now inserting fine at this point. The next challenge was to make the POST request via the front-end in React. I investigated an API called fetch which enables sending http requests to the back-end server. The React component would update the state on change and ...
Post a Comment
Read more

Week 4

Image
Week 4 started off with me researching into server validation and react lists with conditional rendering. Server validation turned out to be a very vast topic as there are many ways in which validation can be carried out. I came across a package called Hapi/joi that a lot of people on Reddit state they use it in the work place. It comes with lots of pre-built validation features and allows for running your own. I went ahead and started to implement this feature into the backend of the project. It was at this point I realised there was issues in getting the validation to work as intended. The docs state that validation can be ran as a callback and stop further code running if the validation fails. I was finding that it was either erroring or continuing to run code. I searched the internet and found that there were many people saying the official docs were poor, so they created their own tutorials. After a few hours I managed to finally get the results I was looking for. The Joi ...
Post a Comment
Read more