DEV Community: Bervianto Leo Pratama

Leveraging IBM Bob for Migrating App Runner to ECS Express Mode by Using Git Diff or Final State

Bervianto Leo Pratama — Tue, 28 Jul 2026 14:30:07 +0000

Background

Based on this documentation, I need to migrate my existing services to ECS Express Mode. However, I was not sure I was using AI effectively to assist with the migration process. As shown in my previous post, I tried one of my more "complex" applications as the first migration. I hope the diff and lessons learned from that effort will help streamline subsequent migrations by leveraging the git diff or the "final state" of the migration.

Migrating the "Same" CDK Code

I attempted the second migration on my CDK code, which uses the same language (TypeScript). I started with the git diff on the first run. Unfortunately, it still tried to rely on older knowledge and crafted detailed ECS service configurations. On the positive side, I did not need to explain or re-prompt regarding the CI/CD setup, as it was already captured in the diff.

In the second chat, I tried to guide IBM Bob to use a specific class. IBM Bob did a great job exploring the library. However, it missed the IAM role, so I asked IBM Bob to investigate it. Surprisingly, IBM Bob was able to understand how the role works without much guidance.

Some Samples

First/initial chat

Second chat

Role chat

Lessons from the Second Migration

I appreciate how IBM Bob can quickly migrate existing services easily and seamlessly. Since it was the same language, I expected the migration to be straightforward, and it largely was.

Costs

It took 4.6 Bob coins.

Migrating Another Language

Migrating CDK in Python

I was genuinely impressed by how IBM Bob tried to follow the rules I set. I asked it to use the diff as a reference for the migration; however, I forgot that the original code was in TypeScript while my target was Python. IBM Bob attempted to create a new script, which makes sense since the migration process should not delete or remove existing code and infrastructure directly.

That was my fault for not being clear enough in the prompt. After I clarified that we should stick with Python, IBM Bob naturally fell back on its previous knowledge, which was the non-express mode approach.

I then asked IBM Bob to explore the CDK library before proceeding. It got close to the goal, but I noticed a slight hallucination — it was not using the correct class. IBM Bob then tried to self-verify by generating a simple CDK script, which was a good approach.

Once the code migration was complete and I kicked off the deployment, I encountered a failure during the first infrastructure initialization due to an outdated config. It turned out I needed to update the config before validating IBM Bob's output. Thankfully, IBM Bob also helped me review both the config and the application to resolve the issue.

Some Chats

Guiding IBM Bob back to the goal

Hallucination

Costs

It took 12.88 Bob coins. (Higher due to the additional help with reviewing the application and config.)

