Cómo utilizar la librería API NBA para realizar una aplicación con Mat|r Script – MAT|R : Device Independent App Development : Matr

Buenas! Soy Mauricio García, especialista en Mat|r, y hoy vamos a ver cómo utilizar la librería “Api-NBA” que desarrollamos en el anterior post para realizar una aplicación utilizando Mat|r Script.

Para ver el Post anterior pueden hacer click aquí.

Les comparto la Documentación de Mat|r Script que vamos a necesitar:

Importación de librerias: http://matrproject.com/docs/eng/importing-libraries/
Documentación para codear: http://matrproject.com/docs/eng/matr-project-2/

Para comenzar tenemos que tener en mente qué clase de aplicación queremos desarrollar y cómo vamos a tener organizada la información, de manera que podamos ir visualizando las pantallas de la misma y la navegación que va a haber entre cada una. La librería “Api-NBA” nos otorga sólo información de la NBA, por lo tanto, vamos a desarrollar una aplicación informativa para el usuario: vamos a realizar una Aplicación que vaya de lo más general a lo más particular (Temporada/Liga > Partidos > Equipos > Jugadores).

Una vez planificada la aplicación, vamos a conseguir la Api Key para poder utilizar los Endpoints de la Librería. En la documentación de la misma nos dice cómo obtenerla:

————————————————————————————-

Get a Key

You need an account in Rapidapi.
Then you go to API-NBA.
Move to Pricing and Choose the Right Plan For You.

Note: You need add a Credit Card to do the last step.

—————————————————————————————–

La Api Key aparece en el campo X-RapidAPI-Key:

Una vez obtenida la Key podemos empezar a codear en Mat|r Script y desarrollar la Aplicación.

Primero vamos a crear una constante de nombre “key” para alojar ahí nuestra Api Key, así si llegamos a compartir nuestra app para que otros usuarios puedan forkerarla no se les va a compartir esta constante.

Tambien importamos la librería “Api-NBA” en el código para poder utilizarla cuando la necesitemos. Esto lo realizaremos con la sentencia “Import nba as nbapi”, como se visualiza a continuación:

Vemos que en panel lateral derecho, en el tab ‘Libraries’, se muestra la librería importada. Podemos consultar ahí mismo la documentación y todo su contenido.

Para ir desde lo más general a lo particular en la pantalla principal tiene que tener un selector para Temporada y otro para Liga, le agregamos un botón que ejecutará la Rule de búsqueda de los partidos valores seleccionados. Para que podamos tener la última información de la NBA podemos hacer uso de los endpoints que nos traen los últimos partidos y los partidos en vivo, esta información podemos mostrarla en diferentes listas.

Experience Home {

Array<String> seasons value([]) as Select

Array<String> leagues value([]) as Select

Decision btn2 action(‘HomeContext.leagueAndSeason’) label(‘League And Season Search’)

String name label(“Live Matchs: “) as Label

Array<Teams> live value([]) as List

String lastMatch label(“Last Matches: “) as Label

Array<Teams> lastMatches value([]) as List

}

Creamos un modelo de nombre Teams para guardar los datos de los partidos que se van a mostrar en las Listas y, de esta manera mostrarlos más fácilmente.

Para eso creamos un template de nombre “match” para que los datos se visualicen en las listas de la siguiente manera:

La pantalla, que ya creamos, va a ser nuestra pantalla principal en la aplicación. Para cargarle los datos vamos a crear una pantalla de carga así al usuario le mostramos la pantalla principal completa con todos los datos listos. Para ello, en otro file de Mat|r Script, vamos a escribir el código, para la precarga de los datos, en el ciclo de vida “OnCreate” de la Experiencia y al final vamos a pushear estos datos a la Experience de la pantalla principal “Home”.

