周開(kāi)梅

隨著信息技術(shù)的高速發(fā)展，多媒體技術(shù)成了教育教學(xué)的得力助手，并呈現(xiàn)出多樣化、智能化的發(fā)展趨勢(shì)。運(yùn)用多媒體技術(shù)后，教學(xué)內(nèi)容變得生動(dòng)、形象，課堂的直觀性和趣味性都得到了增強(qiáng)，并極大地激發(fā)了學(xué)生的學(xué)習(xí)興趣，營(yíng)造出了良好的學(xué)習(xí)氛圍。使用頻率最高的多媒體技術(shù)要數(shù)演示文稿PowerPoint，除此之外還有實(shí)物展臺(tái)、翻頁(yè)筆、觸控屏、平板、電子白板、投屏器等。作為一名信息技術(shù)教師，多年來(lái)我一直在嘗試運(yùn)用自己的專業(yè)知識(shí)設(shè)計(jì)一些輔助教學(xué)的程序。其中，我用App Inventor制成的隨機(jī)點(diǎn)名App，既能減輕教師記名字的負(fù)擔(dān)，增加課堂樂(lè)趣，又能督促學(xué)生學(xué)習(xí)，讓他們上課更專心，從而提高課堂教學(xué)效率。下面我們就一起來(lái)看看這款隨機(jī)點(diǎn)名App是如何設(shè)計(jì)與實(shí)現(xiàn)的：

一、關(guān)于App Inventor

STEAM教育越來(lái)越受到我國(guó)教育界關(guān)注，STEAM綜合了科學(xué)（Science）、技術(shù)（Technology）、工程（Engineering）、數(shù)學(xué)（Mathematics）和藝術(shù)（Arts）這五個(gè)學(xué)科知識(shí)，更提倡一種新的教學(xué)理念：讓孩子們自己動(dòng)手完成他們感興趣的，并且和他們生活相關(guān)的項(xiàng)目，從過(guò)程中學(xué)習(xí)各種學(xué)科及跨學(xué)科知識(shí)。App Inventor手機(jī)編程正是這一教育的具體體現(xiàn)。

近年，手機(jī)App應(yīng)用得到了飛速發(fā)展，各種功能的手機(jī)App正日益影響和改變著我們的生活。同時(shí)，手機(jī)App開(kāi)發(fā)課程也開(kāi)始慢慢步入中學(xué)課堂，雖然目前還沒(méi)有在全國(guó)初高中的信息技術(shù)課中全面普及，但在很多一線城市中，“App Inventor程序設(shè)計(jì)”教學(xué)已風(fēng)生水起。2014～2018年，全國(guó)已舉辦了五屆中學(xué)生App Inventor應(yīng)用開(kāi)發(fā)挑戰(zhàn)賽，欲通過(guò)此賽事，全面調(diào)動(dòng)中學(xué)生的程序思維與創(chuàng)新能力。由于“App Inventor程序設(shè)計(jì)”目前尚不屬于學(xué)考內(nèi)容，也沒(méi)被納入初高中信息技術(shù)教材，加之各校初高中信息技術(shù)課課時(shí)有限，不參與學(xué)考的內(nèi)容要想在有限的課時(shí)條件下擠入正課顯然還不具備條件。目前，學(xué)校要想開(kāi)設(shè)此課程只有依靠選修課。課程開(kāi)設(shè)期間，學(xué)生需要應(yīng)用自帶的配有安卓操作系統(tǒng)的手機(jī)編寫(xiě)及測(cè)試App程序，教學(xué)需要在Wifi環(huán)境下完成。這對(duì)學(xué)生和學(xué)校環(huán)境都提出了不同于常規(guī)信息技術(shù)教學(xué)的更高要求。開(kāi)設(shè)“App Inventor程序設(shè)計(jì)”課程，也對(duì)教師的專業(yè)知識(shí)提出了更高的要求。由于這個(gè)內(nèi)容是新技術(shù)、新知識(shí)，教師在授課前必須有較強(qiáng)的自學(xué)能力與實(shí)踐能力才能輕松駕馭。