Migrating My Last Service (in C#)

After the misstep with Python, I was more deliberate this time — I explicitly prompted IBM Bob to keep the C# language and ensure the CI/CD pipeline remained consistent. Even so, I noticed that IBM Bob did not explore the CDK before starting the migration. Once it realized the language was different from the reference, it stopped exploring on its own. I had to prompt it again to continue the CDK exploration.

The first attempt failed because the task execution role was incorrect. After sharing the error in the chat, IBM Bob was able to fix it. I consider this acceptable, given that IBM Bob had to reason across different programming languages as well as the AWS infrastructure specifics.

Some Chats

Summary

Costs

It took approximately 4.69–6.06 Bob coins.

List of Repositories

Here are the repositories that were migrated (mostly) with IBM Bob.

Thank you

Thank you for reading. Have a great day!

Getting Started with IBM Bob - Migrating Existing AWS Infrastructure

Bervianto Leo Pratama — Sat, 18 Jul 2026 05:48:48 +0000

Motivation

Hello, all. This is my first time exploring IBM Bob. I was using the Trial Version. Just want to know more about IBM Bob. I have some existing AWS Infrastructure and quite simple enough to be migrated. I asked IBM Bob to migrate AWS App Runner to Amazon ECS Express mode.

As AWS App Runner has given notice to me about the end of support, I haven't thought to migrate yet. However, after some thought, as I may reuse some existing applications, I changed my mind.

Reading the migration guide, it was quite a lot of information for my simple application. I barely use AWS App Runner, AWS Secrets Manager, and AWS CDK. As I haven't used a custom domain yet, it should be straightforward.

Introduction

What's IBM Bob?

If you don't know IBM Bob. This is the short introduction from the documentation.

IBM Bob is an AI SDLC (Software Development Lifecycle) partner that augments your existing workflows and helps you work confidently with real codebases.

I would say, in short, it's an IDE that integrates with AI "natively". There are some specialized modes: Agent mode, Ask mode, and Plan mode. In this article, it heavily mentions the Plan mode, but it also involves Agent mode "in the background".

What's AWS App Runner?

You may have a look at this short introduction of AWS App Runner.

AWS App Runner builds and deploys web applications automatically, load balances traffic with encryption, scales to meet your traffic needs, and allows for the configuration of how services are accessed and communicate with other AWS applications in a private Amazon VPC.

In short, you can deploy your web application or API, especially when you have containerised the application; it will simply handle the infrastructure, and you only need to deploy your container image.

What's Amazon ECS Express mode?

Here is the short introduction of Amazon ECS Express Mode. In simple words, it's the replacement of AWS App Runner. But I don't want to use that term more widely. Let's learn more about Amazon ECS Express Mode later.

It's really helpful to configure our infrastructure under Amazon ECS Express Mode, especially as a developer who wants to experiment with AWS. I was trying to configure Amazon ECS from scratch, and it took me a long time to successfully deploy a simple application. Which is stopping me from using it, and decide to use App Runner instead. But now we have Amazon ECS Express Mode, let's migrate it!

What's AWS CDK?

Let's see in short about AWS CDK.

Define your cloud application resources using familiar programming languages

Behind AWS CDK, it will create the AWS CloudFormation; however, I can programmatically craft the infrastrucure use programing language such as
TypeScript, JavaScript, Python, Java, C#, and Go.

Starting from planning

I didn't like migrating the existing infrastructure directly, even though it's just a development environment. As a context, I want to migrate my development/experiment environment. Basically, my strategy is to initiate the ECS Express and keep the AWS App Runner.

Vibe Coding - The First Prompt for Planning

I asked Bob to prepare the plan and prompt the very first prompt.

There are some points that I love about how IBM Bob handled the plan.

IBM Bob can clearly understand the existing infrastructure by quickly reading the application code and the infrastructure code.
IBM Bob can advise on the best way to migrate, even though I didn't ask clearly before.

However, it's assuming that I didn't want to. I would like Amazon ECS Express, which is the simple way to handle ECS without handling much of the infrastructure. As this is quite new knowledge, IBM Bob assumes I want a standard/regular Amazon ECS with Fargate. So the first attempt is partially good. Here is the first commit/attemp.

Some Interactions Screenshots

Question prompt

Finished the plan with IBM Bob's assumption.

Driving the IBM Bob to clearly understand the new knowledge

IBM Bob can't stop surprising me. It's able to understand what I want by providing an article that explains how to use Amazon ECS Express in more detail. Even on the second attempt, I was providing the migration guide, and IBM Bob didn't understand how to migrate into Amazon ECS Express.

After driving Bob to explore CfnExpressGatewayService, surprisingly, IBM Bob provided me with a quick fix after the first and second attempts. Here is the solid result.

Some Screenshots

Resolving after driving to new knowledge

Lesson Learned

There was a great experience trying IBM Bob. After the last attempt, I wasn't aware if my application was still broken. I didn't notice if the application wasn't aware of the Environment Variable. I'm not sure since when, however, after I tried to deploy. It kept failing. I was afraid it was the infra config; however, it was not. After more debugging on my local, I noticed the environment variable was not detected. So, I fixed the application and reverted the infra config to the IBM Bob suggested at first glance. Voilà, it's now running perfectly!

Thank you

Thank you for reading. It was really quick for the fix/migration, but not for the debugging, as I didn't have enough time to execute or check in my local environment lately. After having some time to check on the application, I got the answer as to why the deployment was failing after the infra migration.

This is just a little story, not the deep knowledge of how to migrate it step by step. As my prompt's result can be different for you, I don't want to rely on that. However, I will rely on how you should drive the AI to give the best context for the migration process. I hope it helps.

Cheers!

Migration and Modernisation with Kiro CLI

Bervianto Leo Pratama — Sat, 04 Apr 2026 05:45:49 +0000

Background

Once upon a time, there was a developer who needed to keep updating the dependencies of each tool/product/software. There is a Dependabot that is still helpful for updating minor versions. However, it will need a manual update/migration whenever a major version comes. Migrating to a major version is frustrating for me if I need to update it in bulk. Updating only one app is pretty fine, but how about multiple apps? I believe we will stop doing it.

AI Era

The AI (Artificial Intelligence) era has come. Much automation can be achieved by AI. I have a good belief that I can migrate much more easily whenever I use AI. Not like the old age, which needs many manual changes, especially the breaking changes!

Migration as Vibes

I'm starting the migration as vibes. So, I only put a simple prompt to know how the AI will work. In this case, I tested Kiro CLI as an example.

I have many legacy codes which still being used with Vue CLI. Vue CLI is in Maintenance Mode, so many tools are deprecated and cannot adapt to the newer version of Typescript, Node, etc. It was frustrating while trying to migrate it to Vite. Many dependencies need to be changed.

Surprisingly, I am amazed by the result of the simple prompt. It was a success to migrate a bunch of my repos, and at least it produced a basic migration.

Example simple prompt:

Migrate to Vite from Vue CLI.

Well, that simple prompt is not recommended. :)

