A tool that standardizes access to APIs and simplifies the work for users, even non-programmers, to create interactive web applications that operate on data accessible through arbitrary Web APIs.
Tool: https://shapir.org
Shapir is an ecosystem that significantly simplifies the work for users, even non-programmers, to create interactive web applications that operate on standardized data accessible through arbitrary web APIs. It consists of three related components: WoOPI, ShapirJS, and ShapirUI. WoOPI is a novel standardized, machine-readable API ontology, which can be used to provide a description that wraps the API with objects conforming to the canonical type definitions provided by Schema.org. ShapirJS is a JavaScript library that uses a WoOPI description to present the API's data as typed objects in the local environment. And ShapirUI is a graphical tool that lets even non-programmers create the required WoOPI descriptions, using standard data types. These three components are connected. One uses ShapirUI to describe an API. ShapirUI then generates a corresponding WoOPI description that can be used by ShapirJS to generate a JavaScript client library for that API. We integrated ShapirJS with Mavo, an interactive declarative HTML-based language, to empower a user to create applications interacting with APIs' data by writing only HTML, with no JavaScript programming required. Any API described once by WoOPI, can be used by all other users.
Get Started
import shapir from "https://shapir.org/shapir.js";
shapir().then(async () => {
//add your functions here
});Example Functions
// Get the playlist
let playlist = await vimeo.MusicPlaylist("8274189");
// Read playlist information
console.log(playlist.name, playlist.description, ...)
// Get the playlist videos
let videos = await playlist.video;
// Get the comments of the 5th video
let videoComments = await videos[4].comment;// Search Vimeo
videos = await vimeo.search("Adele", {sort:"relevant", filter:"trending", numberOfItems:200});// Create a new playlist
playlist = await vimeo.MusicPlaylist.create({name:"New", description:"New", layout:"player"});// Update the playlist's description
playlist.description = "Still New";// Delete the playlist
playlist.delete();Get Started
<head>
...
<script rel="stylesheet" src="https://get.mavo.io/mavo.css"></script>
<script src="https://get.mavo.io/mavo.j"></script>
<script type="module" src="https://shapir.org/mavo-shapir.js"></script>
...
</head>Example Functions
Read a playlist and its videos from Dailymotion
<div mv-app mv-source="shapir"
mv-source-service="dailymotion"
mv-source-type="MusicPlaylist"
mv-source-id="[id]">
<input property="id" />
<h1 property="name"></h1>
<article property="video" mv-multiple>
<h2 property="name"></h2>
<p property="description"></p>
<img property="thumbnailUrl" />
<iframe src="[embedUrl]"></iframe>
</article>
</div> |
|
Search Yelp and Foursquare for restaurants
<div mv-app mv-source="shapir"
mv-source-service="yelp, foursquare"
mv-source-search="[search]">
<input property="search" />
<div property="businesses" mv-multiple>
<img property="image" />
<h2 property="name"></h2>
<span property="reviewCount"></span> reviews
<span property="aggregateRating"></span>
<span property="priceRange"></span>
<span property="latitude"></span>,
<span property="longitude"></span>
</div>
</div> |
|