通過小程序給公眾號(hào)傳遞消息

by Dawid Woldu

戴維德·沃爾杜(Dawid Woldu)

多輸入現(xiàn)場(chǎng)消息傳遞應(yīng)用程序概念 (A multi-input field messaging app concept)

Some time ago I shared in a Medium article the idea for context aware messenger app. The idea challenged the design limitation behind all messenger apps allowing you to write only one message at a time.

前段時(shí)間， 我在中型文章中分享了上下文感知的Messenger應(yīng)用程序的想法。 這個(gè)想法挑戰(zhàn)了所有Messenger應(yīng)用程序背后的設(shè)計(jì)局限性，使您一次只能編寫一條消息。

What I always missed in these apps was a way to save the message I’m currently typing and type and send something else instead. Then a way to get back to previously composed message and continue. Just to stay on topic and keep some order in my conversations.

我在這些應(yīng)用程序中一直想念的是一種保存我當(dāng)前正在鍵入的消息并鍵入然后發(fā)送其他內(nèi)容的方法。 然后是一種返回到先前編寫的消息并繼續(xù)的方法。 只是為了保持話題性，保持對(duì)話中的秩序。

The way I do it today involves the sequence of text field related gestures: Long press, Select All, Cut, Type in, Send, Long press, Paste, continue.

我今天的操作方式涉及文本字段相關(guān)手勢(shì)的順序： 長(zhǎng)按，全選，剪切，鍵入，發(fā)送，長(zhǎng)按，粘貼，繼續(xù)。

My concept allowed to replace that sequence with a single tap, but it was up to the app to recognise the need for saving a message based on the context of the conversation. I built a Quartz Composer prototype to show the feature in action:

我的概念允許一次單擊即可替換該序列，但應(yīng)由應(yīng)用程序來確定是否需要根據(jù)對(duì)話的上下文來保存消息。 我構(gòu)建了一個(gè)Quartz Composer原型來展示該功能的實(shí)際效果：

But I never shared the prototype, as it wasn’t functional, allowed for only one extra input field and was done solely for the purpose of recording that video. Also Origami prototypes for Quartz Composer didn’t work very well on the device (not mentioning the absence of native keyboard).

但是我從未共享過這個(gè)原型 ，因?yàn)樗鼪]有功能，只允許一個(gè)額外的輸入字段，并且僅僅是為了錄制視頻而完成的。 同樣，用于Quartz Composer的Origami原型在該設(shè)備上也無法很好地工作(更不用說缺少本機(jī)鍵盤了)。

Release of Origami Studio allowed me to revisit the concept and build fully functional (sort of) prototype to share.

Origami Studio的發(fā)行使我能夠重新審視概念并構(gòu)建功能齊全的原型(以便共享)。

I ditched the context aware part and allowed for saving as many drafts as you need, whenever you feel like it.

我放棄了上下文相關(guān)的部分，并允許在需要時(shí)保存任意數(shù)量的草稿。

這是新原型的演示視頻。 (Here’s a demo video of the new prototype.)

在折紙工作室制作。 (Building in Origami Studio.)

I could write a separate article/tutorial for each of the technical challenges I encountered while building the proto, but I’ll limit myself to just briefly list some of them here. Hopefully these short descriptions will be enough to spark some ideas whenever you encounter similar blocks. If not don’t hesitate to ping me directly.

我可以為構(gòu)建原型時(shí)遇到的每種技術(shù)挑戰(zhàn)寫一篇單獨(dú)的文章/教程，但我會(huì)限制自己僅在此處簡(jiǎn)要列出其中一些挑戰(zhàn)。 希望這些簡(jiǎn)短的描述足以在遇到類似的問題時(shí)引發(fā)一些想法。 如果不是這樣，請(qǐng)直接與我聯(lián)系 。

多行輸入字段。 (Multi line input field.)

Text Field component in Origami Studio doesn’t allow for multi line inputs. When you double tap on it to reveal it’s content’s you’ll find the actual Text Input component that does. The problem is it doesn’t have a cursor/caret. So hacked in a cursor by measuring the position of the last letter in the text field.

Origami Studio中的“文本字段”組件不允許多行輸入。 當(dāng)您雙擊它以顯示其內(nèi)容時(shí)，您會(huì)發(fā)現(xiàn)實(shí)際的文本輸入組件。 問題是它沒有光標(biāo)/插入符號(hào)。 因此，通過測(cè)量文本字段中最后一個(gè)字母的位置來侵入光標(biāo)。

Each time you type a letter I check if it’s a ‘space’ and if it is I append it’s index to an Array of spaces. Then I assume that whenever height of the input increases the text will break at the last recorded space. Then I measure the rest of the text to place a cursor in a correct position of the new line. When you don’t tap the space I just measure the size of the text that fit the line.

每次輸入字母時(shí)，我都會(huì)檢查它是否為“空格”，是否將其索引附加到空格數(shù)組中。 然后，我假設(shè)只要輸入的高度增加，文本就會(huì)在最后記錄的空間中斷。 然后，我測(cè)量其余文本，以將光標(biāo)放置在新行的正確位置。 當(dāng)您不點(diǎn)擊空格時(shí)，我只是測(cè)量適合該行的文本的大小。

