This to minute tutorial helps you get started with the Intel XDK by walking you through a typical end-to-end workflow you can ultimately apply to your own app development process. After you complete this tutorial, you should be able to: Create your new app. Preview app functionality on various virtual devices. Evaluate how your app looks and performs on a real physical mobile device. This tutorial covers a core set of Intel XDK features to help you learn the app development workflow. If necessary: Sign up for an account.
|Published (Last):||2 July 2014|
|PDF File Size:||18.20 Mb|
|ePub File Size:||4.20 Mb|
|Price:||Free* [*Free Regsitration Required]|
This to minute tutorial helps you get started with the Intel XDK by walking you through a typical end-to-end workflow you can ultimately apply to your own app development process. After you complete this tutorial, you should be able to: Create your new app. Preview app functionality on various virtual devices. Evaluate how your app looks and performs on a real physical mobile device. This tutorial covers a core set of Intel XDK features to help you learn the app development workflow.
If necessary: Sign up for an account. You can use your email address as your User Name. It can be deployed as a packaged hybrid mobile app on many platforms Android, Android Crosswalk, Apple iOS, and Windows 8 or as a hosted web app for certain web- or OS-based platforms. It requires an IoT maker board and is not built like mobile web apps for phones and tablets. You can also choose a simple blank template to start with an essentially empty project.
This is what we will do in this tutorial. Click the Hello Cordova demo image. Click the Continue button to start setting up your new project. On the Congratulations! You can use the built-in code editor or your favorite code editor.
Context menus are also available. With Live Editing Layout, code changes appear immediately after you make your edits using the built-in code editor, or after you save project files using an external editor. This tutorial does not cover web services. See the Develop Overview for more information. If you use a code editor external to the Intel XDK, you must click the Reload App icon on the toolbar to update all files and restart your app when you return to the emulator.
The App Designer is a round-trip editor. You can also launch a built-in version of the CDT debugger from this floating window to debug app functionality. We will do this later in this tutorial. You can open and close each palette, hide and show the columns, move columns, and move palettes within a column.
Opening and closing each palette - Click the palette header bar. Hiding and showing each palette column - Click the and controls. Moving a palette - Click and drag a palette header bar to move it up or down the palette column or to another column. The emulator is actually a web app that runs inside a node WebKit. Your app runs within an inner HTML frame. The runtime engine rendering your HTML5 code in the emulator is based on the Chromium open source browser.
This up-to-date web runtime engine may implement HTML5 features more correctly than the web runtime on a real mobile device, especially if that mobile device has an old OS version. Use the simulator to quickly debug and test your app logic before you test and debug your app behavior on a real device. For more details, see Device Emulator Limitations. However, modifying code in the debugger window only impacts future app behavior in the emulator. It does not modify actual source code.
Close the Developer Tools floating window. In the file tree, open the file that needs to be modified. If not, click the the Reload App icon on the toolbar and try again. This simulation is designed to provide an idea of how your app will render on various devices and form factors.
Some visual aspects of your app may render differently on real devices, especially if the real devices have an old OS version. As of this note the current iOS version of App Preview was 2. This feature does work in a built app when building with CLI 4.
You may need to increase the notification volume on your Android device to hear the beep. On some Android devices the notification beep may be silenced. The notification beep is a system notification, meaning that your Android device and Android system settings determine how loud the beep is and what the beep sounds like.
Now that you are confident your XDKTutorial app works properly on virtual devices, it is time to run it on a real mobile device. Click the TEST tab. Advantages: Requires minimal setup; avoids potential firewall and network topography issues; you can pull your files down anytime from anywhere in the cloud. Use the WIFI button to test via a local Wi-Fi network to which both your development machine and test mobile device are connected.
Advantages: Usually faster once set up; does not consume mobile data; pulls files directly from your development machine. This tutorial does not cover on-device or remote debugging. See the Test Tab and Debug Tab for more information. The Uploading Bundle message disappears when the upload is complete.
Developing Internet of Things Projects with the Intel® XDK
The source code used to read sensor data can be found here: iotapp-local-temperature. This example uses components from the Grove - Starter Kit with the Intel Edison board; if you use different components, your code and setup may vary slightly. Once aligned, gently push the base shield down firmly and evenly towards your board until it is securely attached Check that the voltage toggle switch which is marked VCC and located next to the A0 socket on the base shield is set to 5V Slide the connector on one end of the Grove cable into the socket on your temperature sensor until you feel the cable snap into place Slide the other end of the cable into the A0 socket on your Grove base shield until you feel the cable snap into place Creating a New Project for Reading Temperature Sensor Data This section contains steps to use sample code to read temperature data from the sensor attached to your board. Uploading the Temperature Sensor Code to Your Board This section contains steps to build, upload, and run the code to read data from the temperature sensor. In the bottom toolbar, click the Upload icon to upload the project to your board Click the Run icon to run your project Note: If the bottom console window displays a message about being unable to find MRAA, you must update the MRAA library on your board. Select Local Temperature Companion App. For steps to test your app directly on a mobile device, see the Testing the Local Temperature Companion app on your mobile device section.
Intel XDK Tutorial
Intel XDK Documentation - Getting Started Tutorial
Intel XDK Complete Tutorial