Lesson Learned

I learned how to create a good prompt. I tried a basic/simple prompt in multiple repositories. The result? I need to change some code manually multiple times. I'm using a library that will raise an error by Vite, I "can" suppress the error as a warning, but I forgot to apply it in multiple projects. So I need to apply it multiple times. I should add more specific extra instructions for migration so I don't need to update it manually frequently.

The list of repo

Migrating to Vite

Related to Upgrading version

https://github.com/bervProject/belitung-information-center (Upgrading Angular, etc.)
https://github.com/bervProject/my-personal-web-angular (Upgrading Angular)

Future

In the future, I will try to automate this and use a correct prompt. So, it should be automated; I only need to review and approve. :) Let's see.

Thank you for reading. I hope you get an insight.

re:Cap 2025 by AWS User Group Jakarta

Bervianto Leo Pratama — Sat, 31 Jan 2026 12:12:26 +0000

TLDR

AWS User Group Jakarta hosted re:Cap 2025. It was a great opportunity to speak at re:Cap 2025. For more information, you can visit,

My Session

I was talking about some announcements that might be interested for developers. You may get my slide.

The focus is more on Lambda and AWS Transform. It's quite inline with migration and modernization.

Migration and modernization are not simple tasks. That's why AWS Transform may help some organizations to migrate and modernise. However, AWS Transform may need to consider the security concern.

I'm quite excited about Lambda Durable Function. It's quite helpful to extend the decision moving app to Lambda. Whenever configuring "complex" infrastructure, it may be hard to troubleshoot and migrate. Using a Lambda Durable Function may be a better solution for some cases.

Some Photos from the Organizer

Summary

If you are interested in another topic, feel free to reach out to the speakers. It's really great to attend re:cap 2025 by AWS UG Jakarta.

Importing my AWS IAM Role to Terraform using Terraform Search

Bervianto Leo Pratama — Fri, 17 Oct 2025 08:24:20 +0000

Cover image is generated by AI

Motivation

A long time ago... I want to manage my IAM Role with Terraform. But, I'm quite lazy for writing it manually... Especially for my existing IAM Role. I heard about Terraform Search, which helps me import existing resources to write the resource configuration! Wow!

Imagine you write the query something like this.

list aws_iam_role dev {
  provider = aws
}

Run this command.

terraform query -generate-config-out=generated.tf

Boom! You got a generated resource file with the import blocks.

Easy, right?

How did I do?

Prerequisite

Terraform 1.14.x (still beta right now...)

If you want to read more, please visit here.

Keep in mind. Terraform Search supports are based on the Terraform provider.

Run it locally

Okay, you need to do it locally because HCP won't have the beta right now, except that Terraform 1.14 has been released. So, basically, these are my steps. In this case, I want to manage the state in HCP Terraform.

