快速上手：制作第一个App

上一节中，我们已经通过完整的工作流程介绍了如果通过App-Link创建一个新闻APP应用的数据服务。那么，本章，我们继续来继续完成前端代码的编写。

前端编写说明

App-Link平台为了减少你写代码的追求，我们自动帮你生成了各种语言的前端代码开发包，你只需要在应用管理的接口开发栏目中下载相关的源代码开发包，并引用到你的项目中，直接调用相关方法就可以获取数据。

纯HTML版本新闻网页应用

首先，我们尝试使用AJAX方式的代码开发包，来完成网页前端的交互。首先我们在点击下载AJAX方式的源代码。下载后我们会看到到文件如一下：

然后，我们在jquery.js的文件目录下，创建一个index.html文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>API调用测试</title>
    <meta charset="utf-8" />
    <script src="jquery-2.2.3.min.js"></script>

    <!--引用App-Link的服务调用文件-->
    <script src="api/api.config.js"></script>
    <script src="api/news.js"></script>
</head>
<body>
    <div>
        <ul id="newslist">
            
        </ul>
    </div>
    <hr />
    <div id="news">
        <h3 class="title"></h3>
        <div class="content"></div>
        <p>发布日期：<span class="published_date"></span></p>
        <p>查看人数：<span class="viewed_count"></span></p>
    </div>
</body>
<script>
    $(document).ready(function () {
        var news = new NewsApi();
        news.list(null, function (data) {
            data = JSON.parse(data);
            for (var i = 0; i < data.length; i++) {
                var newsitem = data[i];
                $("#newslist").append("<li newsid='" + newsitem.id + "'>" + newsitem.title + " -- " + newsitem.published_date + "</li>")
            }
            $("#newslist li").click(function () {
                var id = $(this).attr("newsid");
                news.get(id, function (data) {
                    data = JSON.parse(data);
                    $("#news .title").html(data.title);
                    $("#news .content").html(HtmlUtil.htmlDecodeByRegExp(data.content));
                    $("#news .published_date").html(data.published_date);
                    $("#news .viewed_count").html(data.viewed_count);

                    news.updateviewcount({ "id": id });

                });
            });
        });
    });
</script>
</html>

这段代码很简单，显示新闻列表，点击其中一个后显示新闻内容并显示新闻详情，同时更新阅读数。详细代码不再解释，你看到的是，这个过程中，我们一句SQL语句或者和App-Link相关的代码都没有写，就直接完成了一个新闻网站了。

TypeScript版新闻APP

同样的，我们下载TypeScript版的开发代码包，得到以下代码源文件，将代码都复制到SRC目录下，就可以直接进行开发。

接下来我们用IONIC命令创建news-list和news的页面，过程略。我们下图展示的是如果获取新闻列表的数据

news-list新闻列表的TS文件代码如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {NewsApi} from '../../providers/news.api';
import {NewsPage} from '../news/news';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [NewsApi]
})
export class HomePage {

    constructor(public navCtrl: NavController, public newsApi: NewsApi) {

    }

    list = [];

    ionViewDidLoad() {
        var json = {};
        var obj = this;
        this.newsApi.listInDB(json, function (data) {
            obj.list = data;
        });
    }

    open(id) {
        var nav = this.navCtrl.push(NewsPage, { "id": id });
        
    }
}

news新闻详情的TS文件代码如下：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {NewsApi} from '../../providers/news.api';

import {AppUtil} from '../../app/app.util';
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
  providers: [NewsApi]
})
export class NewsPage {

    constructor(public navCtrl: NavController, public navParams: NavParams, public newsApi: NewsApi) {}

    info = { content:""};
  ionViewDidLoad() {
      var id = this.navParams.get("id");
      this.newsApi.get(id).then(data => {
          this.info = data;
          this.info.content = AppUtil.HtmlDecode(this.info.content);
		  
		  this.newsApi.updateviewcount({"id":id});
		  
      });
  }

}

代码和网页版差不多，依然是获取列表数据，点击展示详情同时更新浏览次数。你依然发现，我们也是不需要写任何和App-Link的代码和配置环境，直接就把代码复制到SRC，你就直接可以开发你的APP于App-Link平台的数据服务进行交互。

PHP版新闻网站

我们下载PHP版的开发代码包，得到以下代码源文件，在服务器中设置一个虚拟站点，将以下文件部署到站点根目录中。

很显然，和AJAX或者TypeScript的开发包代码一样，我们已经生成了代码，接下来我们只要创建index.php显示新闻列表和详情。

index.php的代码如下

<?php
include 'core/common.inc.php';
include 'model/news.php';

$newsMgr=new NewsMgr($dbmgr);

//从数据库获取数据并显示所有新闻
$list=$newsMgr->_list();
echo "<ul>";
foreach($list as $k=>$v){
	echo "<li><a href='/?id=".$v["id"]."'>".$v["title"]."</a></li>";
}
echo "</ul>";


//从数据库获取新闻详情
if($_REQUEST["id"]>0){
	$news=$newsMgr->get($_REQUEST["id"]);
	echo "<div>".htmlspecialchars_decode($news["content"])."</div>";
	$newsMgr->updateviewcount(array("id"=>$_REQUEST["id"]));
}
?>

如以上代码所见，很简单的，你只需要调用获取列表的方法和获取单个的方法就可以。

C#版Windows新闻应用程序

内容和以上雷同，有空再补充

Java版安卓原生新闻APP

内容和以上雷同，有空再补充

Object-C版iOS原生新闻APP

内容和以上雷同，有空再补充

Swift版iOS原生新闻APP

内容和以上雷同，有空再补充

总结

恭喜您完成了用App-Link平台结合前端应用开发技术制作的第一款互联网应用！希望这篇快速入门教程能帮助你了解App-Link平台如何与前端的应用开发技术结合在一次，像助手一样协助你的开发。

接下来你还可以继续完善新闻App的各方各面，以下是一些推荐的改进方向：

加入新闻分类，按照不同分类让用户选中
修改新闻的几种方式，例如图片新闻或者视频新闻等
加入用户登录模块并允许用户评论与回复，点赞等

以上这些方向都得到改善的应用版本可以在应用商店购买平台版本来参考和学习，这里就不再赘述了。

此外如果希望将完成的应用发布到应用商店分享给好友或者得到受益，可以阅读应用商店相关章节。

今天的教程就到这里了，您可以立刻开始制作您的第二款App-Link平台下的应用，或者继续阅读本手册。

返回查看快速上手：制作第一个APP的App-Link后台数据服务

继续前往App-Link用户上手指南