Build a simple enterprise mobility application with data sync using AngularJS, Backbone or Sencha Touch using our simple step by step tutorials.
Our tutorials demonstrate how to develop a basic “train times” viewing application using the AppearIQ API. This includes generation of a boilerplate HTML5 hybrid cross-platform app (capable of running on either iOS or Android devices), introduction to data formats, application logic, how to synchronize data, testing in browsers and on devices.
The tutorials assume that you already have basic knowledge of HTML and JavaScript. If you feel that you need to go through the basics, check out some excellent external tutorials like W3Schools HTML tutorials or W3Schools Javascript tutorials.
Use of the AppearIQ cloud developer platform is free of charge. To access the tutorials click here (links to AppearIQ.com developer site)
In this tutorial, you will learn how to integrate an existing Backbone based application with the Data Sync module of the Appear IQ platform. The Appear IQ Data Sync module provides applications with the possibility to share data across your organization, while hiding the complexity of the synchronization process behind a collection of easy to use APIs. You take care of managing data on device and the Appear IQ Data Sync takes care of distributing them to other devices or to your existing backend systems.
CyberLab Training Division :
ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites. It allows you to use a full featured programming language such as C# or VB.NET to build web applications easily.
This tutorial covers all the basic elements of ASP.NET that a beginner would require to get started.
Audience
This tutorial has been prepared for the beginners to help them understand basic ASP.NET programming. After completing this tutorial you will find yourself at a moderate level of expertise in ASP.NET programming from where you can take yourself to next levels.
Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of .NET programming language. As we are going to develop web-based applications using ASP.NET web application framework, it will be good if you have an understanding of other web technologies such as HTML, CSS, AJAX. etc
ASP.NET supports three different development models:
Web Pages, MVC (Model View Controller), and Web Forms.
For More Details.
Visit: http://www.cyberlabzone.com
In this tutorial, you will learn how to integrate an existing Backbone based application with the Data Sync module of the Appear IQ platform. The Appear IQ Data Sync module provides applications with the possibility to share data across your organization, while hiding the complexity of the synchronization process behind a collection of easy to use APIs. You take care of managing data on device and the Appear IQ Data Sync takes care of distributing them to other devices or to your existing backend systems.
CyberLab Training Division :
ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites. It allows you to use a full featured programming language such as C# or VB.NET to build web applications easily.
This tutorial covers all the basic elements of ASP.NET that a beginner would require to get started.
Audience
This tutorial has been prepared for the beginners to help them understand basic ASP.NET programming. After completing this tutorial you will find yourself at a moderate level of expertise in ASP.NET programming from where you can take yourself to next levels.
Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of .NET programming language. As we are going to develop web-based applications using ASP.NET web application framework, it will be good if you have an understanding of other web technologies such as HTML, CSS, AJAX. etc
ASP.NET supports three different development models:
Web Pages, MVC (Model View Controller), and Web Forms.
For More Details.
Visit: http://www.cyberlabzone.com
ATAGTR2017 Upgrading a mobile tester's weapons with advanced debuggingAgile Testing Alliance
The presentation on Upgrading a mobile tester's weapons with advanced debugging was done during #ATAGTR2017, one of the largest global testing conference. All copyright belongs to the author.
Author and presenter : Abhijeet Vaikar
This small ppt is introduction to R Shiny Package .A web application framework for R that allows you to turn your
data into an interactive web App.
You can easily integrate R with webpage. Suppose you want your web page run machine learning algorithms like random forest, SVM etc and display summary of the model with the flexibility of selecting inputs from user. Shiny can do it very easily.
ShinySRAdb: an R package using shiny to wrap the SRAdb Bioconductor packageSean Davis
The Sequence Read Archive (SRA) is hosted at the National Center for Biomedical Informatics at the National Institutes of Health. These slides showcase Olivia Zhang's summer internship work to wrap a Bioconductor package, SRAdb, using the the shiny R package.
Angular-Js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
Presented at CONNECT Web Experience '15 Basel June 25.
How the Adobe on Adobe team used AngularJS and AEM to build out a single page application site. One of the main goals with this proof of concept project was that the pattern had to be super simple to develop in. It had to be JSP free. It had to function smoothly on everything from a mobile device to a desktop and everything in between. The site also needed to be SEO friendly. Follow along to see the process and the challenges.
AI: Mobile Apps That Understands Your Intention When You TypedMarvin Heng
With Microsoft's Cognitive Services - Language Understanding Intelligent Service (LUIS), we can build a smart app. By following this tutorial, you should learn how to create a intelligent cross platform Mobile App that understands what is your intention.
Read more @ www.techconnect.io
By Marvin Heng
Twitter: @hmheng
Blog: www.techconnect.io
ATAGTR2017 Upgrading a mobile tester's weapons with advanced debuggingAgile Testing Alliance
The presentation on Upgrading a mobile tester's weapons with advanced debugging was done during #ATAGTR2017, one of the largest global testing conference. All copyright belongs to the author.
Author and presenter : Abhijeet Vaikar
This small ppt is introduction to R Shiny Package .A web application framework for R that allows you to turn your
data into an interactive web App.
You can easily integrate R with webpage. Suppose you want your web page run machine learning algorithms like random forest, SVM etc and display summary of the model with the flexibility of selecting inputs from user. Shiny can do it very easily.
ShinySRAdb: an R package using shiny to wrap the SRAdb Bioconductor packageSean Davis
The Sequence Read Archive (SRA) is hosted at the National Center for Biomedical Informatics at the National Institutes of Health. These slides showcase Olivia Zhang's summer internship work to wrap a Bioconductor package, SRAdb, using the the shiny R package.
Angular-Js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
Presented at CONNECT Web Experience '15 Basel June 25.
How the Adobe on Adobe team used AngularJS and AEM to build out a single page application site. One of the main goals with this proof of concept project was that the pattern had to be super simple to develop in. It had to be JSP free. It had to function smoothly on everything from a mobile device to a desktop and everything in between. The site also needed to be SEO friendly. Follow along to see the process and the challenges.
AI: Mobile Apps That Understands Your Intention When You TypedMarvin Heng
With Microsoft's Cognitive Services - Language Understanding Intelligent Service (LUIS), we can build a smart app. By following this tutorial, you should learn how to create a intelligent cross platform Mobile App that understands what is your intention.
Read more @ www.techconnect.io
By Marvin Heng
Twitter: @hmheng
Blog: www.techconnect.io
Talk given at JavaOne 2009 discussing how to build web applications using OSGi. The source for the demo found at http://github.com/mrdon/jforum-plugins/tree/master
Session Abstract: Enterprise Web applications tend to grow like weeds in monolithic complexity. OSGi, although more often associated with Java™ technology-based clients and application servers, can bring a new level of modularity, uptime, and stability that is needed with today's always-on hosted Web applications. OSGi gets really interesting when the pretty architecture diagrams meet the real world, because it consists of various deployment platforms, development environments, and application architectures. This presentation, for Java 2 Platform, Enterprise Edition (J2EE™ platform)-savvy architects and senior developers, provides a practical guide to the Web on OSGi, from integration approach to bundle development, to real-world code you can use today.
The session discusses
• What benefits OSGi brings to the J2EE platform
• Three integration strategies
• How to use Spring DM and Maven to ease development
• Lessons learned from Atlassian's recent OSGi deployment
• A production-ready example to use immediately
Application Program Interface (API) widely used for the programmers. It helps programmers to focus on their programming rather than the other features. API provides the facility to programmer for use the 'œPredefined Code'. Among them one type of API provides by the google that is chart API. Chart API is used to generate the chart from the data which are available on our database. Sometimes it would be very hard to develop such type of another system. Rather than we can use API and save the time and effort that can be use at proper place. This paper will describe how we can integrate the google chart API in the php website. Dr. Chetan R. Dudhagara | Mr. Ashish Joshi"API Integration in Web Application" Published in International Journal of Trend in Scientific Research and Development (ijtsrd), ISSN: 2456-6470, Volume-1 | Issue-2 , February 2017, URL: http://www.ijtsrd.com/papers/ijtsrd67.pdf http://www.ijtsrd.com/engineering/computer-engineering/67/api-integration-in-web-application/dr-chetan-r-dudhagara
Improving the efficiency of aircraft turnaroundAppear
Implementing innovative app toolkit for airport workers that improve aircraft turnaround. Airport IQ will develop a mobile information sharing system connecting back-end A-CDM systems with mobile devices (smartphones, tablets and other wearable devices) carried by ground staff. The system will provide the right information at the right place and time to the right people, making it easier for planners to make optimal use of resources.
We are looking for potential partners to participate in the project whether they are Airports, Ground Handlers, Airlines, System providers and other commercial entities. If you would like to know more, then get in touch
Appear IQ The Business Case for hybrid html5 mobile appsAppear
This white paper briefly explores the business case for building hybrid HTML5 mobile applications for enterprise mobility projects compared to implementing with a purely native development approach.
White Paper - Securing Mobile Access to enterprise dataAppear
Over recent years, small and large businesses alike have seen the proliferation of mobile applications accessing enterprise data. These
applications are either introduced by employees through word of mouth or developed by internal teams without further coordination. This trend is compounded by an increasing push from employees to use their
personal mobile devices to access enterprise data.
This paper describes the approach AIQ takes to securely manage and
protect enterprise data.
Appear IQ8 - Mobility. Made Simple. What we doAppear
Introducing the Appear IQ8 Mobile Application Development Platform (MADP)
Extend your own IT or software reach into the smartphone and tablet world – with unparalleled flexibility, simplicity and control for building, integrating and deploying future proof enterprise apps, faster, cheaper, smarter.
Webinar 5 challenges of mobilization april 9 2014Appear
Are you faced with mobilizing an existing software solution in a highly competitive market?
Worried about time to market, cost, expertise, learning curve or other challenges associated with enterprise mobility projects?
In our webinar you will learn about the 5 essential challenges of mobilizing legacy software and some different ways to overcome them.
MobiCloud Transport Webinar Series - Die vernetzten ÖPNV-MitarbeiterAppear
Mobilität, Cloud und Kontext für Optimierung operativer Resultate
In diesem Webinar werden wir detaillierte Pilotprojekte des Bahnbetreibers Tågkompaniet AB aus Schweden und der Verkehrsbetriebe Karlsruhe (VBK) vorstellen. Beide Unternehmen setzen bereits mobile Cloud-basierte Anwendungen zur Effizienzsteigerung, Ressourceneinsparung und Verbesserung der Kundenzufriedenheit ein. Das Webinar sondiert auch die Umsetzung eines App-Stores speziell für Verkehrsunternehmen – mit Anwendungen zu Störungsmanagement, verbesserter Fahrgastinformation und sonstigen Geschäftsanwendungen.
Erfahren Sie, wie Verkehrsunternehmen von der plattformübergreifenden Entwicklung, Cloud-basierten Diensten und Kontext-getriebenen Anwendungsfällen profitieren können. Mit der Teilnahme an diesem Webinar erhalten Sie auch Zugang zu unserem „MobiCloud Early Adopter Program“, mit einer Reihe von freien Technologien und Dienstleistungen, um Ihre eigenen mobilen Anwendungsfälle umzusetzen.
Webinar: Learn how to migrate mobile workers to next generation mobilityAppear
Second generation enterprise mobility is transforming mobile field worker productivity. This webinar looked at how to migrate from previous generation solutions to next generation mobile workforce solutions such as those from Appear.
Many organisations are now looking to move from 1st generation rugged devices to smartphones and tablet computers - enabling end users to bring their own favored devices into the workplace.
These slides are from a webinar dated 6th December 2012. For the full text or to view the video of the event please contact Mia Falgard at Appear - mia.falgard@appearnetworks.com
Appear is the leading provider of context-aware enterprise mobility solutions designed to power the next generation of mobile applications and services. By collecting and sharing user and environmental context, Appear’s solutions eliminate information overload and ensure users have exactly the information they need, when and where they need it.
Appear's IQ suite is a cloud-based mobile enterprise solution combining a cross-platform development environment (to support BYOD models), a context-aware mobility platform (to push updates, add/remove applications and change distribution criteria based on the precise context of your employees) and a vertical application store (your own private app store to control the lifecycle and distribution of your applications). Appear IQ offers a number of configurable mobile apps focusing on the needs of mobile workers in industries such as transportation, logistics, field service or construction. Join the app revolution atwww.appearshowroom.com
Industry leaders in transportation, retail, telecommunications and government use AppearIQ. Appear has an extensive partner network including industry leaders Cisco, Motorola, Orange Business Services, SITA, Thales and Logica in order to deliver innovative, end-to-end wireless and mobile solutions. The company is privately held and headquartered in Stockholm, Sweden and with offices across Europe.
Webinar: The Enterrpise Appstore - What is it and why you need it.Appear
By implementing the enterprise appstore, the promised cost savings of BYOD can become a reality. Companies can quickly mobile-enable their workforce to securely and effectively interact with key business IT functions.
This webinar provides some answers to the following questions:
How to distribute applications to your workforce?
How to simplify mobile access for all employees?
How best to manage the implementation for different devices and operating systems?
How to take control of the application lifecycle?
What are the integration challenges?
How to keep private and company apps separate?
Please contact us at Appear www.appearnetworks.com for further information!
Integrating Mobile Technology in the Construction IndustryAppear
Mobile technology has tremendous potential to transform the way civil engineering and construction is delivered – throughout the lifecycle from planning through execution to decommissioning. This webinar illustrates how the EU MobiCloud project is helping to deliver on this potential using a novel IT infrastructure for developing and managing construction orientated mobile applications
MobiCloud Transport Webinar series June 2013 - DutchAppear
In dit webinar worden gedetailleerde case studies behandeld zoals die van spoorbedrijf Tågkompaniet AB in Zweden en de KVV, het stadsvervoer van Karlsruhe in Duitsland. Deze organisaties maken gebruik van de cloud-gebaseerde mobiele applicaties van het MobiCloud project met efficiëntieverhoging, operationele besparing en met verhoogde klanttevredenheid als resultaat.
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics.
To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
RISE with SAP and Journey to the Intelligent Enterprise
How to build integrated, professional enterprise-grade cross-platform mobile apps
1. How to build integrated, professional enterprise-grade cross-platform mobile apps
Build a simple enterprise mobility application with data sync using AngularJS, Backbone or Sencha Touch
using our simple step by step tutorials.
Our tutorials demonstrate how to develop a basic “train times” viewing
application using the AppearIQ API. This includes generation of a boilerplate
HTML5 hybrid cross-platform app (capable of running on either iOS or
Android devices), introduction to data formats, application logic, how to
synchronize data, testing in browsers and on devices.
The tutorials assume that you already have basic knowledge of HTML and JavaScript. If you feel that you
need to go through the basics, check out some excellent external tutorials like W3Schools HTML tutorials
or W3Schools Javascript tutorials.
Use of the AppearIQ cloud developer platform is free of charge. To access the tutorials click here (links to
AppearIQ.com developer site).
The tutorial examples provided here are shared with the Slideshare audience. Readers are encouraged to visit
www.appeariq.com for access to the full AppearIQ documentation and to review more up to date tutorials (including any
modifications to this one) as they become available.
Develop Your First App
Introduction
In this tutorial, you will learn how to develop a basic single view AIQ application using the AIQ API. This application will
display a simple read-only list of trains using the AIQ DataSync module. Remember to consult the API documentation in
case you get lost or you are not sure what the API being used does.
This tutorial assumes that you already have basic knowledge of HTML and JavaScript. If you feel that you need to go
through the basics, don't hesitate to read external tutorials like this and this.
If you need to see the final application source code at any point, it's available on Github in the Mobile samples repository.
Just follow the Getting Started guide to deploy it to your device.
Generate Boilerplate App
Navigate to a folder in which you want to have your AIQ applications and execute the aiq generate command:
$ aiq generate -n hello-world
2. This will create a new folder called hello-world and will put the app content inside this folder.
Your folder structure will look like this:
Note: The API implementation stored in the aiq folder is only for testing purposes in order to use it in the local
web browser and will be replaced by the proper implementation when your application is deployed to a device.
Keeping this folder in your application structure is not obligatory, though we strongly encourage you to use it and
test your applications in browser before publishing them to device.
Note: In this tutorial we skip editing the stylesheet. If you want to know the details on how to apply css styles to the
application, go to this page.
Entry Point
Just like the regular web browser, AIQ client launches the index.html file which comes with the application. This file takes
responsibility of loading and initializing the AIQ API.
This is how your Hello World's index file should look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0,
maximum-scale=1.0">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<title>Hello world</title>
<script type="text/javascript" src="/aiq/aiq-api.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<link type="text/css" rel="stylesheet" href="/css/app.css">
3. </head>
<body>
<h1>Hello world</h1>
<div id="error"></div>
<ul id="list"></ul>
<script>
document.addEventListener("aiq-ready", HW.aiqReady, false);
</script>
</body>
</html>
Let's go through the most important parts of it one by one.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0,
maximum-scale=1.0">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
Web pages display differently on desktop and mobile browsers. In order to make sure that your application is recognized
as mobile and display all graphical elements correctly, you should use the viewport property and set it to device width.
Unfortunately not all devices recognize this property, therefore you must use dedicated fallbacks (MobileOptimized for
Windows based devices and HandheldFriendly for other proprietary operating systems).
<script type="text/javascript" src="/aiq/aiq-api.js"></script>
This declaration imports and initializes the AIQ API. The path remains the same no matter if you run the application in the
browser or in the AIQ client. After the AIQ APIs are initialized and ready to use, aiq-ready document event is generated.
<div id="error"></div>
This DIV tag is a placeholder for errors which might occur while retrieving the documents, like connectivity issues or
unresponsive backend. It will be referred to by its id, which is safe in this case because it is the only element in the
application with this identifier.
<ul id="list"></ul>
This UL tag is a placeholder for the list of trains. It will be referred to by its id, which is safe in this case because it is the only
element in the application with this identifier.
<script>
document.addEventListener("aiq-ready", HW.aiqReady, false);
</script>
AIQ API initialization is not instantaneous because it takes a bit time to initialize all of its components. In order not to
perform any operation before the API is ready, your must subscribe to aiq-ready event generated when everything is in
place and safe to use. The aiqReady function is defined in HW namespace in the application logic and will be described in
the next section of this tutorial.
Note: Placing this SCRIPT tag right before the closing BODY tag will ensure that the contained code will be
executed only after the DOM tree is parsed and ready to be worked on.
4. At this point you have an empty view with a Hello World header on top.
Data Format
The next step is to define the data structure on which your application will base. Since this applicaiton will show a train list,
so each document will represent a single train. Let's create adatasync.json file in mock-data folder as described here
with the following contents:
{
"documents":[
{
"_type": "TD.Train",
"number": "9001"
},
{
"_type": "TD.Train",
"number": "9002"
},
{
"_type": "TD.Train",
"number": "9003"
},
{
"_type": "TD.Train",
"number": "9004"
},
{
"_type": "TD.Train",
"number": "9005"
},
{
"_type": "TD.Train",
"number": "9006"
},
{
"_type": "TD.Train",
"number": "9007"
},
{
"_type": "TD.Train",
"number": "9008"
}
]
}
The _type field is used throughout the whole AIQ system and specifies the type of the document. Document types are
arbitrary but we encourage you to use prefixes implying an application to which these documents belong (the overall
namespace in this example is HW. Note however that we're using TD in the data format, which stands for Train Damage.
The reason for this is that the business data is shared between different sample applications). This reduces the possibility
of naming conflicts.
Application Logic
After the AIQ API is ready to use, you can start populating the initially empty view with some data. This is the example
app.js file which you will be using in this tutorial:
/* global AIQ:false, HW:true */
var HW = HW || {};
(function() {
"use strict";
5. HW.aiqReady = function() {
aiq.datasync.getDocuments("TD.Train", {
success: function(docs) {
if (docs.length === 0) {
this.error({
message: "No documents to display"
});
} else {
var fragment = document.createDocumentFragment();
var list = document.getElementById("list");
docs.forEach(function(doc) {
var entry = document.createElement("li");
entry.innerHTML = doc.number;
fragment.appendChild(entry);
});
list.appendChild(fragment);
}
},
error: function(arg) {
var error = document.getElementById("error");
error.innerHTML = arg.message;
}
});
};
}());
Let's try to understand what's going on in this piece of code.
Retrieving Documents
In order to retrieve a list of our TD.Train documents, we use getDocuments method of theData Synchronization module.
aiq.datasync.getDocuments("TD.Train", {
success: function(docs) {
...
},
error: function(arg) {
...
}
});
Handling Empty List
To simplify things, we use the error handler to display an information when the document list is empty.
if (docs.length === 0) {
this.error({
message: "No documents to display"
});
} else {
...
}
Note: Note that we can use "this" in this context because it will point to the object containing both "success" and
"error" methods.
Populating the List
In this line, we retrieve the list element declared in the entry point. We can do this easily thanks to the id we assigned to it.
6. var list = document.getElementById("list");
Then, we need to populate the list with the names of our trains. We know that all documents of TD.Train type have a field
called number, so we go through the available documents, create a new LI element for every train number and append
them to our list.
docs.forEach(function(doc) {
var entry = document.createElement("li");
entry.innerHTML = doc.number;
fragment.appendChild(entry);
});
Error Proofing
While it is not obligatory, we advise to use code quality tools like JSHint to make sure that your very liberal by default
JavaScript code doesn't contain common and easy to overlook mistakes, like using undeclared variables. The "global"
section
declares static objects used in the file (their boolean values tell whether they can be changed from within the file). For a
comprehensive list of available options, visit this page). Note that there is no space after the opening comment.
/*global AIQ:false, HW:true */
Using strict modeis is another way of making the code more error proof. Some browsers implement the strict mode which
makes the JavaScript parser much less liberal and thus making it easy to spot mistakes. If a browser doesn't support this
mode, this declaration is treated as a regular string, not causing any problems.
"use strict";
Testing in Browser
Now your application is ready for the initial testing. The simplest is to test it in Google Chrome to start with. After having
setup your environment following those guidelines, you should see the following view:
7. You can see that the list has been populated with eight trains included in the test data.
Testing on Device
Testing on a device is explained here. After uploading the application, launch the mobile client and click on the new Hello
World application that appeared on the home screen. You should see the familiar view containing eight trains:
8.
9. This is it. Now you have a working example on how to create a simple application and integrate it with the AIQ API.
Conclusion
In this tutorial you have learned how to design the business data, create an AIQ enabled application and test it in both local
browser and on a real device. If you want to learn about more advanced functions like editing documents, using camera or
performing direct calls, visit our Development Home.