Install Terraform 1.14.x in Local
Ensure you have the AWS Credentials in your local.
Configure a workspace in HCP Terraform. Ensure you have the AWS Credentials. But temporarily set it as local execution.
Write the main.tf to configure the provider, in this case AWS provider.
Write the .tfquery.hcl file (look above section).
Let's init first. terraform init.
Run the query command terraform query -generate-config-out=generated.tf.
Copy only resources that I want to manage.
Run terraform plan just to ensure it will import!
Run terraform apply if I'm sure of the configuration.
Now my IAM Roles are managed by HCP Terraform!
You may now change the execution to HCP Terraform (if you want to run it there).

Notes:

It may expose your AWS Account ID and some information. Before you commit those codes, you may need to extract some information to create some variables.

Result

You can visit my repo here.

bervProject / AWSSecurityAsACode

AWS Security as a Code for BervProjects

My First AWS Security as Code

Generate the resources import

terraform query -generate-config-out=generated.tf

./generate.sh

LICENSE

MIT

View on GitHub

Thank you

Thank you for reading!

If you have any feedback, feel free to comment here.

Enhancing developer experience with Vagrant

Bervianto Leo Pratama — Fri, 26 Sep 2025 05:21:15 +0000

This is a part of my HashiConf 2025 talks.

Resources

Original Slides

Background

As a developer, it's quite common to get an issue which not replicable. It's either an undetailed or an assumption replication of steps, a configuration issue, an environment issue, etc. I believe some developers face issues when in production it doesn't work, but in their local was working. There is a common slogan, "it's work in my machine." So, why don't we bring our machine then?

Motivation

We need to kill the configuration/environment issue. There is a great tool called Vagrant. I want to emphasize why Vagrant? Because it promises consistency. When in my machine works, of course, in yours, and should be productions!

Challenges

When I developed some functionality, there was an issue that only happened in production. Either because different operating system, a different configuration, etc. Of course, when we use Vagrant, we are able to use the same operating system.
How about the configuration? Yes, we can ensure the same config as production. It doesn't mean you will have the same architecture, but at least you have the prototype.

Trade Off

Every choice will have a trade-off. For example, we will face the power of the host machine. Not all organizations will choose a very fancy specification. This will become a bottleneck. When they don't want to switch into the same operating system, but don't want to spend more money on providing more powerful development devices.

Well, let's talk about why we use Docker directly. Of course, I will say yes, if...

The operating system is the same as our target server.
Having a mechanism to have the same configuration.

I faced some organizations having their developers which different tools, different operating systems, which is not appropriate. Okay, for example, I have a Windows operating system, but I want to run Docker. Oh well, we may say, oh, that's better. It's more reasonable now, lighter.

Well, I was part of modernization and or refactoring from .NET Framework to .NET Core, which supports more operating systems. Back then, I faced a lot of problems when we started containerizing it to become a Linux container. Either it's only running in my machine, or just environment issues.

For example, oh, I can run it in my local environment because I have some proper configurations. But the production doesn't know it, which is not a good one. Then, how about talking about the changes to the operation team regarding changes. Well, how long will it take? They have some BAU (Business As Usual). Some requests may not be taken into account.

Oh no, so what will we do? Imagine...

The developer can make some changes in their Vagrantfile.
We have set the automatic system to detect the changes.
If we get the changes, we start to sync them with production.
Yeay! We win it!

But, but, ... I can't say the current state of Vagrant is developer-friendly. It's a little bit operations team part. I would say it's a shared responsibility between the developer and operations. Well, at least it's a code, developers should learn it (sorry).

Summary

The providers may not matter. I select VirtualBox, because most of us are more familiar with it, but please select any providers that fit with your compliance. Maybe the other VM Virtualization will work. Please take note, why we don't choose Docker as a provider, it's a bit complex (oh, I mean more confusing) than the other. Because it will run a VM whenever it's not supporting Linux containerization.
Choose any provisioner that meets your requirements. I love how Docker provisioner works. Even sometimes I still need shell. I really hope the provisioner will grow up. Why? So we can easily get the high-level of Vagrantfile (without AI, of course, sorry AI).

