使用 Ionic 1 和 ngCordova 构建多语言手电筒移动应用
5.00/5 (2投票s)
在本教程中，我们将学习如何使用 Ionic 1 和 ngCordova 构建一个 Android 手电筒应用程序，以及如何使用 angular-translate 为我们的应用程序添加多语言支持。
引言
在本教程中，我们将使用混合移动开发框架 Ionic 1 结合 ngCordova 和多个 Cordova 插件来构建一个 Android 手电筒移动应用程序（如果您使用 MAC 进行开发，也可以构建 iOS 版本）。
您可以在Android 应用商店下载此应用。
您也可以克隆其GitHub 仓库。
通过构建此应用程序，我们将涵盖如何使用不同的 Cordova 插件来访问多个原生设备功能。
我们还将使用 ngCordova，它是一组封装 Cordova 插件的 Angular.js 服务。
在开始之前，让我们突出本教程的主要标题：
因此，我们将了解如何生成或创建 Ionic 1 项目，添加目标平台和 Cordova 插件。
- 我们将了解如何使我们的应用程序支持多种语言。
- 我们将学习如何访问设备相机闪光灯并将其打开和关闭。
- 我们将学习如何通过 AdMob 盈利。
- 我们将学习如何生成应用程序资源：图标和启动屏。
- 我们将学习如何准备应用程序以发布到应用商店。
首先，为还不熟悉 Ionic 框架的人介绍一下。Ionic 是一个混合移动框架，它允许 Web 开发人员使用他们已经熟悉的技能（JavaScript、HTML 和 CSS）来构建移动应用程序。事实上，任何人都可以使用 Ionic 1 进行开发，而不仅仅是 Web 开发人员，因为学习 Web 的三大支柱并不难，而且您甚至不需要具备 HTML、CSS 和 JavaScript 高度熟练的技能就可以开始使用 Ionic 框架。Ionic 使用 Angular.js 框架来构建应用程序代码，并使用 HTML 和 CSS 进行呈现和主题化。Ionic 基于 Cordova，这是一个流行的包装器/框架，用于访问相机、加速计、联系人等原生设备功能。有关混合开发的信息，请阅读为什么选择混合移动开发。
在撰写本文时，Ionic 有两个版本：Ionic 1 和 Ionic 2。Ionic 2 由 Ionic 团队从头开始重写，并基于 Angular 2 而不是 Angular.js。但由于 Ionic 2 仍处于 RC（发布候选）版本，因此我们将使用 Ionic 1 来构建我们的应用程序。
那么，让我们开始吧。首先，您需要安装 Ionic CLI（命令行界面）。打开您的命令提示符（Windows）或终端（Linux 或 MAC），然后输入以下命令：
npm install -g ionic
您还应该安装 Cordova。
npm install -g cordova
正如您所看到的，我们使用 NPM 来安装 Ionic CLI，因为它是一个 Node.js 工具（就像如今任何出色的 CLI 工具一样），所以您需要在操作系统上安装 Node.js。如果没有，请从官方 Nodejs 网站获取安装程序，或遵循本教程如何使用 NVM 安装 Node.js。
请注意，如果您想构建 Android 或 iOS（仅限 MAC）移动应用程序，您需要安装 Java 和 Android SDK，或者在 iOS 的情况下安装 XCode。您应该在网上找到有关如何安装这些要求的教程。
现在，安装 Ionic CLI 后，让我们开始构建我们的 Ionic 1 移动应用程序（基于侧边菜单模板）。
ionic start easylight sidemenu --app-id "com.techiediaries.easylight"
Ionic CLI 将负责下载侧边菜单模板并生成您的起始应用程序，其中包含一些默认页面和一个侧边菜单。
我们使用 --app-id 开关来告诉 Ionic 应用程序的包名称是什么。如果您不提供，Ionic 将为您生成一个随机名称，但您可以在项目 config.xml 文件中稍后更改它。
<widget id="com.techiediaries.switchlight" version="0.0.1"
xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.net.cn/ns/1.0">
接下来，我们需要添加目标原生平台：
cordova platform add android // for Android
cordova platform add ios // for ios
但是，您需要确保已安装原生平台的 SDK。Android 的 Java SDK 和 Android SDK，以及 iOS 的 XCode。
此外，除非您在 MAC 系统上进行开发，否则您将无法添加 iOS 平台并构建您的应用程序以针对 iOS。对于 Android，您可以在 Linux/Windows 或 MAC 上进行目标构建。
现在，进入您的应用程序目录，然后使用 bower 安装 ngCordova 库：
bower install ng-cordova
如果您花时间查看项目结构，您应该会注意到 package.json、bower.json 和 gulpfile.js 等文件和文件夹，这意味着 Ionic 使用 NPM 和 Bower 作为包管理器，并使用 Gulp 作为任务运行器。所以，如果您已经熟悉这些工具，您应该会感觉很自在。
现在要编辑/添加文件，我们需要进入 www 文件夹，在那里您应该会找到 Angular.js 代码和 HTML 视图。
打开您的 index.html 文件，并在 app.js 和控制器之前包含 ngCordova。
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
接下来，打开 app.js 并将 ngCordova 作为 Angular.js 应用程序的依赖项添加进去。
angular.module('starter', ['ionic','ngCordova','starter.controllers'])
添加多语言支持
由于 Ionic 使用 Angular.js，我们将利用一个 Angular.js 库来为我们的 Ionic 应用程序添加 i18n 支持。所以，请继续使用 Bower 安装 angular-translate。
bower install angular-translate
接下来，在我们的 index.html 文件中，在 app.js 之前添加它。
<script src="lib/angular-translate/angular-translate.min.js"></script>
接下来，将 'pascalprecht.translate' 添加到您的应用程序依赖项中。
angular.module('starter', ['ionic','ngCordova','pascalprecht.translate','starter.controllers'])
在 run() 方法中，注入 $cordovaGlobalization 和 $translate。
angular.module('starter', ['ionic','ngCordova','pascalprecht.translate','starter.controllers'])
.run(function($ionicPlatform,$cordovaGlobalization,$translate) {
$cordovaGlobalization.getPreferredLanguage().then(
function(result) {
console.log("the language " + angular.toJson(result));
var parts = result.value.split('-');
if(parts.length > 0)
{
var lang = parts[0];
$translate.use(lang);
}else
{
$translate.use('en');
}
},
function(error) {
});
})
那么，我们做了什么？
我们使用了 $cordovaGlobalization.getPreferredLanguage() 来获取运行应用程序的设备的语言，然后使用 $translate.use() 来设置 angular-translate 将使用的语言。这样，如果设备语言存在相应的翻译，我们的应用程序将以设备语言显示；否则，将使用英语。
接下来，在 app.config() 方法中，注入 $translateProvider 并设置我们应用程序不同语言的字符串。
var en_translations = {
app_title : "EasyLight",
app_desc : "EasyLight lets you use your mobile as a flashlight",
app_author : "Built by Ahmed Bouchefra",
light_on : "Switch the light on",
light_off : "Switch the light off",
enable_accelo : "Enable/Disable the accelometer",
menu_home: "Home",
menu_about: "About",
rate: "Rate"
};
var fr_translations = {
app_title : "TorcheSimple",
app_desc : "TorcheSimple vous permets d'utiliser votre phone comme une torche ",
app_author : "Crée par Ahmed Bouchefra",
light_on : "Activer/Désactiver l'éclairage",
light_off : "Éteindre l'éclairage ",
enable_accelo : "Activer l'accéléromètre" ,
menu_home: "Principal",
menu_about: "A Propos",
rate: "Rate"
};
var ar_translations = {
app_title : "شعلة",
app_desc : "شعلة تطبيق يسمح لك باستعمال المحمول كمصباح يدوي بكل سهولة",
app_author : "المبرمج : احمد بوشفرة",
light_on : "أشعل النور",
light_off : "أطفئ النور",
enable_accelo : "تمكين التسارع",
menu_home: "الصفحة الرئيسية",
menu_about: "حول",
rate: "Rate"
};
$translateProvider
.translations('en', en_translations) // we provide English translations
.translations('fr',fr_translations) // Frensh translations
.translations('ar',ar_translations) // Arabic translations
.preferredLanguage('en'); // we set the default language
现在，在我们的模板中，我们应该使用 translate 过滤器来显示任何 string。例如：
{{"app_title" | translate }}
如何访问设备相机闪光灯？
由于我们正在构建一个手电筒应用程序，我们需要访问设备的相机闪光灯，因此我们需要安装 cordova camera 插件。
在您的 Ionic 项目文件夹下，运行：
cordova plug in add plug in
接下来，添加以下代码来访问相机闪光灯：
angular.module('starter', ['ionic','ngCordova','pascalprecht.translate','starter.controllers'])
.run(function($ionicPlatform,$cordovaFlashlight,$cordovaGlobalization,$translate) {
/* ....
Omitted some code parts
......
*/
$cordovaFlashlight.available().then(function(availability) {
$cordovaFlashlight.switchOn().then(
function (success) {
console.log("Flashlight is on !");
},
function (error) {
console.log('Error while switching Flashlight on')
}
);
}, function () {
alert('Flashlight is not available');
});
});
此代码将检查闪光灯是否可用，然后在应用程序启动时打开闪光灯。
接下来，我们需要添加一系列控制器方法，以便能够将其关闭并重新打开。
angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope,$cordovaFlashlight) {
$scope.isOn = true;
$scope.turnOn = function(){
//nativeclick.trigger();
$scope.isOn = true;
$cordovaFlashlight.switchOn().then(
function (success) {
console.log("Flashlight is on !");
},
function (error) {
console.log('Error while switching Flashlight on')
}
);
}
$scope.turnOff = function(){
//nativeclick.trigger();
$scope.isOn = false;
$cordovaFlashlight.switchOff().then(
function (success) {
console.log("Flashlight is off !");
},
function (error) {
console.log('Error while switching Flashlight off')
}
);
}});
所以，您可以看到我们向 $scope 添加了两个方法 turnOn() 和 turnOff()。现在我们需要将它们绑定到主模板。
home.html
<ion-view view-title="{{'app_title' | translate }}" style="background: #0d455f">
<ion-content style="overflow-y: auto;">
<h1>
<img style="width: 100%;height: 100%;padding:5px; " src="img/title.png">
</h1>
<div class="item item-body" style="background: #0d455f">
<button class="button button-full button-energized" ng-click="turnOn()">
{{"light_on" | translate }}
</button>
<button class="button button-full button-assertive" ng-click="turnOff()">
{{"light_off" | translate }}
</button>
</div>
</div>
</ion-content>
</ion-view>
通过 AdMob 盈利
在本部分，我们将为我们的应用程序添加 AdMob 盈利支持。由于 AdMob 使用原生广告，我们需要安装一个 Cordova 插件。所以在您的终端/命令提示符中，执行：
cordova plug in add plug in
或者
cordova plug in add https://github.com/floatinghotpot/cordova-plugin-admob
接下来，我们需要添加一些设置。
因此，在您的应用程序 .run() 方法中，添加以下代码：
window.plugins.AdMob.setOptions( {
publisherId: 'ca-app-pub-9293763250492023/8573028797',
interstitialAdId: '',
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: true, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
window.plugins.AdMob.createBannerView();
当然，您需要更改 publisher id 以反映您自己的 AdMob publisher id，除非您希望我通过您的应用程序赚钱。
此外，请确保在您要将应用程序发布到应用商店时将 isTesting 设置为 false。但在开发过程中，建议将 isTesting 设置为 true，这样您在测试应用程序时就不会意外点击您的广告，这违反了 Google AdMob 的条款。
准备应用程序以发布到应用商店
最后一步是准备我们的移动应用程序以供应用商店发布。我将仅发布到 Google 应用商店，因为我只针对 Android 设备。
首先，我们需要生成应用程序资源，例如图标和启动屏。转到项目根目录下的 resources 文件夹。您应该会找到两张图片 icon.png 和 splash.png，以及两个文件夹 Android 和 ios，其中包含适用于 Android 和 iOS 的资源，具有不同的分辨率和宽高比。
您不必修改 Android 和 ios 文件夹中的资源，您只需要提供源图像 icon.png 和 splash.png（您也可以使用 Photoshop 和 Illustrator 图像），然后输入：
ionic resources
然后等待一段时间，Ionic 将生成不同分辨率和宽高比的平台特定资源。
您需要为所需的最大尺寸创建资源。Ionic CLI 将负责调整大小和裁剪以适应不同的设备分辨率。
图标的最小尺寸应为 192×192 px。
启动图像的最小尺寸应为 2208x2208 px，所有 artwork 都应居中放置在一个 1200x1200 px 的正方形内。
接下来，要为发布构建准备项目，请删除不再需要的插件。
cordova plug in rm plug in
然后，使用以下命令使用 cordova 构建应用程序以供发布：
cordova build --release android
接下来，您应该对应用程序进行签名，然后才能将其上传到商店。因此，首先，使用 keytool 根据密钥短语和其他一些信息生成密钥，这些信息将在执行后由该工具询问您。
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name
-keyalg RSA -keysize 2048 -validity 10000
然后使用 jarsigner 工具使用生成的密钥实际签名您的 apk。
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1
-keystore my-release-key.keystore my-apk-unsigned.apk alias_name
接下来，您应该使用以下命令对签名后的 apk 进行对齐：
zipalign -v 4 myapk-unsigned.apk myapk.apk
现在，如果一切顺利，您应该会得到 myapk.apk 文件，该文件已准备好发布到Android 应用商店。
您可以在Android 应用商店下载演示应用程序。
您还可以克隆最终 GitHub 仓库，以便查看完整的应用程序源代码。
结论
因此，在本教程中，我们涵盖了如何使用 Ionic 1 和 Cordova 构建 Android 应用程序。我们还学习了如何准备应用程序以发布到 Android 应用商店。如果您有 MAC，您也可以为 iOS 构建您的应用程序。
这篇博文使用 Ionic 1 和 ngCordova 构建多语言手电筒移动应用程序首次发布于techiediaries。