DEV Community: Giovanni Laquidara

What if the TV App of the Future Isn't an App but It's a Conversation?

Giovanni Laquidara — Mon, 16 Mar 2026 19:36:21 +0000

Think about how you pick something to watch tonight. You open Netflix. You scroll. You read a synopsis. You scroll more. You check Hulu. More scrolling. You open a "what to watch" thread on Reddit. Twenty minutes later, you're still scrolling.

Now imagine this: you tell an AI agent "I'm in the mood for something like Severance but funnier," and a full streaming interface appears inline: poster cards, hero banners, horizontal rows, all inside the chat. You click a card, a detail overlay slides in with ratings and a description. You say "actually, something shorter, maybe a movie." The interface reshuffles instantly. You say "Great! Let's watch it!" A video player starts.

The Streaming UIs

Every major streaming platform ships essentially the same product. A horizontal-scroll grid organized by algorithmic rows. "Because You Watched X." "Trending Now." "Continue Watching." The UI paradigm hasn't changed in a decade.

The problem isn't the catalog or the recommendations. It's the input mechanism. A grid forces you to browse. You scan thumbnails, read titles, maybe click one to read a synopsis, back out, keep scanning. The cognitive load is on the user. You have to translate a vague feeling ("something light but not stupid") into a sequence of clicks and filters that the app was never designed to understand.

Natural language flips this. "Something light but not stupid, maybe a comedy-drama, nothing longer than two hours" is a single sentence that an AI model can parse into filters and return results that match the actual intent, not just keywords. The UI still matters, you want to see posters, read descriptions, watch trailers but the main interaction becomes conversational.

MCP Apps are a way to this possible today. Here's how.

What MCP Apps Are

The Model Context Protocol (MCP) already lets AI models call external tools, fetch data, run queries, trigger actions. MCP Apps extend that with a UI layer. When a tool returns results, instead of dumping raw text, it can render a widget directly in the chat interface.

A framework that makes this practical is mcp-use from Manufact, a full-stack TypeScript SDK for building MCP servers with interactive widgets. It provides the server runtime, the React hooks for widgets, the build toolchain, and crucially, dual-protocol support: widgets built with mcp-use work across both MCP Apps clients (Claude, Goose) and ChatGPT through automatic metadata transformation. Write once, deploy everywhere.

The mental model: the AI decides what to show, the widget decides how to show it.

A tool call returns both structured data for the model to reason about and a widget with props that renders an interactive interface. mcp-use enforces a clean data separation here, the model sees only the text summary (via output), while the widget receives structured props (via structuredContent) that never inflate the model's context window. The model stays in the loop for decisions that need intelligence ("find me something similar to this movie"), while the widget handles interactions that don't need AI ("click this card to see details").

For streaming, this means the AI handles the understanding of "what you're in the mood for" and the widget handles the familiar part showing you a interactive catalog you can browse, click, and play from.

TV MCP APP

To demonstrate this experience end-to-end, I've built a working MCP App you can run locally or connect to any MCP-compatible client today. The full source is open source at github.com/giolaq/tv-mcp-app clone it, wire it to Claude Desktop or your MCP app compatibile LLM, and you have a conversational streaming interface running in minutes. The rest of this article walks through how it's built.

The Architecture: Server + Widget

The MCP App built with mcp-use has two parts:

Server (index.ts) — Uses MCPServer from mcp-use/server to define tools the AI model can call. Each tool does backend work (fetch data, filter, score) and returns responses via mcp-use's text() and widget() helpers.

Widget (resources/tv-streaming/widget.tsx) — A React component wired to the server via mcp-use's React hooks (useWidget, useCallTool, McpUseProvider from mcp-use/react). It receives props from tool calls and renders the UI. It can also call tools directly for instant interactions, or send messages back to the AI via sendFollowUpMessage.

Here's the project layout:

tv-mcp-app/
├── index.ts                          # Server: 7 tools, catalog logic
├── resources/tv-streaming/
│   └── widget.tsx                    # Widget entry point (mcp-use convention)
├── src/
│   ├── types.ts                      # Shared TypeScript interfaces
│   ├── hooks/                        # useCatalog, useKeyboardNav, useIntersectionPause
│   └── components/                   # HeroBanner, ContentRow, MovieCard, etc.
├── package.json
└── tsconfig.json

mcp-use uses a convention-based widget system. Widgets live under resources/ — either as single files (resources/weather-display.tsx) or as folders for complex UIs. This project uses the folder pattern: resources/tv-streaming/widget.tsx is the required entry point, with supporting components and hooks in src/.

This separation mirrors how the experience feels to the user. The server is the brain it understands the catalog, filters it, scores recommendations. The widget is the screen, it renders the interface the user actually interacts with. The AI model is the remote control except instead of up/down/select, it understands "something like that but scarier."

Setting Up the Server with mcp-use

The server initializes with MCPServer from mcp-use/server:

import {MCPServer, text, widget} from 'mcp-use/server';

const server = new MCPServer({
  name: 'tv-streaming',
  title: 'TV Streaming',
  version: '1.0.0',
  description:
    'A TV streaming assistant that helps users discover, filter, recommend, and play content.',
  host: process.env.HOST ?? '0.0.0.0',
  baseUrl: process.env.MCP_URL ?? `http://localhost:${port}`,
});

// At the bottom of the file:
await server.listen(port);

MCPServer handles MCP protocol negotiation, widget asset serving, session management, and the double-iframe sandbox architecture that mcp-use uses for security isolation. The baseUrl tells the server where widgets will be served from.

Defining Tools: Two Categories

This project defines 7 tools split into two categories that serve fundamentally different purposes.

Model-Visible Tools (5)

These are tools the AI model calls in response to user messages. Each one uses mcp-use's server.tool() to define a name, Zod schema, widget binding, and handler function.

For instance discover_content is the main browsing tool:

server.tool(
  {
    name: 'discover_content',
    description:
      'Browse and filter the TV streaming catalog. Opens the TV widget with filtered results.',
    schema: z.object({
      query: z
        .string()
        .optional()
        .describe('Free-text search across titles and descriptions'),
      genres: z.array(z.string()).optional().describe('Filter by genre(s)'),
      category: z.string().optional().describe('Filter by category'),
      min_rating: z
        .number()
        .min(1)
        .max(5)
        .optional()
        .describe('Minimum star rating'),
      trending_only: z
        .boolean()
        .optional()
        .describe('Only show trending titles'),
      sort_by: z.enum(['rating', 'year', 'title']).optional(),
      limit: z.number().min(1).max(30).optional(),
    }),
    widget: {
      name: 'tv-streaming',
      invoking: 'Searching catalog...',
      invoked: 'Results ready',
    },
  },
  async ({
    query,
    genres,
    category,
    min_rating,
    trending_only,
    sort_by,
    limit,
  }) => {
    const catalog = await getCatalog();
    let results = [...catalog.items];

    // Apply filters...
    if (genres?.length) {
      const genresLower = genres.map((g) => g.toLowerCase());
      results = results.filter((i) =>
        i.genres?.some((g) => genresLower.includes(g.toLowerCase())),
      );
    }
    // ... more filtering and sorting ...

    return widget({
      props: {
        viewMode: 'browse',
        catalog: JSON.stringify(filteredCatalog),
        filters: JSON.stringify(activeFilters),
      },
      output: text(summary),
    });
  },
);

Three things to note about the mcp-use patterns at work:

The schema uses Zod (which mcp-use uses throughout for validation). The AI model reads these parameter descriptions to decide which fields to fill. When a user says "show me comedies," the model maps that to { genres: ["Comedy"] }. When they say "top-rated sci-fi from the last 3 years," it maps to { genres: ["Sci-Fi"], min_rating: 4, year_from: 2023, sort_by: "rating" }.
The widget config binds the tool to a named widget ("tv-streaming", matching the folder under resources/). The invoking and invoked strings are status messages displayed to the user during tool execution.
mcp-use's widget() helper enforces data separation. The props object becomes structuredContent invisible to the model but available to the widget via useWidget().props. The output text (wrapped in mcp-use's text() helper) becomes content visible to the model for reasoning. The model sees "Found 8 comedies, here are the top 5..." as context for the conversation, while the widget receives the full filtered catalog for rendering.

All the model-visible tools follow the same pattern:

Tool	Purpose
`discover_content`	Browse/filter/search the catalog
`get_title_details`	Show detail overlay for a specific title
`play_title`	Start video playback
`get_recommendations`	Find similar titles by scoring
`get_catalog_overview`	Return catalog stats as text (no widget)

