用jQM、HTML5和iOS SDK构建MusicBrainz应用程序-51CTO.COM

【51CTO独家译文】随着iPad和各种Android平板电脑纷纷推出，杂志式样的应用程序变得极其流行起来。其中最有名的几款应用程序包括面向iOS的FlipBoard、面向Android的Zinio以及面向iOS和Android的Pulse。人们对能够提供杂志排版功能的工具的需求同样很大。一些大受欢迎的工具包括FlipBoard(通过RSS/Twitter导入)、OnSwipe和PugPig。PugPig是一款开源HTML5排版平台，让我们可以为iPad、iPhone和安卓平台制作漂亮的报纸、杂志和图书。本教程将使用面向Xcode 4.2的PugPig框架插件，制作HTML5杂志。

杂志的设计将基于jQuery Mobile，不过另一个同样出色的选择是使用Magazine Grid，这是个超现代的CSS框架。我们在本教程中选用了jQuery Mobile，因为它为移动Web应用程序提供了丰富的窗口组件和出色的页面转场工作流程。

Magazine的内容将来源于MusicBrainz(开放音乐维基百科)。我们会使用jQuery用户界面，为流行歌手构建离线的HTML页面。我们从SongKick.com随机挑选了20位流行歌手。

MusicBrainz API的介绍

MusicBrainz网站提供了门类齐全的音乐数据，包括歌手信息和发行的最新专辑等内容，还有每张专辑上所有歌曲音轨的完整的详细资料。它旨在成为一个开放的音乐维基百科，考虑到Last.fm、GrooveShark、Pandora和Echonest等音乐服务网站使用来自MusicBrainz的数据，它必须做好这项工作。MusicBrainz通过以下两个途径将这些数据提供给社区：

•MusicBrainz数据库

•MusicBrainz Web服务

我们将使用下列Web服务，从MusicBrainz提供丰富的歌手信息：

MusicBrainz里面的歌手信息包括歌手的姓名、出生和死亡日期、国籍、性别、别名和歌手类型(单人还是乐队)。为了本文中应用程序的需要，我们以Lady Gaga作为示例的歌手。Lady Gaga的MusicBrainz页面是http://musicbrainz.org/artist/650e7db6-b795-4eb5-a702-5ea2fc46c848，其中650e7db6-b795-4eb5-a702-5ea2fc46c848是独一无二的歌手编号(像Last.fm这些其他的第三方音乐网站也要引用该编号)。

[[55085]]

如下面的屏幕截图所示，我们关注的信息基本上都在右边这一栏(歌手信息、标签和外部链接)以及下个一章节描述的第二个选项卡“Release”(专辑)。

点击查看大图

歌手专辑

歌手的发行专辑囊括了该歌手发行的所有专辑，无论是热门单曲还是乐队合唱曲目。它还包括发行日期、唱片公司、甚至还有条形码。就跟以前一样，专辑的编号也是独一无二的。这个专辑编号可以用来从专辑获取进一步的信息，包括音轨列表(歌曲)。

点击查看大图

歌手关系

歌手关系定义了一名歌手与其他歌手之间的关系。

同样，可以通过API调用来获取与专辑和音轨有关的类似专辑和音轨。

我们感兴趣的是Artist Relation(歌手关系)这个属性，尤其是与“Url”这个子属性之间的关系，它列出了维基百科、IMDB、推特、MySpace和Youtube等不同社交网站和音乐网站上的歌手Url。

粗粗浏览了MusicBrainz Web服务API后，我们可以进一步构建我们的Magazine App了。

【51CTO译稿，非经授权谢绝转载，合作媒体转载请注明原文出处、作者及51CTO译者！】#p#

第一步：使用Xcode构建PugPig应用程序

你从PugPig网站下载了Pugpig Xcode模板后，双击程序包，即可将模板安装在Xcode里面。打开Xcode，选择PugPig模板，即可开始创建一个新的项目，如下图所示：

点击查看大图

将它命名为“MusicBrainz – Magazine”，完成这个过程。在你的项目目录中，创建一个名为“Data”的文件夹，并把它添加到你的项目中，PugPig要在这个文件夹里面寻找要呈现的HTML文件。你的项目现在看起来应该这样：

点击查看大图

