Posts

DIY: Portfolio Q&A Chatbot using n8n

Image
I recently built a Q&A chatbot for my portfolio website (you can try it here ) using n8n and hosted it on Google Cloud Platform (GCP), so I thought it would be interesting story to share. It covers a simple use case, where visitor of my website could ask the chatbot anything about my work experience.  Here are some pre-requisites that you should  learn or do  before building workflow using n8n : Basic server-client knowledge Basic JSON knowledge Get yourself Gemini or Claude API key Install n8n, either locally or host it somewhere (*) The Q&A chatbot workflow has several nodes (of course you can add / remove whatever nodes to suit your needs) and in my project, it looks like this: I'll explain a little bit about the node one by one: Webhook node . This one is used to listen to the request that is coming from the client. In this case, the questions coming from the visitor of my website.  Read and parsing HTML node, used to read the content of my portfolio web...

Product Manager and Project Manager

Image
Both product manager and project manager are important roles in any organization especially in technology-backed organization. Product managers focus on developing and executing a long-term strategy for a product, ensuring it meets customer needs and stays ahead of competitors. Project managers, on the other hand, oversee a project from start to finish, ensuring it's delivered on time, within budget, and to the required quality standards. Another difference is who they work with. Product managers talk to a lot of people, not only customers, engineering, and design teams but also executives , sales, marketing , finance and even legal . They need to make sure everyone is on the same page and working towards the same goal. While project managers primarily work with the project team, stakeholders, and customers to make sure the project is delivered successfully. Both positions require different skill sets and approaches, and while some aspects may overlap, they require different persp...

Membuat aplikasi CRUD menggunakan CodeIgniter 4

Image
 

Understanding Customer's Jobs, Pains, and Gains

Image
As a product manager, you need to become an expert of customers and you can only do this by fully understanding their jobs, pains, and gains.  Understanding the customer will help a product manager, not only in writing a better user story but also to influence or even create a buy-in from stakeholders. Creating a customer profile is pretty similar with user persona. Customer profile has 3 key components: job or things that user wants to accomplish,  pain or any obstacle that hinder user from accomplishing her job,  and gain or outcome or benefit that user want after accomplished her job and this may include emotional gain. So whenever we're writing requirements in PRD or  JIRA  ticket, do remember to also write the gains and pains , even before writing the  jobs  or acceptance criteria. This will help the product team to understand what exactly our customer goals and pain points before creating or thinking the solution. “Successful problem solving re...

Watermark using Canvas & Javascript

Image
Just found out that we can actually add a watermark to any image using HTML <canvas>   & Javascript.  This should be a piece of cake if you're familiar with HTML and Javascript So how do we do it? 1st create a  <canvas>  element in your HTML file <canvas id="myCanvas">Your browser doesn't support canvas</canvas> Then use Javascript to load image into the canvas var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); After that you can add the watermark using this script ctx.font = "30px Arial"; ctx.fillText("watermark", 10, 10); Now if you check browser, you'll find the image is watermarked by a text that we put in the Javascript code Result References https://www.w3schools.com/graphics/canvas_images.asp https://www.w3schools.com/graphics/canvas_text.asp