Together, these five tools cover the full user journey from "what to watch?" to watching. The AI orchestrates the flow and the user just talks.

App-Only Tools (2)

Some interactions don't need AI at all. When you click a movie poster, you want the detail overlay now not after a 2-second round-trip to a language model.

mcp-use supports this with useCallTool, a React hook that lets the widget invoke server tools directly, bypassing the model entirely:

server.tool(
  {
    name: 'widget_show_details',
    description:
      'App-only: Widget calls this when a user clicks a card to show the detail overlay.',
    schema: z.object({
      id: z.string().describe('The title ID to show details for'),
    }),
    widget: {
      name: 'tv-streaming',
      invoking: 'Loading details...',
      invoked: 'Details ready',
    },
  },
  async ({id}) => {
    const catalog = await getCatalog();
    const item = catalog.items.find((i) => i.id === id);
    return widget({
      props: {
        viewMode: 'details',
        detailItemId: item.id,
        catalog: JSON.stringify({...catalog, items: [item]}),
      },
      output: text(`Showing details for: ${item.title}`),
    });
  },
);

On the widget side, useCallTool from mcp-use/react creates a typed handle:

const showDetailsToolCall = useCallTool<{id: string}>('widget_show_details');

// When a card is clicked:
showDetailsToolCall.callTool({id: item.id}); // Instant. No AI round-trip.

The hook provides isPending, isSuccess, isError, and data states, mcp-use also auto-generates TypeScript types from your tool schemas during mcp-use dev, so you get full IntelliSense on tool names and parameters.

The Widget: React in the Chat

The widget is a React component, wrapped with mcp-use's McpUseProvider and wired to the server via hooks. It looks and feels like a native streaming app with dark theme, hero banners, horizontal scroll rows, poster cards with hover effects, a video player with custom controls. The difference is where it lives: inside an AI conversation.

The widget's design is directly inspired by my work at Amazon's react-native-multi-tv-app-sample a production-ready template for building cross-platform TV apps with React Native across Android TV, Apple TV, Fire TV, Vega OS and web. I've borrowed the same visual language: a dynamic hero header that updates based on focused content, horizontal content rows with poster cards, a detail overlay with metadata and action buttons, and a custom video player with spatial-navigation-friendly controls.

Three Interaction Patterns

The widget uses three distinct patterns for different types of user actions.

Pattern 1: App-only tool call via useCallTool (instant, no AI)

When a user clicks a movie card:

const handleSelectItem = useCallback(
  (item: CatalogItem) => {
    setSelectedItem(item);
    setView('details');
    showDetailsToolCall.callTool({id: item.id}); // No AI round-trip
  },
  [showDetailsToolCall],
);

The UI updates immediately. This is indistinguishable from clicking a card on Netflix. The callTool fires a request to the server, which returns fresh data as widget props, but the model is never involved. mcp-use routes the call directly through its JSON-RPC postMessage bridge.

Pattern 2: Follow-up message via sendFollowUpMessage (needs AI intelligence)

When a user clicks "More Like This" in the detail overlay:

const handleMoreLikeThis = useCallback(
  (item: CatalogItem) => {
    sendFollowUpMessage(
      `Show me titles similar to "${item.title}" (ID: ${item.id})`,
    );
  },
  [sendFollowUpMessage],
);

This sends a message as if the user typed it. The AI model receives it, decides to call get_recommendations, the server scores candidates, and the widget re-renders with new results. The AI stays in the loop because "similar" is a judgment call (genre overlap, tone, rating proximity) and the model can weigh these factors in context. Maybe the user previously said "nothing too dark" and the model remembers that when filtering recommendations.

Pattern 3: Pure client-side (no server at all)

Search filtering, keyboard navigation, view transitions — these happen entirely in the widget with React state:

const [searchQuery, setSearchQuery] = useState('');
const rows = useMemo(
  () => filterRows(allRows, searchQuery),
  [allRows, searchQuery],
);

No tool call needed. The data is already in the widget; just filter it locally.

Server-Side Patterns Worth Stealing

Catalog Caching with TTL

The server fetches from a remote JSON feed and caches for 5 minutes:

let cachedCatalog: Catalog | null = null;
let cacheTime = 0;
const CACHE_TTL = 5 * 60 * 1000;

async function getCatalog(): Promise<Catalog> {
  const now = Date.now();
  if (cachedCatalog && now - cacheTime < CACHE_TTL) {
    return cachedCatalog;
  }
  const res = await fetch(CATALOG_URL);
  cachedCatalog = (await res.json()) as Catalog;
  cacheTime = now;
  return cachedCatalog;
}

Every tool call goes through getCatalog(). The first call fetches; subsequent calls within 5 minutes use cache.

Running It

The project uses mcp-use's CLI for development and builds:

{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=8192' mcp-use build",
    "dev": "mcp-use dev",
    "start": "mcp-use start"
  },
  "dependencies": {
    "mcp-use": "^1.19.2-canary.2",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "zod": "4.3.5"
  }
}

npm install
npm run dev

mcp-use dev starts the server with hot reload, auto-generates TypeScript types from your tool schemas, and serves an inspector at /inspector for testing tools and widget rendering across protocols.

For public access through a tunnel:

npm run dev -- --tunnel

mcp-use creates a persistent subdomain like https://<subdomain>.local.mcp-use.run/mcp. For production, you can deploy to Manufact Cloud with npx mcp-use deploy.

To connect it to Claude Desktop or ChatGPT, add the MCP server URL to the host's config.

What This Means for Streaming

An AI agent flips the usual UX of TV Streaming apps model. The input is natural language. The output is still a rich visual interface, you don't lose the posters, the trailers, the browse-and-discover experience that makes streaming fun.

The TV app of the future probably won't be an app you open. It'll be a widget that appears when you say what you're in the mood for.

MWC 2026: What Every Developer Building AI Features Should Know

Giovanni Laquidara — Tue, 10 Mar 2026 16:39:15 +0000

I spent three days walking the halls of Fira Gran Via in Barcelona last week. I came back with sore feet and one clear takeaway:

AI assistants are the default now.

I work on Alexa+ and I spend my days thinking and prototyping about how AI ( and voice) fit into people's actual lives. How to merge context, multi-turn conversations, smart home with stuff that matters at 7am when you're making coffee. I'm building every day trying to find the optimal architecture for my agents. And what I saw in Barcelona was in a way confirming what I think: There is a convergence. Xiaomi, Samsung, LG, Lenovo, Honor, TECNO, Deutsche Telekom, Origen... they all arrived at the same vision.

The Browser Analogy

Remember when every company shipped a browser? You stopped building for Netscape, a specific browser, or even just one OS. You started building to web standards. Same thing is happening with AI assistants.

Many Booths Had an AI Assistant

And I'm not talking about chatbots or summarisation demos. These are full AI assistants with a name, a personality, and an ecosystem strategy behind them.

Xiaomi's Miloco was showing a complete solution with "Xiaomi Local Copilot". An AI for your home. It sees clutter and sends the robot vacuum. Reads your sleep state and adjusts the climate. Runs on HyperOS 3 across phones, tablets, wearables, smart home and EVs, all sharing one context model. They call the whole thing "Human x Car x Home" defining a proper distributed architecture.

Then there was LG Uplus with ixi-O. Started as a call assistant, now it does a lot more. Detects spam, catches voice phishing mid-call, lets you pull up AI while you're talking to someone. Their CEO was pretty direct on stage: "AI will evolve into an agent that understands context and finds tasks on its own." I've heard variations of this sentence from almost every assistant team I've spoken to. They all got there independently.

Samsung did something I didn't expect with Galaxy AI. Bixby is becoming a proper conversational device agent, sure, but the real move is that users can now choose between Bixby, Gemini, and Perplexity. Samsung's saying the orchestration layer matters more than which model sits behind it. 🤔

Honor went somewhere completely different with the Robot Phone. 200MP camera on a robotic arm that moves, tracks, nods, dances. A sort of physical AI assistant with spatial awareness and emotional expression (nods when agreeing, shakes its head when disagreeing and others)

Deutsche Telekom built the Magenta AI Call Assistant with ElevenLabs and what got me is that it lives in the network, not on your phone. Live translation, call summaries, mid-call Q&A, with appointment booking coming next. A telecom carrier building an AI life assistant into the network layer... didn't see that one coming.

Lenovo showed Qira, a cross-device assistant that actually remembers. You start research on a ThinkPad, pick it up on a Tab, finish on your phone, and you never repeat yourself. Unified memory across all three.

