아이폰 유용한 앱 [Scriptable] 축구팀 경기 일정 위젯 만들기

앱 [Scriptable]을 이용한 경기일정 위젯

 

위 사진처럼 좋아하는 축구팀(저는 첼시 팬입니다!)의 경기 일정을 위젯으로 볼 수 있는 어플이 있어요.

App Store에서 받을 수 있는 [Scriptable]라는 어플인데요.

이 앱은 앱 내에서 각종 스크립트를 실행시킬 수 있어요.

그리고 iOS 14+부터는 위젯에 자바스크립트를 적용하는 것이 가능해졌어요.

바로 사용법을 알려드릴게요~!

---

 

앱스토어 [Scriptable] 어플

App Store 검색창에  Scriptable 검색하시고 위 어플을 받고 실행시켜주세요~~

[Scriptable] 실행창

앱을 실행시키면 위와 같은 화면이 나오는데 오른쪽 상단 + 버튼을 눌러주세요.

 

[Scriptable] 스크립트 입력창

그러면 스크립트를 입력하는 화면이 나오게 되는데 아래 내용들을 그대로 넣어주세요.

( gist.github.com/ilyichvismara/7895bb479e14a999f3cfd2c391f10597 이 링크 내용을 참고했습니다. )

 

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-gray; icon-glyph: futbol;
const teamId = 133681;
const teamDetailUrl = "https://www.thesportsdb.com/api/v1/json/1/lookupteam.php?id=";

const leagueDetailUrl = "https://www.thesportsdb.com/api/v1/json/1/lookupleague.php?id="

const teamUrl = teamDetailUrl + teamId;
let r = new Request(teamUrl);
let teamDetail = await r.loadJSON();

const widgetSize = config.widgetFamily

const maxEvents = widgetSize === "large" ? 4 : 2

async function getTeamImg(id) {
  let teamUrl = teamDetailUrl + id;
  let req = new Request(teamUrl)
  let res = await req.loadJSON()
  let imageUrl = res.teams[0].strTeamBadge + "/preview"
  let imgReq = new Request(imageUrl)
  let img = await imgReq.loadImage()
  return img
}

async function getLeagueImg(id) {
  let leagueUrl = leagueDetailUrl + id;
  let req = new Request(leagueUrl)
  let res = await req.loadJSON()
  let imageUrl = res.leagues[0].strBadge
  let imgReq = new Request(imageUrl)
  let img = await imgReq.loadImage()
  return img
}

function createDivider() {
  const drawContext = new DrawContext()
  drawContext.size = new Size(543, 1)
  const path = new Path()
  path.addLine(new Point(1000, 20))
  drawContext.addPath(path)
  drawContext.setStrokeColor(Device.isUsingDarkAppearance() ? new Color("#fff", 1) : new Color("#000000", 1))
  drawContext.setLineWidth(1)
  drawContext.strokePath()
  return drawContext.getImage()
}

