Codarea API-urilor cu Thunkable

  • Aflați ce sunt Interfețele de Programare a Aplicațiilor (Application Programming Interfaces - API) 

  • Utilizați un API într-o aplicație pentru a obține informații

Acestea sunt activitățile pentru această lecție:

API

API (prescurtarea din engleză pentru Application Programming Interfaces)reprezintă interfața de programare a aplicațiilor.

Un API este o modalitate prin care puteți obține informații de la un site web sau o bază de date.

În timp ce stocarea în cloud reprezintă de obicei informații interne partajate în cadrul aplicației voastre, API-urile permit aplicației să acceseze informații externe de pe internet.

Stocare în cloud
www connected to 3 phones
API

Să spunem că construiți o aplicație care să ajute oamenii să decidă ce să poarte în funcție de vreme. Ați putea petrece mult timp încărcând date despre vreme într-o bază de date, dar există multe site-uri web care afișează vremea. 

O soluție mai bună ar fi să preluați date de pe un site meteo și să le prezentați utilizatorilor prin intermediul aplicației voastre, utilizând un API.

Iată o explicație video bună a modului în care funcționează API-urile.

Pentru a utiliza un API, trebuie să: 

  1. Găsiți un site web care utilizează API-uri. Aici este o listă de API-uri publice care sunt disponibile, enumerate în funcție de subiect.
  2. Citiți documentația acestora pentru a afla cum să le utilizați API-urile. Majoritatea site-urilor oferă exemple.
  3. Unele site-uri vă cer să vă înregistrați pentru o cheie API înainte de a le utiliza API-urile. Rețineți că unele API-uri costă bani pentru a fi utilizate.
  4. Încorporați codul API în App Inventor. 

EXEMPLE DE CODARE

Mai jos găsiți câteva tutoriale pentru a vă antrena în utilizarea API-urilor Web în Thunkable.

OBSERVAȚIE! În unele dintre tutorialele enumerate aici, componenta Web API este afișată în fereastra Designer. Cu toate acestea, în versiunea actuală A Thunkable, veți găsi componenta Web API în Editorul de blocuri (Blocks Editor), sub Avansat.

Faceți clic pe + pentru a adăuga o componentă Web API. Puteți adăuga URL-ul și parametrii de interogare în fereastra de proprietăți care apare sau în cod. Codarea blocurilor ar trebui să aibă același rezultat.

component window Thunkable showing Web API
Acest videoclip oferă o prezentare generală a API-urilor și a componentei Web API din Thunkable.

Iată un exemplu foarte simplu de utilizare a API-ului Google Maps pentru a porni aplicația Google Maps din propria voastră aplicație, vizând o anumită locație.

Acest exemplu de tutorial utilizează un API de la OpenWeatherMap.

Thunkable are un playlist întreg cu diferite exemple de Web API.

ACTIVITATE: APLICAȚIE PENTRU NUTRIȚIA FRUCTELOR

Durată estimată: 30 de minute

Afișarea informațiilor privind fructele utilizând un API

  1. Deschideți proiectul de început în Thunkable.
  2. Rulați aplicația pentru a vedea cum funcționează.
  3. Faceți o copie a proiectului, astfel încât să îl puteți edita.
  4. Consultați exemplul de șir JSON de mai jos pentru a înțelege cum arată.
  5. În momentul de față, aplicația afișează numai informații despre calorii. Adăugați o a doua etichetă (label) sub CalorieLabel pentru a afișa una dintre celelalte valori nutriționale returnate.
Deschideți Proiectul de Început

Cele mai bune practici: Fun Fact, ce înseamnă json? "JavaScript Object Notation". Json a fost creat în 1999 și aproape fiecare bucată de date pe care o folosim sau o obținem în fiecare zi trebuie să utilizeze json într-un fel sau altul. Dacă nu am avea json, aproape fiecare tehnologie pe care o avem ar fi inutilă. Aproape toate datele din cloud au nevoie de json pentru a transmite date.

Întrebări orientative pentru eleve:

Poți crea un API între tine și prietenii tăi? 

Dacă unul dintre prietenii dvs. spune "/hello", veți răspunde cu un salut. Acesta este în esență un API. O persoană solicită ceva (salutul), iar tu îi răspunzi cu salutul ales de tine. Ar putea exista exemple mai complicate? /hug, /triviaQuestion, /story, /weekendSummary

Sfaturile mentorilor sunt oferite cu sprijinul AmeriCorps.

stylized A, AmeriCorps logo in navy

Iată un exemplu de șir JSON returnat de FruityVice pentru ”banana”.

{ "genus": "Musa", 
"name": "Banana",
"id": 1,
"family": "Musaceae",
"order": "Zingiberales",
"nutritions":
{ "carbohydrates": 22,
"protein": 1,
"fat": 0.2,
"calories": 96,
"sugar": 17.2
}
}

Sperăm că ați adăugat cu succes o a doua etichetă (label) nutrițională cu informații API!

Dacă doriți să vedeți o posibilă soluție, faceți clic pe acest buton. 

REFLECȚIE

Utilizarea API-urilor în aplicația voastră poate fi un instrument foarte puternic, dar nu este ușor de implementat!

Trebuie să petreceți timp citind documentația API pentru site pentru a înțelege cum să obțineți informațiile de care aveți nevoie.

interconnected network
Credeți că aceasta este o componentă utilă pentru aplicația voastră?
Puteți găsi un site online care să ofere informațiile de care aveți nevoie?

REVIZUIREA TERMENILOR CHEIE

  • Interfața de programare a aplicațiilor (API) - o modalitate prin care puteți obține informații de pe un alt site web sau dintr-o altă bază de date pentru a le folosi în aplicația voastră

RESURSE SUPLIMENTARE