Application Design II - Task 3 : Final Responsive Application Design
Week 1 -Week 14
Tan Pei Yun / 0345386
Application Design II /Bachelor of Design in Creative Media
Task 3: Final Responsive
Gong Cha App Animation Prototype
Progress
 |
Gsap New Interface ?!  |
First thing first, I was JUNGSHOOK , like where is it ?? what is this ?! there's new interface for GSAP ?? gimme back the old gsap , where we all used to it to the old website interface ( But still it was amazed that they have upgraded a nice modern but confusing layout )
 |
| Me trying to code as many as possible before I sleepy |
Is been awhile since I touch coding , and my goals is simple , just to keep it whatever I can do and achieve , try to not stressing myself alot in this final task , okiee , you can do it pei gun !
 |
 |
| Split and wrote down page need to code |
While looking back at my figma , I try to cut down some where it seems "not necessary" to have, the tick area is something I want to focus on and the red is something I don't want but still there's a lot to go ! So let's DO IT.
Challenges Met
It seems like whatever page I did , they will be LOTs of challenges and error , therefore let's just called this section challenges that I have met, is hard for me to record all the steps , therefore I will put some and be part of inside this blog.
Onboarding Screen
To give me myself a warm-up . I decided to do on-boarding page instead to give myself familiar again with all the coding and also using GSAP , it was a constantly reminder that we need to put this
<meta name="viewport" content="width=device-width, initial-scale=1">
 |
| Onboarding progress in html |
Onboarding was surprisingly not that as complicated as I think since is only images + text, but comes to the GSAP part was hectic , where have to find what kind of effect I want to achieve based from my previous task 2 masterplan. and here I did something like a slide in effect.
.gif) | |
|
Registration Screen
 |
| Registration Progress |
For registration, it was necessary to make it responsive where need to have that able to type name, password and confirm password to sign up. Somehow some challenges I met is that it does not really fit to the screen where it is not even centered, this is where I need help from Chatgpt to ask about my concern, and wow it does helps alot and able to fix it from the CSS part. After it done need to add some GSAP GSAP magic.
Rider Delivery Status
As I was trying to explore in using GSAP effect, some weird blinking effect happen , and there's was even "floating button" appears on the screen. I find it quite funny and decided to screen record and show how it looks like before fixing it.
.gif) |
| Wrong blinking effect created using GSAP ( Delivery page Gone Wrong Version ) |
Check Out > Payment
As I was trying to do the select button , it keep going to the left side instead of right side , and somehow the blue select button colour cant be change , chatgpt wont help me out too , although I have look through the css part , but still. Decided to keep it as blue dot then.
 |
| Check Out Page progress |
Customise Drink
Customise drink page is another super headache part , while doing this I have been thinking why there's soo many button , and all have to be make sure in a detailed <button class> and every button have to be make sure clickable and able to change colour , it took around half day , as I do not any experience and it requires research and youtube tutorials while doing this part. I try my best on this page and using chatgpt to help me out a lot too.
 | |
|
The buttons is hard to do and I do not know how to fix it nicely and although I have asked chatgpt but it still maybe I do not know how to ask in a right way , the result it getting bad and bad and decided to undo to keep it whatever I have. I do not did much animation for this page as it will be more "compilcated" looking therefore I just focus on the product image and slide in from the left.
Home & Navigation Bar
I put home page as last to focus on , as there's many stuff have to be covered.
 |
| Home page progress |
I knew that home page and navigation requires lot of attention and details , and also nagivation bar is something I knew would give me heart attack , as my own design is having a round shape that able to slide to the specific icon which is hella hard to do it and time is getting lesser and lesser each day.
There's 2 scroll in horizontol need to be done in home page , there's "what's new" section and also "category" , this 2 give me some heart attack as this 2 seems to be just a small thing but I can do it like half day just for this. When feel like wanna give up , time to youtube again . This video is sent by Mr Razif where it does help and follow in step by step
Youtube tutorials
.gif) |
#Attempts - failed |
While for the navigation bar , I think I decided to give up and use the normal navigation bar instead, as I trying my best to achieve whatever I can . I have tried to do once , twice and third , forth times , it failed , it does not give the result I want, and keep searching for the one navigation bar I looking for , but nope no tutorials have that. It was really stress to do this and things getting complicated and mind become blank and do not know which code I should keep or delete anymore.
Netlify Deploy Error
Page Not Found Netlify Issue
 |
| Haih 404 Error happened |
While I thought it was finally able to call it to give it a full stop , I upload my file to netlify and whenever I try to open it some error happens where I could not open the website. I try to look from youtube for some help , and actually it quite normal to have this kind of error , and the solutions is too rename the folder and it works :D ! YAY
This is where I know "oh my oh my gawd" I literally forgot this is not the last step , I still need to do the PWA setting , and have to watch Mr Razif youtube tutorials that provided in Whatsapp Group Chat.
PWA Setting
 | ||
PWA Setting Tutorials from Mr Razif
|
 |
| Include Manifest to index.html |
 |
| Include FavIcon to index.html |
Where followed with Mr Razif steps , I start by download all the necessary zip file for the PWA setting , and have to insert some script and rename the javascript file and make sure able to works and no error before deploy to netlify. I also did the favicon for the gongcha website where using the Gongcha Logo as the favicon.
After everything is done , and really to go to Netlify to make the video presentation :D
Final Compilation
| Final Task 3 : GongCha Video Walkthrough |
 |
| Final Task 3 : GongCha PWA Application |
 | ||||
Final Task 3 : GongCha Manifest PWA
|
Please View in Iphone 13 mini (375 x 812)
Reflection
With today generation with the helps of AI, coding seems not that hard , but as a beginner who rarely touch about coding , it does need a lot of time and patience while doing this task , sometimes one small little mistake can takes from hours or even a day. And it was really hard for me to make it everything responsive , I try my best to cut down for some of the flow so that I could work faster a little. I knew I can do it better but everyone is the same 24 hours a day is was not enough.
With the help of Chatgpt does makes the task easier but have to be alot more patient to look through every line it wrote about , if not there's no point to learn from this module .
To me , coding fews like puzzle , where each line of code represents a piece of the puzzle, and the challenge lies in fitting them together correctly to make sure them are functional. Especially comes to the sense of satisfaction and accomplishment when the code runs smoothly is given the joy .
Comments
Post a Comment