现在，我们为这个数据文件夹添加index.html，那样我们的杂志应用程序就有了一个起始点。我们在此使用了jQuery Mobile的默认设计，显示可以搜索的Popular Artists(流行歌手)列表。在index.html文件中，添加下列代码，一并添加jQuery Mobile框架和jQuery JavaScript库。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>MusicBrainz - Magazine</title>  
        <link rel="stylesheet" href="jquery.mobile-1.0/jquery.mobile-1.0.css"     />  
        <script src="jquery-1.7.js"></script>  
        <script src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>  
    </head>  
    <body>   
   
        <div data-role="page" class="type-interior">  
   
            <div data-role="header" data-theme="b">  
                <h1>Popular Artists</h1>  
                <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>  
            </div><!-- /header --> 
   
            <script type="text/javascript">  
                var admob_vars = {  
                    pubid: 'a14e4b353ccfa57', // publisher id  
                    bgcolor: '356FA8', // background color (hex)  
                    text: 'FFFFFF', // font-color (hex)  
                    test: false // test mode, set to false to receive live ads  
                };  
                </script>  
            <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>  
   
            <div data-role="content">  
                <div class="content-primary">  
                    <ul data-role="listview" data-filter="true">  
                        <li><a href="650e7db6-b795-4eb5-a702-5ea2fc46c848.html">Lady Gaga</a></li>  
                        <li><a href="cc197bad-dc9c-440d-a5b5-d52ba2e14234.html">Coldplay</a></li>  
                        <li><a href="73e5e69d-3554-40d8-8516-00cb38737a1c.html">Rihanna</a></li>  
                        <li><a href="122d63fc-8671-43e4-9752-34e846d62a9c.html">Katy Perry</a></li>  
                        <li><a href="f82bcf78-5b69-4622-a5ef-73800768d9ac.html">Jay-Z</a></li>  
                        <li><a href="d5be5333-4171-427e-8e12-732087c6b78e.html">Black Eyed Peas</a></li>  
                        <li><a href="20244d07-534f-4eff-b4d4-930878889970.html">Taylor Swift</a></li>  
                        <li><a href="eeb1195b-f213-4ce1-b28c-8565211f8e43.html">Guns N' Roses</a></li>  
                        <li><a href="e21857d5-3256-4547-afb3-4b6ded592596.html">Gorillaz</a></li>  
                        <li><a href="72c536dc-7137-4477-a521-567eeb840fa8.html">Bob Dylan</a></li>  
                        <li><a href="65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab.html">Metallica</a></li>  
                        <li><a href="45a663b5-b1cb-4a91-bff6-2bef7bbfdd76.html">Britney Spears</a></li>  
                        <li><a href="f5dfa020-ad69-41cd-b3d4-fd7af0414e94.html">Wiz Khalifa</a></li>  
                        <li><a href="ada7a83c-e3e1-40f1-93f9-3e73dbc9298a.html">Arctic Monkeys</a></li>  
                        <li><a href="e0140a67-e4d1-4f13-8a01-364355bee46e.html">Justin Bieber</a></li>  
                        <li><a href="3d2b98e5-556f-4451-a3ff-c50ea18d57cb.html">Aerosmith</a></li>  
                        <li><a href="0103c1cc-4a09-4a5d-a344-56ad99a77193.html">Avril Lavigne</a></li>  
                        <li><a href="d8354b38-e942-4c89-ba93-29323432abc3.html">30 Seconds to Mars</a></li>  
                        <li><a href="d262ea27-3ffe-40f7-b922-85c42d625e67.html">PitBull</a></li>  
                        <li><a href="35f866dc-c061-48ba-8157-cf2e0eac4857.html">Enrique Iglesias</a></li>  
                    </ul>  
                </div><!--/content-primary --> 
            </div><!-- /content --> 
   
            <div data-role="footer" class="footer-docs" data-theme="b">  
                <h2>Data from MusicBrainz.org</h2>  
            </div>  
       </div><!-- /page --> 
    </body>  
</html>

现在运行Xcode项目，即可得到下列结果：

点击查看大图

快速连按两下应用程序。它应该会在靠近页面脚注的某个地方，显示一个小窗口，让你可以浏览其他页面(Data文件夹中的.html文件)，就像杂志那样!

点击查看大图

【51CTO译稿，非经授权谢绝转载，合作媒体转载请注明原文出处、作者及51CTO译者！】#p#

第二步：使用PHP和MusicBrainz Web服务创建HTML页面

到目前为止，我们见到了如何为我们的Magazine App创建index.html页面，现在可以看一下如何构建歌手详细资料页面，并将它们作为.html文件保存在数据文件夹中。

