Making your own Shanghai street sign

At my recent engagement party we had designed some personalised Shanghai street signs! A lot of people asked me how to make one, so I thought I'd provide a tutorial.

2014-04-26 21.26.47

If you're not familiar with Shanghai street signs, this is how modern signs look! You'll still find older green signs around Shanghai, but all signs in central Shanghai use the new format.

hong

My first step was to recreate the shapes, colors and fonts in Illustrator. If you don't have Illustrator you can download a 30 day trial version from Adobe as part of Creative Cloud.

You can download my completed Illustrator AI file here.

For fonts I'm using 黑体-简 for the Chinese text and Helvetica for the English text. You can substitute similar fonts if you don't have those on your computer.

Screenshot 2014-05-01 17.29.14

It's best to convert text to outlines before sending to a printer - you can do that in Type > Create Outlines.

Next, I contacted a printer: I can recommend PicJoy in Shanghai - you can email them on print at picjoy.com. For 2 copies on A2 sized foam board, 1 side printing, matt lamination, they quoted me just 50 RMB.

In 1-3 days you should receive your street signs! You can easily cut them out of the board using an Exacta knife and a ruler.

If you make your own Shanghai street sign, do send us a picture!

Helping Local Entrepreneurs

LeiPing brochure & businesscard

LeiPing, originally from Sichuan, has been successfully running her own business as a masseuse and skincare specialist here in Shanghai for over 8 years.

How can we help small-size entrepreneurs in a way that enables them and their business to reach out to new markets?

We took a short break from our usual work and designed a brochure and business card for Lei Ping. This allows her to build her brand, and find new clients, Chinese and foreign alike.

It was good to step out of our daily routine and design for print for a day. Now, back to apps!

If you want to schedule an appointment, please contact Lei Ping at 136 3632 6672, or connect with her on WeChat (Jessicaleiping).

One small catch, she only treats women.

Lei Ping brochure LeiPing business cards

 

¡Tweetfeet no es Fácil!

Han visto este espectacular comercial de Carozzi?

¡Sí, ese teclado es real! y ReignDesign, tu empresa favorita en la creación de aplicaciones móviles, desarrolló las versiones móviles de TweetFeet.

!Es tiempo de terminar con el sedentarismo! Párate y twitea con tus pies.

La entretenida idea de escribir un tweet con los pies viene de la agencia BBDO. El teclado gigante usado en el comercial, como la interacción y back-end del proyecto fue realizado por MZZO. Juntos creamos esta nueva forma de Twittear.

Una vez que descargues TweetFeet, comienza a moverte y deja que tus pies escriban. Rotando tu teléfono te permitirá ver varias letras y símbolos. Una vez encontrada la letra correcta, haz una patada en el aire. Luego de escribir tu mensaje, hace un ¨shake¨ con tu teléfono y postea en Twitter o Facebook.

¿Buen entrenamiento, no? Tweetfeet es entretenido de usar, pero probablemente no reemplace una hora en el gimnasio a no ser que que tengas mucho que Twitear. La aplicación está disponible en Google Play y en la App Store.

 

Tweetfeet is No Easy Feat!

Have you seen this amazing commercial from Carozzi, the Chilean pasta company?

Yes, that’s a real keyboard! And ReignDesign, your favorite app company, developed the mobile versions of Tweetfeet.

It’s time to stop being sedentary! Get up and Tweet with your feet!
The novel idea of typing with your feet came from the ad agency, BBDO. The keyboard used in the commercial as well as the backend work was developed by MZZO. Together we have created a keyboard that’s designed for writing, posting, and tweeting with your feet.

Once you’ve downloaded Tweetfeet, start walking and let your feet do the typing. Turning your phone will allow you to see various letters and symbols. Once you find the correct letter, kick your leg into the air. After you have type-kicked your message, shake your phone to post to Twitter or Facebook.

Great workout, right? Tweetfeet is fun to use, but it probably won’t replace an hour at the gym unless you have a lot to Tweet about. The app is now available on Google Play and the App Store.

Building a WeChat (Weixin) robot

Matt presented a talk on Building a WeChat robot at Barcamp Shanghai Spring 2014! Here's a recap of the talk, as well as a link to download the source code of the robot.

If you'd like to skip the technical jargon and just play with the real bot, scan this QR code in WeChat and send our bot a message, or just search for "ReignDesign"!

Weixin Bot.006

Now, robots are cool, but building a real robot requires lots of hardware knowledge.

Weixin Bot.004

And one common topic you'll notice in today's talk is that I am quite lazy.

Weixin Bot.003

So when I say "robot" I'm talking about a robot you can build with software: a chatterbot. Send a message to a WeChat account, and get a message back.

Why WeChat? WeChat is ubiqituous in China, and so it's a great way of getting your service in front of as many people as possible, without them having to download another app.

Weixin Bot.005

Now you or I have personal WeChat accounts, but if we want to build a bot we need an official account. There are two types of these, Subscription Accounts and Service Accounts.

Weixin Bot.007