學(xué)生無(wú)須任何編程基礎(chǔ)，在可視化編程界面下，通過(guò)模塊拼接的方式，類(lèi)似搭積木的形式，制作Android手機(jī)程序，并可以在手機(jī)上運(yùn)行。App Inventor之父Harold Abelson（MIT教授）曾經(jīng)說(shuō)過(guò)：“App Inventor編寫(xiě)的應(yīng)用程序或許不是很完美，但它們卻是普通人都能做到的，而且通常是在幾分鐘之內(nèi)即可完成。”

http：//app.gzjkw.net/login/是目前國(guó)內(nèi)唯一的App Inventor官方服務(wù)器（如圖1），我們通過(guò)瀏覽器訪問(wèn)，就能進(jìn)行安卓系統(tǒng)下的App開(kāi)發(fā)，無(wú)須安裝。登錄網(wǎng)站以后，用戶只需注冊(cè)一個(gè)賬號(hào)，就能使用，非常方便。圖2是App Inventor的設(shè)計(jì)界面，中間區(qū)域類(lèi)似手機(jī)屏幕，App的外觀設(shè)計(jì)就在這里進(jìn)行，在進(jìn)行App外觀設(shè)計(jì)的時(shí)候，需要用到設(shè)計(jì)界面左邊的組件，我們可以把它們想象成一件件工具，設(shè)計(jì)界面最右邊是屬性面板。

二、文字版點(diǎn)名App

在手機(jī)中啟動(dòng)做好后的“文字版點(diǎn)名App”，最終效果如圖3。當(dāng)我們點(diǎn)擊“開(kāi)始”按鈕后，名字開(kāi)始在屏幕中滾動(dòng)播放，點(diǎn)擊“停止”按鈕時(shí)，名字停止?jié)L動(dòng)，同時(shí)手機(jī)念出屏幕中的名字，達(dá)到隨機(jī)點(diǎn)名的功能。那么這樣一種呈現(xiàn)效果是如何達(dá)到的呢？首先，我們需要把學(xué)生的名單保存在“mingdan.txt”記事本文件中，保存要求如圖4所示，一行一個(gè)名字;然后，再進(jìn)行如下操作一步步實(shí)現(xiàn)。

1. 文字版點(diǎn)名App的界面設(shè)計(jì)

我們首先在App Inventor中進(jìn)行文字版點(diǎn)名App的界面設(shè)計(jì)，也就是點(diǎn)名App的外觀設(shè)計(jì)，最終設(shè)計(jì)效果如圖5。在這個(gè)App中，我們用到了如下組件：4個(gè)按鈕，1個(gè)計(jì)時(shí)器，1個(gè)文件管理器，1個(gè)文本語(yǔ)音轉(zhuǎn)換器，1個(gè)垂直布局，1個(gè)水平布局。它們的功能如下表所示。

2. 邏輯設(shè)計(jì)（后臺(tái)指令代碼）

界面設(shè)計(jì)好了，下面我們通過(guò)邏輯設(shè)計(jì)編寫(xiě)指令代碼，來(lái)實(shí)現(xiàn)隨機(jī)點(diǎn)名的功能。在App Inventor軟件的右上角，有兩個(gè)按鈕：“組件設(shè)計(jì)”和“邏輯設(shè)計(jì)”，通過(guò)單擊“邏輯設(shè)計(jì)”按鈕，我們可以進(jìn)入編程的界面。App Inventor是一款圖形化編程工具，它的指令代碼是一個(gè)個(gè)封裝好的彩色積木塊，編程的過(guò)程就是拼接搭建這些積木塊的過(guò)程。這些積木塊是按類(lèi)別存放的，如圖6所示，數(shù)學(xué)類(lèi)的都在數(shù)學(xué)模塊里，文本類(lèi)的在文本模塊里。內(nèi)置塊中的模塊屬于一些基礎(chǔ)模塊，在編程過(guò)程中經(jīng)常要用到。

（1）準(zhǔn)備工作

我們先讀取mingdan.txt記事本中的名字到程序的“文件管理器1”中。由于文件管理器只是一個(gè)從記事本到App Inventor軟件的中介，在App Inventor中不能直接處理文件管理器中的文件，故需要?jiǎng)?chuàng)建一個(gè)空的列表，用于把文件管理器中的名字取出來(lái)存到列表中，方便后期處理。具體的指令代碼如圖7。在編寫(xiě)指令代碼時(shí)，一定要注意mingdan.txt的存放路徑。

（2）把“文件管理器1”中的文本通過(guò)回車(chē)符分離到列表中

