how to build a yahoo! searchmonkey app

28
How to build a Yahoo! SearchMonkey App SearchMonkey is Yahoo! Search's open developer platform. Part I : Using Intel's Mash Maker to make a Custom Data Service Part II : Building a Presentation App from your data extractions

Upload: postchris

Post on 20-Jan-2015

16.658 views

Category:

Technology


2 download

DESCRIPTION

An easy tutorial on using Intel's Mash Maker to make Yahoo! SearchMonkey apps. SearchMonkey is Yahoo! Search's open developer platform.

TRANSCRIPT

Page 1: How to Build a Yahoo! SearchMonkey App

How to build a Yahoo! SearchMonkey App SearchMonkey is Yahoo! Search's open developer platform.

Part I: Using Intel's Mash Maker to make a Custom Data Service Part II: Building a Presentation App from your data extractions

Page 2: How to Build a Yahoo! SearchMonkey App

PART I: Mash Maker + SearchMonkey =

Using Intel's Mash Maker to make Yahoo! SearchMonkey Custom Data

Services.

Page 3: How to Build a Yahoo! SearchMonkey App

1. Install Mash Maker• Register with a valid email address and

download Mash Maker here:http://mashmaker.intel.com/web/download.html

• Check your email and retrieve your login and password.

• In Firefox, enter the login here: 'Tools-> Options -> Mash Maker', and enter your login and password. NOTE: In order for Mash Maker to work with SearchMonkey, YOU MUST BE LOGGED IN.

Page 4: How to Build a Yahoo! SearchMonkey App

2. Navigate to the page from which you want to extract text, pics, etc.

a. Open the Mash Maker tool by clicking here

Page 5: How to Build a Yahoo! SearchMonkey App

3. Click "Pick from Page" and then select an element on the page to extract.

The "Pick from Page" button is conveniently located here

Page 6: How to Build a Yahoo! SearchMonkey App

4. Save that element ("property")• Select "Property of

the whole page" and click "Add"

• Give it a name. (like "Album Cover")

• Click "Publish" and you will be prompted to save this set of extractions (extractor).

NOTE: You must publish all changes for Mash Maker to work properly with SearchMonkey.

Page 7: How to Build a Yahoo! SearchMonkey App

5. Save your extractor

1. Give your Extractor a name (like "Pitchfork Review Extractor")2. Click "Types" and select the type of page this is (like "review")3. Save your work by clicking publish.

Page 8: How to Build a Yahoo! SearchMonkey App

6. Grab some other elements off of the page and then CLICK THE MONKEY

a. For tips on extracting, see the Appendices.b. Save your work by clicking "Publish".c. When you've extracted all the elements that you want…CLICK THE MONKEY!

!!

Page 9: How to Build a Yahoo! SearchMonkey App

7. Save the Mash Maker data to your clipboard.

Click "copy to clipboard"

Page 10: How to Build a Yahoo! SearchMonkey App

8. In a new window, open the SearchMonkey application dashboard:

http://developer.yahoo.com/searchmonkey/

Click "Build an App"

Page 11: How to Build a Yahoo! SearchMonkey App

9. Create a new Custom Data Service

a. Scroll down and create a new "Custom Data Service" b. Fill out the following "Basic Info" and "URLs" pages.

Page 12: How to Build a Yahoo! SearchMonkey App

10. Paste the Mash Maker code into the box in the middle of the Data Extraction page

Page 13: How to Build a Yahoo! SearchMonkey App

11. Scroll down and check to see if it worked.

Assuming you have the proper URLs in the dashboard, the little preview window should contain a list of your extracted properties. Like this

Page 14: How to Build a Yahoo! SearchMonkey App

You're done!

Now, that you have a Custom Data Service, you have to start thinking about organizing all that data into a Presentation App. You'll learn all about that in Part II.

Page 15: How to Build a Yahoo! SearchMonkey App

Appendix A: Using XPather if Mash Maker isn't working on a particular extraction for some reason