建立對(duì)話供稿。 (Building a conversation feed.)

The challenge here was dynamically creating chat bubbles while keeping the correct order in the feed. When bot starts typing you can see the last bubble on the feed with 3 jumping dots. But if you send the message before it finishes typing your bubble should land on the feed before the bot’s bubble. I managed to make it work by keeping two arrays of messages. Temporary one (bot typing) and final and switching between them whenever bot starts typing or sends the message.

這里的挑戰(zhàn)是如何動(dòng)態(tài)創(chuàng)建聊天氣泡，同時(shí)又要保持Feed中正確的順序。 機(jī)器人開始輸入內(nèi)容時(shí)，您會(huì)看到Feed上的最后一個(gè)氣泡，并帶有3個(gè)跳躍點(diǎn)。 但是，如果您在結(jié)束輸入消息之前就發(fā)送了消息，則氣泡應(yīng)在機(jī)器人氣泡之前落入供稿。 我設(shè)法通過保留兩個(gè)消息數(shù)組來使其工作。 臨時(shí)一個(gè)(機(jī)器人輸入)和最終輸入，并在機(jī)器人開始輸入或發(fā)送消息時(shí)在它們之間切換。

I created a JSON config file with the bot messages that allow you to configure what and when the bot is sending and if it should wait for your message(s) to start typing.

我使用漫游器消息創(chuàng)建了一個(gè)JSON配置文件，該文件可讓您配置漫游器發(fā)送的內(nèi)容和時(shí)間以及是否應(yīng)等待您的消息開始鍵入。

{"message":"Ok, I'm dumb. What do you want from me?!", "waitforuser":2,"delay":1}

waitforuser — describes how many user messages should the bot wait for before it starts typing. Zero means it won’t wait for user at all.delay — time in seconds before bot starts typing.

waitforuser —描述了機(jī)器人在開始鍵入之前應(yīng)該等待多少用戶消息。 零表示完全不等待用戶。 delay —機(jī)器人開始鍵入之前的時(shí)間(以秒為單位)。

創(chuàng)建/刪除輸入字段并管理其順序。 (Creating/removing input fields and managing their order.)

Whenever you create input field I’m increasing the count on the Loop patch, but as soon as you don’t need the field anymore I tried to remove the field from the loop and keep the other input fields keep their order and content. It was impossible for me to figure out as loop patches don’t keep the reference to the actual instance of the element they’re replicating. I worked around by hiding and reusing unused fields instead of removing them from the loop.

每當(dāng)您創(chuàng)建輸入字段時(shí)，我都會(huì)增加Loop補(bǔ)丁的數(shù)量，但是一旦您不再需要該字段時(shí)，我就會(huì)嘗試從循環(huán)中刪除該字段并保留其他輸入字段的順序和內(nèi)容。 我不可能弄清楚，因?yàn)?strong>循環(huán)補(bǔ)丁并沒有保留他們復(fù)制元素的實(shí)際實(shí)例的引用 。 我通過隱藏和重用未使用的字段而不是將其從循環(huán)中刪除來解決。

下載！ (Downloads!)

You can download Origami prototype, JSON file as well as multiline text field component from my Google Drive.

您可以從我的Google云端硬盤下載Origami原型，JSON文件以及多行文本字段組件。

用戶手冊(cè)： (User’s Manual:)

Long press on Send button to save the current text and create new input field. (Yes! It’s undiscoverable. I know.)Prototype is optimised for use on the device. (You can’t hide the keyboard)

長(zhǎng)按“發(fā)送”按鈕以保存當(dāng)前文本并創(chuàng)建新的輸入字段。 (是的！這是無法發(fā)現(xiàn)的。我知道。)原型針對(duì)設(shè)備使用進(jìn)行了優(yōu)化。 (您不能隱藏鍵盤)

最后一分鐘發(fā)現(xiàn)了一些有趣的事實(shí)： (Last minute discovered fun facts:)

* The prototype crashes when using emojis. ?* Multi line input field cursor can behave erratically when typing super fast (I’m sharing anyway).* When you send a message in the exact time that bot starts typing, the empty bot message can appear on the feed.* Other bug fixes and performance improvements. (What?!)

*使用表情符號(hào)時(shí)原型崩潰。 **輸入超快速時(shí)多行輸入字段光標(biāo)的行為異常(無論如何我還是在共享)。*如果您在機(jī)器人開始鍵入的確切時(shí)間發(fā)送消息，則在消息源中可能會(huì)出現(xiàn)空的機(jī)器人消息。*其他錯(cuò)誤修復(fù)和性能改進(jìn)。 (什么？！)

翻譯自: https://www.freecodecamp.org/news/multi-input-field-messaging-app-concept-911096778de3/

通過小程序給公眾號(hào)傳遞消息

總結(jié)

以上是生活随笔為你收集整理的通过小程序给公众号传递消息_多输入现场消息传递应用程序概念的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。