TECNO upgraded Ella so it reads and replies to WhatsApp messages, summarises YouTube videos, organises your tasks. They processed over 500M AI requests in 2025, more than half in non-English languages. They're building for emerging markets where an AI assistant might be how someone interacts with the digital world for the first time.

And Origen showed DOMIA, which kills if-this-then-that home automation and replaces it with LLM-powered multi-agent architecture. You say "It's a bit dark" and it does something different at 2pm than it does at 10pm because it actually gets the context. A few years ago this kind of ambient intelligence needed billions in R&D. Again...context.

The Silicon Is Ready Too

Qualcomm dropped the Snapdragon Wear Elite, the first wearable chip with a dedicated NPU. It runs 2B-parameter models on-device at 10 tokens/sec. Computer vision, text-to-speech, agentic AI on your wrist.

MediaTek talked about a "personal device cloud" where AI agents work together across your family's devices over Wi-Fi or 6G.

People Aren't Waiting, They're Building Their Own

The demand was there before Barcelona. We all know some examples:

OpenClaw hit 250,000 GitHub stars in 60 days. The AI agent that runs locally, connects to Claude or DeepSeek or GPT, and works through WhatsApp, Telegram, Signal. It went from a side project to a global thing so fast that Shenzhen's government started drafting policy around it.

Others like Rabbit R1 sold out at $199. The Humane AI Pin didn't make it, but people still paid for it. What all of these tell you is the same thing every MWC booth was responding to: people want an AI that does things in their life. Not another chat window.

So What Do You Do About It?

If you're building in this space, here's what I keep coming back to.

The assistant itself isn't the moat anymore. The real question becomes how deep your integration goes into someone's actual day.

Context is where the power sits in and if your integration only works with one assistant, you've got a problem. You need to think multi-assistant, and open standards are how you get there.

Open Standards You Should Learn

Four things worth your time right now:

Model Context Protocol (MCP) — Write a tool once, any compatible assistant can use it.

MCP Apps - let you build UIs that any host can render.

Agent Skills - let you package capabilities that any agent can call.

Context Hub - A way to make your AI Agent fetch curated documentation about API

Agent-to-Agent (A2A) — How agents discover and talk to each other. If you're building an agent that needs to coordinate with other agents, this is the protocol.

On-device model APIs - Apple Foundation Model Qualcomm's API. MediaTek Optimized for latency, privacy.

What to Build Next

Add an MCP server to allow AI agents to use your tools or product. Consider an MCP App if you need UI.
Publish an Agent Skill so any AI agent will have the knowledge about how to use your services, tools and workflows.
Design for context, not just commands. Expose state and history, not just actions. Think about giving the agents all the information to be able to get the right decision for the users.

Honest Reflection

Walking MWC was a good reminder that the whole industry got to the same conclusion on their own: people need AI that actually helps them run their lives.

If you're a developer, now's the time to start building for the assistant layer. Not for one assistant. For the layer underneath all of them.

I came back from MWC wanting to build faster. 🔥

Building Your Career in AI: Real Talk from the Trenches

Giovanni Laquidara — Mon, 29 Dec 2025 21:06:23 +0000

Inspired by insights from Andrew Ng and Lawrence Moroney's career advice talk

Look, the AI space is absolutely wild right now. As someone who's been deep in developer advocacy, cross-platform development and best practices in software engineering, I'm watching this transformation happen in real-time, and honestly? It's pretty exciting, but also chaotic as hell.

We're Living in the Future (Kind of)

💡 Inspired by Andrew Ng's "This is the golden age to be building"

Here's what's changed just in the last year or two:

The tools got ridiculously powerful. I'm talking about LLMs that can actually understand context, workflows that don't suck, voice AI that sounds more human, and coding assistants that legitimately boost your productivity.

Andrew's point: We now have AI building blocks that were very difficult or did not exist a year or two ago: large language models, RAG-augmented workflows, voice AI, and deep learning frameworks

I've been experimenting with everything from various AI coding assistants to custom MCP servers, and the difference from even six months ago is night and day.

Building stuff got stupid fast. I recently prototyped a video watcher persona system that generates custom advertisement videos on the fly, Multi-agent AI content generators or a "simple" vibe-coded Conclave RPG Game. The bottleneck isn't typing code anymore, it's knowing what to build and how to architect it properly.

Andrew's observation: With AI coding, the speed with which you can get software written is much faster than ever before

The Real Shift: It's About Vision, Not Just Code

💡 Directly inspired by Andrew Ng's "Product Management Bottleneck" concept

Here's something I've noticed working on React Native TV projects and AI automation pipelines: the hardest part isn't implementing features anymore. It's deciding what to build, writing clear specs, and understanding what users actually need.

Andrew's key insight: When it is increasingly easy to go from a clearly written software spec to a piece of code, then the bottleneck increasingly is deciding what to build or writing that clear spec for what you actually want to build

This changes everything. The traditional engineer-to-PM ratio is getting compressed. Teams that used to be 8 engineers to 1 PM are trending toward something closer to 1:1.

Andrew noted: "I'm seeing the engineer to PM ratio trending downward maybe even two to one or one to one... some teams I work with the proposed head counts was like 1 PM to one engineer"

Translation for us developers: If you can think like a product person and ship code, you're gold.

Andrew emphasized: "engineers that can also shape product can move really fast... the subset of engineers that learn to talk to users, get feedback, develop deep empathy for users so that they can make decisions about what to build, those engineers are the fastest moving people"

How to Actually Succeed (From Someone in the Arena)

Stay Current or Get Left Behind

💡 Andrew's advice on staying at the frontier of tools

I'm not trying to be dramatic, but tooling changes every 3-6 months in this space. I've seen it everywhere, AI coding assistants, and automation workflows. Being one generation behind means you're working twice as hard for half the output.

Andrew's experience: "If you ask me every three months what my personal favorite coding tool is, it actually probably changes definitely every six months, but quite possibly every three months. Being half a generation behind in these tools means being frankly quite a bit less productive"

Practical advice: Set aside time weekly to experiment with new tools. I literally block calendar time for this.

Build Real Shit

💡 Andrew and Lawrence's emphasis on building and showing work

Don't just play around—build things that solve actual problems. I've been working on automated video pipelines, MCP servers for app KPIs, and content automation systems. These aren't toy projects; they're solving real workflow problems.

Andrew's encouragement: "Just go and build stuff right... your opportunity to build things and I think showing them to others is greater than ever before"

Lawrence's advice: "Don't let your output be for the job you have, let your output be for the job you want"

🔥 Real-world example: Andrej Karpathy recently shared how he used Claude Code to reverse-engineer his entire Lutron home automation system in a single session. It found controllers on his network, discovered open ports, pulled PDF documentation, connected to devices, and even tested by turning his kitchen lights on and off. He's now "vibe coding" a master command center to replace the janky official app. This is what building real things looks like—taking AI tools and solving actual problems you have.

Your portfolio should show you can ship, not just prototype. Conference presentations are great (I do a ton of them), but shipping production code or tools people actually use? That's what gets attention.

Your Team Matters More Than the Logo

💡 Andrew's story about the student assigned to Java backend payment processing

I've worked with teams at various companies, and here's the truth: the brand on your business card matters less than the people you're learning from.

Andrew's warning: He told a story about a Stanford student who joined a company with a "hot AI brand" that refused to tell them which team they'd join. After signing, they were assigned to backend Java payment processing instead of AI work and left after a year of frustration

Look for:

Engineers who are genuinely curious and stay current
Teams that ship regularly, not just talk about shipping
Environments where you can experiment without getting shut down immediately

Andrew's emphasis: "One of the most strong predictors for your speed of learning and for your level of success is the people you surround yourself with... instead of working for the company with the hottest brand, sometimes if you find a really good team with really hardworking, knowledgeable, smart people trying to do good with AI, but the company logo just isn't as hot, I think that often means you actually learn faster"

Access to emerging tech and working with smart people? Invaluable. That's what moves your career forward.

Think Like a Builder, Not Just a Developer

💡 Lawrence's "Business Focus" pillar

The best opportunities come when you understand the why behind what you're building. Whether it's optimizing a TV interface for 10-foot viewing or designing an AI workflow for content creation, knowing the business context makes you infinitely more valuable.

Lawrence's framework: "Business focus is non-negotiable... Everything is geared towards production. Everything is biased towards production... the bottom line is that the bottom line is the bottom line"