Experience Main {

String text value(‘Upload Data’) as Label

OnCreate {

broker.ui.showLoading()

// Live Match

// Modelos de la Librería

nbapi::Game responselive = nbapi::Game()

nbapi::Season responseSeason = nbapi::Season()

nbapi::League responseLeague = nbapi::League()

Home h = Home() //Modelo de la Pantalla Principal

Teams teamLive = Teams() //Modelo de para los partidos

responselive = nbapi::NBAFunctions.getGamebyLive(key)

if (responselive.api.games.size() != 0) {

for game in responselive.api.games {

teamLive.team1 = game.vTeam.nickName

teamLive.logo1 = game.vTeam.logo

teamLive.score1 = game.vTeam.score.points

teamLive.team2 = game.hTeam.nickName

teamLive.logo2 = game.hTeam.logo

teamLive.score2 = game.hTeam.score.points

teamLive.gameID = game.gameId

h.live.add(teamLive)

teamLive = Teams()

}

h.name = ‘Live Matchs: ‘

} else {

h.name = “There aren’t Matches at this time.”

}

// Last Matches

Date date = Date()

DateFormatter formatter = DateFormatter(format: ‘yyyy-MM-dd’)

responselive = nbapi::Game()

String day = formatter.stringFromDate(date)

responselive = nbapi::NBAFunctions.getGamebyDate(key, day)

if (responselive.api.games.size() != 0) {

for game in responselive.api.games {

teamLive.team1 = game.vTeam.nickName

teamLive.logo1 = game.vTeam.logo

teamLive.score1 = game.vTeam.score.points

teamLive.team2 = game.hTeam.nickName

teamLive.logo2 = game.hTeam.logo

teamLive.score2 = game.hTeam.score.points

teamLive.gameID = game.gameId

h.lastMatches.add(teamLive)

teamLive = Teams()

}

h.lastMatch = “Last Matches: “

} else {

h.lastMatch = “Failed to load matches.”

}

// Seasons

responseSeason = nbapi::NBAFunctions.getSeasons(key)

if (responseSeason.api) {

h.seasons = responseSeason.api.seasons

h.seasons.unshift(‘Select a Season…’)

} else {

h.seasons.add(responseSeason.error)

}

// Leagues

responseLeague = nbapi::NBAFunctions.getLeagues(key)

if (responseLeague.api) {

h.leagues = responseLeague.api.leagues

h.leagues.unshift(‘Select a League…’)

} else {

h.leagues.add(responseLeague.error)

}

broker.ui.hideLoading()

broker.ui.push(‘Home’, h)

}

Resaltado en Amarillo: Se puede ver en el código que utilizo las funciones de la librería para traer los datos y después los organizo para poder pushearlos a la experiencia Home.
Resaltado Celeste: Esto es una función para poder pasar de un String a un Integer. La necesitamos para poder enviar los parámetros a los endpoints, ya que los endpoints nos devuelven Strings y algunos parámetros necesitamos enviarlos en Integer, estos son los id’s de los juegos, equipos y jugadores. Si quieren ver el código pueden forkear la aplicación desde el Hub o pueden ver el código usando el código de invitación: fwJwYmz8. Al final les dejo el Link.

Con esto ya tendríamos la primer pantalla lista, ahora tenemos que hacer que el usuario pueda interactuar con estos datos, en la Experiencia Home vamos a agregarles Rules en la parte de su contexto “RuleContext HomeContext”.

1. Para que el botón que tenemos en la experiencia ejecute la búsqueda de juegos por Temporada y Liga:

Rule leagueAndSeason {

Home h = broker.ui.getDataSource()

Games g = Games()

nbapi::Game games = nbapi::Game()

if ((h.seasons.get(h.seasons.selected().get(0)) != ‘Select a Season…’ && h.seasons.get(h.seasons.selected().get(0)) != ” && h.seasons.get(h.seasons.selected().get(0)) != null) && (h.leagues.get(h.leagues.selected().get(0)) != ‘Select a League…’ && h.leagues.get(h.leagues.selected().get(0)) != ” && h.leagues.get(h.leagues.selected().get(0)) != null)) {

Teams team = Teams()

Teams teamOld = Teams()

Integer season = 0

String league = ”

season = changes.parseDouble(h.seasons.get(h.seasons.selected().get(0)))

league = h.leagues.get(h.leagues.selected().get(0))

games = nbapi::NBAFunctions.getGamebyLeague(key, league, season)

if (games.api) {

broker.ui.showLoading()

for game in games.api.games {

team.team1 = game.vTeam.nickName

team.logo1 = game.vTeam.logo

team.score1 = game.vTeam.score.points

team.team2 = game.hTeam.nickName

team.logo2 = game.hTeam.logo

team.score2 = game.hTeam.score.points

team.gameID = game.gameId

// Don’t show equals matchs

if (g.allTeams.size() > 0) {

if (teamOld.team1 != team.team1 && teamOld.team2 != team.team2 && teamOld.score1 != team.score1 && teamOld.score2 != team.score2) {

g.allTeams.add(team)

teamOld = team

}

} else {

g.allTeams.add(team)

teamOld = team

}

team = Teams()

}

broker.ui.hideLoading()

broker.ui.push(‘Games’, g)

}

} else {

broker.ui.showAlert(‘Empty Season or League.’, ‘You need selected a season and league.’)

}

2. Al seleccionar un juego de la Lista de “Last Matchs”, agregamos esta Rule como evento a la Lista desde el tab Builder UI, al seleccionar la lista e ir a las propiedades:

Rule selectGame {

Home h = broker.ui.getDataSource()

GameDetails gameD = GameDetails()

Teams match = Teams()

nbapi::GameDetails matchDetail = nbapi::GameDetails()

Integer id = 0

match = h.lastMatches.get(h.lastMatches.selected().get(0))

id = changes.parseDouble(match.gameID)

matchDetail = nbapi::NBAFunctions.getGameDetails(key, id)

try {

for game in matchDetail.api.game {

gameD.season = game.seasonYear

gameD.league = game.league

gameD.arena = game.arena

gameD.city = game.city

gameD.country = game.country

gameD.startTime = game.startTimeUTC.substringFromIndex(game.startTimeUTC.indexOf(‘T’) + 1)

gameD.startTime = gameD.startTime.substringToIndex(gameD.startTime.indexOf(‘.’) – 1)

gameD.endTime = game.endTimeUTC.substringFromIndex(game.startTimeUTC.indexOf(‘T’) + 1)

gameD.endTime = gameD.endTime.substringToIndex(gameD.endTime.indexOf(‘.’) – 1)

gameD.team1ID = game.vTeam.teamId

gameD.logo1 = game.vTeam.logo

gameD.team1Name = game.vTeam.fullName + ‘-(‘ + game.vTeam.shortName + ‘)’

gameD.nick1Name = match.team1

gameD.score1 = game.vTeam.score.points

gameD.linesScore1 = game.vTeam.score.linescore

gameD.team2ID = game.hTeam.teamId

gameD.logo2 = game.hTeam.logo

gameD.team2Name = game.hTeam.fullName + ‘-(‘ + game.hTeam.shortName + ‘)’

gameD.nick2Name = match.team2

gameD.score2 = game.hTeam.score.points

gameD.linesScore2 = game.hTeam.score.linescore

for official in game.officials {

gameD.official.add(official.name)

}

broker.ui.push(‘GameDetails’, gameD)

} catch(e) {

broker.ui.showAlert(“There isn’t data”, “The Match selected don’t have data.”)

}

Para la Rule 1) vamos a crear un archivo de Mat|r Script, llamado “games”, el cual va a ser una lista de juegos. En él solamente vamos a tener un atributo List que va a usar el template “match” para mostrar todos los partidos que devuelva la librería.

Experience Games {

Array<Teams> allTeams value([])

String name value(“Matches: “) as Label

Array<Teams> teams value([]) as List

Decision btn action(‘GamesContext.moreTeams’) label(‘See More…’)

OnCreate {

try {

Games g = broker.ui.getDataSource()

Array<Teams> push = []

Integer count = 0

while(count < 10 ) {

g.teams.add(g.allTeams.get(count))

count = count + 1

}

} catch(e) {

// code

}

Agregamos un botón que muestre de a 10 resultados, es para mejorar la velocidad de la aplicación ya que se traen muchos juegos. Si quieren ver el código pueden forkear la aplicación desde el Hub o pueden ver el código usando el código de invitación: fwJwYmz8. Al final les dejo el Link.

Acá también creamos una Rule que se ejecute al seleccionar un partido desde la Lista, esa se las dejo a ustedes o pueden ver el código después.

Para la Rule 2) y la Rule anterior que tienen que hacer vamos a crear un archivo de Mat|r Script ”gameDetails” para mostrar el detalle del juego que seleccionemos.

En esta Experiencia o pantalla vamos a mostrar datos del juego y los equipos que participaron del mismo. En las Rules anteriores ya hemos precargado los datos para pushearlos directamente a esta Experiencia.

Experience GameDetails {

String season as Label

String league as Label

String arena as Label

String city as Label

String country as Label

String startTime as Label

String endTime as Label

Array<String> official value([]) as List

String team1ID

String logo1 as Image

String team1Name as Label

// String team1ShortName as Label

String nick1Name as Label

String score1 as Label

Array<String> linesScore1 value([]) as List

Decision players1 action(‘GameDetailsContext.selectTeam1’) label(‘Show Team’)

String team2ID

String logo2 as Image

String team2Name as Label

// String team2ShortName as Label

String nick2Name as Label

String score2 as Label

Array<String> linesScore2 value([]) as List

Decision players2 action(‘GameDetailsContext.selectTeam2’) label(‘Show Team’)

}

Como pueden notar en el código de la experiencia GameDetails hay dos botones, estos son para mostrar el detalle del equipo que seleccionemos:

Para el primer Botón players1:

Rule selectTeam1 {

GameDetails gD = broker.ui.getDataSource()

TeamDetails tD = TeamDetails()

Integer id = changes.parseDouble(gD.team1ID)

nbapi::Team t = nbapi::Team()

t = nbapi::NBAFunctions.getTeambyID(key, id)

for teams in t.api.teams {

// tD.nameTeam = teams.name

tD.fullName = teams.fullName

tD.nickName = gD.nick1Name

tD.logo = teams.logo

tD.shortName = teams.shortName

tD.allStar = teams.allStar

tD.nbaFranchise = teams.nbaFranchise

tD.ligaConfName = teams.leagues.standard.confName

tD.ligaDivName = teams.leagues.standard.divName

tD.teamID = teams.teamId

}

broker.ui.push(‘TeamDetails’, tD)

}

Para el otro es lo mismo pero con 2 en las partes donde hay un 1.

Aquí tenemos que se pushean los datos a una Experiencia llamada ‘TeamDetails’, la cual está compuesta por la siguiente estructura:

Experience TeamDetails {

String fullName as Label

String nickName as Label

String logo as Image

String shortName as Label

String allStar as Label

String nbaFranchise as Label

String ligaConfName as Label

String ligaDivName as Label

String teamID

Decision players action(‘TeamDetailsContext.showPlayers’) label(‘List Players’)

Array<nbapi::Players> playerList value([]) as List

}

El Botón que vemos en la experiencia es para llenar la lista que se encuentra debajo con los jugadores del equipo, para ello ejecuta la Rule showPlayers que utiliza una función de la librería para traerlos.

Rule showPlayers {

TeamDetails tD = broker.ui.getDataSource()

nbapi::Player response = nbapi::Player()

Integer id = changes.parseDouble(tD.teamID)

tD.playerList = []

response = nbapi::NBAFunctions.getPlayerbyTeamId(key, id)

tD.playerList = response.api.players

}

Por último creamos una Rule para que al seleccionar uno de los jugadores de la lista podamos ver datos del mismo. Esta Rule se las dejo a ustedes, en la librería está la función que sirve para esto. (Para esto van a tener que usar la función para transformar Strings en Integers, está en la app).

Esta Rule tiene que pushear los datos a un experiencia llamada players la cual puede tener el siguiente cuerpo:

Experience Players {

String name as Label

String textYP value(‘Years of Professionalism: ‘) as Label

String yearsPro as Label

String textCN value(‘College Name: ‘) as Label

String collegeName as Label

String textC value(‘Country: ‘) as Label

String country as Label

String textBirth value(‘Date of Birth: ‘) as Label

String dateOfBirth as Label

String textA value(‘Affilliation: ‘) as Label

String affilliation as Label

String textSNBA value(‘Start NBA: ‘) as Label

String startNba as Label

String textH value(‘Height (Meters): ‘) as Label

String heightInMeters as Label

String textW value(‘Weight (Kilograms): ‘) as Label

String weightInKilograms as Label

String tittle value(‘Standard League: ‘) as Label

String textJ value(‘Jersey: ‘) as Label

String jersey as Label

String textP value(‘Position: ‘) as Label

String pos as Label

String textAct value(‘Active: ‘) as Label

String active as Label

String teamId

String playerId

}

Listo ya tendríamos una aplicación navegable y funcional que hace uso de una librería, sólo les queda hacerle la interfaz. Les dejo la aplicacion que yo cree y le agregué un par de cosas más.

App en el Hub: https://platform.matrproject.com/hub/view/5e2efe2c7b4f9c0014d3b58c
QR para ejecutar la app:
Código de invitación a la Aplicación: fwJwYmz8

Espero que les sirva y se enganchen con la programación en esta plataforma.

Saludos!