I understand we can improve our work with AI, but please understand the fundamentals. It will really help instead of blindly using AI, and (boom), you don't know what AI said.

Finally, feel free to give any feedback. Any feedback is welcome, even if you do not agree with this article/supplement. I just want to share my perspective. Every team/organization may have its own challenges, which is why sharing is caring. I really love to learn how they tackle their challenges. It's really inspiring!

Pengalaman Pertama menghadiri AWS Summit Jakarta 2025 sebagai Speaker

Bervianto Leo Pratama — Sat, 30 Aug 2025 04:20:31 +0000

Cover blog di-generate oleh AI

Pembukaan

Halo, semuanya!

Ini merupakan tulisan pertama saya dalam bahasa Indonesia di sini. Saya sengaja menuliskannya dalam Bahasa Indonesia karena acara AWS Summit Jakarta 2025 ini diadakan di Indonesia. Acaranya diadakan tanggal 7 Agustus 2025.

Saya sangat senang bertemu dengan rekan-rekan AWS Community Builder. Bertemu juga dengan rekan-rekan AWS User Group Jakarta. Apalagi waktu itu akhirnya bertemu muka dengan Shafraz Rahim (AWS - Senior Program Manager - Community, APJC) dan Jason Dunn (AWS CB Program Manager), yang biasanya bertemu di media sosial saja. :D

Saya waktu itu berkesempatan untuk membicarakan topik Amazon Q Developer dengan kasus modernisasi.

Foto-Foto

Berikut foto-fotonya. Hehehe...

Ini waktu saya berbicara

Foto Grup Developer Lounge

Ini makan malam setelah semuanya selesai.

Tambahan

Berikut ini slide-deck yang saya gunakan.

Berikut ini juga video-nya.

Modernisasi

Upgrade

Terima kasih

Terima kasih untuk teman-teman yang sudah hadir juga!

Gambar "Thank you" di-generate oleh AI

Continuing ShortenUrl with Redis 8

Bervianto Leo Pratama — Sat, 09 Aug 2025 06:17:20 +0000

This is a submission for the Redis AI Challenge: Beyond the Cache.

What I Built

I was building ShortenUrl, which utilizes Redis Stack. Now, I'll try to utilize Redis 8 and add some features, for example, statistics.

Bervianto Leo Pratama

Aug 28 '22

Simple Shorten URL using Redis and Auth0

#redishackathon #redis #dotnet

1 min read

Demo

New Feature - Stats

How I Used Redis 8

Details of usage, mostly in README.ME. I'll explain what the highlight features.

As a primary database, I'm using JSON for storing in Redis. It's speedy!
Using aggregate/order in Redis.

Asking Amazon Q for fixing the Bug Regarding Uploading an Attachment using Amazon SES

Bervianto Leo Pratama — Tue, 06 May 2025 14:43:45 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

Preface

If you have read my previous post, I got the bug when uploading the attachment. Since I would like to crack the bug. Let's ask Amazon Q!

What I Built

Just a simple prompt for fixing the code.

Prompt:

My AWS Lambda function has a bug when uploading the attachment using ses service, Please examine

Demo

Summary of the changes

The commit made by Amazon Q
"Fixed" Email

Okay, but it's not really fixed my code. However, it makes me think there is some documentation or news regarding the limit. I found it here. So, I decided to ask Amazon Q to increase the attachment limit.

Of course, the issue still exists; it seems the PDF has been corrupted when sending the email. I've checked the size when downloading, it has the correct size. But the attached file size was doubled. So, I decided to ask Amazon Q to compress it.

Very unfortunate, I can't open the zip file! So, I think the bug occurs when sending the base64 data, which introduces a corrupted file.

I hope it will be fixed when I identify the SDK with Amazon Q later. But not now, sorry.

Code Repository

bervProject / MergePDFOnline

Merge PDF Online

MergePDFOnline

Merge PDF Online

LICENSE

    Copyright (C) 2022 Bervianto Leo Pratama

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

View on GitHub

How I Used Amazon Q Developer

Writing a prompt with specific context.

Sadly, it's not fixed now. I hope it will, later.