The Industry is Splitting (And That's Okay)

💡 Lawrence Moroney's "Bifurcation of AI" prediction

You've got two paths forming:

Big AI: Cloud-based LLMs, massive compute, platform services (think Claude, GPT-4, etc.)
Small AI: Self-hosted models, edge computing, specialized use cases

Lawrence's insight: "Over the next five years there's going to be a bifurcation... Big AI will be what we see today with the large language models getting bigger in the desire to drive towards AGI... The other side is self-hostable models are becoming they're exploding onto the landscape"

Both are valid. I work across both using cloud LLMs for content generation while also thinking about edge processing for TV platforms. Pick what aligns with your interests and the problems you want to solve.

Real Talk on Technical Debt

💡 Lawrence's entire framework on "vibe coding" and technical debt

AI systems can accumulate technical debt fast. I've learned this the hard way building automation pipelines. Here's the framework I use: think about technical debt like financial debt.

Lawrence's analogy: "Think about debt the way you normally would, right? Buying a house... you end up paying back the bank about a million dollars on half a million owned. That is probably a good debt to take on... A bad debt would be an impulse purchase on a high interest credit card"

Every time you generate code with AI, ask yourself: Is this worth the technical debt I'm taking on?

Lawrence's framework for avoiding bad technical debt:

Clear objectives met: You knew what you needed to build, didn't just spin out code randomly
Business value delivered: How's this helping the business? "It's really cool" isn't enough
Human understanding: Can your team understand and maintain this code?

Balance quick prototyping (which AI enables) with sustainable architecture. Document your shit. Your future self (and your team) will thank you.

Lawrence's warning: "Code is cheap now in the age of generated code. Finished code, engineered code is not cheap"

Navigate the Hype

💡 Lawrence's extensive discussion on the "Anatomy of Hype"

The AI space is drowning in hype, and you need to learn to filter signal from noise.

Lawrence's key insight: "The currency of social media is engagement. Accuracy is not the currency of social media... if you are the kind of person who can filter the signal from the noise and then who can encourage others around the signal and not the noise, that puts you in a huge advantage"

When someone comes to you saying "we need to implement agents" or "we need AI," your first question should be: Why?

Lawrence's story: A European company CEO asked him to implement agents because "everybody's telling me that I'm going to save business costs." Lawrence kept asking "why?" until they got to the real need: making salespeople more efficient by reducing research time from 80% to 20% of their work

Learn to make things "as mundane as possible" to truly understand them. Strip away the magic and hype to see what's actually happening under the hood.

Concrete Actions You Can Take

Diversify Your Skills

💡 Lawrence's advice on avoiding being a "one-trick pony"

I'm not just an AI person, I do TV platforms, React Native, developer advocacy, content creation, friction logging of new sdks and tools. This breadth makes you resilient and more interesting to work with.

Lawrence's warning: "Don't be that one-trick pony who only knows how to do one thing. I've worked with brilliant people who are fantastic at coding a particular API or particular framework and then the industry moved on and they got left behind"

Ship to Production

💡 Lawrence's emphasis that everything is about production now

Move past proofs of concept. Learn deployment, monitoring, scaling. The bar has moved from "can you build cool demos" to "can you deliver business value?"

Lawrence's observation: "What's it actually like working in AI right now? As recently as like two or three years ago working in AI was if you can do a thing, you're great... Unfortunately, that's not the case anymore. It's really a lot of today, what you'll see is the P word production"

Build in Public

💡 Andrew and Lawrence on showing your work

Share what you're learning. Write posts on dev.to, speak at conferences, create GitHub repos. The community feedback loop is invaluable, and it opens doors you didn't know existed.

Lawrence's example: When he interviewed at Google, instead of answering random questions, he showed code he'd built, a Java application running in Google Cloud for predicting stock prices. "My entire interview loop was them asking me about my code... It gave me the power to communicate about things that I knew"

Understand Agentic Workflows

💡 Lawrence's breakdown of what makes something "agentic"

If you're going to work with AI agents, understand the four-step pattern:

Understand intent: Use LLMs to grasp what needs to be done
Planning: Declare available tools and create a plan
Execution: Use the tools to get results
Reflection: Review results against intent, iterate if needed

This isn't just buzzword compliance—it's engineering discipline applied to AI systems.

Prepare for the Bubble (But Don't Panic)

💡 Lawrence's discussion on the AI bubble and industry maturation

Look, there's probably a bubble coming. Lawrence laid out the anatomy: hype at the top, massive VC investment drying up, unrealistic valuations, me-too products everywhere, and a small kernel of real value at the bottom.

Lawrence's lesson from the dot-com bubble: "Amazon, Google, you know, they did it right. They understood the fundamentals of what it was to build a .com. They understood the fundamentals of what it was to build a business on .com. And when the bubble of hype burst, they didn't go with it"

The survivors will be those who:

Focus on fundamentals
Build real solutions
Understand the business side
Diversify their skills

Lawrence's advice: "For you for your career to avoid the impact of any bubble bursting, focus on the fundamentals, build those real solutions, understand the business side, and most of all, diversify your skills"

Bottom Line

💡 Synthesizing Andrew and Lawrence's core messages

The AI space is moving fast, but the fundamentals still matter: solve real problems, ship regularly, stay curious, and work with good people. Don't get caught up in hype cycles—focus on building things that work and creating actual value.

Andrew's encouragement: "There are so many things that each of you can build and what I find is the number of ideas out in the world is much greater than the number of people with the skill to build them... There are a lot of projects in the world that if you don't build it I think no one else will build it either"

Business focus is non-negotiable now. Understand the business requirements, focus on production, and become that trusted advisor who can translate technical reality to leadership.

Lawrence's positioning: "Becoming that trusted advisor... if you are the kind of person who can filter the signal from the noise and then who can encourage others around the signal and not the noise, that puts you in a huge advantage that makes you very distinctive"

And remember: the best tool is the one you actually use and understand deeply, not the shiniest new thing on Hacker News. Code is cheap now in the age of AI—but well-engineered, production-ready code? That's still expensive and valuable.

Lawrence's final wisdom: "Ideas are cheap. Execution is everything"

🚀 Now go build something cool.

How to animate Fire TV splash screens with React Native & Lottie

Giovanni Laquidara — Mon, 11 Sep 2023 04:24:09 +0000

Author's Note: In my previous Lottie article, we covered how to create animated custom splash screens on Fire TV using Kotlin for Android and Lottie. For this article, we'll focus on those of you building Android apps using React Native. Since Lottie supports React Native, we'll cover the essentials to get you up and running quickly. Let's dive in!

Quick recap for Lottie
Lottie is an open-source animation library created by Airbnb to render complex animations on mobile devices in real time. It's an excellent choice for creating interactive animations for both Android and iOS. Since Fire OS is based on the Android Open source Project AOSP we can use Lottie to render complex animated splash screens on Fire TV apps with React Native.

Let's now walk through how to create an animated splash screen for a React Native app running on Fire TV!

Prerequisite: Create a React Native project

You can use your own existing React Native project or create a new one using the command line:

npx react-native@latest init SplashScreenApp

💡 Note: If you're new to React Native and want to learn how to setup your development environment and command line tools, head over to the React Native official docs to get up and running.

Step 1: Prepare the Lottie animation

To integrate Lottie animations into our TV splash screen, we need to first build an animation to match our app's branding and theme. For this example, we'll use the TV Watching animation by Alan Murphy available as a sample from LottieFiles.

Step 2: Place the Lottie animation into the React Native app project

Create a directory assets in your React Native project and download the "TV Watching Animation" in Lottie JSON format from the step above. Place the JSON file in the new assets folder and make sure to rename the JSON file splashscreen.json.

Step 3: Include Lottie as a package dependency

From the command line, inside the root directory of your React Native app execute the command to add Lottie as a dependency:

yarn add lottie-react-native

Step 4: Define the main components for your splash screen

For this sample app, we'll declare all required components inside App.tsx.

The 3 components are:

App, which represents the main app component
SplashScreen for initiating the splash screen
MainContent for the view that is shown after the splash screen disappears

Let's open the file App.tsx and remove all the content generated by the React Native command line.

Then at the top of the file, add the required imports for the components we need:

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

Next up you will declare the 3 components:

const SplashScreen = ({ onAnimationFinish }) => (

);

const MainContent = () => (

);

const App = () => {

};

and in addition set the styles we will apply for each of them:


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  splashContainer: {
    width: 200,
    height: 200,
  },
  splash: {
    flex: 1,
  },
  mainContainer: {
    marginTop: 100,
  },
  text: {
    fontWeight: 'bold',
  },
});