我们会使用PHP及其XML解析库SimpleXml来解析MusicBrainz Web服务调用。在此之前，我们将使用jQuery Mobile页面布局和CSS来构建一个简单的歌手详细资料页面模板。我们还把占位符放在模板中，之后占位符将换成从MusicBrainz Web服务获取的实际结果，于是我们使用这个带有歌手数据的页面模板，创建了最终的歌手详细资料页面，并将它保存在磁盘上。下面是歌手模板：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"      />  
            <meta name="viewport" content="width=device-width, initial-scale=1">  
                <title>{ARTIST_NAME}</title>  
                <link rel="stylesheet" href="jquery.mobile-1.0/jquery.mobile-1.0.css"     />  
                <script src="jquery-1.7.js"></script>  
                <script src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>  
    </head>  
    <body>   
   
    <div data-role="page" class="type-interior">  
            <div data-role="header" data-theme="b">  
                <a href="index.html" data-icon="back" data-iconpos="back" class="ui-btn-left jqm-home">Back</a>  
                <h1>{ARTIST_NAME}</h1>  
                <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>  
   
            </div><!-- /header --> 
   
            <div data-role="content">  
                <div class="content-primary">  
                <script type="text/javascript">  
                    var admob_vars = {  
                        pubid: 'a14e4b353ccfa57', // publisher id  
                        bgcolor: '356FA8', // background color (hex)  
                        text: 'FFFFFF', // font-color (hex)  
                        test: false // test mode, set to false to receive live ads  
                    };  
                    </script>  
                <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>  
   
                <div data-role="collapsible" data-collapsed="false">  
                    <div id='lifeSpanBegin'>Born: {ARTIST_BIRTH_DATE}</div>  
                    <div id='gender'>Gender: {ARTIST_GENDER} </div>  
                    <div id='country'>Country: {ARTIST_COUNTRY} </div>  
                    <div id='alias'>Alias:  {ARTIST_ALIAS} </div>  
                    <div id='tags'>Tags: {ARTIST_TAGS}</div>  
                </div>  
   
                    <div data-role="collapsible-set">  
   
                        <div data-role="collapsible" data-collapsed="false">  
                            <h3>Releases</h3>  
                            <ul data-role="listview" data-inset="true">  
                                 {RELEASES_LIST}  
                            </ul>  
                        </div>  
   
                        <div data-role="collapsible">  
                            <h3>Links</h3>  
                           <ul data-role="listview" data-inset="true">  
                                 {LINKS_LIST}  
                            </ul>  
                        </div>  
   
                    </div>  
                </div><!--/content-primary --> 
            </div><!-- /content --> 
   
            <div data-role="footer" class="footer-docs" data-theme="b">  
            <h2>Data from MusicBrainz.org</h2>  
            </div>  
            </div><!-- /page --> 
    </body>  
</html

现在，我们为之前所列的20位歌手创建访问MusicBrainz Web服务的PHP文件，并为每一个歌手创建HTML文件。我们使用了PHP Array来存储20位流行歌手的歌手编号。你还可以将歌手编辑存储在数据库中，使用PHP-Mysql代码来获取歌手编号及其他必要的信息。

MusicBrainz为开发人员提供了可以在本地下载和处理的数据库，而不是使用Web服务。你可以下载数据库，学习如何在你的本地机器上配置同样的内容。

<?php  
header("Content-type: text/html; charset=utf-8");  
   
include 'classes/artist.php';  
include 'classes/release.php';  
include 'classes/relation.php';  
   
$artist         = new artist();  
$release        = new release();  
$relation       = new relation();  
$artistTemplate = file_get_contents("artistTemplate.html");  
$outputFolder   = "Data";  
   
$artistId   =   array("650e7db6-b795-4eb5-a702-5ea2fc46c848", "cc197bad-dc9c-440d-a5b5-d52ba2e14234", "73e5e69d-3554-40d8-8516-00cb38737a1c",  
                      "122d63fc-8671-43e4-9752-34e846d62a9c", "f82bcf78-5b69-4622-a5ef-73800768d9ac", "d5be5333-4171-427e-8e12-732087c6b78e",  
                      "20244d07-534f-4eff-b4d4-930878889970", "eeb1195b-f213-4ce1-b28c-8565211f8e43", "e21857d5-3256-4547-afb3-4b6ded592596",  
                      "72c536dc-7137-4477-a521-567eeb840fa8", "65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab", "45a663b5-b1cb-4a91-bff6-2bef7bbfdd76",  
                      "f5dfa020-ad69-41cd-b3d4-fd7af0414e94", "ada7a83c-e3e1-40f1-93f9-3e73dbc9298a", "e0140a67-e4d1-4f13-8a01-364355bee46e",  
                      "3d2b98e5-556f-4451-a3ff-c50ea18d57cb", "0103c1cc-4a09-4a5d-a344-56ad99a77193", "d8354b38-e942-4c89-ba93-29323432abc3",  
                      "d262ea27-3ffe-40f7-b922-85c42d625e67", "35f866dc-c061-48ba-8157-cf2e0eac4857");  
   
