DEV Community: star__hoshi

Developed a web app to recognize App Store Connect promotion codes with a camera

star__hoshi — Tue, 08 Nov 2022 01:36:26 +0000

https://starhoshi.github.io/romoco?lang=en

I have developed a web app that allows the camera to recognize promotional codes.

When the promotion code is entered, an image is displayed that can be read by the camera of the App Store app, just like a gift card.

App Store Connect promotion codes are created in Plane Text, but typing them into an iPhone by hand is painful, so I made it possible to recognize them with a camera. The source code is here https://github.com/starhoshi/romoco

It's easy to use.

paste the promotion code you created on App Store Connect
Click on the link when it appears.
- Or copy and paste the code in Markdown format into the issue.
Read the code displayed by the camera function of the App Store app.

We publish about 20 promotion codes and paste them into GitHub Issues so that we can spit them out in Markdown, as we often use checkboxes to keep track of whether they have been used.

Security

Promotion codes are there to DL the app before launch, so it would be very bad if they were leaked.

romoco is deployed on GitHub Pages. GitHub Pages has poor analytics, so I can't see the promotion code entered by the user, although GitHub employees may be able to see the access log...

If you are concerned about security but would like to use it, you can self-host a gh-pages branch.

Technical

I wanted to participate in web front-end development for my work, and developed with Next.js 13, TypeScript, and CSS Modules for study purposes.

I tried Next.js 13's app directory, but many features are not yet available in beta (e.g. RuntimeConfig and next export), so I develop with the traditional pages directory. We use next export to deploy static files because GitHub Pages cannot do SSR.

It's a small app that doesn't even run the API, but I've learned a lot as an introductory developer, and I've gone through the Next.js tutorial, introduced TypeScript, used the RuntimeConfig functionality to use GitHub Pages, and added the next-export-i18n for multilingualization (Next.js i18n is not available in SSG), and PostCSS for CSS with CSS Modules.

When I created AlcatrazSearch 7 years ago. I used react-github-corner and was impressed that the same npm library still works properly.

End of story

At any rate, I'm glad I was able to make what I wanted. Please use it if you like!

In japanese: https://starhoshi.hatenablog.com/entry/2022/11/08/101803

Handle Slack's Incoming Webhook easily and type-safely in TypeScript

star__hoshi — Thu, 15 Feb 2018 15:31:07 +0000

slackapi/node-slack-sdk is great slack client. However, it does not contain d.ts files. So I made a library with type definition.

typed-slack has type definitions, so you can handle slack-api easily and type-safely.

Code completion is enabled when using VSCode.

Install

npm install typed-slack

Usage

Webhook

import * as Slack from 'typed-slack'

let slack = new Slack.IncomingWebhook('https://hooks.slack.com/services/.......')
slack.send({ text: 'text' }).then(e => {
  console.log('success')
}).catch(e => {
  console.error(e)
})

Use options

More optional parameters are here#typed-slack.d.ts

const options = <Slack.IncomingWebhookOptions>{
  text: '@star__hoshi Hi!',
  channel: 'debug',
  icon_emoji: ':smile:',
  link_names: 1,
  attachments: [
    {
      color: Slack.Color.Danger,
      fields: [
        {
          title: 'Priority',
          value: 'High',
          short: false
        }
      ],
      image_url: 'http://my-website.com/path/to/image.jpg',
      ts: 123456789
    }
  ]
}
await slack.send(options)

starhoshi/typed-slack

Please use typed-slack !

TDD in Cloud Functions for Firebase using rescue-fire

star__hoshi — Sun, 11 Feb 2018 14:45:25 +0000

The deployment of Cloud Functions is very slow. Deployment is normally completed in 30 seconds, but it sometimes take more than 10 minutes.
It is a waste of time to wait a few minutes just by rewriting one line.

Cloud Functions Emulator is very useful. However, it is hard to create the test data json, and it is not possible to write tests.

Let's emulate functions locally with rescue-fire and do TDD.

How to

Cloud Functions starts with a variable called event.

exports.updateUser = functions.firestore.document('users/{userId}')
  .onCreate(event => {
    console.log('old name', event.data.data().name)
    return event.data.ref.update({name: 'new name'})
})

If you can create this event, you can use Admin SDK to run almost the same code as Cloud Functions.
rescue-fire makes this event.

1. Installation

npm install rescue-fire --only=dev
yarn add --dev rescue-fire

2. Prepare Google Cloud Account Credentials

Download the service account key json file.

https://firebase.google.com/docs/admin/setup?authuser=0#add_firebase_to_your_app

This json file is sensitive, be careful.

Important: This file contains sensitive information, including your service account's private encryption key. Keep it confidential and never store it in a public repository.

3. Install testing library

Please use your favorite testing library.

For example, in the case of Jest:

npm install jest --only=dev
yarn add --dev jest

4. Write a test

Let's create a function to update name when user is created. The code of the function is as follows.

This sample is written in TypeScript.

const changeName = (event: functions.Event<DeltaDocumentSnapshot>) => {
  console.log('old name', event.data.data().name)
  return event.data.ref.update({ name: 'new name' })
}

The test will be like this.

import 'jest'
import * as admin from 'firebase-admin'
import * as functions from 'firebase-functions'
import * as Rescue from 'rescue-fire'

// Set up to run firebase in local.
beforeAll(() => {
  const serviceAccount = require('./your-firebase-adminsdk.json')
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
  })
})

test('update name', async () => {
  // prepare
  const data = {name: 'name'}
  const user = await admin.firestore().collection('user').add(data)
  const event = Rescue.event(user, data)

  // start Cloud Functions
  await changeName(event)

  // expect name changed
  const updatedUser = await admin.firestore().collection('user').doc(user.id).get()
  expect(updatedUser.data()!.name).toBe('new name')
})

Cloud Functions can be developed with TDD. (strictly not TDD 🙃)

This is a small function, but orderable.test.ts is testing huge functions with rescue-fire.

Optional Parameters defenitions is here.

4. Finally, create Functions

exports.updateUser = functions.firestore
  .document('users/{userId}')
  .onCreate(event => {
    return changeName(event)
})

🎉

Notes

The event created by rescue-fire is not complete. I think that it is enough to write tests, but keep in mind that it is different from the actual event.

Please use starhoshi/rescue-fire: A test helper for Cloud Functions.!