Updates:

Voila! I fixed it just by providing ContentTransferEncoding = "BASE64". The SDK always converts my file to base64, but the encoding was being set to SEVEN_BIT. Of course, it's not matched encoding!

Amazon Q: Assisting with My Monthly Maintenance

Bervianto Leo Pratama — Tue, 06 May 2025 12:41:47 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

What I Built

Each month, I had various devices that were not prepared to update the scripts for updating the applications and systems. Searching for the appropriate commands may take time. I remembered the tasks that I should do, but unfortunately forgot the scripts or commands. Let's ask Amazon Q for help to prepare the scripts.

Demo

Using Amazon Q Chat

First Task

Updating essential apps, for example, AWS CLI.

First Simple Prompt

First Simple Prompt Verification

Second Task

Cleaning caches

Second Simple Prompt

Second Simple Prompt Verification

Third Task

Back up the scripts into a directory and/or a repository.

Moving the scripts

Adding the context and creating a README

Well, I can also create the repository on GitHub without leaving the chat! Awesome!

Example prompt:

Create the repository in GitHub using the GitHub CLI

Note:

I've set up the CLI before. So it will be done seamlessly.

Code Repository

berviantoleo / maintenance-scripts

System Maintenance Scripts

This directory contains scripts for various system maintenance tasks, primarily focused on package manager cache cleanup and AWS CLI updates.

Available Scripts

Package Manager Cache Cleanup

Script: clear-package-caches.sh

This script cleans the caches for multiple package managers:

npm: Clears the npm cache using npm cache clean --force
apt: Cleans the apt cache using sudo apt-get clean
NuGet: Clears NuGet caches using either nuget locals all -clear or dotnet nuget locals all --clear
pip: Purges the pip cache using pip cache purge or pip3 cache purge

The script checks for the presence of each package manager before attempting to clear its cache, so it's safe to run even if some package managers aren't installed.

Usage:

./clear-package-caches.sh

AWS CLI Update Scripts

AWS CLI Version 2 Update

Script: update-aws-cli-v2.sh

Updates AWS CLI version 2 (recommended version) by:

Downloading the latest installer from AWS
Extracting and running the update process
Cleaning…

View on GitHub

How I Used Amazon Q Developer

I write a concise prompt for my recurring tasks. Detailed usage, explained in each section of the Demo.

Tips:

Write the prompt as concisely as you can.
Adding context will be helpful.

Migrating from Amazon Simple Email Service API V1 to V2

Bervianto Leo Pratama — Sun, 27 Apr 2025 14:26:18 +0000

I'm interested in the new feature that allows me to send attachments in my email. Previously, my flow sent the temporary public link to see the result of my merged PDF. However, it may not be the case!

So, I'll try to move to the V2 API.

Reference

AWS Documentation

Installing the new SDK and removing the previous SDK

I changed the SDK dependency from V1 to V2.

Reference:

-    <PackageReference Include="AWSSDK.SimpleEmail" Version="3.7.402.82" />
+    <PackageReference Include="AWSSDK.SimpleEmailV2" Version="3.7.410.12" />

Changing the code

Previously, I had a feature flag for using HTML format. However, I will remove it and use the HTML format as the default. You may refer to my previous session regarding the feature flag presentation. I haven't written it yet. Please let me know if you want me to share it. Previously limited to AWS Commnity Indonesia event.

Bervianto Leo Pratama's Speaker Profile @ Sessionize

Passionate Software Engineer who loves to learn DevOps, Microservices, and Cloud Computing...

sessionize.com

Let's focus on the required changes. I've added some improvements to my repository for readability.

Updating the reference from V1 to V2.

- using Amazon.SimpleEmail;
+ using Amazon.SimpleEmailV2;
- using Amazon.SimpleEmail.Model;
+ using Amazon.SimpleEmailV2.Model;

-            services.AddAWSService<IAmazonSimpleEmailService>();
+            services.AddAWSService<IAmazonSimpleEmailServiceV2>();

-        private readonly IAmazonSimpleEmailService _amazonSimpleEmailService;

+        private readonly IAmazonSimpleEmailServiceV2 _amazonSimpleEmailService;

