First Time as a Front-end Developer Using Vue.js
Probably not much of useful educational content! More like a self-reflection, I guess?
Just a typical intro
I’m Tata, a wanderer who has been finding herself for a little bit more than 20 years already. I’m a sophomore, studying Information and Communication Engineering at Chulalongkorn University. People always ask me what actually ICE students learn, and I also find it difficult most of the time to answer this question. We learn lots of things, but what I like most (so far) is programming.
Another intro — So what exactly is it that brought me to this path?
As I was about to start my second year, I was completely lost and had absolutely no idea about what I should do next. Many of my friends already had some experiences in developing applications, machine learning, or data science, while I had none. One day during the summer break, I talked to my academic advisor, Associate Professor Proadpran Punyabukkana, Ph.D., who invited me to join the ongoing projects she was supervising at the time. I finally made up my mind, ‘some time later I must take my first step anyway, so why don’t just do it right now?’
One last intro — Observing things from literature review
Since I felt I wasn’t ready for a developer position, I initially took part as a researcher, doing literature review for another project about stroke identification (which seemed easier to me as it didn’t require any superpowers like coding skills). Basically, I did market research, studying about the existing products which were similar to ours, and also I had to study a number of journals related to stroke. The goal was to find what we could implement so that our app was unique, while still being cost-effective both financially and physically. At the same time, I was also watching the developers of the team updating their tasks, getting a glimpse of web development. At the end, I felt that I wanted to try a front-end developer position, so I eventually joined another web application project called SkinScreener.
About SkinScreener
From a collaboration between the Chulalongkorn University Technology Center, Faculty of Engineering, and Faculty of Science, SkinScreener aims to provide initial melanoma diagnosis for citizens in rural areas of Thailand, without the need to physically visit the large regional hospitals. Village health volunteers will take photos of suspected skin lesions from local people, and upload them, including the patients’ profile, into our system. There are physicians (and some machine learning stuff which I will not talk about hehe) who will evaluate these photos and decide whether the patient should receive treatment or not. This means that those citizens don’t have to take a long trip to the large hospitals, but virtually see the doctor from their houses instead.
Say hi to Vue.js
Our team decided to use Vue.js for the front end, making Vue.js became the first framework I got to learn. One *.vue file has 3 blocks: <template>,<script>, and <style>, each written in HTML, TypeScript, and CSS respectively. So before getting started, I had to learn the basics of these languages first. Creating this app, Vuetify is also useful since there are a wide variety of components to choose from. After setting up the environment and installing everything needed, now it’s time to start working!
Git — a developer’s life savior
Git is super useful since this is a project which has many developers collaborating. As the project was already created by the other teammates, I had to clone it from our GitLab repository to work on my own computer. Also, every time I started a new task, I had to checkout a new branch, so that I would never cause any permanent damage to the other teammates’ codes (oops). There are several other commands I used all the time: git pull, git push, git status, commit, etc.
What have I done so far?
My job was to create features according to the Figma design from UX/UI team. So far, I have done the welcome page, sign-up page, and another little feature.
The welcome page is what the users see first when entering the app, and it leads to sign-in page and sign-up page. The two buttons, which are created from Vuetify components called v-btn, were linked with their respective pages using router-link. Note that this page actually doesn’t have the header as shown in the picture, but we kept it for the time being until other functions are ready.
The sign-up page creates accounts for village health volunteers. I used v-text-field from Vuetify for the input fields; also, I included validations and warning messages, so that all information is filled correctly before submitting.
Beside those two pages, I also created ‘add to my case’ button, which is a feature in the doctors’ account. The doctor chooses cases / pictures of the patients, then when they click ‘add to my case’ button, those cases will appear in their ‘my case’ tab. This is still a demo without connecting to the back end, so I only used filter functions to move the cases around first.
Challenges / Final words
Because this was my first time as a developer, having no experience in developing an application before, I really took quite some time doing each task. Even though I did study the languages and the framework prior to working on the project, it eventually became ‘learning-by-doing’, understanding things as I went through each step anyway. I’m glad that I was brave to challenge myself and do these things, even though I kept feeling that I wasn’t ready enough all the time. Thanks to my professors, friends, and family, who always encourage me to try and explore things, I’ve found one more thing that I like. There is no ‘the end’ for learning, just keep exploring and trying new things. Don’t be afraid to be bad at something, otherwise we will never be better at it!
