Monday, June 13, 2016

Login View App Project in Intel XDK - Part 1

This app helps you include support for logging in to proceed with the app. The user will be asked to register his login information before he/she access the app. Intel XDK version 3400 and Windows 10 Professional were used for this post.

Some details of Login View App  are available here:

LoginView_00

Launch Intel XDK and Start a New Project.

The following window with all the templates open.

LoginView-01

Click on Login View App to display this window.


LoginView-02

In the Login View App window choose Standard HTML5.

 
LoginView-03

Click Continue at the bottom right.

In the New Project Name and Location screen that gets displayed provide a name for the project

LoginView-04

Enter a name, herein TestLog and click Create.
The project is successfully created.

LoginView-05

The Intel XDK displays the index.html page as shown.


LoginView-06

It has 4 views under the 'pages' section.
Welcome View
Login View
Register View and the
Main App View

In the DEVELOP tab there is nothing else but the code. There is no DESIGN tab. There are files and folders of the app as shown.


LoginView-07

Click on the EMULATE tab to display the app on the Apple iPhone 6 emulator (probably this was the emulator that was used the last time).


LoginView-08

Click on Register. The Register page opens as shown.

LoginView-09

Enter the details and click Register
The account get created and you get to the start page. This page is empty and you need to start here.

Creating content in the empty page:

In the www folder make a right click to get the drop-down. Create New file,  FirstPage.html (empty for now)

In the Main App View page add the following code after creating the FirstPage.html.

LoginView-10

When you launch the app and enter your login information. The Start page shows up as shown.


Now you can add content to FirstPage.html. I just reused a file from a previous project.


Now when click the link in the start page, the following is displayed. It seems to spawn a local web server at some port.


If you are looking for more technical details you can find it here.

Visit this site for more of Intel XDK Projects http://hodentekMobile.blogspot.com

This app does not store any user information. The registration is therefore useful for one (only one) time registration only. There is no back end database and is illustrative of using forms.





Post a Comment