how to develop android app

46
為為為為為為 為為為為為為 1 How To Develop Android App 紀紀紀 Chih_Sung,Chi 04-23593552 紀紀 113 0913-678809 [email protected] http://www.sanlien.com.tw/ http://blog.xuite.net/sanlien99/ blog 407 紀紀紀 紀紀紀紀紀 紀紀紀 西一 12 紀 1 紀 為為為為 為為為為為

Upload: braima

Post on 07-Jan-2016

47 views

Category:

Documents


0 download

DESCRIPTION

How To Develop Android App. 三聯科技 工控事業部. 紀志松 Chih_Sung,Chi 04-23593552 分機 113 0913-678809 [email protected] http://www.sanlien.com.tw/ http://blog.xuite.net/sanlien99/blog 407 台中市西屯區工業一路六巷 12 號 1 樓. 參考書籍. 使用類似 堆積木方式 設計 App 程式 如同書籍封面. App Inventor 開發軟體說明. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: How To Develop Android App

為科技作見證 為工業寫歷史

1

How To Develop Android App

紀志松 Chih_Sung,Chi04-23593552 分機 [email protected]

http://www.sanlien.com.tw/

http://blog.xuite.net/sanlien99/blog

407 台中市西屯區工業一路六巷 12 號 1 樓

三聯科技 工控事業部

Page 2: How To Develop Android App

為科技作見證 為工業寫歷史

2

參考書籍參考書籍

使用類似使用類似堆積木方式堆積木方式設計設計 AppApp 程式程式如同書籍封面如同書籍封面

Page 3: How To Develop Android App

為科技作見證 為工業寫歷史

3

App Inventor 原是 Google 實驗室( Google Lab )的一個子計畫,由一群 Google 工程師與勇於挑戰的 Google 使用者共同參與。 Google App Inventor 是一個完全線上開發的 Android 程式環境,拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的Android 程式。 除此之外它也正式支援樂高 NXT 機器人,對於 Android 初學者或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而言,他們不大需要太華麗的介面,只要使用基本元件例如按鈕、文字輸入輸出即可。 App Inventor 於 2012 年 1 月 1 日移交給麻省理工學院,並採用了學院的 Scheller 教師教育計畫,所維護的 Open Blocks 技術與函式庫。行動學習中心,並已於 3 月 4 日公佈使用。

App InventorApp Inventor 開發軟體說明開發軟體說明

Page 4: How To Develop Android App

為科技作見證 為工業寫歷史

4

App Inventor 的優點: 1. 適合無 Java 基礎的初學朋友 2. 操作概念很類似 Scratch( 湊合的 )

3. 全雲端,所有作業都在瀏覽器完成 4. 支援樂高機器人。App Inventor 適合誰? 1. 想要學習手機程式設計的入門學習者 2. 相關科系領域的師長 / 教學夥伴們,適合做為投入 正規 Android 程式開發前的先導教材 。

App Inventor 主要是針對 Android Market 所推出簡易程式的開發工具。 。

App InventorApp Inventor 開發軟體說明開發軟體說明

Page 5: How To Develop Android App

為科技作見證 為工業寫歷史

5

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 6: How To Develop Android App

為科技作見證 為工業寫歷史

6

系統要求 電腦和作業系統 Macintosh (英特爾處理器): Mac OS X 的 10.5 , 10.6 Windows:Windows XP 和 Windows Vista , Windows 7 GNU / Linux 的: Ubuntu 的 8 + , Debian 5+

瀏覽器 Mozilla Firefox 3.6 or higher 或更高 Apple Safari 5.0 或更高 Google 瀏覽器 4.0 或更高 (建議使用)Microsoft Internet Explorer 7 或更高

環境需求環境需求

Page 7: How To Develop Android App

為科技作見證 為工業寫歷史

7

請安裝此種瀏覽器Google Chrome

安裝網址http://www.google.com.tw/chrome

Page 8: How To Develop Android App

為科技作見證 為工業寫歷史

8

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 9: How To Develop Android App

為科技作見證 為工業寫歷史

9

http://www.appinventor.tw/ http://www.appinventor.tw/

http://www.java.com/en/download/

請先安裝再做測試請先安裝再做測試,安裝網址,安裝網址

Page 10: How To Develop Android App

為科技作見證 為工業寫歷史

10

您需要三件事 : 之 2

經過上方授權

Page 11: How To Develop Android App

為科技作見證 為工業寫歷史

11

您需要三件事 : 之 3

點選執行安裝

1

2

3

4

Page 12: How To Develop Android App

為科技作見證 為工業寫歷史

12

安裝確認方式

http://www.appinventor.tw/

Page 13: How To Develop Android App

為科技作見證 為工業寫歷史

13

安裝確認方式

舊版

新版

Page 14: How To Develop Android App

為科技作見證 為工業寫歷史

14

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 15: How To Develop Android App

為科技作見證 為工業寫歷史

15

-Flowchart-

Page 16: How To Develop Android App

為科技作見證 為工業寫歷史

16

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 17: How To Develop Android App

為科技作見證 為工業寫歷史

17

-Add A New Project-

Login Gmail, and connect to App Inventor舊版如何到以下畫面 ?

Page 18: How To Develop Android App

為科技作見證 為工業寫歷史

18

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 19: How To Develop Android App

為科技作見證 為工業寫歷史

19

-App Inventor Designer-

Design your interface 請記得你增加的元件名稱

Page 20: How To Develop Android App

為科技作見證 為工業寫歷史

20

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 21: How To Develop Android App

為科技作見證 為工業寫歷史

21

-App Inventor Block Editor(1/2)-

Click Open the Blocks Editor →Click

AppInventorForAndroidCodeblocks.jnlp to open block editor

Page 22: How To Develop Android App

為科技作見證 為工業寫歷史

22

1

2

3

4

Page 23: How To Develop Android App

為科技作見證 為工業寫歷史

23

-App Inventor Block Editor(2/2)-

Edit the logic by puzzle (function block)

請用拖拉方式

Page 24: How To Develop Android App

為科技作見證 為工業寫歷史

24

環境需求 需要完成三件事 Flowchart Add A New Project App Inventor Designer App Inventor Block Editor How to debug

開發步驟

Page 25: How To Develop Android App

為科技作見證 為工業寫歷史

25

-How to debug(1/3)-

Connect to emulatorStep1. Click New emulator to start the emulator

Step2. Click Connect to Device and select emulator-5554

Page 26: How To Develop Android App

為科技作見證 為工業寫歷史

26

Connect to emulatorStep1. Click New emulator to start the emulator

Step2. Click Connect to Device and select emulator-5554

-How to debug(1/3)-

Page 27: How To Develop Android App

為科技作見證 為工業寫歷史

27

-How to debug(2/3)-

Step3. Unlock and click button

Page 28: How To Develop Android App

為科技作見證 為工業寫歷史

28

-How to debug(3/3)-

Connect to Android cell phoneStep1. Download the cell phone driver to install on PC

Step2. Get your USB cable and connect the phone to the computer

Step3. Get your phone ready to work with App Inventor

Step4. Click Connect to Device and select your phone name

※More Information please refer to

http://developer.android.com/guide/developing/device.html

另有其他安裝於手機的方式如下另有其他安裝於手機的方式如下::

Page 29: How To Develop Android App

為科技作見證 為工業寫歷史

29

將此將此 **.apk.apk 給給AndroidAndroid 智慧型手機智慧型手機直接執行安裝即可直接執行安裝即可

Download to this ComputerDownload to this Computer

Page 30: How To Develop Android App

為科技作見證 為工業寫歷史

30

Show BarcodeShow Barcode

此方式僅與此方式僅與你相同你相同google mailgoogle mail 帳號帳號手機才能使用手機才能使用直接掃瞄執行即可直接掃瞄執行即可

Page 31: How To Develop Android App

