用jQM、HTML5和iOS SDK构建MusicBrainz应用程序

译文
移动开发 iOS
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导入)、OnSwipePugPig。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”(专辑)。

Lady Gaga的MusicBrainz歌手信息截屏

点击查看大图

歌手专辑

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

Lady Gaga的MusicBrainz歌手专辑截屏

点击查看大图

歌手关系

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

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

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

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

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

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

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

打开Xcode 选择PugPig模板

点击查看大图

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

新建项目

点击查看大图

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

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

现在运行Xcode项目,即可得到下列结果:

运行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服务获取的实际结果,于是我们使用这个带有歌手数据的页面模板,创建了最终的歌手详细资料页面,并将它保存在磁盘上。下面是歌手模板:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />  
  6.             <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.                 <title>{ARTIST_NAME}</title>  
  8.                 <link rel="stylesheet" href="jquery.mobile-1.0/jquery.mobile-1.0.css" />  
  9.                 <script src="jquery-1.7.js"></script>  
  10.                 <script src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>  
  11.     </head>  
  12.     <body>   
  13.    
  14.     <div data-role="page" class="type-interior">  
  15.             <div data-role="header" data-theme="b">  
  16.                 <a href="index.html" data-icon="back" data-iconpos="back" class="ui-btn-left jqm-home">Back</a>  
  17.                 <h1>{ARTIST_NAME}</h1>  
  18.                 <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>  
  19.    
  20.             </div><!-- /header --> 
  21.    
  22.             <div data-role="content">  
  23.                 <div class="content-primary">  
  24.                 <script type="text/javascript">  
  25.                     var admob_vars = {  
  26.                         pubid: 'a14e4b353ccfa57', // publisher id  
  27.                         bgcolor: '356FA8', // background color (hex)  
  28.                         text: 'FFFFFF', // font-color (hex)  
  29.                         test: false // test mode, set to false to receive live ads  
  30.                     };  
  31.                     </script>  
  32.                 <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>  
  33.    
  34.                 <div data-role="collapsible" data-collapsed="false">  
  35.                     <div id='lifeSpanBegin'>Born: {ARTIST_BIRTH_DATE}</div>  
  36.                     <div id='gender'>Gender: {ARTIST_GENDER} </div>  
  37.                     <div id='country'>Country: {ARTIST_COUNTRY} </div>  
  38.                     <div id='alias'>Alias:  {ARTIST_ALIAS} </div>  
  39.                     <div id='tags'>Tags: {ARTIST_TAGS}</div>  
  40.                 </div>  
  41.    
  42.                     <div data-role="collapsible-set">  
  43.    
  44.                         <div data-role="collapsible" data-collapsed="false">  
  45.                             <h3>Releases</h3>  
  46.                             <ul data-role="listview" data-inset="true">  
  47.                                  {RELEASES_LIST}  
  48.                             </ul>  
  49.                         </div>  
  50.    
  51.                         <div data-role="collapsible">  
  52.                             <h3>Links</h3>  
  53.                            <ul data-role="listview" data-inset="true">  
  54.                                  {LINKS_LIST}  
  55.                             </ul>  
  56.                         </div>  
  57.    
  58.                     </div>  
  59.                 </div><!--/content-primary --> 
  60.             </div><!-- /content --> 
  61.    
  62.             <div data-role="footer" class="footer-docs" data-theme="b">  
  63.             <h2>Data from MusicBrainz.org</h2>  
  64.             </div>  
  65.             </div><!-- /page --> 
  66.     </body>  
  67. </html 

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

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

  1. <?php  
  2. header("Content-type: text/html; charset=utf-8");  
  3.    
  4. include 'classes/artist.php';  
  5. include 'classes/release.php';  
  6. include 'classes/relation.php';  
  7.    
  8. $artist         = new artist();  
  9. $release        = new release();  
  10. $relation       = new relation();  
  11. $artistTemplate = file_get_contents("artistTemplate.html");  
  12. $outputFolder   = "Data";  
  13.    
  14. $artistId   =   array("650e7db6-b795-4eb5-a702-5ea2fc46c848""cc197bad-dc9c-440d-a5b5-d52ba2e14234""73e5e69d-3554-40d8-8516-00cb38737a1c",  
  15.                       "122d63fc-8671-43e4-9752-34e846d62a9c""f82bcf78-5b69-4622-a5ef-73800768d9ac""d5be5333-4171-427e-8e12-732087c6b78e",  
  16.                       "20244d07-534f-4eff-b4d4-930878889970""eeb1195b-f213-4ce1-b28c-8565211f8e43""e21857d5-3256-4547-afb3-4b6ded592596",  
  17.                       "72c536dc-7137-4477-a521-567eeb840fa8""65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab""45a663b5-b1cb-4a91-bff6-2bef7bbfdd76",  
  18.                       "f5dfa020-ad69-41cd-b3d4-fd7af0414e94""ada7a83c-e3e1-40f1-93f9-3e73dbc9298a""e0140a67-e4d1-4f13-8a01-364355bee46e",  
  19.                       "3d2b98e5-556f-4451-a3ff-c50ea18d57cb""0103c1cc-4a09-4a5d-a344-56ad99a77193""d8354b38-e942-4c89-ba93-29323432abc3",  
  20.                       "d262ea27-3ffe-40f7-b922-85c42d625e67""35f866dc-c061-48ba-8157-cf2e0eac4857");  
  21.    
  22. foreach ($artistId as $id)  
  23. {  
  24.         $MBArtistQuery         = "http://musicbrainz.org/ws/2/artist/?query=arid:$id";  
  25.         $MBArtistReleasesQuery = "http://musicbrainz.org/ws/2/release/?query=arid:$id";  
  26.         $MBArtistLinksQuery    = "http://musicbrainz.org/ws/2/artist/$id?inc=url-rels";  
  27.    
  28.         $fileHandle = fopen("$outputFolder/$id.html""w+");  
  29.         $artistXML  = simplexml_load_file("$MBArtistQuery");  
  30.         $artistData = showArtist($id$artistXML$artistTemplate);  
  31.    
  32.         sleep(20);  
  33.    
  34.         $artistReleaseXML = simplexml_load_file("$MBArtistReleasesQuery");  
  35.         $artistData       = showArtistReleases($id$artistReleaseXML$artistData);  
  36.    
  37.         sleep(20);  
  38.    
  39.         $artistLinksXML = simplexml_load_file("$MBArtistLinksQuery");  
  40.         $artistData     = showArtistLinks($id$artistLinksXML$artistData);  
  41.         fwrite($fileHandle$artistData);  
  42.         fclose($fileHandle);  
  43.         sleep(20);  
  44. }  
  45.    
  46. function showArtistLinks($artistId$artistXML$artistTemplate)  
  47. {  
  48.     $links = "";  
  49.     foreach ($artistXML->artist->{'relation-list'}->relation as $artistsRelation)  
  50.     {  
  51.         $relation->type   = $artistsRelation['type'];  
  52.         $relation->target = $artistsRelation->target;  
  53.    
  54.         $links .= "<li><a href='$relation->target'><h4>$relation->type</h4><p><strong>$relation->target</strong></p></a></li>";  
  55.     }  
  56.     $artistTemplate = str_replace("{LINKS_LIST}"$links$artistTemplate);  
  57.     return $artistTemplate;  
  58. }  
  59.    
  60. function showArtistReleases($artistId$artistReleaseXML$artistTemplate)  
  61. {  
  62.     $releases = "";  
  63.     foreach ($artistReleaseXML->{'release-list'}->release as $releaseInfo) {  
  64.         $release->id     = $releaseInfo['id'];  
  65.         $release->title  = $releaseInfo->title;  
  66.         $release->date   = $releaseInfo->date;  
  67.         $release->status = $releaseInfo->status;  
  68.         $release->type   = $releaseInfo->{'release-group'}['type'];  
  69.         $release->format = $releaseInfo->{'medium-list'}->medium->format;  
  70.         $release->tracks = $releaseInfo->{'medium-list'}->{'track-count'};  
  71.         $releases       .= "<li>$release->title<span class='ui-li-count'>$release->date</span></li>\n";  
  72.     }  
  73.    
  74.     $artistTemplate = str_replace("{RELEASES_LIST}"$releases$artistTemplate);  
  75.     return $artistTemplate;  
  76. }  
  77.    
  78. function showArtist($artistId$artistXML$artistTemplate)  
  79. {  
  80.     $artist->id            = $artistId;  
  81.     $artist->name          = $artistXML->{'artist-list'}->artist->name;  
  82.     $artist->gender        = $artistXML->{'artist-list'}->artist->gender;  
  83.     $artist->country       = $artistXML->{'artist-list'}->artist->country;  
  84.     $artist->lifeSpanBegin = $artistXML->{'artist-list'}->artist->{'life-span'}->begin;  
  85.    
  86.     foreach ($artistXML->{'artist-list'}->artist->{'alias-list'}->alias as $artistAlias) {  
  87.         $artist->alias.=$artistAlias . ",";  
  88.     }  
  89.    
  90.     foreach ($artistXML->{'artist-list'}->artist->{'tag-list'}->tag as $artistTags) {  
  91.         $artist->tags.=$artistTags->name . ",";  
  92.     }  
  93.    
  94.     $artistTemplate = str_replace("{ARTIST_NAME}"$artist->name, $artistTemplate);  
  95.     $artistTemplate = str_replace("{ARTIST_BIRTH_DATE}"$artist->lifeSpanBegin, $artistTemplate);  
  96.     $artistTemplate = str_replace("{ARTIST_GENDER}"$artist->gender, $artistTemplate);  
  97.     $artistTemplate = str_replace("{ARTIST_COUNTRY}"$artist->country, $artistTemplate);  
  98.     $artistTemplate = str_replace("{ARTIST_ALIAS}"$artist->alias, $artistTemplate);  
  99.     $artistTemplate = str_replace("{ARTIST_TAGS}"$artist->tags, $artistTemplate);  
  100.    
  101.     return $artistTemplate;  
  102. }  
  103. ?> 

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

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

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

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

