Having fully developed the Telegram stock analysis bot yesterday, I leveraged its entire data collection logic to swiftly design and deploy "Stock Spectrum," a secure stock analysis dashboard web app protected by PIN access, within just one day. Despite encountering two unforeseen hurdles where well-thought-out designs faltered against actual API responses, the project adhered to schedule.
Core Refactoring — Aligning Bots and Web Apps to Share Functions
Initially, my first task involved disentangling the intertwined data collection and transmission logic of the Telegram bot into a pure function named analyzeStock_. This restructuring aimed to ensure the function returns only the data object, eliminating side effects like Telegram transmissions or sheet logging, facilitating seamless integration into future web applications that would call this function directly. Additionally, I integrated newly scraped metrics such as dividend yield, foreign ownership ratio, and industry PER by accurately parsing the structure of Naver pages using regular expressions.
2. Web Application Access Control Design and Initial Development Struggles
Initially, I designed a method to restrict web app access to authorized users via "owner approval via a Telegram inline button after logging in with a Google account." I had even written the code for this approach. However, realizing late on that verification without direct login attempts from other accounts was impossible, I opted for a simpler solution using shared links combined with PIN verification instead, given the known limitation where Google returns empty values for visitor emails across personal Gmail accounts, rendering initial validation unreliable.
3. Initial Web App Deployment — Candle Chart and 4-Tab Dashboard
Developed a new GET endpoint web application integrated with a PIN gate, successfully invoked the KIS Investor Trading Trend and Overseas Stock API to finalize field names and implemented supply-demand trend calculation logic. Subsequently, a complete UI overhaul was conducted, incorporating an interactive candlestick chart (MA5/20/60), a dashboard with four tabs for financials, technology, psychology, and macro perspectives, auto-suggest functionality for stock names, and added features including a 24-month dividend history tracker, responsive design for PC/mobile use, and seamless transitions via Telegram bots directly to the web app via deep links for the initial release.
Redesigning Benchmark Mapping — The Second Iteration
Initially, the U.S. benchmark matched stocks based on whether industry keywords were present in their names, but this method failed for most stocks like Samsung Electronics and SK Hynix, which lacked explicit industry names in their titles. Recognizing this structural limitation, the approach was revised by extracting industry codes seamlessly from Naver’s “Similar Industry Comparison” section without additional requests during each fetch operation. This enabled a comprehensive survey of 79 industries, mapping 78 of them to corresponding U.S. sector ETFs. Due to impractical API call volumes for full inclusion in S&P 500 and Nasdaq 100 indices, QQQ and SPY ETFs were substituted, alongside SPDR 11 sector ETFs and specialized ETFs focusing on semiconductors, batteries, and defense sectors, confirmed individually through actual KIS responses. Additionally, limitations in accessing Nasdaq and S&P futures data via free API keys were identified during this process.
5. Refining UX and Addressing Bugs
Following this, I sequentially rolled out refined features including optimized candle chart number formatting, highlighted markers for top 5 trading volume days, display of the latest 3 target price reports, sentiment analysis importance badges, and ensured seamless delivery of query parameters by shortening the Telegram bot deep link using TinyURL and confirming functionality with curl.
Trouble Shooting
| Symptoms | Cause | Solution method |
|---|---|---|
| Designed and implemented web app access control using "Google account + Telegram approval" but unable to conduct actual user validation. | There is a known limitation where Google returns empty values for visitor emails between individual Gmail accounts. | Redesigned using shared link + PIN method and removed related codes. |
| The US benchmark for companies like Samsung Electronics always showed "No Match | Matching was based on whether sector keywords were included in the stock names, but most stocks lacked sector names in their titles. | Parsed Naver industry codes accurately without additional requests. |
| An "unknown error" occurred only in a specific stock (Samsung SDI). | Missing values turning into NaN during Number() conversion silently disrupted google.script.run serialization. | Implemented a recursive sanitize function to handle NaN values by converting them to null, and surfaced server exceptions with user-friendly messages. |
| There was a noticeable delay in the automatic dropdown appearance for stock names. | Making repeated round trips to the server via google.script.run for each key input. | After PIN passage, loaded entire index once; now clients filter post-load. |
Reflections / Next Steps
In this session, the recurring pattern was singular: rather than initially drafting the design and then translating it into code, suspected areas were immediately validated through direct API calls and logging before finalizing field names. This approach also revealed flaws in both access control and benchmark matching mechanisms encountered midway through. For the next session, plans include expanding the industry mapping in the Benchmark sheet and integrating a historical query history interface with a comparative view feature for stocks.
Previous Post: Building a Telegram Stock Analysis Bot with Vibecoding (GAS Development Diary)
Comments
Post a Comment