Remember to export the App component at the end of the file:

export default App;

Step 5: Implement the SplashScreen component

Implement the SplashScreen component by declaring its components. For this we will have a View containing a LottieView with the previous json animation file assigned to the source property of the LottieView.

We also define the autoPlay property in the LottieView in order to automatically start the animation and set the loop property as false so that we only show the animation one time:

const SplashScreen = ({ onAnimationFinish }) => (
<View style={styles.splashContainer}>
    <LottieView
      style={styles.splash}
      source={require('./assets/splashscreen.json')}
      autoPlay
      loop={false}
      onAnimationFinish={onAnimationFinish}
    />
  </View>
  );

Step 6: Implement the MainContent component

To start, this step will just show Text and then you choose when to display your app's home screen after the Splash Screen animation ends:

const MainContent = () => (
  <View style={styles.mainContainer}>
    <Text style={styles.text}>Your Awesome App Home Screen!</Text>
  </View>
);

Step 7: Implement the App component

The App component handles the logic to display and hide the Splash screen.

Declare a loaded state and set it to false. This allows the the animation to load prior to the Splash Screen being rendered on screen. Once the animation resource is ready, a callback will flip the loaded state to true to then make the MainContent component visible on the Fire TV:

const App = () => {
  const [loaded, setLoaded] = useState(false);

  const handleAnimationFinish = () => {
    setLoaded(true);
  };

  return (
    <View style={styles.container}>
      {loaded ? <MainContent /> : <SplashScreen onAnimationFinish={handleAnimationFinish} />}
    </View>
  );
};

Wrap Up: Load up and test our animated splash screen!

Now we can test either by using Fire TV via adb or starting an Android TV emulator.

Either approach will let us see the sample in action by running this command from the project directory:

npm start

Remember to press a to run the Android version.

Using Lottie for React Native is an easy way to enrich your app with beautiful animations and make your user happy.

Thanks for reading this guide and make sure to check out the sample project source code on Github.

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

Previously, Gio worked as a software engineer building mobile apps, real-time defence systems, and VR/AR experiences. For fun, Gio enjoys low level programming, IoT hacking, and command line apps ⌨️✨.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.

Develop Animated Splash Screens on Fire TV with Lottie

Giovanni Laquidara — Wed, 26 Jul 2023 22:11:26 +0000

A smooth and visually appealing on-boarding experience can greatly impact how users perceive the quality of your app. In my previous article, we explored how to create custom splash screens on Fire TV apps to optimize the startup time and improve user experience. Building on that knowledge we will take a step further and learn how to develop an animated splash screen using Lottie for Fire TV applications.

What is Lottie?
Lottie is an open-source animation library created by Airbnb to render complex animations on mobile devices in real time. It is an excellent choice for creating captivating and interactive animations for both Android and iOS. Since Fire OS is based on the Android Open source Project AOSP we can use Lottie to render eye-catching, captivating splash screens on Fire TV apps.

Before we proceed, I highly recommend checking out the previous article, "How to Develop Custom Splash Screens on Fire TV" and the Github repo. We will be using the same project adapting the code to use Lottie.

Let's create a splash screen for our app on Fire TV!

Step 1: Prepare the Lottie animation

To integrate the Lottie animation into our splash screen, we need to build an animation to match our app's branding and theme. For this article, we'll use the Cat TV Loading Animation by Eva Schicker available at LottieFiles. This delightful animation features an adorable cat waiting for our app to load, bringing a touch of fun to the onboarding experience. Create your own custom Lottie animations using After Effects, Figma or other graphics tools you prefer.

Step 2: Place the Lottie animation into the Android app project

Download the "Cat TV Loading Animation" in Lottie JSON format from LottieFiles and place the JSON file in the res/raw folder of our Fire TV Android project. Rename the JSON file cattv.json.

Step 3: Lottie as a dependency

Add Lottie as a dependency to our project app's build.gradle file.

dependencies {

    ...
    implementation "com.airbnb.android:lottie:6.1.0"
}

Step 4: Implement the Animated Splash Screen

Add a LottieAnimationView view in the splash screen xml layout file splashscreen_activity.xml. This layout represents the UI of the splash screen. You will notice Lottie Animation, centered on a white background, auto playing when the app starts.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_splashscreen"
    tools:context=".SplashScreenActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/loading_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes="@raw/cattv"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Implement the SplashScreenActivity

We need to start the MainActivity of the app once the animation completes. Let's modify the SplashScreenActivity.java to remove the delay logic and delegate the Lottie animation to launch the MainActivity intent when the animation finishes.

class SplashScreenActivity : AppCompatActivity() {

    private lateinit var binding: SplashscreenActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = SplashscreenActivityBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Start the MainActivity after Lottie animation completes
        binding.loadingAnimation.addAnimatorUpdateListener { animation ->
            if (animation.animatedFraction >= 1f) {
                startActivity(Intent(this, MainActivity::class.java))
                finish()
            }
        }
    }
}

Wrap Up: Load and test our animated splash screen!

Now we can build and test our app on Fire TV to see the cat Splash screen in action!

Source code
You can find the complete project source code on this Github repo

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.

Introducing the Input SDK for Amazon Appstore

Giovanni Laquidara — Thu, 06 Jul 2023 14:07:14 +0000

by Gio Laquidara

Imagine a skilled game developer successfully launches a popular game for Android. The mobile game features intuitive touch controls and engaging gameplay. There are hundreds of positive reviews in the appstore, and user growth is the current priority.

There's now a sizable opportunity to expand the game to PCs through Amazon Appstore for Windows 11 and the Windows Subsystem for Android (WSA). However in order to support Android apps on PCs, the existing touch screen controls need to now work with mouse and keyboard inputs which can pose refactoring challenges. How can you ensure the best user experience for PC gamers? To understand how to support keyboard and mouse inputs in existing touch-based game or app, read my recent suggestions in this developer article on mapping inputs.

The Amazon Input SDK enhances the user experience by providing display on-screen information for the available inputs for specific actions in games. This article will show how to use the Input SDK to help users understand how to navigate and interact using mouse and keyboard inputs.

Whether you prefer native Android development or building with Unity, we have you covered. The Amazon Input SDK comes in two versions:

The following sections cover how integrate both flavors of the Input SDK.

Amazon Input SDK (Java/Kotlin)

Let's start by exploring the usage of the Amazon Input SDK for Java/Kotlin.

To begin using the SDK in your app, add the Amazon Input SDK to the dependencies section of your app-level build.gradle file:

  dependencies {
      ...
      implementation 'com.amazon.device.inputmapping:inputsdklib:1.0.0'
  }

The main component of this SDK is the InputMappingProvider.

When a user requests a help screen, the SDK will use this provider to present the control-action map. The first step in using this SDK is to implement the InputMappingProvider interface and return your input map in the onProvideInputMap method.

class CustomInputMapProvider: InputMappingProvider {

    override fun onProvideInputMap(): InputMap {
        // returns the input map
    }
}

Once you have implemented this interface, you can register your input mapping provider through the Input static class.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val inputMappingClient = Input.getInputMappingClient(this)
        inputMappingClient.inputMappingProvider = CustomInputMapProvider();
    }

The active input mapping provider is not affected by the activities lifecycle events and remains valid across different activities. However, you can change it whenever you prefer by using the InputMappingClient and setting a different input mapping provider.

After defining the input mapping provider, you can simply call the following method

TriggerHandler.getInstance().showHelp(this, "My App");

This will display the help screen to guide users on how to play your game.

Now let's dive into the details of the Input Map.

An InputMap is the collection of your app's input-action mappings InputAction arranged in groups InputGroup.

An input action refers to an event that corresponds to an action performed within the app. This action can be associated with a single key or a combination of keys. For instance, in the given example, the action "Jump" is linked to the pressing of the space key, while the action "Move" is associated with the movement of the mouse.

val jumpInputAction = InputAction.create(
            "Jump",
            MyGameActions.JUMP.ordinal, // MyGameActions here is an enumeration in the game
            InputControls.create(
                listOf(KeyEvent.KEYCODE_SPACE),
                emptyList()
            )
        )

val move = InputAction.create(
            "Move",
            MyGameActions.MOVE.ordinal,
            InputControls.create(
                emptyList(),
                listOf(InputControls.MOUSE_MOVEMENT)
            )
        )

