If you want to impress your friends, try telling them you’re in the middle of “building an app.” A few billion-dollar acquisitions have turned app-building from a nerdy hobby into an indication that if you can build one, you’re inevitably going places.
What we tend to forget, however, is that app just stands for “application,” a program that delivers some sort of function. So if you’re using a JavaScript library, like the newly open-source WinJS, you can put your own app online as long as you know how to copy and paste.
I built some HTML5 “apps” in an hour by blatantly “plagiarizing” the WinJS library’s prewritten code. That’s the beauty of open-source libraries—instead of starting from scratch, you shop around for solutions other developers have already written. (I say “plagiarizing” jokingly—the whole point of these open code libraries is for you to use them.) Copying library scripts has taught me a lot about how apps work, and what I would need to do in order to make them my own. Here’s the first one, and here’s the second.
I’m just a journalist with an English degree, so what WinJS has taught me is that if you know which prewritten code components your app needs, you too can copy and paste your way to an app.
Here’s a tutorial for building your first WinjS app—even if you’re a complete beginner:
1. For the first seven steps, we need to actually install the WinJS library. If you do this kind of thing all the time, just read Microsoft’s own tutorial on GitHub. Otherwise, I’ve provided a highly detailed version, explaining why we’re doing each of these steps.
First, make sure you have Git and Node.js installed locally. I linked them so you can get instructions to download them in case you don’t have them already.
2. Open up Terminal (on your Mac) or MS-DOS (on a Windows machine). In the command line, you’ll want to type a git command to make a local copy, or clone, of the WinJS Git repository:
It’ll take a few seconds to clone, and it should look something like this when done:
3. When the command line is free, you’ll need to change to the directory where WinJS is actually stored:
If this doesn’t work, try the ls (list directory contents) command to make sure that “winjs” is one of the listed directories. If not, try the “cd ..” command to move up one directory higher.
4. Now it’s time to install the Grunt Command Line Interface. Grunt is a task runner that a front-end developers often use to speed up their workflows and automate some tasks. What makes Grunt especially useful are the plugins it can integrate with, which can do everything from automatically optimizing your images to validating your JavaScript code. The reason we need it for this project is that Grunt will compile the JavaScript and CSS files we’re going to need to use later in order to make our app run.
In order to do this, we’re going to use npm, the free Node Package Manager. If you use Node.js, npm is essential for installing and managing Node programs. If you have Node, npm downloaded along with it.
Open a new command line window, make sure you are in your top directory, and type:
It’ll look a little something like this if it installs correctly:
(I had to use the superuser privilege—the sudo command—to make this install, so try that if the installer warns you that you “don’t have permission” to install grunt. Ignore any warnings the command line gives you about using sudo.)
5. Now we’ve installed Grunt globally. But that doesn’t mean it works on every cloned repository you have on your computer. So to install it in the WinJS clone and type these two lines:
You’ll notice this Grunt install takes a lot longer and is installing a lot more components. Why? Because when you install it inside a repository, it isn’t necessarily connected to your global Grunt install. So the programmers made sure that if you push your WinJS clone whole, it will work regardless of whether npm installed the package locally on that machine.
6. Finally, you want to put all your JavaScript and CSS files into one directory, the /bin. This way, these essential files won’t get cluttered up with the rest of your project.
Here’s what it will look like if it worked, complete with that green text I’m always happy to see:
7. Congratulations! You’ve built a local copy of the WinJS library on your machine. Now we can actually begin coding the app. Open up a text editor. I adore Smultron for Mac, but you can also use the built-in TextEdit, or Notepad on a PC.
Create three blank documents that will become the heart of your new app. Save them all on the desktop of your computer for simplicity reasons.
index.html
YourName.css
YourName.js
8. Now we’re going to take a WinJS script in order to get started with how script borrowing works. Go to the WinJS preview site, select ListView on the lefthand column, and scroll down to Datasource Edits at the bottom. This is a pretty cool script that looks like the beginning of the code you’d need to write to build a Scrabble app.
See the JS, CSS, and HTML screens for this script? Copy and paste those directly into index.html, YourName.css, and YourName.js. Save and close the CSS and JS files. We still have a bit of work to do on index.html.
9. Let’s turn index.html into a full Web page. Right now it’s just a division, or div.
All HTML works by “nesting” tags, or making sure that each opening tag has a respective closing tag. So we need to put everything into one HTML document:
And then we need to make sure the div section is inside the visible part of the Web page, also known as the body. So above the div and below it put:
Finally, we need to connect the JS and CSS pages to the index page. We’ll do that in the head of the document, so they load when the page loads, but don’t show up in the body. Below the html tag but above the body tag, put:
Great! But in order for the script to show up, we need to call the WinJS library that we installed on our computer earlier. Remember when Grunt put a ton of things inside the /bin folder? We need to call some of those out now.
If you look inside the /bin folder, you’ll see Microsoft.Phone.WinJS2.1 and Microsoft.WinJS.2.1. We’re building a Web app only for this tutorial, so we only need the second. Click that and inside it you’ll see the /css and /js folders. Inside those are the relevant CSS and JS scripts that make the WinJS library scripts appear the way they do on the preview site.
I didn’t want to call scripts from all the way inside the /bin, so I pulled the /js and /css folders out and put them in the same directory as my index.html file—my computer desktop. That way I only had to identify them as “js/FileINeed.js.” And then I called to them in the head of my document, which now looks like this:
Here’s a GitHub Gist of what your entire index.html page should look like now.
10. If you’ve done everything right, you should be able to click on index.html and see your script running locally in a Web page! From here you can FTP it up to your server, like I did, in order to share it with your family and friends.
Now that you can make WinJS scripts functional, you’re well on your way to building your own original app. Come up with an idea, and mix and match the scripts in the WinJS library that you can put together to make that idea a reality.
The post How To Build A WinJS App In 10 Easy Steps appeared first on IT Clips.
Related posts:
WinJS: 5 Things You Need To Know About Microsoft’s New JavaScript Library
WinJS: 5 Things You Need To Know About Microsoft’s New JavaScript Library
GitHub For Beginners: The Journey’s Next Steps