Mavo + Shapir

Get Started

To be ble to connect to Web APIs using Mavo, you will need to add the following attributes to the mv-app div:
(1) Mavo uses mv-source to specify the source of the data. So the First thing you need to specify is mv-source="shapir".
(2) You will also need to specify the websites ot services that you are retrieving the data from, by using mv-source-service


<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>
<body>
	<div mv-app="main" mv-source="shapir" mv-source-service="websites names" >
		<!-- add your Mavo code here -->
	</div>
</body>

Get a specific object

If you are intersted in getting an information about a specific object on the web, for example an infomraiton about a video on YouTube or an image on Unsplash, then you can use the following attributes in mv-app div

In addition to using mv-source= "shapir" and mv-source-service, you will need to use two additional attributes: mv-source-type to specify the type of data you want to get (e.g. VideoObject or an ImageObject), and (2) mv-source-id to specify the id of the object your are getting.


Example


<div mv-app="main" mv-source="shapir" mv-source-service="unsplash" mv-source-type="ImageObject" mv-source-id="DmXLY8TK3OU"></div>

Specify Parameters

As mentioned in the previous section, whne you search a website, you can use a number of parameters specified by that website to filter the results. For example, you can search etsy using mv-source-search, and you can also filter the returned results by minimum price mv-source-min_price and mv-source-max_price. How did I know this? Go to Explore Sites and choose etsy. You do the same whenever you want to know what sites accept as parameters.

Specify Number of Results

To specify the number of results returned by a search, you add mv-source-numResults to the mv-app div.


Example


<div mv-app="main" mv-source="shapir" mv-source-service="dailymotion" mv-source-search="Taylor Swift" mv-source-numResults="50"></div>

Search Multiple Sites

If you would like to search multiple sites at the same time, you can add multiple sites seperated by comma in mv-source-service like the following example. Make sure to add sites that return similar data. Otherwise you will not be getting meaningful data.


Example


<div mv-app="main" mv-source="shapir" mv-source-service="youtube, dailymotion" mv-source-search="Taylor Swift" mv-source-sort="recent"  mv-source-order="date" ></div>

Examples

Get an image information from Unsplash

<div mv-app="main" mv-source="shapir" mv-source-service="unsplash" mv-source-type="ImageObject" mv-source-id="DmXLY8TK3OU">

	<h3 property="description"></h3>
	<p property="dateModified"></p>
	<p property="datePublished" ></p>
	<p property="contentRating" ></p>
	<p property="url"></p>
	<p property="width"></p>
	<p property="height"></p>
	<p property="contentUrl"></p>

</div>

Search Etsy for products

<div mv-app="main" mv-source="shapir" mv-source-service="etsy" mv-source-search="[search]">

	<form mv-action="set(search, searchInput)">
		<label>Search: <input property="searchInput" /></label>
		<meta property="search" mv-default="Jacket">
		<button>Submit</button>
	</form>

	<p property="name"></p>
	<p property="description"></p>
	<p property="weight"></p>
	<p property="width"></p>
	<p property="height"></p>
	<p property="productionDate"></p>
	<p property="url"></p>
	<p property="aggregateRating"></p>

</div>

Search Yelp and Foursquare for seafood resturants and their reviews

Only show the ones that has rating > 4

<div mv-app="main" mv-source="shapir" mv-source-service="yelp, foursquare" mv-source-search="seafood">

	<div property="resturant" mv-multiple hidden="[aggregateRating > 4]">
		<h3 property="name"></h3>
		<p property="aggregateRating"></p>
		<p property="priceRange" ></p>
		<p property="longitude" ></p>
		<p property="latitude"></p>
		<p property="siteName"></p> <!-- "siteName" property is added to all the site to show which data came from which site -->

		<div property="review" mv-multiple>
			<p property="text"></p>
			<p property="dateCreated"></p>
			<p property="reviewRating" ></p>
		</div>
	</div>

</div>

Explore Sites


App Settings