Each input action must be linked to a specific input group. Each input group consists of a label and a collection of input actions categorized within the group. In the previous section, we defined various input actions, and now we can illustrate this concept with an example. Let's create an input group called "Basic Movement," which includes the defined input actions from the previous section:

var movementGroup = InputGroup.create("Basic Movement", 
        listOf(move, jumpInputAction)
)

After defining all the necessary groups, you can pass them to the InputMap.create method to return the input map for your app:

return InputMap.create(
    listOf(moveGroup, gameControls),
    MouseSettings.create(true, true)
)

The InputMap.create() method allows you to define the mouse settings applicable to the app.

Specifically, you can enable the adjustment of the mouse sensitivity and invert the Y-axis:

MouseSettings.create(boolean adjustableSensitivity, boolean invertedYAxis)

Unity SDK

If you are using Unity for your game and want to use the Amazon Input SDK, here are the steps to integrate the SDK into your Unity projects:

Download the Amazon Input SDK for Unity here. The download includes the .unitypackage file and a sample app.
From the Assets menu, select Import Package > Custom Package.
Browse for amazon.device.inputmapping.unitypackage and select it.
Select all the files in the subsequent import dialog and click Import.
Go to Preferences > External Tools. In the Android section, uncheck Gradle installed with Unity and choose the required Gradle version for your project. We recommend Version 5.6.4.
Go to Project settings > Player, select the Android tab, and expand the Publishing settings section.
In the Build section, click the checkbox for Custom Launcher Gradle Template as shown in the following image.

Add the following dependencies in the dependency section of the Gradle launcher template file

implementation 'com.android.support.constraint:constraint-layout:2.0.4'
implementation 'com.android.support:recyclerview-v7:28.0.0'

After setting up the Input SDK for your Unity Project, you are ready to use the main component that provides the input map on request: the InputMappingProvider interface.

Implement this interface and the Amazon Input SDK for Unity will be able to show the input mapping when a user requests a help screen:


// C# example for Unity
private class CustomInputMappingProvider : InputMappingProvider
{
    public InputMap OnProvideInputMap()
    {
        // create an input map
        return inputMap;
    }
}

To use your custom Input Mapping Provider, you need to register it by calling SetInputMappingProvider of the InputMappingClient, as shown in the code below.


 void Start()
{
    var _inputMappingClient = Input.GetInputMappingClient();
    _inputMappingClient.SetInputMappingProvider(new CustomInputMappingProvider());
}

After registering it you will be able to show the help screen with the mapping to the user calling

TriggerHandler.ShowHelp("My App");

The Input Map

The input map returned from the OnProvideInputMap of your CustomInputMappingProvider will contains all the mapping key events/mouse click to input actions.

An input action is an event corresponding to an app action. The input action can be mapped to a key or a combination of keys. In the following example, the "Jump" action is mapped to the space key.

var jump = InputAction.Create(
        "Jump",
        Actions.JUMP, //where Actions is an enumeration for the game actions
        InputControls.Create(
                new[] 
                {
                    AndroidKeyCode.KEYCODE_SPACE
                },
                null
        )
);

Here, the "Move Left" action is mapped to the left key on the numeric keypad and "Move Right" is mapped to the right key on the numeric keypad.

var moveLeft = InputAction.Create(
        "Move Left",
        Actions.MOVE_LEFT,
        InputControls.Create(
                new[]
                {
                    AndroidKeyCode.KEYCODE_NUMPAD_LEFT
                },
                null
        )
);

var moveRight = InputAction.Create(
        "Move Right",
        Actions.MOVE_RIGHT,
        InputControls.Create(
                new[]
                {
                    AndroidKeyCode.KEYCODE_NUMPAD_RIGHT
                },
                null
        )
);

You will have to group all the desired actions in a InputGroup

An input group has a group label and a list of input actions that belong to the group. The following example shows a "Basic Movement" input group created with the input actions defined in the previous section.

InputGroup movementInputGroup = InputGroup.Create("Basic Movement",
    new[]
    {
        jump, moveLeft, moveRight
    }
);

You can then collect all your groups of input and pass it to the InputMap creation. The input map also contains the mouse settings that are applicable for the app, such as allowing the adjustment of the sensitivity of the mouse or inverting the Y Axis (in the following code false and true respectively).

var inputMap = InputMap.Create(
    new[]
    {
        movementInputGroup
    },
    MouseSettings.Create(false, true)
);

You are ready not to return your input map from the OnProvideInputMap of your InputMappingProvider

Wrap up

By integrating the Amazon Input SDK in touch games on Android, you can provide clear instructions to players on how to use keyboard and mouse inputs effectively on devices with keyboard and mice. This will help ensure a smooth transition from touch controls to PC inputs and enhance the overall user experience.

To know more about Amazon Input SDK head over to our docs.

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.

Adding IAP to Flutter apps for Amazon Appstore

Giovanni Laquidara — Fri, 02 Jun 2023 14:29:05 +0000

After spending countless hours developing a high-quality app experience, it's time to build monetisation features into your product. An effective way to do this is by implementing an in-app purchasing (IAP) system and deploy your app across multiple platforms and app stores.

By utlizing powerful cross-platform app development frameworks such as Flutter, you are able to build your app once and deploy it across both iOS and Android. Integrating In-app purchasing across app stores can be challenging when having to manage multiple SDKs.

Over the past few months, I've been interested in building a Flutter app that integrates in-app purchasing across Google Play, Apple Appstore and Amazon Appstore. I was interested in proving this out with Flutter specifically to test out their "platform channels" feature for building with platform-specific code. This enables me to integrate each In-app purchasing SDK in one code base. While this is possible, I'm aware that this can easily become a lengthy process.

Thankfully the open source community has built a related project: Introducing the flutter_inapp_purchase library. This project is an interesting open-sourced plugin for easily integrating in-app purchasing for each of the app stores mentioned above.

For this guide, walk-through how to integrate a sample music artist's app that integrates with the Amazon Appstore SDK for in-app purchasing and subscriptions. Let's dive in.

Case Study: GIOLAQ's Music App 💿👨‍🎤

Let's pretend that "GIOLAQ" is a fictional singer with an international fan base. In order to grow revenue, his record label launched an artist app for his music and merchandise to be available to purchase around the world.

Fan's of GIOLAQ can listen to the music albums if they pay to unlock the exclusive content. The in-app purchasing options for the app are:

Entitlements - Unlocking one of GIOLAQ's albums for your account to listen
Subscriptions - An annual pass to listen to all the music produced by GIOLAQ
Consumables - Concert tickets to GIOLAQ's live music concerts

Setup for In-app purchasing

Before going through the code, let's first take care of the in-app purchase setup on the back-end.

💡 Note: If your need to integrate in-app purchasing with Flutter and Google Play or Apple, check out some excellent community tutorials on how to do it. You'll notice the integration steps are almost the same, which includes activating IAP services in each of the app store console and creating the IAP items in your developer settings.

For integrating In-app purchasing for the Amazon Appstore, make sure to also reference the official guide in the Appstore docs.

For building GIOLAQ Music I've created 3 IAP items:

An Entitlement IAP item to buy the whole album of GIOLAQ
A yearly subscription to grant all the music for one year.
A consumable item for the live music tickets.

In order to test the GIOLAQ app, make sure to create the same IAP items that map to their unique identifiers which are referred to to as SKUs

In addition to creating products with mapping SKUS remember to download the JSON file with the items. To this this, you'll navigate to the In-App Items tab of your app and click the Export Multiple IAPs button with JSON as the selected format.

Once you take these steps, the downloaded JSON file will used during testing. My sample JSON file for testing is here if you would like to follow along.

The code base

For the GIOLAQ Music project, I've inserted all the business logic for in-app purchasing in a file named iap_handler.dart. The 3 additional files I've built are:

main.dart which handles the the main widget of the app and navigation between the two screens
music.dart handles the music UI screen for displaying the album cover and the locked/unlocked state of the purchasable items
purchase_page.dart is where you can spend your virtual money to buy the purchasable items

Here are UI examples of these files in action:

Integrating the Flutter IAP plugin

Step 1: Add the Flutter IAP package as a dependency

To start using the Flutter IAP Plugin from dooboolab remember to add the dependency on the pubspec.yaml so that you can then ‌import all the packages objects and classes into your application.

dependencies:
  flutter:
    sdk: flutter

  flutter_inapp_purchase: ^5.3.1

Step 2: Initialize the plugin

Initialize the plugin with

    FlutterInappPurchase.instance.initialize();

