用jQM、HTML5和iOS SDK構建MusicBrainz應用程序

作者：布加迪編譯 2012-01-01 22:07:28

MusicBrainz是自由音樂數據庫，原初創始目的系針對CDDB中的限制，但如今已不再將目標局限于CD后設資料儲存庫，而擴大為一種結構化的“音樂維基百科”。本教程將用到jQuery Mobile(簡稱“jQM”)、HTML5、PugPig框架和iOS SDK（開發工具包），用MusicBrainz應用編程接口（API）來構建一個應用程序。

【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譯者！】

責任編輯：佚名來源： 51CTO.com