foreach ($artistId as $id)  
{  
        $MBArtistQuery         = "http://musicbrainz.org/ws/2/artist/?query=arid:$id";  
        $MBArtistReleasesQuery = "http://musicbrainz.org/ws/2/release/?query=arid:$id";  
        $MBArtistLinksQuery    = "http://musicbrainz.org/ws/2/artist/$id?inc=url-rels";  
   
        $fileHandle = fopen("$outputFolder/$id.html", "w+");  
        $artistXML  = simplexml_load_file("$MBArtistQuery");  
        $artistData = showArtist($id, $artistXML, $artistTemplate);  
   
        sleep(20);  
   
        $artistReleaseXML = simplexml_load_file("$MBArtistReleasesQuery");  
        $artistData       = showArtistReleases($id, $artistReleaseXML, $artistData);  
   
        sleep(20);  
   
        $artistLinksXML = simplexml_load_file("$MBArtistLinksQuery");  
        $artistData     = showArtistLinks($id, $artistLinksXML, $artistData);  
        fwrite($fileHandle, $artistData);  
        fclose($fileHandle);  
        sleep(20);  
}  
   
function showArtistLinks($artistId, $artistXML, $artistTemplate)  
{  
    $links = "";  
    foreach ($artistXML->artist->{'relation-list'}->relation as $artistsRelation)  
    {  
        $relation->type   = $artistsRelation['type'];  
        $relation->target = $artistsRelation->target;  
   
        $links .= "<li><a href='$relation->target'><h4>$relation->type</h4><p><strong>$relation->target</strong></p></a></li>";  
    }  
    $artistTemplate = str_replace("{LINKS_LIST}", $links, $artistTemplate);  
    return $artistTemplate;  
}  
   
function showArtistReleases($artistId, $artistReleaseXML, $artistTemplate)  
{  
    $releases = "";  
    foreach ($artistReleaseXML->{'release-list'}->release as $releaseInfo) {  
        $release->id     = $releaseInfo['id'];  
        $release->title  = $releaseInfo->title;  
        $release->date   = $releaseInfo->date;  
        $release->status = $releaseInfo->status;  
        $release->type   = $releaseInfo->{'release-group'}['type'];  
        $release->format = $releaseInfo->{'medium-list'}->medium->format;  
        $release->tracks = $releaseInfo->{'medium-list'}->{'track-count'};  
        $releases       .= "<li>$release->title<span class='ui-li-count'>$release->date</span></li>\n";  
    }  
   
    $artistTemplate = str_replace("{RELEASES_LIST}", $releases, $artistTemplate);  
    return $artistTemplate;  
}  
   
function showArtist($artistId, $artistXML, $artistTemplate)  
{  
    $artist->id            = $artistId;  
    $artist->name          = $artistXML->{'artist-list'}->artist->name;  
    $artist->gender        = $artistXML->{'artist-list'}->artist->gender;  
    $artist->country       = $artistXML->{'artist-list'}->artist->country;  
    $artist->lifeSpanBegin = $artistXML->{'artist-list'}->artist->{'life-span'}->begin;  
   
    foreach ($artistXML->{'artist-list'}->artist->{'alias-list'}->alias as $artistAlias) {  
        $artist->alias.=$artistAlias . ",";  
    }  
   
    foreach ($artistXML->{'artist-list'}->artist->{'tag-list'}->tag as $artistTags) {  
        $artist->tags.=$artistTags->name . ",";  
    }  
   
    $artistTemplate = str_replace("{ARTIST_NAME}", $artist->name, $artistTemplate);  
    $artistTemplate = str_replace("{ARTIST_BIRTH_DATE}", $artist->lifeSpanBegin, $artistTemplate);  
    $artistTemplate = str_replace("{ARTIST_GENDER}", $artist->gender, $artistTemplate);  
    $artistTemplate = str_replace("{ARTIST_COUNTRY}", $artist->country, $artistTemplate);  
    $artistTemplate = str_replace("{ARTIST_ALIAS}", $artist->alias, $artistTemplate);  
    $artistTemplate = str_replace("{ARTIST_TAGS}", $artist->tags, $artistTemplate);  
   
    return $artistTemplate;  
}  
?>

