1.CRUD category fieldI had finish create stream crud of category yesterday. So to day I will finish extracting router. module and crud in Front end of category field

• Creating service for category
  • Initialization get all category functional to can get all category from databases with Observable is Object has property is category(an array category interface) ,and parameter is category get all URL.
  • Initialization create category function to can create a category in databases with Observable is a message interface. that means it will response a message success or error,and parameter is category info get in category component
  • Initialization create edit category function to edit category in database with Observable is message interface and parameter, it similar create function.
  • Initialization delete category function to delete function in database with Observable and parameter is similar edit function
• Creating 5 component, module and routing  of category: Categories,Add,Edit,Delete,Update Component
  • Move all Component in admin module to category module. Why I need to move them ,because I forgot I needed to create module and routing before I creating component. Silly I’m !!!
  • In category routing file I create a path for url can redirect to my component, and In admin routing I create a lazy load routing point to category routing
• Working with Component
  • I working with categories component first. This component will render all category I had in database
    • First of all, split layout of web to 2 part with col-6 for each part. First Part I will fill up with table bootstrap.
    • The table with 3 column (Id, Name, Create at). I’ll fill up data later
    • The Second part I will put the form in like Edit, Add form and Detail field
    • And I initialization a categories with type data is an array object category interface, when i have type data, the component html will understand the property I invoked.
    • Next I’ll working in ts component. I need all category to show to view so I wrote code in ng On Innit. It will load my code before load html component. It’s avoided can read property of component. I called the service category which I had injected before, the get categories method will return for me all categories in database so I could assign it to categories property.
    • I run my first feature, render all category in database and it worked like expected
  • Next is Add component, this component will render a form which can fill up the input and create a new category
    • First I needed a form to fill it. I create a sample form on the right space in the web. And a submit button to submit this form. It pretty easier
    • In my ts component I create a edit form equal form build dot group, and inside it is name field with validation is required
    • A submit method is next. In method I call category service and used create category method in side it, and of cause I put a category info to make a senses
    • All of that, it work great
  • In html component of delete component I expose to website a question. DO YOU WANT TO DELETE THIS CATEGORY
    • In ts component I wrote on Click function, if user click to yes, it will lead to this function. That have pieces of code call category service and used delete method in side it and delete category
    • If user click no, it will hide the form
    • And of cause, it working perfectly
  • In detail html component, I create a sample information of category
    • In ts component, I declare a id category property to get id from url and convert it to number so I can pass to the detail method
    • But it will have a little error, when you click a category, it’ll work perfect, but you click another category detail, you will see the issue. Url’s change like expected but the info render in html not change, it belong to the category before you click. After I search in the internet, I found a pieces of code can resolve the problem: 

router.routeReuseStrategy.shouldReuseRoute = () => false

• And It work like expected
• Finally is edit component, the form of edit is pretty similar the add form, I just copy it and paste to edit html
  • In ts component, I need id so I copy a code i write before in delete component and pate it
  • After I had id category I call method edit via category service used edit category method
  • It pretty easy
• After finish all Component, I using git to commit, push to git hub and merge to angular branch where I working with my friends.

2.Deploy AnhAnh Project using Docker Today , I need deploy my project to my VPS to test some feature on real web

• Yesterday I just had reinstall my vps because it freeze system. After reinstall vps will change ssh key. now I must delete all the old key in /home/hanh/.ssh/know_hosts and run again So they can change ssh key automatically for me.
• Login again to VPS I must going to vultr.com get new password because reinstall they will reset my password too
• After login success I update and upgrade my system VPS: apt-get update && apt-get upgrade -y. After that I install dockerby command: apt-get install docker.io -y and docker-compose: sudo curl -L “https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)” -o /usr/local/bin/docker-compose next I need give permission to docker-compose:  chmod +x /usr/local/bin/docker-compose .Every thing was installed. Now I’ll check my docker-compose: docker-compose –version. it version 3.2.x
• Next I need clone my project to my VPS. Luckily git is already install in my VPS, I just clone my project to. After I had project in my VPS, I create a docker-compose.yml to run my project, about Dockerfile I already have in my project cause I had push it to git before. I finished my docker-comopose.yml and ran my project.
• Everything is good. This’s my VPS ip: 149.28.20.237

3.Create a Sample server by NodejsAlthough listen about nodejs server a lot but I never try to create my own server using nodejs. So I decided try create a server

• Before build a server I know i need install nodejs and npm first so I install them to my lap.
• I create a sample server folder, a sub folder name is server where I will put code to.
• Next I create a server.js, and start build my server.
• First I require http and assign it to http const. next I call create Server method in http and  pass the parameter. The parameter is a function have 2 parameter is request and response. In the function I invoked write head method in response and pass 2 parameter to. One is status code 200, second is object has property Content-type and value is text/plain. I invoked another method of response param is end, and I pass to string ‘Hello World’.
• Finally I call listen method form create Server method and pass 8080 to. That means my server will listen 8080 port.
• When code is done, On terminal I type node server/server.js to run my server. And in the browser localhost:8080, the message ‘Hello World’ is showed.
• WOW. Now I know how the server nodejs works. So fun !!!

4.CRUD object fieldContinue my team project. My next job is finish crud function of object field. It pretty similar crud function of categories I had finish this morning. So I just create component and paste data to object. Of cause I must change name and data to make any senses. And it have some error but pretty easy to fix. function is just finish half and It will done in tomorrow…