💡 Note: This has to be done before purchasing, on iOS it also checks if the client can make payments.

In my app, I've initialized the plugin and wrapped the instance in a class as a singleton. This is useful if you want to adopt different SDKs in the future or for easy testing.

Step 3: Subscribe to the IAP connections

In the IAP_HANDLE widget, you'll write some code to subscribe to StreamSubscription in order to listen for IAP Connection status, Purchases status, and Errors.

Here's an example of how to listen for these events:

_connectionSubscription =
      FlutterInappPurchase.connectionUpdated.listen((connected) {
         // Do something with the connection status
        });

    _purchaseUpdatedSubscription =
        FlutterInappPurchase.purchaseUpdated.listen((productItem) {
          // Update the UI with updated status of the purchase
        });

    _purchaseErrorSubscription =
        FlutterInappPurchase.purchaseError.listen((purchaseError) {
         // Handle IAP Error
        });

Step 4: Load the purchasable objects

Next, you will load the Purchasable objects according to their SKUs. In this line of code, I am populating a list of purchasable items in order to display them in the purchase screen:

iapItems = await FlutterInappPurchase.instance.getProducts(skuList);

Step 5: Make a test purchase!

To purchase an item, go ahead and call the following method with the SKU of the item you want to purchase:

FlutterInappPurchase.instance.requestPurchase(sku);

The purchase confirmation will arrive on the _purchaseUpdatedSubscription where you can handle the updates of your UI based once the purchase is successful.

In GIOLAQ Music app the requestPurchase() call is wrapped into a buy function. This function is called by the onPressed of the widgets within the Purchase screen to associate the objects to buy.

Step 6: Handle the purchase update

Remember to handle purchase result using the callbacks you registered in Step 3 Subscribe to the IAP connections. For this example, I've used the following snippet to propagate the purchase state in the Music screen to unlock the music or increment the quantity of purchased ticket.

 FlutterInappPurchase.purchaseUpdated.listen((productItem) {
          _purchasesUpdate(productItem!);
          _updateStreamOnDone();
        });

Step 7: Clean up when you leave!

Remember to cancel the StreamSubscription when you are no longer using. The following code within the dispose method of the IAP_Handler widget is an example of how to get this done:

    _connectionSubscription.cancel();
    _purchaseUpdatedSubscription.cancel();
    _purchaseErrorSubscription.cancel();

Testing phase

To test the app , make sure to pick up an Amazon Fire tablet for yourself and active the developer options in order to support sideloading test apps from Android Studio. Using Android debug bridge (adb), upload the IAP JSON file to the device using the following command:

adb push <_Your_JSON_File_Folder_>/amazon.sdktester.json /sdcard/amazon.sdktester.json

In addition, enable sandbox mode with the command:

adb shell setprop debug.amazon.sandboxmode debug

After this make sure you have installed the Amazon App Tester on the Tablet. Once thats done, you can build and run the app from your IDE.

Wrap Up

I'm always delighted when I discover new ways the open-source community is fixing issues and covering needs. Special thanks to the open source maintainers at dooboolab for building and maintaining this flutter community plugin

If you want to check out the source code of my sample GIOLAQ Music app and review how I built in in-app purchasing for Amazon Appstore, head over head to GitHub to try the
flutter_amazon_iap_demo project for yourself.

To know more about Amazon In-App Purchasing SDK head over to the official docs

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.

Resizing apps in Windows Subsystem for Android™ (WSA)

Giovanni Laquidara — Fri, 17 Feb 2023 10:18:07 +0000

Because Microsoft is ending support for the Windows Subsystem for Android (WSA), Amazon Appstore on Windows 11 will no longer be supported after March 5, 2025. Amazon and Microsoft are partnering to create a smooth end of support experience for developers and customers of Amazon Appstore on Windows 11. Developers will no longer be able to submit net new apps targeting Windows 11 after March 5, 2024, but developers with an existing app can continue to submit app updates until Amazon Appstore on Windows 11 is fully discontinued.

Starting on March 6, 2024, Windows 11 customers will not be able to search for Amazon Appstore or associated apps from the Microsoft Store. Customers may continue using Amazon Appstore apps that they previously installed and will still be able to receive app updates.

As an Android developer, porting your app to the Amazon Appstore for Windows 11 can help expand your customer base. However, it's important to keep in mind that Windows 11 allows users to freely resize app windows, and it's crucial to ensure that your app is responsive and stable when the viewport window is resized.

In this guide, we will cover key considerations for handling window resizing in your Android app on Windows Subsystem for Android™ (WSA).

Minimum screen requirements

To ensure a seamless experience for users, Windows 11 enforces a minimum screen requirement of 720p resolution (1280x720) for screens larger than 9”. When the aspect ratio of a window size does not align with the device screen size, the result may be letterboxing or pillarboxing, which results in bars being placed on the sides of the window in order to center it.

Initial launch size

There are several launch size options to consider when launching your app on Windows 11:

Use static launch bounds. Use <layout> inside the manifest entry of your activity to specify a "fixed" starting size. For example:

<layout android:defaultHeight="500dp"
         android:defaultWidth="600dp"
         android:gravity="top|end"
         android:minHeight="450dp"
         android:minWidth="300dp" />

Use dynamic launch bounds. An activity can create and use ActivityOptions.setLaunchBounds(Rect) when creating a new activity. By specifying an empty rectangle, your app can be maximized.

Note: Make sure to specify these options only for the root activity and consider using a springboard activity to clear the activity stack in the task with a new start.

Better visual control through responsive layouts

Supporting different screen sizes with responsive layouts ensures that you have control of the presentation layout no matter which form factor the screen is presented.

For a more information on dynamic Window sizes and establishing clear breakpoints for your app’s user interface in Kotlin and Java, read Android’s guide on supporting different screen sizes. Also, consider how multi-window mode can enable your app to function next to other apps, and consider the differences between activity context and application context.

Resizing windows

You can provide a better user experience by ensuring that the app’s layout adapts to the new window size. This can be achieved by using the onSizeChanged() method in your activity class. This method is called when the size of the app window changes, and you can use it to adjust the layout of the app accordingly.

In Windows 11, users can resize an app's window by dragging the lower right corner. There are two options for handling window resizing when using the View class:

Respond to configuration changes dynamically by calling onConfigurationChanged() and adding android:configChanges="screenSize|smallestScreenSize|orientation|screenLayout" to the activity's manifest. Read the handling configuration changes docs for more code snippets and details.
Let the system restart the activity. In this case, you should implement onSaveInstanceState() and use the ViewModel architecture component to restore the previous saved state.

Windows 11 allows users to change the screen orientation of their device, so it's important to make sure that your app can handle changes in screen orientation without crashing. You can do this by adding android:configChanges="orientation|screenSize"to your activity in the AndroidManifest.xml file. This will allow your app to handle changes in screen orientation without restarting the activity.

If your app is using Jetpack Compose, the resizing behavior depends on the size of the app window and the layout that is used. You can use the Compose's layout composables such as Box, Row, and Column to layout the components of your app. See the Compose layout basics docs for more.

Additional resizing considerations

Test your app for both functionality and visual UI issues to make sure it handles changes in window size appropriately.
Don't call finish() in your activity's onDestroy method. This causes the app to close upon resize, rather than restart.
Avoid using window types that are not compatible, such as TYPE_KEYGUARD and TYPE_APPLICATION_MEDIA.
Make sure that an activity restart is fast by caching objects that have been previously allocated.
If you do not want the user to resize your app, specify android:resizeableActivity=false within the <application> subclass within your manifest file.

Summary

Once you have prepped and tested your app, remember to reach out via our Contact Us page to request your app for WSA submission access. Once the request is approved, log in to the Amazon Appstore Developer Console and then select the app from the My Apps list. On the app detail page, open the Supported Devices menu, navigate to the Windows Devices tab, select Windows devices for targeting, and complete your submission.

Related resources

To discuss developer issues with the community and file bugs or feature requests, visit the Windows Subsystem for Android GitHub repository.
To receive updates regarding future Amazon Appstore on Windows 11 program updates, sign up for email notifications.
Microsoft’s guide to Window resizing
Android docs on Windows management

How to develop custom splash screens on Fire TV

Giovanni Laquidara — Mon, 23 Jan 2023 20:53:06 +0000

Featured in AndroidWeekly 555

Storytime: Blank screens and suboptimal UX

Here's a common scenario: A user turns on the Fire TV device and immediately launches your app. Unfortunately for everyone, your app has not fully-loaded into memory, which is known by developers as "cold start". Cold starts cause delays between the start of your app and when the launcher activity’s onCreate() function is called.