在index.php顶部包括的歌手、唱片和关系这些类是简单的类对象，保存了歌手的每一种类型的信息。可在Project Download链接中的PHP文件夹中找到同样的内容。

【51CTO译稿，非经授权谢绝转载，合作媒体转载请注明原文出处、作者及51CTO译者！】#p#

第三步：将创建的歌手文件复制到你的Xcode项目中

从命令行接口(CLI)运行index.php，它应该会在Data文件夹里面生成20个带有格式ARTIST-ID.html的HTML文件。把这20个文件拷贝到你Xcode项目中的数据文件夹。现在，运行Xcode项目，点击某个歌手，即可浏览到详细资料页面。你应该会看到面向iPad的下列结果：

点击查看大图

别忘了把你的Xcode项目设为“Universal”(通用)，那样你的杂志应用程序在iPhone上也可以顺畅运行。在本例中，该应用程序用起来和看起来都很好!

把你的Xcode项目设为“Universal”（通用），那样你的杂志应用程序在iPhone上也可以顺畅运行 #p#

第四步：控制杂志的页面顺序

在默认情况下，PugPig没有任何顺序地显示数据文件夹中的所有HTML文件，不管index.html或其他文件名称。为了总是先显示index.html文件，然后显示其余页面，我们需要在数据文件夹指定一个清单文件(manifest file)。将它命名为custom.manifest，然后为它添加下列内容。

CACHE MANIFEST  
index.html  
35f866dc-c061-48ba-8157-cf2e0eac4857.html  
d262ea27-3ffe-40f7-b922-85c42d625e67.html  
d8354b38-e942-4c89-ba93-29323432abc3.html  
0103c1cc-4a09-4a5d-a344-56ad99a77193.html  
3d2b98e5-556f-4451-a3ff-c50ea18d57cb.html  
e0140a67-e4d1-4f13-8a01-364355bee46e.html  
ada7a83c-e3e1-40f1-93f9-3e73dbc9298a.html  
f5dfa020-ad69-41cd-b3d4-fd7af0414e94.html  
45a663b5-b1cb-4a91-bff6-2bef7bbfdd76.html  
65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab.html  
72c536dc-7137-4477-a521-567eeb840fa8.html  
e21857d5-3256-4547-afb3-4b6ded592596.html  
eeb1195b-f213-4ce1-b28c-8565211f8e43.html  
20244d07-534f-4eff-b4d4-930878889970.html  
d5be5333-4171-427e-8e12-732087c6b78e.html  
82bcf78-5b69-4622-a5ef-73800768d9ac.html  
122d63fc-8671-43e4-9752-34e846d62a9c.html  
73e5e69d-3554-40d8-8516-00cb38737a1c.html  
cc197bad-dc9c-440d-a5b5-d52ba2e14234.html  
650e7db6-b795-4eb5-a702-5ea2fc46c848.html

我们还需要在项目中稍稍改动一点Objective-C代码。打开MusicBrainz_MagazineViewController.m文件，把viewDidLoad方法中的下面这行：

[pageControl setDataSource:[[[KGLocalFileDataSource alloc] initWithPath:@"Data"] autorelease]];

换成

[pageControl setDataSource:[[[KGHTMLManifestDataSource alloc] initWithPath:@"Data/custom.manifest"] autorelease]];

另外，在同一文件中pageControl的尺度从0.4166667改成1.0。

[pageControl setScale:1.0];

该尺度由基于iOS设备的jQuery Mobile自动处理，所以我们不需要为iPhone缩小尺度。

最后的改进

现在我已经为多位巡演的流行歌手创建了HTML页面，可以对应用程序作进一步的改进，只要使下面这个PHP过程实现自动化：为所有歌手创建HTML页面，并将它们保存在数据文件夹中，因而制作一份完整的离线歌手杂志。至于图像，你可以获取维基百科CC图像，把它们加入到应用程序中，让它看起来更吸引人。

为了让应用程序显得更可爱，可以添加一些Ajax魅力，使用来自eventful.com或songkick.com等众多活动网站和音乐网站的丰富链接、API和RSS，创建一个动态页面。比如说，为歌手从eventful.com获取最新活动或演唱会这些素材!

原文名称：Build a MusicBrainz App

原文链接：http://mobile.tutsplus.com/tutorials/mobile-web-apps/build-a-musicbrainz-app/

【51CTO译稿，非经授权谢绝转载，合作媒体转载请注明原文出处、作者及51CTO译者！】