-            _amazonSimpleEmailService = new AmazonSimpleEmailServiceClient(region);

+            _amazonSimpleEmailService = new AmazonSimpleEmailServiceV2Client(region);

Complete changes, you may refer to these commits changes.

Examine the result

Duration: 12664.70 ms   Billed Duration: 12665 ms   Memory Size: 512 MB Max Memory Used: 322 MB Init Duration: 567.43 ms

Well, of course, there are some side effects.

First, long running duration. So, it means increase the billing! I'll evaluate this change; if needed, I will move the operation (sending the attachment) to another service.
Second, the memory used is increasing. Well, it's expected, because I will need to download the whole PDF to my Lambda. Of course, I may need to move the workload or reuse the merged file. So, it's not only uploading to the S3, but also using the file for the attachment. Currently, I use a bad approach, which downloads the uploaded file into S3, which increases the network call. The better approach is to reopen the file and upload it again.

However, I'll still evaluate the current state. When necessary, I'll do more enhancements to my existing environment. So, at least, I will need to reduce the workload time.

Note:

Sadly, my attachment (the PDF) gives multiple blank pages. Not sure of the root cause, having some cases. I checked the result in the S3 bucket itself. I can open it as expected. Either the wrong download process or the wrong encoding process. I noticed the file size is quite different from the original file size.

I'll try to find out later. :(

Mengambil Data Ramalan Cuaca Hari Ini dengan API dari Open Weather

Bervianto Leo Pratama — Tue, 15 Apr 2025 13:40:26 +0000

Serta Mengambil Data Lokasi dari Geolocation API pada Browser

Persyaratan — Sebelum Memulai

API Key Open Weather. Mohon dibuat dahulu akunnya ya, nanti akan mendapatkan API Key-nya.
Browser/Peramban. Kalau gak punya nanti buka lamannya menggunakan apa dong? :)
IDE. Boleh apapun, yang penting bisa tulis kodenya. Notepad juga boleh.
Node. Versi 18/20 aja ya, kita coba pakai Vite + React kali ini.
Sudah. Hehe…

Mempersiapkan Proyek

Nah, kita perlu siapin dulu nih proyeknya.

npm create vite@latest

Jalankan perintah di atas.
Isi nama proyek.
Pilih “Vite + React + Typescript” atau sejenisnya, biar sama nih.
Masuk ke foldernya, lalu jangan lupa “ npm install ” ya.
Nah, ada tambahan, kita mau pakai axios. Jadi, ada tambahan perintah “npm install axios” , inget tidak pakai tanda petik.
Kalau mau jalanin aplikasinya, “ npm run dev ”.

Eksplorasi dan Mengubah Kode

Nah, udah siap nih untuk ubah-ubah kodenya. Pelan-pelan aja ya.

Kita sekarang mempersiapkan kode untuk ambil lokasi kita dulu aja deh ya.

Geolocation API

Tambahin kode ini dulu di berkas App.tsx ya. Tulisnya sebelum function App().

interface Location {
  latitude: number;
  longitude: number;
}

function App() {
  /** sengaja dipotong */
}

Nah, setelah itu kita perlu siapin state-nya dulu, state-nya akan kita pakai untuk memanggil API Open Weather ya.

function App() {
   const [userLocation, setUserLocation] = useState<Location | null>(null);

   /** sengaja dipotong lagi */
}

Udah siap aja nih. Yuk, kita sekarang buat fungsi yang akan memanggil Geolocation API dari browser ya.

function App() {   
   const [userLocation, setUserLocation] = useState<Location | null>(null);

   const getUserLocation = () => {
    // if geolocation is supported by the users browser
    if (navigator.geolocation) {
      // get the current users location
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // save the geolocation coordinates in two variables
          const { latitude, longitude } = position.coords;
          // update the value of userlocation variable
          setUserLocation({ latitude, longitude });
        },
        // if there was an error getting the users location
        (error) => {
          console.error('Error getting user location:', error);
        }
      );
    }
    // if geolocation is not supported by the users browser
    else {
      console.error('Geolocation is not supported by this browser.');
    }
  };
  /** sengaja dipotong lagi nih */
}

