intel xdk_我如何使用JavaScript和XDK构建我的第一个多平台移动应用程序

intel xdk

by Rob Welan

罗布·韦兰(Rob Welan)

我如何使用JavaScript和XDK构建我的第一个多平台移动应用程序 (How I Built My First Multi-Platform Mobile App using JavaScript and XDK)

I have to admit up-front: I have a over a decade of experience developing applications.

我必须预先承认：我在开发应用程序方面拥有十多年的经验。

I’ve written applications largely for enterprise businesses. This meant that I used commercial software programs and proprietary programming languages — mainly driven by the policy of the organization I was developing for, employed by, or both.

我主要为企业业务编写了应用程序。 这意味着我使用了商业软件程序和专有的编程语言，这主要是由我正在为其发展，所受雇或两者兼而有之的组织的政策所驱动。

In the meantime, open source languages grew up. And, whilst I had a smattering of JavaScript and CSS and HTML skills, my skills within these areas wasn’t good enough to migrate directly to a job in web development. Which I have recently chosen as a career option because:

在此期间，开源语言逐渐发展起来。 而且，尽管我只有少量JavaScript，CSS和HTML技能，但是我在这些领域的技能还不足以直接迁移到Web开发工作中。 我最近选择作为职业选项是因为：

• someone hid my cheese, so re-skilling became necessary
  有人藏起了我的奶酪，所以需要重新技能
• there’s a lot of people who want web sites and stuff like that
  有很多人想要网站和类似的东西
• there is this promise of multi-platform app development for smart devices
  可以为智能设备开发多平台应用程序

So, I started re-skilling. I chose Free Code Camp, or, it eventually chose me. I’m honestly not sure which. The “how” I jumped into Free Code Camp’s waters is not important to this story. It is important background information though.

因此，我开始重新熟练。 我选择了Free Code Camp ，或者最终选择了我。 老实说，我不确定。 我跳入Free Code Camp的水域的“方式”对这个故事并不重要。 但是，这是重要的背景信息。

The other important piece to this story is that promise of multi-platform app development.

这个故事的另一个重要方面是对多平台应用程序开发的承诺。

I’ve tried for two years, or maybe more, to locate a decent tool that lived up to the promise of multi-platform app development. I’m sure if I stuck with some of the tools I’ve tried in the past that maybe something useful could have come of it.

我已经尝试了两年或更长时间来找到一种像样的工具，该工具可以实现多平台应用程序开发的承诺。 我敢肯定，如果我坚持使用过去尝试过的一些工具，也许可能会有用。

But, here’s the rub: I’m in a huge hurry. I don’t have time to learn. I really need a development tool that actually works out of the box with minimal effort. I guess I’m used to commercial products in that regard.

但是，这是麻烦所在：我非常着急。 我没有时间学习。 我确实需要一个开发工具，它实际上可以以最小的努力开箱即用。 我想我已经习惯了这方面的商业产品。

Back to Free Code Camp. All I’m going to say is, I got to the Ziplines. And I finished those. I’m also a little attention-deficit. Once I’d completed the Ziplines, I realized that: “Far out, I can build web-based apps now”. I was now proficient in open source languages: markups and scripting languages like HTML, CSS and JavaScript. And I needed a break from school by this stage.

返回免费代码营。 我要说的是，我到了Ziplines。 我完成了那些。 我也有点注意力不足。 完成Ziplines后，我意识到：“远了，我现在可以构建基于Web的应用程序”。 我现在精通开源语言：标记和脚本语言，例如HTML，CSS和JavaScript。 我需要在这个阶段放假。

So, I looked around again for tools that might live up to the promise of multi-platform application development. And, after a bit of try-and-flick, I reacquainted myself with Intel XDK (yeah, I had this installed on my machine for about 6 months or so, sitting idle). In fairness, my scripting skills were somewhat lacking when I first installed it way-back-when (despite my comprehensive understanding of VBA, object oriented coding and relational database integration).