將“文件管理器1”中的文本通過(guò)回車(chē)符分離到列表中，即把一個(gè)一個(gè)名字單獨(dú)提取出來(lái)存入列表中。在記事本中，每個(gè)名字是按一行進(jìn)行存放的，名字和名字之間存在一個(gè)回車(chē)符“＼n”。我們可以利用“文件分隔符”指令塊進(jìn)行名字的分離。

什么時(shí)候進(jìn)行名字的分離呢？當(dāng)文件管理器1獲得文本后，我們就可以進(jìn)行名字的分離。如圖8所示，當(dāng)文件管理器1獲得文本時(shí)，就會(huì)觸發(fā)該事件。

（3）讓名字每隔一定時(shí)間在屏幕上滾動(dòng)播放

要讓名字每隔一定時(shí)間在屏幕上滾動(dòng)播放，我們需要用到計(jì)時(shí)器，并把計(jì)時(shí)器的“計(jì)時(shí)間隔”屬性設(shè)置為500毫秒。名字顯示在按鈕2上，隨機(jī)產(chǎn)生需要用列表中的“隨機(jī)選取列表項(xiàng) 列表”指令塊，即我們需要隨機(jī)選取列表中的名字，每隔500毫秒后將其顯示在按鈕2上。每隔500毫秒，時(shí)間一到，就會(huì)觸發(fā)計(jì)時(shí)器計(jì)時(shí)執(zhí)行事件，如圖9。

（4）點(diǎn)擊“開(kāi)始”按鈕時(shí)，開(kāi)始隨機(jī)顯示不同的名字

要讓名字滾動(dòng)播放，只需啟動(dòng)計(jì)時(shí)器1，“停止”按鈕可用，同時(shí)“開(kāi)始”按鈕不可用，如圖10。

（5）點(diǎn)擊“停止”按鈕時(shí)，姓名在屏幕上停止?jié)L動(dòng)，手機(jī)念出當(dāng)前屏幕上的名字

點(diǎn)擊“停止”按鈕后，計(jì)時(shí)器1停止工作，“停止”按鈕不可用，“開(kāi)始”按鈕可用，同時(shí)利用文本語(yǔ)音轉(zhuǎn)換器1念出當(dāng)前按鈕2上的名字，如圖11。

用手機(jī)念出按鈕上的名字，這里用到了App Inventor中的“文本語(yǔ)音轉(zhuǎn)化器”。同時(shí)，手機(jī)中要有語(yǔ)音引擎，常見(jiàn)的語(yǔ)音引擎有谷歌、百度、訊飛等。文本語(yǔ)音轉(zhuǎn)換器組件默認(rèn)調(diào)用的是安卓的Pico TTS引擎，如圖12，但是該引擎不支持中文，因此我們需要下載中文語(yǔ)音引擎。目前，常用的中文引擎是訊飛引擎，手機(jī)中需下載訊飛TTS語(yǔ)音引擎和訊飛語(yǔ)音包。如果安裝了訊飛語(yǔ)音引擎，還需要在“手機(jī)設(shè)置”中進(jìn)行引擎的設(shè)置：設(shè)置語(yǔ)言和輸入法文字轉(zhuǎn)語(yǔ)音輸出，啟用“迅飛語(yǔ)記”。

以上準(zhǔn)備好后，就可以拿出你的手機(jī)下載點(diǎn)名App進(jìn)行測(cè)試了。

三、照片版點(diǎn)名App

在文字版點(diǎn)名App的基礎(chǔ)上，我們讓手機(jī)屏幕中滾動(dòng)播放的不僅是學(xué)生的名字，還顯示對(duì)應(yīng)學(xué)生的照片，學(xué)生的名字出現(xiàn)在照片的下方，點(diǎn)擊停止按鈕時(shí)，照片和名字也都停止?jié)L動(dòng)，手機(jī)念出被選中的名字。可是，由于App Inventor要求上傳的圖片文件名必須是英文，所以目前能顯示的名字是由字母構(gòu)成的。

1. 照片版點(diǎn)名App的最終效果和界面設(shè)計(jì)

區(qū)別于文字版點(diǎn)名App，照片版點(diǎn)名App的界面還需要圖像組件來(lái)顯示學(xué)生的照片。

2. 學(xué)生照片的處理