👆 Loading wait times + blank screens = *low app satisfaction*

While your app is executing the onCreate() function, memory-intensive operations may further delay the launch of the main activity. Delays will cause your users to see a blank/black screen while this activity inflates the screen’s UI. Often this suboptimal user experience leads to a common risk: users perceive your app as non-responsive and will exit the app.

The solution: Define splash screens

An efficient way to overcome this ambiguous first launch user experience is by creating a custom theme that overrides the android:windowBackground property. As part of the custom theme, applications can specify their branded splash screen image. Android will display the splash screen specified as part of windowBackground while launching the application, thus improving the user experience. Assign this to an Activity responsible to display the splash screen and launch the main activity.

Step 1: Create your custom splash screen

Create a file named splashscreen.xml in the drawable directory. This file will contain all the graphic elements and layers of your splash screen. This file should have the following markup:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

    <item android:drawable="@drawable/splashscreen_logo" android:gravity="center"/>

</layer-list>

Note: The SVG (Scalable Vector Graphics) image format load faster compared to other image formats when testing on FireTV devices.

Step 2: Create the splash screen theme

Define a new style in the file styles.xml of your project then add an android:windowBackground item set as the @drawable/splashscreen splash screen you created in the prior step:

<style name="SplashScreenTheme" parent="Theme.SplashScreenTV.NoActionBar">
    <item name="android:windowBackground">@drawable/splashscreen</item>
</style>

Step 3: Create the splash screen activity

Create a new activity responsible for displaying the splash screen, launch the main activity, then terminate:

Kotlin

class SplashScreenActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(Intent(this, MainActivity::class.java))
        finish()
    }
}

Java

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        startActivity(new Intent(this, MainActivity.class));
        finish();
    }
}

Step 4: Apply the splash screen theme to the splash screen activity

In AndroidManifest.xml, set the theme attribute of the SplashScreenActivity to the theme you setup in step 2. The SplashScreenActivity will be the first activity called by the launcher, so remember to move the intent filter with the action android.intent.action.MAIN and category android.intent.category.LEANBACK_LAUNCHER from the Main Activity to the SplashScreenActivity:

<activity
    android:name=".SplashScreenActivity"
    android:exported="true"
    android:label="@string/title_activity_splash_screen"
    android:theme="@style/SplashScreenTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
        </intent-filter>
</activity>

Success: Your custom splash screen is now complete!

You have now implemented a custom splash screen and optimized the starting time of your Fire TV app displaying your branding image. To test this for yourself, use the Android Debug Bridge and follow our docs on installing your app on Fire TV.

Source code
You can find the complete project source code on this Github repo

Special thanks to Kostas and Joe

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.

How to integrate push notifications for Amazon Appstore

Giovanni Laquidara — Fri, 18 Nov 2022 18:25:51 +0000

Recently I was at Droidcon London catching up ✨ in-person ✨ with Android developers and longtime friends. The event was well-run, full of engaging technical talks and great conversations.

One particular conversation I had was with an Android + iOS app developer who found a way to sustainably freelance by launching multiple revenue streams: Ads, In App Purchasing (IAP), and selling online programming courses (...a dream of mine to do someday when I have the time... 😉⏳ ).

He was building everything from games to utility apps and was confronted with a recurring issue: The app user base would steadily grow until hitting a plateau after a variable amount of time (months). Once new interest peaked, less new users were discovering and installing his apps.

While I don't pretend to have a magic solution, I shared a suggestion based on a talk my colleague and I delivered hours earlier:

Launch your app in multiple app stores.

...and in my role as a Developer Advocate, I have to recommend these apps should definitely be the Amazon Appstore! 🥳📲

The Amazon Appstore offers an active global user base and one of the coolest features: existing apps can be installed directly on Windows 11.

What if your app could now reach millions of new desktop/laptop Windows 11 users around the world?

This developer then asked the standard software engineering questions:

"Yes but...
Are all the features I already developed going to be supported on the new system? How much effort is involved to port the app?"

The classic yet honest answer to this is:

"it depends!" 🤷

So let's dive in.

Porting Android apps to Amazon Appstore

Amazon Appstore runs on Fire OS devices (Fire Tablets, Fire TVs...) and can be installed on directly on Android devices. Fire OS is based on AOSP (Android Open Source Project) and without Google Play Services running on it. So for developers with app features dependent on Google Play Services, some migration work is needed.

For example, if your app relies on Firebase Cloud Messaging (FCM) for push notifications, this should be updated. Specifically in Fire OS, push notifications function through Amazon Device Messaging (ADM). Integrating the ADM SDK will allow your app to run smoothly in Fire OS.

To support both FCM and ADM, the Amazon Appstore team also created Amazon Appstore Abstraction Library A3L - an SDK to reduce porting time and code maintenance needs for notifications and messaging.

Integrating your app with A3L

Step 0: Download the A3L SDK

Download the A3L SDK from our developer documentation

Afterwards, make sure to add the downloaded .aar to the app/libs directory of your Android project.

Step 1: Add the A3L dependency to your project

After this, you will have to add the dependency on this file of the project. Open the build.gradle file and insert the following line:

dependencies {
     ...
     implementation files("libs/A3L-Messaging-1.0.0.aar")
 }

Step 2: Obtain the credentials

Similar to what you already have done with Firebase through the google-services.json file, you have to obtain ADM credentials in order to uniquely identify your app the web service.

Once you have credentials, follow the instructions in our ADM docs.

Step 3: Define the messaging service

Now you will should create the Service that listens for messages and tokens from ADM.

To do this, you will have to extend the class A3LMessagingService and override these 2 methods:

class MyA3LMessagingService : A3LMessagingService() {

    override fun onMessageReceived(context: Context, remoteMessage: RemoteMessage) {
        Log.d(TAG, "From: ${remoteMessage.from}")
    }

    override fun onNewToken(context: Context, token: String) {
        Log.d(TAG, "Refreshed token: $token")
    }

To Enable this service you will need to declare in the AndroidManifest.xml:

<application>
    <receiver android:name=".MyA3LMessagingService"
        android:exported="false"
        android:enabled="true">
        <intent-filter>
            <action android:name="com.amazon.A3L.messaging.intent.REGISTRATION"/>
            <action android:name="com.amazon.A3L.messaging.intent.MESSAGE"/>
        </intent-filter>
    </receiver>

    <meta-data android:name="com.a3l.clsName" 
    android:value="com.example.mya3lapp.MyA3LMessagingService" />

 </application>

Step 4: Initialize the Service

Now you define the callback MainActivity to handle the registration phase and initialize the service:

class MainActivity : AppCompatActivity() {

    private val TAG = "MainActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val onInitCallback: OnInitCallback = object : OnInitCallback() {
            override fun onReady(initCallbackResponse: InitCallbackResponse) {
                if (initCallbackResponse.isSuccessFul) {
                    Log.d(TAG, "Device Id: " + initCallbackResponse.token)
                } else {
                    Log.d(
                        TAG, "Registration failed with Error: " +
                                initCallbackResponse.errorMessage
                    )
                }
            }
        }
        A3LMessaging.init(applicationContext, onInitCallback)

        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, EggTimerFragment.newInstance())
                .commitNow()
        }
    }
}

and with that update, you are all set! Let's see how to test this implementation.

Testing

You have three ways to test this integration:

The Web Console
Server-side scripts
Solution-specific APIs

For our use-case, the easiest way is with the Amazon Appstore ADM Web Console. I suggest running the app on a Fire Tablet in order get the Device registration ID.
This will be available in the onReady of the onInitCallback.
Copy the ID and head to the Appstore ADM Web Console:

Select your target app to test and enter the Client ID and secret for your app. (You should have these saved from when you obtained your ADM credentials)

In the Device registration ID field, enter the value previously saved.

Choose Notification message
Populate the fields Notification Title and Body content
Click Send test message

You should then receive an app notifications appearing on your Fire Device.

For the other ways of testing, you can check the official documentation.

Wrap up

I hope the Droidcon developer I spoke with and you are able to quickly launch existing apps for Amazon Appstore.

Using A3L will allow your app to support both FCM and ADM. If you want to try an A3L sample project with support for both Firebase Cloud Messaging and Amazon Device Messaging, check out my recent repo on GitHub and our related documentation.

Make sure to review the full pre-submission checklist when you’re ready to submit your app in the Amazon Appstore.

Stay connected

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter