1. Visual Programming Week # 09
TinyDB, WebTinyDB, Web API

2. VP Lecture Note by Dr. Hanh Pham
Outline
Database
TinyDB
WebTinyDB
WebAPI: stock quotes & charts
References
VP Lecture Note by Dr. Hanh Pham

3. VP Lecture Note by Dr. Hanh Pham
Database
Purpose: to store data permanently
Similar: Files
In APP Inventor:
TAG = key or name (file name)
VALUE = data (info in file)
Two cases:
TinyDB: store data on the phone/tablet
WebTinyDB: store data on the web(cloud)
VP Lecture Note by Dr. Hanh Pham

4. VP Lecture Note by Dr. Hanh Pham
TinyDB
Use your APP “Store” button to enter/store these 5 items ( pairs of <Tag,Value> ) to your TinyDB.
Then, use the “Get” button to read each of them.
TAG
VALUE
today
Back to school
yesterday
It was very cold
111
first
222
Number 2
333
Ha ha ha
VP Lecture Note by Dr. Hanh Pham

5. VP Lecture Note by Dr. Hanh Pham
TinyDB
VP Lecture Note by Dr. Hanh Pham

6. VP Lecture Note by Dr. Hanh Pham
TinyDB
VP Lecture Note by Dr. Hanh Pham

7. VP Lecture Note by Dr. Hanh Pham
WebTinyDB
1) To SEE the WebTinyDB online:
2) An APP which talks to WebTinyDB =>
VP Lecture Note by Dr. Hanh Pham

8. VP Lecture Note by Dr. Hanh Pham
WebTinyDB
VP Lecture Note by Dr. Hanh Pham

9. VP Lecture Note by Dr. Hanh Pham
WebTinyDB
VP Lecture Note by Dr. Hanh Pham

10. VP Lecture Note by Dr. Hanh Pham
Web Service API:
Web Service for PROGRAMS (Client Apps):
PROGRAM sends QUERRY To Web Page
PROGRAM receives RESULT (texts or an Image of a CHART) from that Web Page
VP Lecture Note by Dr. Hanh Pham

11. Web Service API: Yahoo Finance Stock PRICE
QUERRY To Yahoo Server:
Where GOOG is the stock symbol/ID of Google Company
RESULT from Yahoo Server to OUR APP:
Google Inc., GOOG, , 1119,
Which is in CVS format
VP Lecture Note by Dr. Hanh Pham

12. Web Service API: Yahoo Finance Stock CHART
QUERRY To Yahoo Server:
Where GOOG is the stock symbol/ID of Google Company
RESULT from Yahoo Server to OUR APP:
Image file:
VP Lecture Note by Dr. Hanh Pham

13. Web Service API: Yahoo Finance
VP Lecture Note by Dr. Hanh Pham

14. Web Service API: Yahoo Finance
VP Lecture Note by Dr. Hanh Pham

15. Web Service API: Yahoo Finance
VP Lecture Note by Dr. Hanh Pham

16. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham

17. EXTRA Web Service API: Google CHART
QUERRY To Web Page:
Receive RESULT (an Image of a CHART):
VP Lecture Note by Dr. Hanh Pham

18. EXTRA Web Service API: Google CHART
QUERRY To Web Page:
Receive RESULT (an Image of a CHART):
VP Lecture Note by Dr. Hanh Pham

19. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham

20. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham

21. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham

22. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham

23. EXTRA Web Service API: Google CHART
1) Go to the Google Wizard Charts web page and find the right kind of Chart (based
on the requirement)
2) Reset/change the parameters such as Title, Data (including Max), Label, Margin (based on the requirement)
3) Copy, Analyze, and Split the request:
ORIGINAL REQUEST:
32,50,100&chl=A|B|C&chma=50,50&chtt=Voting+Results
DIVIDED into:
=> ,
&chl=A|B|C&chma=50,50&chtt=Voting+Results 32
Textbox1 50
Textbox2
100
Textbox3

24. EXTRA Web Service API: Google CHART
VP Lecture Note by Dr. Hanh Pham