學(xué)生的名字是存儲(chǔ)在記事本mingdan.txt里的，學(xué)生照片對(duì)應(yīng)一張張圖片，需要上傳到當(dāng)前項(xiàng)目中，注意圖片的文件名和學(xué)生名字一一對(duì)應(yīng)，都是由字母構(gòu)成的。通過(guò)文件管理器讀取學(xué)生姓名，并一個(gè)個(gè)分離到列表中，如圖14。

3. 名字的處理

同樣，我們?nèi)匀恍枰选拔募芾砥鳌敝械奈谋就ㄟ^(guò)回車(chē)符“＼n”分離到列表中，把一個(gè)一個(gè)名字單獨(dú)存起來(lái)，一行就是一個(gè)名字，即一個(gè)名字對(duì)應(yīng)一個(gè)列表項(xiàng)，如圖15。

4. 手機(jī)屏幕中滾動(dòng)顯示學(xué)生的照片和姓名

利用計(jì)時(shí)器每500毫秒顯示一張照片和對(duì)應(yīng)名字。名字已經(jīng)放到了列表里，利用列表的“隨機(jī)選取”功能，每次選出來(lái)的名字都不一樣。由于圖片的文件名和學(xué)生名字一一對(duì)應(yīng)，這樣就能很快地找到學(xué)生的照片名，再將其顯示出來(lái)。

這里照片對(duì)應(yīng)的圖片名字，由兩部分構(gòu)成：學(xué)生名字，還有圖片的擴(kuò)展名jpg。為了能正常顯示出對(duì)應(yīng)的照片，需要用到“合并字符串”指令塊將其合并，如圖16。

5. 點(diǎn)擊“開(kāi)始”按鈕后，名字和照片開(kāi)始滾動(dòng)播放，點(diǎn)擊“停止”按鈕，停止?jié)L動(dòng)

這時(shí)手機(jī)念出當(dāng)前的姓名，如圖17。

這樣，照片版的點(diǎn)名App就做好了，下載該照片版點(diǎn)名App試試吧。試了以后，有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題：顯示的名字只能是字母構(gòu)成的。那能不能讓顯示的名字呈現(xiàn)中文呢？

四、中文名字的照片版點(diǎn)名App

這里我們用Excel文件存儲(chǔ)名字，來(lái)實(shí)現(xiàn)照片版的點(diǎn)名App。如果用Excel文件存儲(chǔ)名字，具體學(xué)生名字存儲(chǔ)方式如圖18。

App Inventor要求上傳的文件名必須是英文的，所以學(xué)生的照片名必須全部是英文字母構(gòu)成的。為了能顯示中文的學(xué)生姓名，要借用2個(gè)Excel文件，一個(gè)stname.csv，用于存放學(xué)生的中文名字，另一個(gè)photo.csv用于把中文名字和照片相對(duì)應(yīng)，即一個(gè)學(xué)生有2個(gè)信息：姓名和照片，姓名存儲(chǔ)在stname.csv文件中，對(duì)應(yīng)照片名存儲(chǔ)在photo.csv文件中。這里我們還需要注意，需用記事本打開(kāi)CSV文件，選擇文件菜單中的“另存為”，將文件編碼設(shè)置為UTF-8，再點(diǎn)擊保存按鈕，否則應(yīng)用中會(huì)看到無(wú)法識(shí)別的字符亂碼。在程序中，我們用“Name文件管理器1”來(lái)管理姓名，“Photo文件管理器1”來(lái)管理照片名，如圖19。

用“CAV表轉(zhuǎn)換為列表 文本”指令塊可以直接把CSV文件轉(zhuǎn)換為列表，注意轉(zhuǎn)換后是一個(gè)二維列表，列表中含列表，每一行也是列表。

完整的程序代碼如圖20。

這樣中文名字的照片版點(diǎn)名App就做好了。

近年來(lái)，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，多媒體教學(xué)在教育行業(yè)中的作用逐漸凸顯，這標(biāo)志著我國(guó)教育行業(yè)發(fā)展到一個(gè)新的階段。作為教師，我們更應(yīng)該努力學(xué)習(xí)新技術(shù)，利用新技術(shù)來(lái)輔助教學(xué)，讓信息技術(shù)手段成為我們教學(xué)的得力助手，提高教學(xué)效率。

責(zé)任編輯 邱 艷