If, for some reason, Mash Maker will not extract a particular property, the XPather Firefox add-on is a good back up.

• Install the XPather Firefox add-on: https://addons.mozilla.org/en-US/firefox/addon/1192

• In Firefox, right-click on the property you'd like to extract and select "Show in XPather". Copy the "XPath" in the little window that pops up.

• In the Mash Maker sidebar, highlight the property that isn't working properly and check "Expert".

• Paste the "XPath" from the XPather window into the "XPath" box in the Mash Maker sidebar.

Page 16: How to Build a Yahoo! SearchMonkey App

Appendix B: Links• Video tutorial on making Custom Data Services with Mash Maker:

http://mashmaker.intel.com/videos/tutorials/searchmonkey/customdataservices/

• Video tutorial on extracting with Mash Maker: (http://mashmaker.intel.com/videos/tutorials/extractors/extratorstutorial.wmv)

• Intel Mash Maker support: http://mashmaker.intel.com/web/support/

• SearchMonkey apps in the Search Gallery that were created using Mash Maker:– Food Network: http://gallery.search.yahoo.com/application?smid=pq2– How Stuff Works: http://gallery.search.yahoo.com/application?smid=odW– MyRecipes.com: http://gallery.search.yahoo.com/application?smid=uRE– Pitchfork Record Reviews: http://gallery.search.yahoo.com/application?smid=jLx– GrubHub: http://gallery.search.yahoo.com/application?smid=haC– Download.com: http://gallery.search.yahoo.com/application?smid=RCo

Page 17: How to Build a Yahoo! SearchMonkey App

Part II:Creating a SearchMonkey Presentation Application

Page 18: How to Build a Yahoo! SearchMonkey App

Part II: Building your Presentation ApplicationStep 1: Basic Info

1. Enter name :• (Choose wisely! This name will appear

in the Search Gallery)2. Choose Type

• Select Infobar since you are using a Custom Data Service (only choose “Enhanced Result” if you are NOT using a Custom Data Service.)

3. Add description • will be the description used in the

Search Gallery) 4. Choose the Category that your app best fits

under 5. Get Icon

– add /favicon.ico to end of the root URL of the site you are developing an app for.: http://www.marthastewart.com/favicon.ico