因此，我再次环顾四周，寻找可能符合多平台应用程序开发承诺的工具。 而且，经过一番尝试之后，我重新熟悉了Intel XDK(是的，我已经在计算机上安装了大约6个月左右的时间，处于闲置状态)。 公平地说，当我第一次安装它时(尽管我对VBA，面向对象的编码和关系数据库集成有全面的了解)，我的脚本技巧还是有些不足。

Intel XDK had also improved a lot, and before I built my first app with it, I upgraded to the (then) current version.

英特尔XDK也进行了很大的改进，在我用它构建第一个应用程序之前，我已经升级到了(当时的)当前版本。

So, why did I choose Intel XDK over its competitors. Over the years I’ve tested and thrown away around about ten different tools. Here’s a summary of my experiences:

因此，为什么我选择Intel XDK而不是其竞争对手。 多年来，我已经测试并丢弃了大约十种不同的工具。 以下是我的经验总结：

• One competing product did not enable the end-user (me) to edit my own app. I could start building one, but then there was no known way to edit it. This isn’t a problem one expects — ever. You know, after a break, like, I don’t know, shutting my computer down so I could go to sleep, and then coming back the next day to continue building my app — but no way to access my work on my machine? Guess how long that development tool lasted on my machine… Yes, I looked for support. The answers I found disappointed me even more than not being able to edit my own code. Grrr…
  一种竞争产品无法使最终用户(我)编辑我自己的应用程序。 我可以开始构建一个，但是没有已知的方法来编辑它。 从来没有人期望过这个问题。 您知道，休息片刻之后，我不知道要关闭计算机，这样我才能入睡，然后第二天再回来继续构建我的应用程序，但是无法访问我的计算机上的工作？ 猜猜该开发工具在我的计算机上使用了多长时间……是的，我寻求支持。 我发现的答案使我很失望，甚至无法编辑自己的代码。 rr…
• Documentation: I tried another tool where the documentation was 12 or so months old (according to the published date). In that time, Cordova had moved light years past where that stale documentation was left. And, like so many things covered in dust, the instructions on how to use this particular tool I’m thinking of really wasn’t that relevant or useful. In the bin it went.
  文档：我尝试了另一种文档使用了12个月左右(根据发布日期)的工具。 那时，科尔多瓦已经过了光阴岁月，那里留下了陈旧的文档。 而且，就像尘土笼罩的许多事物一样，我正在考虑的有关如何使用此特定工具的说明确实没有那么相关或没有用。 在垃圾箱里去了。
• Other server-based tools kind of make me nervous. What happens if the server goes down or the responsible organisation goes bankrupt? How do I get my damn code back? I don’t like that much risk. The world turns too fast. Things fall off all the time. I don’t need for my IP to be flung off the world due to a poor choice of application hosts on my part. And server-only-based solutions tend to cost a lot more than I can afford. And who really owns the IP when the code I write is hosted on somebody else’s machine?
  其他基于服务器的工具让我感到紧张。 如果服务器宕机或负责的组织破产了怎么办？ 我该如何找回我该死的代码？ 我不喜欢那么大的风险。 世界变得太快了。 事情总是掉下来。 由于我对应用程序主机的选择不多，因此我不需要将我的IP抛弃。 基于服务器的解决方案的成本往往超出了我的承受能力。 当我编写的代码托管在其他人的计算机上时，谁真正拥有IP？

有关英特尔XDK的更多信息 (More About Intel XDK)

When I played around with this version of Intel XDK, I found out, pleasantly, that I could get my app to run. First go. And it’s not a simple app — it uses geolocation in order to look up some stuff. And other trixy things. I knew in advance that I’d need some plugins. Playing around with PhoneGap earlier in the piece got me introduced to Cordova (PhoneGap used to be free, now owned by Adobe, not so free). This was months ago. Looking at Intel XDK suggested that some stuff could be done by Intel’s proprietary code, and maybe some would need to be handled by third-party plugins (by Cordova for example).

当我玩这个版本的Intel XDK时，我很愉快地发现，我可以运行我的应用程序。 先走 它不是一个简单的应用程序-它使用地理位置来查找某些内容。 和其他琐事。 我事先知道我需要一些插件。 在文章的较早部分中试用了PhoneGap，使我了解了Cordova(PhoneGap以前是免费的，现在由Adobe拥有，而不是那么免费)。 这是几个月前。 看着英特尔XDK可以发现，某些事情可以由英特尔的专有代码完成，而某些事情可能需要由第三方插件处理(例如，Cordova)。

It turns out, when I started, that some of Intel’s proprietary code was in the process of becoming deprecated (but this wasn’t clear to me, the end-user, at the time). The bit of code I chose (on.device.ready — not it’s full name — because I forget that already) was on the way out.

事实证明，当我开始时，英特尔的某些专有代码正处于弃用的过程中(但当时对于最终用户我还是不清楚)。 我选择的一点代码(on.device.ready –不是全名-因为我已经忘记了)正在淘汰。

I love Intel XDK — because it works — but, like many tools these days, the documentation does not keep up with the functionality. And it’s not that the documentation is necessarily far behind. In Intel XDK’s case, the documentation is comprehensive — and accurate (yay), but, a little hard to find (aww).

我喜欢Intel XDK(因为它可以工作)，但是，与当今的许多工具一样，该文档也跟不上该功能。 并不是说文档一定会落后。 就英特尔XDK而言，该文档是全面的—准确(是)，但是有点难找(aww)。

So, yeah, I’m trying to use this call, and my app is working-ish. And I can’t remember — did I upgrade to the next release and my app broke, or did my code simply not work perfectly and I also upgraded to the next release (yeah, Intel pump out an upgrade to Intel XDK about one to two times a month — try keeping up with that schedule as a sole trader).

所以，是的，我正在尝试使用此调用，并且我的应用程序正常运行。 我不记得了–我是升级到下一个版本，然后我的应用坏了，还是我的代码根本无法正常工作，我还升级到了下一个版本(是的，英特尔大约一到两个就将其升级到英特尔XDK一个月内进行几次-尝试跟上该时间表作为独家交易商)。

In truth, I nearly gave up on Intel XDK. But, I thought: “Bugger this” (I’m Australian). And: “I’ve nearly finished this app. I’ll tough it out.” And so, I found some information indicating that the ‘on.device.ready’ call was not yet dead, but, it’s family of friends were dead and buried (deprecated, in capital blue letters). No point crying over loved ones. It’s time to change gears and aggressively move on.

实际上，我几乎放弃了英特尔XDK。 但是，我想：“这很有趣”(我是澳大利亚人)。 并且：“我几乎已经完成了此应用。 我会努力的。” 因此，我发现了一些信息，表明“ on.device.ready”调用尚未死亡，但它的朋友家人已死亡并被埋葬(已弃用，用大写的蓝色字母表示)。 对亲人哭泣毫无意义。 现在是时候换挡并积极前进了。

So, I quickly learned about Cordova plugins, and how to use them in Intel XDK. Not that hard it turns out. In my first App, I’m using fairly well-used and well-known plugins.

因此，我很快了解了Cordova插件，以及如何在Intel XDK中使用它们。 结果并不难。 在我的第一个应用程序中，我使用的是相当常用和知名的插件。

And yeah, the good news is that once I’d figured out how to plugin Cordova plugins, I haven’t looked back.

是的，好消息是，一旦我确定了如何插入Cordova插件，便再也没有回头。

So, here’s some short-cuts to building an app with Intel XDK. My pearls of wisdom to help you, the reader, to avoid the darker paths I took, and stay well in the light:

因此，这是使用英特尔XDK构建应用程序的一些捷径。 我的智慧之珠，可以帮助您，读者，避开我走的更黑暗的道路，并保持良好的光照：

• I don’t care what app you’re trying to develop, tell Intel XDK to build a Cordova version. Just in case you need to use a plugin. And, yes, you’ll probably need StatusBar. Because iOS.
  我不在乎您要开发什么应用程序，请告诉Intel XDK构建Cordova版本。 万一您需要使用插件。 而且，是的，您可能需要StatusBar。 因为iOS。

• You’ll need, at a minimum, HTML and CSS skills. Plus some JavaScript in order to use the plugins properly. Yes, you can use JQuery instead if that’s your thing. How much JavaScript or JQuery depends on the app you’re building. You’ll need to be able to build web sites in order to use something like Intel XDK. You don’t know how to build a web site yet? Here’s the solution: join up to Free Code Camp, and learn as far as and including the Ziplines. Once you’ve done that, you’re ready to play with Intel XDK. Yes you are.

  您至少需要具备HTML和CSS技能。 加上一些JavaScript以便正确使用插件。 是的，如果那是您的事，则可以使用JQuery代替。 多少JavaScript或JQuery取决于您正在构建的应用程序。 您需要能够构建网站才能使用类似Intel XDK的工具。 您还不知道如何建立网站吗？ 解决方案如下：加入Free Code Camp ，并学习Ziplines。 完成此操作后，就可以使用英特尔XDK了。 是的，你是。

• For your first app, tell Intel XDK to build using one of their templates. This will give you some ready-made code, which will help short cut the “wait, now what?” part.
  对于您的第一个应用，请告诉Intel XDK使用其模板之一进行构建。 这将为您提供一些现成的代码，这将有助于捷径“等待，现在怎么办？” 部分。
• index.html: this is the first user interface that your App’s eventual end-user (customer) is presented with. Your knowledge of web site development that you acquired up-to-and-including the Free Code Camp Ziplines will help you figure out what to do with this file.
  index.html：这是向您的应用程序最终用户(客户)展示的第一个用户界面。 您所获得的最新的网站开发知识(包括Free Code Camp Ziplines)将帮助您弄清楚该文件的用途。
• GitHub: you will want to follow the instructions for each plugin you use. To find your plugin’s documentation, Google “github cordova [plugin]”, where “[plugin]” is the name of the plugin you’re searching for. For example, the search “github cordova statusbar” should take you to the statusbar plugin pretty easily. The cordova plugin documentation on github is excellent.
  GitHub：您将要按照使用的每个插件的说明进行操作。 要找到您的插件的文档，请使用Google“ github cordova [plugin]”，其中“ [plugin]”是您要搜索的插件的名称。 例如，搜索“ github cordova s​​tatusbar”将带您轻松进入statusbar插件。 github上的cordova插件文档非常出色。
• StackOverflow: ask your “dumb” questions here. Don’t forget to search for answers to your question first. The vast community of mentors on StackOverflow make a particular effort to point out that your question has been asked (and answered) already.
  StackOverflow：在这里询问您的“愚蠢”问题。 不要忘记先搜索问题的答案。 关于StackOverflow的大量指导者做出了特别的努力，以指出您的问题已经被提出(并回答)了。

• Intel XDK product forum: ask your “dumb” Intel XDK specific questions here. The guys at Intel are your friends (happily). And the other developers using Intel XDK are also happy to help if they can.

  英特尔XDK产品论坛 ：在此处询问“笨拙的”英特尔XDK特定问题。 英特尔的家伙是您的朋友(很高兴)。 其他使用英特尔XDK的开发人员也很乐意提供帮助。

• Intel XDK builds three packages when building for Windows devices. I’m still trying to understand why it builds three, but I only need to upload one to the Windows store. Check the Intel XDK forums for the answer. I asked. It’s documented now. Not the complete answer. Just the answer you will need in order to continue. It’s enough.

  在为Windows设备构建时，英特尔XDK会构建三个软件包。 我仍在尝试理解为什么它可以构建三个，但是我只需要上载一个到Windows应用商店即可。 查看英特尔XDK论坛以获取答案。 我问。 现在已记录在案 。 不是完整的答案。 只是您继续需要的答案。 够了

保持简单愚蠢 (Keep It Simple Stupid)

OK, here’s the basic advice that your Mum and Dad should have told you before you left home:

好的，这是您父母在离开家之前应该告诉您的基本建议：

• create the least amount of code possible.
  创建尽可能少的代码。
• this includes asset files. My first app had too many CSS files and too many JS files. Seriously. The “aww, snap” that I was having with “on.device.ready” gave me an opportunity to consolidate my IP into fewer files and to throw away bits that weren’t actually used anywhere. It’s a best practise thing.
  这包括资产文件。 我的第一个应用程序包含太多CSS文件和太多JS文件。 说真的 我在“ on.device.ready”上遇到的“ aww，snap”使我有机会将我的IP整合到更少的文件中，并丢弃了实际上没有在任何地方使用的位。 这是最佳做法。
• Use other people’s code (not in the plagiarism sense) — use the ready-made templates that Intel XDK provides to short cut the learning curve. At least for your very first app.
  使用别人的代码(不是抄袭)-使用Intel XDK提供的现成的模板来缩短学习过程。 至少对于您的第一个应用程序。
• Stuck on a “how to”? Ask Google and you’ll find the answer in StackOverflow. Modify the learning for your purposes, and then move on to the next problem. You’ll know for next time.
  坚持“如何做”？ 询问Google，您会在StackOverflow中找到答案。 根据您的目的修改学习内容，然后继续进行下一个问题。 下次您会知道的。
• Read books. Ha ha ha. Like I have the time. Seriously though. Find the time.
  看书。 哈哈哈 就像我有时间。 认真地。 找到时间。
• I’m still reading about the Swift programming language… It’s not even related. But it’s about code at least.
  我仍在阅读有关Swift编程语言的信息……甚至没有关系。 但这至少与代码有关。
• Use other people’s assets. For my first App, I found a CSS animation library, and a neat font library. I made sure my App attributed these libraries in the “About” information page of my App. Per the license conditions. And because it’s the right thing to do.
  使用他人的资产。 在我的第一个应用程序中，我找到了一个CSS动画库和一个整洁的字体库。 我确保我的应用在我的应用的“关于”信息页面中为这些库提供了属性。 根据许可条件。 而且因为这是正确的事情。

使用英特尔XDK创建您的第一个应用程序 (Using Intel XDK to Create Your First App)

Download and install Intel XDK.

下载并安装英特尔XDK。

In Intel XDK:

在Intel XDK中：

1. Click “Start a New Project”.
   点击“开始一个新项目”。
2. Choose “Templates” and then “Layouts and User Interfaces”.
   选择“模板”，然后选择“布局和用户界面”。
3. Choose Tab View App (or you can choose another template type if you like). Tick “Use App Designer” (this will install some ready-made code to build from and start with — yay).
   选择“选项卡视图应用程序”(或根据需要选择其他模板类型)。 勾选“使用App Designer”(这将安装一些现成的代码，以yay开头)。
4. Click Continue.
   单击继续。
5. In the Project Window, click the Upgrade to Cordova button.
   在项目窗口中，单击升级到Cordova按钮。

6. When the project is created, add the following Cordova plugin (back at the project menu):

   创建项目后，添加以下Cordova插件(返回项目菜单)：

   Statusbar

   状态栏

The plugins you choose will depend entirely on what you’re building. The plugins help you use the features of the devices your app will run on. It’s likely you’ll need at least one. Because iOS.

您选择的插件将完全取决于您要构建的插件。 插件可帮助您使用将在其上运行应用程序的设备的功能。 您可能至少需要一个。 因为iOS。

构建您的应用 (Building Your App)

Apart from Apple’s over-engineered requirements hoops (which frigging certificate do I need again?) and the “Windows choice of three packages”, the build process in itself is simple. Go to the Build tab. Upload your code, build your package, download your package.

除了苹果公司过度设计的需求箍(我需要再次获得哪张证书)和“ Windows选择三个软件包”之外，构建过程本身很简单。 转到“构建”选项卡。 上传您的代码，构建您的程序包，下载您的程序包。

I don’t know about you. I’m poor. I can test my iOS package. I can’t test my Android or my Windows packages. One day I hope to be able to test on more than one platform. Sorry test guinea pigs (ie. all my customers on Google and Windows devices).

我不认识你 我很穷。 我可以测试我的iOS程序包。 我无法测试我的Android或Windows软件包。 我希望有一天能够在多个平台上进行测试。 对不起，测试豚鼠(即，我在Google和Windows设备上的所有客户)。

For you, the Developer: the emulator in Intel XDK should be thought of as a guide only. You’ll figure it out. March on. Take no prisoners. This is no time to be frightened by the fear of: “what if it doesn’t work.” Have some faith. Be damned for trying. Don’t be damned for failing.

对您而言，开发人员：英特尔XDK中的仿真器仅应被视为指南。 您会发现的。 前进 不要俘虏。 现在没有时间害怕以下问题：“如果它不起作用怎么办”。 有一些信仰。 该死的尝试。 不要因为失败而受到谴责。

For Android, you’ll want to build using the “Crosswalk for Android” option. Two words as to why: “flex box”. If you need to know more, check the documentation. Flex box has a way of sneaking into every project (in my limited experience).

对于Android，您需要使用“ Crosswalk for Android”选项进行构建。 关于为什么的两个词：“柔性盒”。 如果您需要了解更多信息，请查阅文档。 Flex box有一种潜入每个项目的方法(以我的有限经验)。

有什么可以帮您的吗？ (What can’t I help you with?)

• Apple’s way of doing things is heavily over-engineered. You have to create your own certificate using a convoluted method. Everyone gets it wrong. At least once. Persevere.
  苹果的处事方式设计过度。 您必须使用卷积方法创建自己的证书。 每个人都错了。 至少一次。 坚持下去
• Apple’s review period is long. About 7 days (that’s not a misprint, it takes days!). It’s a nail-biting first experience. What if the app is rejected? Will I know what to do if it is rejected? Why is it taking so long? Does that review status mean that Apple is going to review it or that I’m supposed to? Aaaargh! Is it ready yet? What’s going on? Oh, and the sleepless nights. And the minute-by-minute checking of the email. That never comes.
  苹果的审查期很长。 大约7天(这不是打印错误，它需要几天！)。 这是一次令人难忘的初体验。 如果应用被拒绝怎么办？ 如果我拒绝了该怎么办？ 为什么要花这么长时间？ 该审查状态是否意味着Apple将会对其进行审查，还是应该对我进行审查？ 啊！ 准备好了吗？ 这是怎么回事？ 哦，还有不眠之夜。 并逐分钟检查电子邮件。 那永远不会来。
• Google takes a few hours. The same App will be reviewed and deployed within 24 hours. Maybe a little longer. Less than 48. That said, if you write a monster complicated app, maybe longer.
  Google需要几个小时。 同一应用将在24小时内进行审核和部署。 也许更长一点。 少于48。也就是说，如果您编写一个庞杂的复杂应用程序，则可能会更长。
• Windows takes a few hours. And then about a day to become available for download in the Windows store. But, you’ll have no customers. So it’s a moot point. Build for Windows Phones anyway. It’ll round out your resumé.
  Windows需要几个小时。 然后大约一天就可以在Windows应用商店中下载。 但是，您将没有客户。 所以这是有争议的。 仍然为Windows Phone构建。 这将完善您的简历。

我现在在做什么？ (What Am I Doing Now?)

I’m building another App.

我正在构建另一个应用程序。

This story originally appeared on creatureoftech.com.

这个故事最初出现在biologicaloftech.com上 。

翻译自: https://www.freecodecamp.org/news/intel-xdk-or-how-i-finally-built-my-first-multi-platform-app-bc4ca181cbb5/

intel xdk