I recently presented a webinar on getting started with DevExtreme, Angular and the Ionic framework. During the talk I mentioned that the source code, database and links would be made available via a blog post… well here it is!
VSCode - https://code.visualstudio.com/
NodeJS (includes NPM) - https://nodejs.org/en/
Ionic Framework:
To install the Ionic Framework:
OS X (terminal) : sudo npm install -g ionic
or
Windows (command line) : npm install -g ionic
DevExtreme:
To install DevExtreme Angular integration
npm install --save devextreme devextreme-angular
Source Code & Database
The database used was an example provided by Microsoft – World Wide Imports – and can be downloaded from here https://docs.microsoft.com/en-us/sql/samples/wide-world-importers-what-is?view=sql-server-2017
Source code for the projects can be downloaded from here (note: I’ve included all library files)
DevExtreme Project : https://www.devexpress.com.au/files/DevExtreme_Angular_Ionic/Project.zip
Sample WebAPI : https://www.devexpress.com.au/files/DevExtreme_Angular_Ionic/SampleWebApi.zip
My Database ( I updated some dates ) : https://www.devexpress.com.au/files/DevExtreme_Angular_Ionic/webinar_db.zip
This article helped in setting up the Chrome debugger for Ionic apps - http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html
The whole webinar can be watched via our YouTube channel, direct link to video: https://youtu.be/JseTvAObEmA
Webinar Q&A
During the presentation there were a lot of questions asked, I’m including the script of these here for easy reference:
Q: why ionic and not xamarin? xamarin is more native and easier for .net developers
A: That's the main point, Abigail. Xamarin is good for .NET. But, DevExtreme is for JavaScript. So, Ionic + Cordova is a platform for cross-platform development for JavaScript and web in general.
Q: Is there a way in Visual Studio 2017, to your knowledge, that will give build errors on JavaScript if the Javascript interpunction/syntax is incorrect? Like missing ; or missing } or mistyped variable names?
A: AFAIK, Visual Studio 2017 has a built-in capability for static analyzing your JS code. But, I think it's better to switch to TypeScript for this task. Visual Studio Code is also a good IDE for such tasks.
Q: I ask because you onluy have one compoment for xamarin, other suites has more component for xamarin, why devexpress in general focuses in web?
A: To be honest, we are not quite satisfied with Xamarin. So, we only have the grid for it. At the moment, we are looking in another direction. So, we provided native chart (https://www.devexpress.com/Products/Native/Chart/). You can use our native chart with any developing tool you have.
Q: Why do you think for example nativescript is web and uses angular too?
A: Please, don't mix NativeScript and Ionic. NativeScript is an Angular way to map HTML markup to native elements. Ionic is about creating a web site that will locally work and look like a native application. Both these approaches have their pros and cons. It's up to you which one to use. But, at the moment we don’t have anything for NativeScript.
Q: Is there a similar plug-in for Firefox, or just Chrome?
A: I suggest you search on VSCode Market. For example: https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
Q: Is there also a debugger extnesion for FireFox?
A: I suggest you search on VSCode Market. For example: https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
Q: So what is the trigger for hitting your breakpoints? Installing Ionic, adding the Chrome extension, or putting that json file in the .vscode folder?
A: Please take a look at https://forum.ionicframework.com/t/how-to-debug-typescript-in-ionic-apps-using-vs-code-and-app-scripts-0-0-46/70023
Q: So what is the trigger for hitting your breakpoints? Installing Ionic, adding the Chrome extension, or putting that json file in the .vscode folder?
A: Yes, actually, this is not specific to Ionic. You can debug any site in VS Code as described in https://code.visualstudio.com/docs/nodejs/debugging-recipes
Q: Is there a way to use auto-completion/Intellisense of devextreme component properties in the .JS-files inside Visual Studio 2017 and/or VSCode? At the moment it doesn't and I have to search every single property on the website documentation of the DevExtreme suite.
A: If you are talking about Angular. Angular has its own language service (https://angular.io/guide/language-service). It works fine with our Angular components. If you are talking about JavaScript and TypeScript in general, you need to add TypeScript definitions to your file as described in https://js.devexpress.com/Documentation/Guide/Getting_Started/TypeScript_Support/Reference_TypeScript_Definitions/
Q: I am a windows developer, but let me see if I can get this straight....
A: I believe your thoughts make sense. Would you please re-ask your doubt?
Q: Is it possible to use an ORM like EntityFramework to get Data ? //Complete new here :)
A: Yes, you can load data from any data service that supports HTTP requests. This service may use any ORM you like including Entity Framework.
Q: Hi, what is the advantage of converting observable to promise in getProducts http call? Thanks
A: DevExtreme UI components support native Promises that is why they are used. Please refer to https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13 to learn more about Promises and Observables.
Q: any webniar for firebase and devxtreme/angular integration ?
A: We have no plans for this webinar yet, but thanks for the suggestion!
Q: It is a little overwhelming. the learning curve seems incredibly steep. npm, nodejs, angular, devextreme, vsCode, couple dozen configurations and Im sure I am missing things. Where does one start? Will there be a devextremecourse/university?
A: I understand you, Bill. At the moment, we don’t have courses on all of this stack. Perhaps, we will have it in the future. For now, I can say that we will have this webinar recording available on our YouTube channel. So, you can follow it when you wish. Also, it’s good to follow Angular documentation on Angular.io, check out Ionic documentation and check out documentation to learn how our widgets work.
Q: Hi, what is the advantage of converting observable to promise in getProducts http call? Thanks
A: In general, if you do not implement a custom data source that is bound to DevExtreme UI component, it is not necessary to use Promises. You can use Observables to load data.
Q: can I have the source code of the webinar?
A: Yes, Paul will do a blog post with links, source code, Q &A answers :)
Q: I installed the ionic package locally, but the command ionic was not
A: Please make sure that you installed it with th -g flag (https://docs.npmjs.com/cli/install)
Q: recognized in the terminal. What could be the problem ?
A: Julian addressing now
Q: OK I understand now.. like node.js,
Q: what makes ionic creator for creating UI components different from devextreme components ?
A: Our DevExtreme components provide you with a Rich UI for your application. They have nothing to do with Ionic Creator. Ionic lacks such UI elements
Q: How well does Ionic work with IE? I have seen issues with Material UI
A: I suggest you check https://ionicframework.com/docs/intro/browser-support/. I don't think that Ionic supports IE well. In any case, it's better to address this isue wo the Ionic team
Q: Good advice, thank-you.
A: :)
Q: what about security configurations for mobile os. for example taking and saving a photo.
A: This is handled by the Cordova libraries, please refer to their documentation for the specific version of iOS / Andriod.
Q: after installing devextreme, do we need to enter a license key somewhere?
A: Just make sure that your DevExtreme account has an appropriate license assigned.
Q: Why use a promise instead of an observale ? what is the difference ?
A: If you are creating a custom data source for DevExtreme UI components use a native Promise object because we support it instead of observables. Please take a look at https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13 to learn more about differences.
Q: If I'm using an Angular 4-project in Visual Studio with TypeScript, the load time of a one page application takes about 1 minute to open in the browser. Even though the page doesn't connect to external sources or do anything time consuming (just showing static text) and reloading the page takes another minute. Is this some configuration issue that you know of?
A: If our components cause this, please create a Support Center ticket for this issue along with your project. If this is reproducible with any Ionic application, I'd suggest you address this issue to Ionic.
If you would like to see more on the integration of DevExtreme and Ionic or you have ideas for a webinar topic please leave a comment below or send me an email.