Building a fantasy baseball app with AppGyver

As part of my 100 days journey, I’ve written about the different parts of AppGyver:

  • Data: retrieving data from REST APIs
  • Components: the UI to display the data
  • Logic: handling user/data events

To understand how everything works – and to give one last inspiration for the no-code challenge – I created my infamous baseball app (which I think is pretty cool).

The 2-minute video version.

What the App Does

The app is designed to let me find players, see their stats, and add them to my fantasy team.

More specifically, the app lets me:

  • Select a team from 30 Major League Baseball teams
  • See all the players for a specific team
  • Show only pitchers or non-pitchers or both
  • Select a player and see his career statistics, by season
  • Add a player to my fantasy team
  • View all the players on my team

The Screens

The home screen gives you a dropdown field to select a team, and to view its players. You can view pitchers, fielders, or both.

If you happen to know the player ID for a particular player, you can enter it and the app will either say the ID is no good or it will display the player screen for that player, with all his stats and information.

Once you select a team, a set of list items are shown, with the player’s name and their position. I put the repeated list items in a scroll view so I can scroll the players without losing the top set of selection components.

If you click on a player, you get a new player with information on the player, plus his stats, devided by year.

If the player is not on your fantasy team, you get a button in the top-right corner. If you tap it, the player is added to your team and the button disappears (you can later remove the player from your team from the My Team screen). A small notification is shown at the bottom that the user was added.

To see your team, you can navigate as part of the navigation bar at the bottom to MyTeam.

2 Data Resources

One point of the app was to show that I can connect to a data source to pull information (I have many REST data resources to the MLB API), but I can also use the local on-device storage to store my own related information about the players.

At some point you will want to have your own data but have all users share it – to create a real league where users buy and sell players, and share leaderboards and such.

So for that you will have to create a backend service. Now, you can use the SAP Business Application Studio low-code tools to quickly create backend data and service, and eventually, AppGyver is expected to provide a similar and even simpler mechanism within AppGyver.

Things I Think Are Cool

Here’s some things about the app I think are cool:

  • Marketplace Components: The app uses several Marketplace components, including the scroll view and image list.

  • Composite Components: I modified the image list component and added my own delete button and delete event.

  • Custom JavaScript Flow Function: The app required me to create my own custom flow function, for which I created inputs, outputs, and JavaScript logic
  • Flexible API Calls: In setting up the REST API calls, I saw how to specify where in the response is located the data we want, and how to create placeholders/variables so I could use an API call for retrieving different types of data.

  • Data Logic: There is a default logic that retrieves data every 5 seconds, but I wanted the data to be retrieved immediately based on user events, so I customized the data retrieval logic.
  • REST API and Local Storage: As mentioned above, we have multiple data resources, both read-only REST APIs and then on-device local storage.
  • Navigation: I was able to set up the fixed navigation menu at the bottom of the screen, as well as work with the flow components to open pages. At least one page, the Player page, made use of a page parameter.
  • Layout and Themes: I started to make use of the layout to more precisely position items, to change the look and feel (e.g., rounded corners on input boxes), and to create styles.

How to Improve the App

I used very few of the style and layout features, and I hope next week to explore these and improve the look and feel of the app.

The transition to the next screen sometimes is not smooth, for example, the data is not yet loaded and the user sees empty or “undefined” fields.

And finally, I could add some features:

  • The dropdown for selecting stat categories probably should be radio buttons, but I could not see quickly how to implement this.
  • Show more players on leaderboard, or allow user to configure.
  • Allow search for a players based on name or stats, for example, show me all players with at least 100 at bats and average above .300.