async function createWidget() {
  const eventsUrl = "https://www.thesportsdb.com/api/v1/json/1/eventsnext.php?id=" + teamId;
  let req = new Request(eventsUrl);
  let res = await req.loadJSON();
  let events = res.events;

  let teamImg = await getTeamImg(teamId)

  let w = new ListWidget();

  w.backgroundColor = Device.isUsingDarkAppearance() ? new Color("#2C2C2E", 1) : new Color("#ffffff", 1)
  w.useDefaultPadding()

  const limitedEvents = events.slice(0, maxEvents)

  const imageSize = widgetSize === "large" ? 32 : 26;

  w.addSpacer()

  if (widgetSize === "large") {

    const teamName = events[0].idHomeTeam == teamId ? events[0].strHomeTeam : events[0].strAwayTeam
    let titleStack = w.addStack()
    let title = titleStack.addText(`${teamName}'s upcoming matches`)
    title.font = Font.boldSystemFont(16);

    w.addSpacer()

  }

  for (let i = 0; i < limitedEvents.length; i++) {
    let e = events[i]

    if (widgetSize === "large" || i > 0) {
      w.addSpacer(10)
    }

    let homeImg = ""
    let awayImg = ""

    if (e.idHomeTeam == teamId) {
      homeImg = teamImg
      awayImg = await getTeamImg(e.idAwayTeam)
    } else {
      homeImg = await getTeamImg(e.idHomeTeam)
      awayImg = teamImg
    }

    let rowStack = w.addStack()
    rowStack.centerAlignContent()

    // home team image
    let homeImageStack = rowStack.addStack();
    let homeImage = homeImageStack.addImage(homeImg);
    homeImage.imageSize = new Size(imageSize, imageSize)
    homeImageStack.addSpacer(10)

    // home team name
    let homeNameStack = rowStack.addStack();
    let homeName = homeNameStack.addText(e.strHomeTeam);
    homeName.font = Font.mediumSystemFont(12);
    homeNameStack.size = new Size(100, 14)
    homeNameStack.addSpacer()

    let separatorStack = rowStack.addStack();
    let separator = separatorStack.addText('-')
    separator.font = Font.mediumSystemFont(12)
    separatorStack.size = new Size(24, 12)
    separatorStack.addSpacer(10)

    // away team name
    let awayNameStack = rowStack.addStack();
    awayNameStack.addSpacer()
    let awayName = awayNameStack.addText(e.strAwayTeam);
    awayName.font = Font.mediumSystemFont(12);
    awayNameStack.size = new Size(100, 14)
    awayNameStack.addSpacer(10)

    // away team image
    let awayImageStack = rowStack.addStack();
    let awayImage = awayImageStack.addImage(awayImg);
    awayImage.imageSize = new Size(imageSize, imageSize);

    w.addSpacer(5)

    let infoRowStack = w.addStack()
    infoRowStack.centerAlignContent()
    infoRowStack.addSpacer()

    let dateStack = infoRowStack.addStack()
    const dateFormatter = new DateFormatter()
    dateFormatter.useMediumDateStyle()
    dateFormatter.useShortTimeStyle()
    let parsedDate = new Date(Date.parse(e.strTimestamp))
    let formattedDate = dateFormatter.string(parsedDate)

    let date = dateStack.addText(formattedDate)
    date.font = Font.mediumSystemFont(10)
    date.textOpacity = 0.5

    dateStack.addSpacer(10)

    //league image
    if (widgetSize === "large") {
      let leagueImg = await getLeagueImg(e.idLeague)
      let leagueImageStack = infoRowStack.addStack()
      let leagueImage = leagueImageStack.addImage(leagueImg)
      leagueImage.size = new Size(10, 10)
    }

    infoRowStack.addSpacer()

    if (i !== maxEvents - 1) {
      w.addSpacer(10)

      let dividerStack = w.addStack()
      let divider = dividerStack.addImage(createDivider())
      divider.imageOpacity = 0.5
    }
  }

  w.addSpacer()

  return w
}

const widget = await createWidget()

Script.setWidget(widget)
Script.complete()

await widget.presentLarge()

 

[Scriptable] 스크립트 입력

위 스크립트를 그대로 넣으셨으면 인터밀란의 일정이 나오게 되는데 본인이 좋아하는 팀으로 수정을 해야겠죠??

위 동그라미 친 번호가 팀의 고유번호인데요. 첼시의 번호는 133610 입니다.

(이 기능이 제공되는 API 내에서 설정한 번호입니다.)

우리가 원하는 팀의 고유번호를 찾아하는데 그러기 위해서 이 API를 제공해주는 사이트를 참고해야합니다.

TheSportsDB.com | Free Crowd-Sourced Sports API with Artwork and Metadata

이 사이트인데요. 접속을 하시면 [Search Team, Event or Player] 라는 검색창이 있습니다.

The Sports DB 홈페이지

아래 검색창에 자신이 찾고자 하는 팀명을 검색에 적어주세요. (영어로 기입해야합니다.)

저는 리버풀 ( Liverpool ) 을 검색해볼게요.

The Sports DB 홈페이지 / 리버풀 검색 결과

리버풀을 검색하면 위와 같은 화면이 나오는데 이제 그 팀의 앰블럼을 클릭해주세요.

The Sports DB 홈페이지 / 리버풀 데이터

그러면 주소 뒷부분에 번호(133602)가 붙는데 이것이 리버풀의 고유번호입니다.

이제 이 번호로 아까 위 스크립트에서 알려드렸던 팀 고유번호 부분을 수정해주세요.

그리고 Done을 누르시면 됩니다.  그러면 UntitledScript 라는 항목이 생기셨을텐데 그러면 성공입니다.

이제 아이폰 홈 화면으로 가보죠.

홈 화면의 빈 곳을 꾹 누르면 위젯을 추가하는 버튼이 나옵니다.

위젯 추가 화면

위젯 추가 화면

홈 화면에 위젯을 추가했으면 

Scriptable 위젯 홈 화면 배치

이렇게 나오셨을텐데 이제 위젯을 꾹 눌러봅시다. 그러면 위젯 편집 항목이 나오죠. 눌러주시고 

위젯 편집 화면

 

위 사진에 동그라미친 선택 눌러주시면 아까 만들었던 Untitled Script가 있습니다. 선택한 뒤에 창 닫아주세요. 

최종 결과 홈 화면

그러면 완성~!

혹시나 안되는 부분 있으면 댓글로 질문주세요.ㅎㅎ