Oke, seperti ada yang kurang kalau gak ada yang menampilkan nilainya. Jadi kita sekarang bermain di bagian rendernya nih.

function App() {
  /** sengaja dipotong, tapi ini kode tadi ya... */
  return (
    <>
      <div>
        <h1>Geolocation App</h1>
        {/* create a button that is mapped to the function which retrieves the users location */}
        <button onClick={getUserLocation}>Get User Location</button>
        {/* if the user location variable has a value, print the users location */}
        {userLocation && (
          <div>
            <h2>User Location</h2>
            <p>Latitude: {userLocation.latitude}</p>
            <p>Longitude: {userLocation.longitude}</p>
          </div>
        )}
      </div>
    </>
  )
}

Cobain deh di browser. Kamu harusnya udah bisa menampilkan nilainya nih. Ini contoh aja ya.

Contoh Lat & Long

Wah, maaf ya disensor. Nanti ketahuan lokasinya. Hehe…

Memanggil Open Weather API menggunakan Axios

Sekarang bagian memanggil API Open Weather dengan axios nih.

Siapin dulu aja nilai yang ingin disimpan, kalau saya simpan cuaca sekarang aja deh. Oh iya, ini ada tambahan loading, ya biar ala-ala ada prosesnya.

function App() {
  const [userLocation, setUserLocation] = useState<Location | null>(null);
  const [currentWeather, setCurrentWeather] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  /** sengaja dipotong lagi dan lagi, tapi ini kode tadi ya... */
}

Nah, kita tulis fungsi untuk mengambil datanya.

function App() {

  /** sengaja dipotong lagi dan lagi, tapi ini kode tadi ya... */
  const getWeather = () => {
    setLoading(true);
    setTimeout(() => {
      if (!userLocation) {
        setLoading(false);
        return;
      };
      const apiKey = import.meta.env.VITE_API_KEY;

      axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${userLocation.latitude}&lon=${userLocation.longitude}&appid=${apiKey}`)
        .then((result) => {
          setCurrentWeather(result.data.weather[0].main);
        }).catch((err: Error) => {
          console.error(err);
        }).finally(() => {
          setLoading(false);
        })

    }, 1000);
  };
}

Sabar, ini masih belum loh. Sekarang kita siapin tombol untuk memuat cuacanya.

function App() {
  return (
    <>
      <div>
        <h1>Geolocation App</h1>
        {/* create a button that is mapped to the function which retrieves the users location */}
        <button onClick={getUserLocation}>Get User Location</button>
        {/* if the user location variable has a value, print the users location */}
        {userLocation && (
          <div>
            <h2>User Location</h2>
            <p>Latitude: {userLocation.latitude}</p>
            <p>Longitude: {userLocation.longitude}</p>
            <button onClick={getWeather}>Get Current Weather</button>
            {loading && (<div className='loader'></div>)}
            {currentWeather && (<p>Current weather: {currentWeather}</p>)}
          </div>
        )}
      </div>
    </>
  )
}

Eh iya, tadi belum memberikan css yang digunakan untuk “loader” ya. Ini contoh aja ya. Bebas aja mau pakai yang mana. Ini bisa kamu tambahkan di App.css ya.

/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding-bottom: 8px;
  background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
  animation: l2 2s linear infinite;
}
.loader:before {
  content:"Loading..."
}
@keyframes l2 {to{background-size: 100% 3px}}

Ashiap, sekarang mau coba? Belum. Jangan lupa tambahkan environment variable-nya. Bisa membuat file .env lalu masukkan nilai API Key-nya.

VITE_API_KEY=

Isi dengan key kamu ya.

Terus, terus? Yuk cobain lagi.

Cuaca Sekarang

Ini cuacaku. Bagiamana cuaca kamu?

Aplikasinya?

Saya sematkan di sini ya.

GitHub - berviantoleo/open-weather-exploration: Open Weather Example

Penutup

Terima kasih ya sudah membaca. Salam sejathera untuk kita semua. Semoga bermanfaat. Jika ada tanggapan, jangan sungkan. *Chheeeersss!

Photo by Andre Hunter on Unsplash