Subcription Accounts are best for marketing purposes. You have the ability to send up to 5 "broadcasts" each month to all your followers - perhaps if you are a restaurant, you want to announce some new specials. The downside of subscription accounts is they are hidden away in the WeChat interface inside the Subscription Accounts section.

Service Accounts are listed in the main WeChat friends list. You're only allowed to send one broadcast a month. But, any time someone sends you a message, you can reply to them immediately, and also send them messages for up to 48 hours. So, if you're trying to do customer service via WeChat, or build a bot, a Service Account is a great choice.

Here's the signup form for a WeChat official account (currently Chinese only).

Weixin Bot.008

You'll need to provide some basic information like name, email address, and which type of account you want. The two pieces of information that may require some effort are the 营业执照 (Company License) and 组织机构代码证 (Organization number). Right now you'll need to have a Chinese company license to apply for a WeChat official account.

After submitting all your data, be prepared to wait. It will take about 3 business days for your app to get approved.

Weixin Bot.009

One you're finally approved, you have access to the WeChat API. This comes in two flavours: basic API and advanced API. The basic API provides all that we need to build a basic chatterbot!

Weixin Bot.010

In the Developers section, you now need to provide a URL and Token. At the URL provided you now need to provide a simple web server. This will listen for requests from the WeChat server. So, for example every time someone sends you a message, you receive an HTTP request with the details of their message.

Weixin Bot.012

For our backend server we used a simple stack running on Heroku, with Node.js and Express, but you could use any language and framework, like Ruby on Rails, or PHP.

Weixin Bot.013

When you first register an application with WeChat they will send you an authorization request to your URL. This includes the token you provided earlier, plus various other OAuth credentials, and an parameter called "echo_str", which you should return if everything checks out OK.

As mentioned previously, I'm quite lazy, so to avoid having to figure out the authentication issues, I simply return the echo_str for ALL requests. This should not be recommended in a production application.

Weixin Bot.016

Now, each time you receive a message to your account, you'll get an HTTP request. You may be hoping for a nice JSON payload.

Weixin Bot.017

Unfortunately Tencent decided to use XML, and not very well structured XML at that.

Weixin Bot.018

Here's what a typical incoming message looks like.

Weixin Bot.019

You get a FromUserName and ToUserName. These are actually encrypted so you don't have access to the user's real WeChat ID. There's also a timestamp, the type of message (in this case text, but it could also be image, video or voice) and the text content.

To parse this in Node.js, we install an npm package called express-xml-bodyparser and configure Express to use it.

Weixin Bot.020

Next we implement a method to handle the request. We parse the values out of the XML...

Weixin Bot.021

Then we construct some XML to send back as a response. Notice that we've switched the to username and from username, to ensure the message gets sent back to the recipient. The text of our reply is "Thanks for sending me a message saying (original message)".

Weixin Bot.022

How does this work? Like this!

Weixin Bot.023

Now this is great, but of course version 1 of our robot is pretty stupid. How can we imbue our bot with some more intelligence?

To solve this I turned to the work of Joseph Weizenbaum.

Weixin Bot.024

He was a brilliant German-American computer scientist based at MIT. In 1966 he wrote a program called ELIZA. ELIZA was one of the first programs which tried to interpret and respond to natural language inputs from users.

It did this via some basic pattern matching. ELIZA could be fed with different scripts of patterns, and the most famous of these, called "DOCTOR", imitated a psychiatrist.

Weixin Bot.026

Here's ELIZA in action. You can see that ELIZA picks out certain words in a statement, and is able to formulate a reply using the words.

Weixin Bot.025

Now you're just talking nonsense!
> What makes you believe now I am just talking nonsense?

Weizenburg was surprised to discover that despite the primitiveness of the logic, users became quickly emotionally involved with interacting with ELIZA.

ELIZA is a fascinating episode in computing history, and I was delighted to see that the ELIZA logic is available as a npm module. That means integrating it into my bot was very simple.

First, install the module

Weixin Bot.027

Then, replace the reply logic with a new function.

Weixin Bot.028

Here's the code for replying. We keep a dictionary of ElizaBot objects. That way we can give each unique user who messages us their own instance. That means the message "memory" can be kept distinct.

If this is a new user, we set up a new ElizaBot for them, and request an initial phrase like "Please tell me your problem".

Weixin Bot.029

If this is an existing user, we simply call eliza.transform to get a suitable response, based on the last line of input (and previous inputs).

Weixin Bot.030

Let's see how this works:

Weixin Bot.031

There seems to be great potential for using ELIZA for people who are interested in app development services in Shanghai ;)

Weixin Bot.032

Of course, while this is a fun example, there's lots of cool stuff you could make with WeChat robots. A robot could return weather or air quality data on demand. If a user sends you a picture, you could do image processing on that picture and send them back something really creative. The only limit is your imagination!

Weixin Bot.034

To try out the ReignDesign bot, scan this QR code!

qrcode_for_gh_5108e39bfd75_1280

To download the source code, check out the project on GitHub

Interested in finding out more about what's possible with WeChat, mobile apps, or other new technologies like iBeacon? Contact us!