為科技作見證 為工業寫歷史

31

掃瞄下載立即操作 將將 apkapk 檔上傳網路檔上傳網路

空間,並可獲取一空間,並可獲取一網路位址,再使用網路位址,再使用QR-Code GeneratorQR-Code Generatorhttp://qrcode.kaywhttp://qrcode.kaywa.com/a.com/產出如同左邊二維產出如同左邊二維條碼,即可用手機條碼,即可用手機掃瞄安裝。掃瞄安裝。

Page 32: How To Develop Android App

為科技作見證 為工業寫歷史

32

使用使用 AndroidAndroid 智慧型手機智慧型手機操作控制操作控制 DODO 輸出,監視輸出,監視 AIAI 數值 數值

ISaGRAF + eRWSM.dllISaGRAF + eRWSM.dll

透過泓格控制器(有 XPCA WinCE6 或 WinPCA WinCE5 作業系統)完成操控

Page 33: How To Develop Android App

為科技作見證 為工業寫歷史

33

-System Architecture-

HMI

Tags

Shared Memory

eLogger Driver ISaGRAF Driver

Hardware

ProcedureProcedure

DatabaseDatabase LogicLogic

User AP Modbus Server

Web API

Smart Phone

Page 34: How To Develop Android App

為科技作見證 為工業寫歷史

34

-Web API Function-

Read Function(2)readAO=xxxxx 、 readDO=xxxxx (xxxxx=address)

Write Function(2)writeAO=xxxxx&data=n 、 writeDO=xxxxx&data=n(xxxxx=address, n=value)

Examplehttp://10.0.0.123/eRWSM.dll?readAO=00001... Read wordhttp://10.0.0.123/eRWSM.dll?writeAO=00002&data=20... Write wordhttp://10.0.0.123/eRWSM.dll?writeDO=00020&data=11... Bit on

http://10.0.0.123/eRWSM.dll?writeDO=00020&data=00... Bit off http://10.0.0.123/eRWSM.dll?readDO=00021

AIAODIDO

AI

AO

DI

DO

eLogger Driver

ISaGRAF Driver

Page 35: How To Develop Android App

為科技作見證 為工業寫歷史

35

Bit on/off

Page 36: How To Develop Android App

為科技作見證 為工業寫歷史

36

Read the value of Word

Page 37: How To Develop Android App

為科技作見證 為工業寫歷史

37

How To Download &How To Download &

Upload Source Upload Source

Page 38: How To Develop Android App

為科技作見證 為工業寫歷史

38

Download Source Download Source

Page 39: How To Develop Android App

為科技作見證 為工業寫歷史

39

Download Source Download Source

Page 40: How To Develop Android App

為科技作見證 為工業寫歷史

40

Download Source Download Source

提供時不需解壓縮提供時不需解壓縮

Page 41: How To Develop Android App

為科技作見證 為工業寫歷史

41

Upload Source Upload Source

Page 42: How To Develop Android App

為科技作見證 為工業寫歷史

42

Upload Source Upload Source

1

2

3

4

Page 43: How To Develop Android App

為科技作見證 為工業寫歷史

43

Shared Memory 如何安裝執行?如何安裝執行?

Page 44: How To Develop Android App

為科技作見證 為工業寫歷史

44

將在路徑位置增加一資料夾將在路徑位置增加一資料夾 eLoggerWebeLoggerWeb ,複製如,複製如下圖四個檔案下圖四個檔案(放於商品圈專案資料中)(放於商品圈專案資料中)

Page 45: How To Develop Android App

為科技作見證 為工業寫歷史

45

如上圖開機自動執行,就會將以下兩如上圖開機自動執行,就會將以下兩 dlldll 檔放置如下位置檔放置如下位置eRWSM.dll WebRooteRWSM.dll WebRoot 中中,, Shared Memory.dll ISaGrafShared Memory.dll ISaGraf 中中

Page 46: How To Develop Android App

為科技作見證 為工業寫歷史

46

以上報告以上報告 !!!!