– If this returns an icon, right click on it and save it to your computer (NOTE: this won't work every time)

– Click ‘Browse’ and find your icon 6. Check the Terms of Service box7. Click ‘Next Step’

Page 19: How to Build a Yahoo! SearchMonkey App

Part II: Building your Presentation ApplicationStep 2: URLs

These URLs should transfer over from your URLs page in your Custom Data Service.

1. Follow the instructions under "Create the Trigger URL"

AND / OREnter the same Trigger URL Pattern from your Custom Data Service.

2. Click 'AUTOFIND URLs'

3. Insert the domains from which your links and images will come.

• You only need to do this if your images and links are hosted on a different URL

4. Click 'Next Step'

Page 20: How to Build a Yahoo! SearchMonkey App

Part II: Building your Presentation ApplicationStep 3: Data Services

1. Click ‘Add More Data Services’

2. Check the box for the Custom Data Service you just made.

3. Click ‘Next Step’

Page 21: How to Build a Yahoo! SearchMonkey App

Part II: Building your Presentation ApplicationStep 4: Appearance

1. On the right side tab, click on ‘smid:’ to open your data service

2. In the PHP code box, highlight 'SMDEFAULT' under // Image

3. Click on the @resource link under (or next to) rel: Photo (or whatever you named your image). • Code should automatically

be pasted in place of the highlighted 'SMDEFAULT'

4. Click 'Save & Refresh' on bottom of page and the image you extracted should appear in the preview panel.

Page 22: How to Build a Yahoo! SearchMonkey App

1. Continue to add all your @resources to the PHP code SMDEFAULT wherever they fit.

Deep Links :• 'Text' = "Link Text"

(example: "User Reviews")• 'href' = The link that you

extracted with XSLT in your Custom Data Service. (See Extracting Links)

Key Value Pairs:• 'Key' = Label Text (example: "Address")• 'Value' = Dynamic Text

(example: "1600 Polk Street, San Francisco, CA")

2. When all you've added all the extracted elements that you want to add, click ‘Next Step’.

NOTE: If you want to make your Infobar more interesting, you can add HTML to the ['infobar']['summary'] section at the bottom of the PHP code box. (See Adding Links to the Infobar).

Part II: Building your Presentation ApplicationStep 4: Appearance (cont)

Page 23: How to Build a Yahoo! SearchMonkey App

Step 4: Appearance (cont’d)Enhanced Results

Key / Value PairsKey Value

Deep Links (up to 4)

Star Rating (see Adding Stars)

Image

Enhanced Result: The default code already in the PHP box on your "Appearance" page is set up to create a SearchMonkey Enhanced Result like the one below.

Page 24: How to Build a Yahoo! SearchMonkey App

Step 4: Appearance (cont’d)Infobar

Infobar: If you are using a Custom Data Service, you MUST select "Infobar"on Step 1: Basic Info. If you want your infobar to look different from what you get with the default PHP code, you can add your own HTML to the ['infobar']['summary'] and ['infobar']['blob'] section at the bottom of the PHP code box. (See Adding Links to the Infobar).

Page 25: How to Build a Yahoo! SearchMonkey App

Part II: Building your Presentation Application Appendix A – Adding Stars

1. Extract stars as a text resource in your Custom Data Service. (NOTE: Stars should extract as a number in your Custom Data Service preview)

2. Insert your stars resource as a “Value” in your Key Value Pairs.

3. Change the first part of the PHP resource code from “Data::get” to “Data::getStars”

or "Data::getStarsfromNum"

(use whichever works)

Page 26: How to Build a Yahoo! SearchMonkey App

Part II, Appendix B - Extracting Links Adding links to a SearchMonkey module requires

extracting the link in two parts: URL and text. When are you add “quick links” to your SM app, the presentation application dashboard has a place to replace the “SMDEFAULT”s with both “text” and “href”, so when you’re making the Custom Data Service, you must extract both text (Yahoo!) and URL (http://www.yahoo.com/) so that you end up with Yahoo!.

To extract the text & linked URL of hypertext links:

1. In Mash Maker, first extract the hyperlink's text like you would extract any text, name it something like "happy link", and click publish.

2. To extract the URL (href), repeat step one and name this property something like "happy link url".

3. Check the “Expert” box. 4. Add “/@href” to the end of the

string in the “XPath” text box.

Page 27: How to Build a Yahoo! SearchMonkey App

Part II, Appendix C: Making partial link extractions render in the PHP presentation of your app

If, when you try to extract links with Mash Maker, you end up extracting only a partial URL, like this (from www.foodnetwork.com):

/saras-secrets/index.html In order to not get this error message: “Error rendering module. Invalid URL provided for deep links.”, you must take the following steps to make that partial link work in your app:

1. In the PHP presentation portion of the application dashboard, your link extraction will look like this:

Data::get('smid:gfx/mm:recipe_courtesy_href');2. Add the root URL to the partially

extracted URL with the “.” (period) concatenate function:

‘http://www.foodnetwork.com’ . Data::get('smid:gfx/mm:recipe_courtesy_href');

3. Then add the ‘trim’ function like this:‘http://www.foodnetwork.com’ .

trim(Data::get('smid:gfx/mm:recipe_courtesy_href'));

Page 28: How to Build a Yahoo! SearchMonkey App

Building your Presentation ApplicationPart II, Appendix D – Adding Links to the Infobar

• Insert a new variable to rename your Link data resource (Data::get…) something that will fit in the coming HTML line:

$orderonlinelink = Data::get…

• Replace the “SMDEFAULT” in the ['infobar']['summary'] line with a PHP friendly HTML link like the one below:

$ret['infobar']['summary'] = $html.="<a href='$orderonlinelink'>Order Online</a>