Prof Dr. Bachok M Taib 4 April 2018

1. Prof Dr. Bachok M Taib4 April 2018 The Making of NSolver: An App for Teaching & Learning Numerical Methods

2. The Making of NSolver: An App for Teaching & Learning Numerical MethodsMobile Application Development using AppStudio(http://www.nsbasic.com)

3. The Making of NSolver: An App for Teaching & Learning Numerical MethodsSnapshots of NsolverVer 4

17. What kind of dev tool is this?Source: AppStudio FAQ • AppStudio provides you with a curated stack which gives you everything you need to develop mobile and web apps, in one download. The components in the stack are selected to work well with each other: the AppStudio IDE glues them all together to make them easy to use. • It can be programmed in JavaScript or BASIC.

18. What kind of dev tool is this? • The BASIC language implements a large subset of Microsoft's Visual Basic, with extensions to create a complete development environment. • AppStudio BASIC is a full, modern implementation of BASIC, with proper subroutines, variant data types and no line numbers.

19. What kind of dev tool is this? • Applications you create are freely distributable and are write-once, run anywhere. Lots of sample code is included. • The environment features a Visual Designer, which allows you to graphically lay out your control and set their properties. • You can then hook code into the controls and add other code as needed.

20. What kind of dev tool is this? • When your code is complete, • use one key run it locally, • deploy it to a website or convert it to a native app using Apache Cordova or PhoneGap Build • If you have worked with Microsoft's Visual Studio, you'll find it easy to come up to speed.

21. What’s in the stack • Controls, • AppStudio supports three frameworks, each of which adds a set of HTML elements to the AppStudio Toolbox: • Bootstrap - developed by Twitter, one of most widely used frameworks (and it's nice looking!) • jQuery Mobile - from the jQuery Foundation • jqWidgets - an excellent commercial framework with powerful controls.

22. What’s in the stack • Controls…, • They also provide a set of generic, lightweight controls. • They also provide tools to create your own controls (or customize the ones which come with AppStudio.)

23. What’s in the stack • Editors • Design Screen - drag and drop controls from the Toolbox. Move them around and resize them graphically. Each control has its own list of properties you can customize. • Code Window - Edit and format your code in JavaScript or BASIC. • The Design Screen and Code Window are fully integrated - click on a control in the Design Screen to see its event code.

24. What’s in the stack • Deploy • Once you've created your UI and the code to go with it, AppStudio gives you a variety of ways to distribute it: • Run locally in the browser: great for testing and debugging • Deploy to Volt: So others can download your app • Deploy to your own server: So others can download your app from your server • Deploy to PhoneGap Build to make apps for the Google and Amazon stores

25. What’s in the stack • Deploy… • Deploy to PhoneGap Build to make apps for the Apple Store • Deploy to Cordova locally • Create a Windows desktop exe. • The options are all integrated into AppStudio - no need to type obscure commands from the command line.

26. What devices do the apps it creates run on? • iPhone (any model) with iOS 4.3 or later • iPod Touch (any model) with iOS 4.3 or later • iPad (any model) • Android 2.3 (or later) devices. Limited functionality on older devices. • Windows Phone devices (limited) • They will also run on the desktop with Chrome, Safari and Internet Explorer.

27. What desktop computer do I need to run AppStudio? Development can be done on the following computers: • Mac OS 10.7 or later. Mac OS 10.6 if running on a 64 bit processor • Windows 7 or later • Virtualbox and Ubuntu Wine also work.

28. What technologies is it built on? • AppStudio makes use of JavaScript, HTML5, CSS and WebKit. • These are all under the covers, however: there is no need to learn these technologies to use the product. • Your BASIC code is translated to JavaScript, which is then executed by the same browser engine used by Safari, Chrome or whatever web browser the device uses.

29. What technologies is it built on? • Similarly, screen objects are internally implemented in HTML, taking advantage of HTML5 and WebKit technologies. • Recent work by Google and Apple have given dramatic speed improvements to JavaScript: it is now faster than many purely compiled languages. • It's substantially faster than .NET.

30. Is Apache Cordova/PhoneGap Build supported? • Yes, both are. Apache Cordova makes it much easier to build native apps on your desktop using the iOS and Android toolchains, at no cost. PhoneGap Build is a commercial service with makes this much easier. The first project is free. • In either case, AppStudio packages all the files, HTML, CSS and JavaScript so that Cordova and PhoneGap can build native apps immediately.

31. Should I program in JavaScript or BASIC? • Either. You can even mix JavaScript and BASIC in the same project. AppStudio converts the BASIC to JavaScript, so it is all JavaScript at runtime. • If you have some BASIC code, you can right click it in the Code Window to see the JavaScript translation.

32. Should I program in JavaScript or BASIC? • BASIC is a good language for those who are comfortable with it. JavaScript is the language of the future (and the present!). • JavaScript is also more powerful. Since there is no translation step, it will also compile faster. There will be no real difference in performance at runtime.

33. How big is the runtime? • Tiny - less than 125k. • Of course, this number will increase if you use various libraries and frameworks.

34. Is AppStudio just like Visual Basic ? • It's actually a lot like Visual Basic • Both use the same core language definition: all the statements and functions are identical. • The differences lie in the operating system and environment.

35. Is AppStudio just like Visual Basic or NS Basic/CE? • For example, the screen controls on an iPhone have a very different look and feel to their counterparts on the desktop. • Controls which are designed to be touch operated will work differently from keyboard and mouse style controls.

36. How fast is it? • AppStudio executes over 1,000,000 loops/second on the current generation of devices. • That's pretty quick for devices in this class, fast enough for most anything but perhaps the very heaviest number crunching.

37. How can I test my programs? • During development, AppStudio runs your program in your default browser: Chrome and Safari work best. • They both have good debugging facilities. • The program looks and feels much like it will on a real device. • Of course, you should also test on actual devices. • You can also deploy to the AppStudio Server or to your own server. You can then download your app to your device.

38. Can I do file I/O? • Yes. • For simple files, there is a localStorage which lets you save and retrieve string data. • It is persistent, meaning the data will still be there next time you start the program. • Most devices allow up to 5 megs (sometime much more) per app. • SQLite is supported for more sophisticated applications. • It's an easy database to use that gives good performance.

39. Can I do file I/O? • Files can be read using the ReadFile function if they are loaded from the same server as the app. See the ReadFile sample. • One thing you cannot do is access the actual file system of the device. Modern mobile operating systems "sandbox" the apps so they cannot interfere with each other. • If localStorage and SQLite are not sufficient (they almost always are), access to the device's filesystem is available using a PhoneGap Plugin.

40. Can I access a database on my server, such as MySQL, Access, Oracle, etc.? • The only database that runs locally on mobile devices is SQLite. • If you want to get information from a server database to your device, you have a couple of choices: • Import the data into an SQLite database and include it with your project. • Have a listener program on a port on your server. Use AJAX calls from your app to the listener program. The listener program can then access the database on the server and return the requested information.

41. What can't I do? • The only database that runs locally on mobile devices is SQLite. • If you want to get information from a server database to your device, you have a couple of choices: • Import the data into an SQLite database and include it with your project. • Have a listener program on a port on your server. Use AJAX calls from your app to the listener program. The listener program can then access the database on the server and return the requested information.

42. Getting StartedSource:NS BASIC TUTORIAL, By: Nick Antonaccio 2011 • Download and Install NS Basic • http://www.nsbasic.com • Once you've got the NS Basic IDE installed and running on your computer, find it in Start -> Programs -> NS Basic App Studio • click File -> New Project -> Save “HelloWorld.nsx". • In the Project Explorer, click Form1 -> Code. In the code area, type: Print “Hello World”

43. Getting Started

44. Getting Started

45. Getting Started

46. A Quick Intro to the NS Basic Language • Built-In Functions and Basic Syntax • As with any modern programming language, to use NS Basic, you need to learn how to use "functions" (also called "commands" or "methods"). • Functions are words that perform actions. • Function words are followed by data "parameters" (also called "arguments"). • In NS Basic, parameters are typically enclosed in parentheses.

47. A Quick Intro to the NS Basic Language • Examples: • MsgBox ("MsgBox is a function. THIS TEXT IS ITS PARAMETER.") • Print (“Hello World") • The MsgBox and Print functions do not require parentheses around their text parameters: • MsgBox "MsgBox is a function. THIS TEXT IS ITS PARAMETER." • Print “Hello World"

48. A Quick Intro to the NS Basic Language • Some functions don't require any data parameters, but do produce "return" values. • Try typing the following functions into the NS Basic code window. • They each return a value selected by the user. • The data entered by the user is stored in a variable - a word followed by an "=" sign. • The variable can be used later in the program to represent the stored data. • You can choose any combination of letters and numbers to use as variable words, as long as the variable starts with a letter.

49. A Quick Intro to the NS Basic Language • The variable words below are "loca", "name", and "currenttime" - their values are displayed in a message box, immediately after they are set: loca = GetLocale() MsgBox loca currenttime = Time() MsgBox currenttime name = InputBox() Print name

50. A Quick Intro to the NS Basic Language • Many functions have optional or limited parameters/return values. • Try these variations of the InputBox() function to see how they each perform differently: name1 = InputBox () name2 = InputBox ("What is your name?") name3 = InputBox ("What is your name?", "Question:", "John")