运行Xcode项目 点击某歌手即可浏览到详细资料页面

点击查看大图

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

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

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

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

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

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

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

换成

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

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

  1. [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
相关推荐

2016-05-27 15:44:12

H5LeanCloudWex5

2015-02-05 10:11:44

HTML5Application

2012-03-21 09:36:33

ibmdw

2013-08-29 09:53:04

HTML5MongoDB位置感知

2012-06-01 09:29:56

HTML5

2012-05-24 15:49:35

HTML5

2015-01-12 12:11:10

移动应用原生混合

2015-01-12 09:52:08

移动应用原生混合

2011-07-12 09:25:45

HTML 5

2011-05-25 09:34:30

HTML5cssjavascript

2012-03-15 15:35:51

iUI框架EclipseiOS Web

2012-03-30 15:54:43

ibmdw

2012-06-15 11:32:19

ibmdw

2009-04-12 09:25:12

Symbian诺基亚移动OS

2017-12-10 14:13:14

云服务云原生应用程序

2010-02-04 10:17:38

Android应用程序

2011-09-01 10:01:35

PhoneGap应用程序GoodDay

2012-03-07 15:24:41

2012-04-17 09:17:35

HTML 5App应用

2012-05-29 10:04:08

点赞
收藏

51CTO技术栈公众号