Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.1 Creating the Project

Hello, everyone, this is Reggie Dawson. Welcome to the, Building an app with Cordova, course for tuts+. We have now learned how Cordova works, and created a small app. Now we are going to build a full app. The idea is that this is going to be an app for an insurance claims agent on the road. This app will allow the agent to take a photo, navigate to an address, or pull up a contact. With this app, I could have incorporated external services outside of Cordova, but I wanted to demonstrate the flexibility of Cordova APIs. As a result, we will be using five Cordova plugins in this project. First we need to navigate to a location where we want to create our project Of course, this command creates a folder called agentassist with the reverse domain identifier of con.tutsplus.agentassist, and an app title of agentAssist. Then we are going to add a platform Remember, we have to be inside of our directory. Now we're going to run Cordova platform at Android Bear in mind you do not have to use Android. The beauty of Cordova is that all of these steps will work the same regardless of what platform you are on. There are little quirks between the platforms, but for the most part, there's no reason we will not be able to complete these same steps for the iOS platform for example. After we have added our platform, we next need to obtain jQuery mobile to incorporate into our project. Go to jquerymobile.com and click on the latest stable, then go to jQuery.com, and download jQuery, as jQuery mobile requires it. When getting both jQuery mobile and jQuery, we have the option to use the compressed production version, or the uncompressed development version. In designing this app we can use the compressed versions with the exceptions of the CSS files for jQuery mobile. The reason is that we may need to do some tweaking to the styles in the app, and it is useful to be able to look at the uncompressed style sheet. UnRAR jQuery Mobile and copy the jQuery Mobile bin file to your JS directory in the WWW folder of our agent assist project, then copy the jQuery Mobile CSS file to the CSS folder. After that, copy the jQuery min file to the JS folder, as well. After that, let's go to our index.html file. First we are going to move the references to index.js and cordova.js to the head of the document. The reason for this is we are going to be using a single page approach with our app. Instead of having multiple html pages that load, all of our pages will be on this page. As a result, we would have to load our JavaScript files on every page load if we left them in the body. Then we are going to change our style sheet reference to our jQuery mobile style sheet. You can delete the index.css style sheet as we will not need it. Then we can add our references to jquery, and jquery mobile. Make sure to add jquery before jquery mobile. Then we are going to change the title to jquery assist. After that we're going to remove everything from the body tag. The first thing we are going to add is a persistent header. When we create a single page app, you normally place your header and footer on each page. For this app, we will have a footer on one page, but I want the header to be present on every page, without having to add it to each page. To do that, we will add our header outside of the page container. The data roll attribute is something you'll see a lot in G query mobile. This is setting this div as a header, of course. The data add back b t and true attribute adds a back button when necessary so that when we navigate further into our app, we can get back to the start page. Inside of this header we will set the title of age and assist, then we are gonna set up our start page, first I'm gonna put in a comment for page one. This is not necessary but with the pages we are going to add will make the code easier to read. Then we are going to create a DIV with the data roll of page, and an ID of page one. Remember the page container I mentioned when I was talking about the header? Well this is it. It tells j query mobile what content is in actual page to display. The other thing to notice that since we are going to create a single page app this being the first page container will cause this page to load first. Then we'll add another div, this time with the attribute of role, not data role. The div will also have the class of UI content. This tells jQuery mobile that this area will contain content. Then we are gonna add a div with the class of UI grid solo. jQuery mobile comes with its own grid system and UI grid solo is one of the classes it uses. This adds a div inside to wrap the content, as normally, we would have to add another div inside of the grid class. At any rate, we are going to leave this empty and add some branding to the app later. Then we will add another UI grid solo div. Inside of this div, we will put a button. With day query mobile, we can add a button as a link or input. In this case, I chose to use a standard link. In other examples, I will use an input. The difference is I will need to add a click handler to use the other type of button. We don't need to do all that just to navigate between pages, so I chose the link. This link points to a page with the ID of page 2 with the data roller button. The title of the button is camera, then we add another UI grid solo with another button. This points to the page with an ID of page 3 and, of course, has the data roll of button with the title of directions, then we add one more button This button has a target of page four and a title of contacts. The last thing we need to do is add our footer. We have add this after the content div as the footer is not part of the content. Let's add a div with a data roll of footer and a data position of fixed. The data position attribute will lock the footer to the bottom of the app. Inside of this div, we will put an h4 tag with an ID of net-info, and the text of device offline. I will explain more of what this is about in the next video. After that, we can save and preview our app to see what it looks like so far. And as you can see, it fires up with our buttons, but it doesn't do anything yet. Also bare in mind, you'll have to do a Cordova prepare before you run emulate. That's all we need to do to set up our app. In the next video we will add and configure two plug-ins.

Back to the top