Hybrid app development



centercenterThadeus Ross ?? Hybrid app development8820090900Thadeus Ross ?? Hybrid app developmentHybrid App DevelopmentContents TOC \o "1-3" \h \z \u Context PAGEREF _Toc457932218 \h 2Process PAGEREF _Toc457932219 \h 5Analysis PAGEREF _Toc457932220 \h 7Application PAGEREF _Toc457932221 \h 13Activity PAGEREF _Toc457932222 \h 18Bibliography PAGEREF _Toc457932223 \h 20Glossary PAGEREF _Toc457932224 \h 28Appendix PAGEREF _Toc457932225 \h 33ContextTopicThe topic of my project is hybrid mobile app development through the Ionic framework. Ionic is a HTML5 SDK (software development kit) that is used to build mobile apps using web technologies such as HTML5, CSS and JavaScript (Drifty, 2016). From a user’s perspective, Ionic improves the look and feel of an application. From a developer’s perspective, it simplifies front end development (Drifty, 2016). The framework is built on top of Cordova and AngularJS. Ionic was created by a Drifty Co in 2013. Desktop PC development has shifted toward web technologies in recent years because computers have become more powerful and browser technology has become more advanced. A team at Drifty saw a similar trend in mobile device development and developed an open source, HTML5 framework geared towards mobile development (Drifty, 2016). Apps developed using this frame work are known as hybrid apps, because they combine the features of a web application with the features of a native application.The big advantage that hybrid applications have is that they are cross platform. If I want to develop an app with a native Android version and a native IOS version, I have to create and maintain two completely different applications. With a cross platform hybrid application, I only have to build and maintain one version. When smartphones were first introduced they were not powerful enough to run hybrid applications well and apps had to be written natively to improve performance. However in the past three years smartphones have become powerful enough to run hybrid apps without issues (Drifty, 2016). The popularity of cross platform apps has exploded. Drifty claims that over 1.8 million apps have already been developed with Ionic (Lair, 2016).The target audiences for the Ionic framework are web developers and mobile application developers. Ionic was created to allow those developers to create cross platform hybrid mobile apps. It is a part of the SDK and development framework genres.I am analyzing Ionic because I like learning new technologies. I want to expand my knowledge as a developer. Learning Ionic will also teach me skills that I am currently lacking. I don’t have much of a background in mobile or web development. I want this project to help fill in those gaps. App development is also really hot right now. Knowledge of Ionic and AngularJS will look good on my resume. This project may help me land a job as a mobile developer. I was introduced to Ionic at the 2016 Stir Trek software developers’ conference. Robert Lair gave a talk called “Building Mobile Applications with the Ionic Framework”. This talk introduced me to Ionic, informed me about the frameworks key features and provided a short tutorial on how to get started. The talk was preserved as a video on Stir Trek’s YouTube Channel (Lair, 2016).AssessmentNobody else is assessing my work. I am learning Ionic development on my own. If the project goes well, I may share it with the rest of my team at my coop job and with some of my professors, but I am not required to do so. I will be assessing myself throughout the project, focusing on what I have learned and not on the end product. If I learn a lot about app development but do not end up producing a good app, I will still consider that a success. It would be nice to produce a good app, but right now learning about different technologies is more important to me than creating a product. This app is meant to show my skills as a developer, not to be useful to a user. I expect to learn a variety of things from this project. I will become more familiar with the HTML, CSS, and Javascript programming languages. I will learn how to take advantage of Cordova and AngularJS. I will learn about mobile application design. I will gain more experience learning new technologies on my own.I will prove my literacy by producing a mobile app that demonstrates what I have learned. The included features and performance of the app are more important than the usefulness and usability of the app. This app will provide examples of specific things I have learned. For example, if I learn about list sorting, I can demonstrate that by including a sortable list in my app. I will highlight what I have learned in my paper and explain exactly how what I have built demonstrates my learning. The skills that I learn through this project can be applied to a variety of other types of projects. Web development technologies are widely used in many different contexts throughout the software industry. I will probably have to work on several web applications when I go back to my coop job. This experience will help me with those applications. ProcessAudienceI am developing this app with only myself in mind. My primary objective is to learn about app development, not produce a great app. So the app I produce will not be useful to anybody besides myself. I may present it to some of my professors or coworkers to show them what I have learned. This may make it harder for me to prove my literacy since the app will not undergo any formal analysis. Nobody is grading me and I am not working towards a specific set of grading criteria. I will have to prove my literacy through my explanations of what I have learned in this paper. I plan to provide detailed descriptions of my process as I build the app and show what I have learned using code snippets, screenshots of the app, and a working version of the app running on my phone or computer during the in class presentation at the end of the semester.GenreMost of the media used in my discourse community is presented online in an informal way. Blog posts and YouTube videos are very common. YouTube videos tend to focus on tutorials while blog posts tend to discuss very specific aspects of coding in great of detail. Asking and answering questions on online forums is also a prolific method of communications. This obviously helps the more inexperienced developer asking the question, and it allows the developer answering the question to show off how smart they are. (Which they really like doing). Developers will often share projects they have been working on through publicly accessible code repositories. These repositories allow anybody to download that developer’s source code. This lets other developers modify and experiment with somebody else’s working code. If the project is in a finished state then often they will share a fully built version of the application. I have shared the code for my app in a public repository (Ross, 2016). TerminologyI have added a glossary section to this paper to explain many of the technical terms that I use in this paper. I have done this both to show my literacy in technical language and to improve the flow and readability of the paper. Software development has a lot of insider terms. These terms often mean more than one thing depending on the context in which they are used. For example I have included two very different definitions for the word controller. As I edited this paper, I noticed that I did not use all of the terms that I had defined in the body of the paper. I have chosen to leave these terms in the glossary for two reasons. One, some of these terms are referenced by in the definition of other terms. Two, including these terms shows demonstrates my literacy in technical language. Knowing these terms is essential to understanding high level concepts in programming. AnalysisProfessional CommunicationThis GitHub repository contains all of the code that I have written (Ross, 2016). This is a very common way for developers to share code. Because this is a public repository, anybody can download my work. Since this project is not specifically meant to help other people, I doubt it will get any attention on its own. But it makes my code accessible to anybody who I want to see it. Including this as an artifact proves that I know how to communicate as a developer. Generally developers do not communicate through long academic papers like the one. Most communication is carried out through forum posts, blog posts and public code repositories. Usually a code repository will have a short description of what the code it contains does and instructions on how to get the code working. Other users can submit comments to the repository to ask questions or provide feedback. Creating a GitHub repository proves that I know how to communication with my discourse community. Sharing my code this in this way proves that I communicate in a professional manner. Engagement in Learning I started this project by working through this Ionic tutorial (Simons, 2016). The tutorial takes its audience through the processes of creating a music app. While I was working my way through the tutorial, I made sure to experiment with what I had built and purposely deviated from the provided path. This was to make sure that I actually understood what I was doing. Anybody could simply copy and paste the code from the tutorial into there app. I actually wanted to learn from the experience. The first thing I did was to add three more songs (“Physical Education”, “Nightcrawler” and “You Will Never Be One of Us”) to the three songs already hardcoded into the app Fig 1 - 2. This demonstrates that I know how JavaScript arrays and JavaScript objects work and that I understand how to link to an image. I also added a new tab to the app Fig 3. This proves that I understand how the Ionic tabs template functions. I had to change code in the “conrollers.js”, “app.js” and “tabs.html” files and create a new “yeaoh.html” file. These are both fairly simple examples of experimenting with the code, but they show that I was experimenting. By making sure that I experiment and change things as I build the app, I ensure that I actually learn something. Even something as simple as hardcoding a few more objects into an array shows that I am thinking about how the application works and how I can change it. It also personalizes the application. Putting songs that I enjoy in the app or including a dumb meme in an extra tab allows me to be more invested in the development process and the final application. These modifications show my engagement with the project and my desire to learn through the project.Planning AheadBefore I started developing my own application I created several pages of hand drawn mockups Fig 4 – 7. At the start of a project it is a common practice for a developer to draw out a rough sketch of the final product on a whiteboard or piece of paper. This mockup is usually only presented to other developers on the same project. It is meant to provide a starting point. An initial goal that gives the developers some idea of what they are supposed to be building. It helps with brainstorming. Having a visual representation of an application makes it easier to visualize new features and layouts for that application. It gets everybody on the team on the same page. Sometimes if you only use words to describe something people can interpret them very differently. A picture tends to be much harder to misunderstand. Creating these mockups proves my literacy with the software development process. It shows that I understand the proper way to start a project. It shows that I have put some thought into the project and am going in with a reasonably well formed plan. It shows that I have experience designing an application from scratch. Because I took the time to plan out my app, I can ensure that I will have a better time developing it and that my app will be more cohesive, usable, and polished productWorking through ProblemsI had a lot of trouble implementing a popup menu for the sort button on my list page Fig 8. For this artifact I will describe my process or researching and fixing this problem. Developers run into problems like this constantly. A large part of our time is simply spent Googling solutions for these problems. By detailing the path I took to find a solution I prove my literacy as a researcher and a problem solver. The first thing I did was to simply type “ionic dropdown menu” into Google. That took me to this Stackoverflow page where somebody else had already asked how to display a dropdown menu (Stackoverflow, 2015). The reply to the question stated that I needed to use the $IonicPopover component. It gave a link to the $IonicPopover page in the official ionic documentation and also gave some example code (Drifty, 2016). I visited the official documentation page and it seemed like $IonicPopover was the right component so I copied the provided example code into my app. The Example code didn’t work. I started to mess around with the example code, changing variable names and copying code snippets to different files to make sure that I had not accidentally misnamed or misplaced anything. After about ten minutes I decided to look for another source. I found a Codepen page that had a demonstration of a working $IonicPopover (Ionic, 2014). After I looked at that page I realized that I had in fact done something wrong. I had created a separate sort.html file when I only needed to write a script in my existing list.html file. This did not fix my problem. Instead it broke the page in a new way. Now instead of the button being unresponsive the entire page was blank Fig 9. I continued to research the problem by looking for more examples. I found my solution in this tutorial, I had forgotten to declare a template variable (Tutorialpoint, 2016). After I added it, my page showed its contents and I finally started getting error messages when I clicked the sort button Fig 10. I googled “cannot read property of undefined”, the text of the error message, hoping to find other developers who had encountered the same problem. It turns out that this is an error caused by trying to access an object that is not there, meaning that I had not properly defined my popover object (Quora, N.D.). I copied and pasted in some example code and finally got something to work Fig 11. From this page I found out how to correctly create the popover object. I finally had a working popup menu Fig 12. The total process took about two and a half hours. I have not included every source that I looked at, only the ones that were useful. I estimate that I read through about twenty different examples, tutorials, blog posts and forum questions. Having the ability to research and fix a problem is imperative in the software development industry. By demonstrating those skills, I prove my worth as a programmer.Final ProductNow that I have shared my plans for this application and documented my development process, I can share my finished application. I chose to name this app DAApp (Discourse Analysis App). It can be divided into the three distinct pages that I described in my mockup drawings. The first page that I built was the media page. With this page I wanted to explore what types of media I could embed into an ionic page. I also wanted to experiment with Ionic’s card list template. The card list design is very popular in app development right now. The most well-known example would probably be the Facebook app. The following screenshots Fig 19 - 21 show that I did implement a card list with five distinct cards. Each card contains a different type of media showcasing a different hairless cat. I am glad that I completed this page first, because many of the lessons that I learned creating it also applied to my other pages.The second page that I implemented was the list page. Lists are a very important element of many mobile apps. Spotify is a good example of an app that extensively uses lists. For these lists to be useful they must be easily sortable, both by the user and by the back end functions of the app. These screenshots Fig 15 - 18 show my work on this page. I created a list of five professional wrestlers, each with their own unique properties. I then implemented back end functions to make this list sortable. I go into much greater depth about my process for building this page in both the “Application” section of the paper and the “Working through Problems” section right above this one.The third and my personal favorite page is the interactivity page. People expect to be able to interact with their phones. Developers have not been able to get with static, unchangeable webpages since the early 2000’s. It was important to me while I was designing the app that I included an interactive page. The screenshots Fig 22 - 24 show my final version of this page. At the top of the page I have a profile that displays information about a person. Below that I have three text input fields that allow the user to change that information in real time. For example in the third screenshot I have changed the name in the profile from Thadeus Ross to Fakey McFakeName. This actually feels very good to use. There is almost no lag between what is typed into the input field and what is displayed in the profile.Overall, I built everything that I had planned for the app. This proves my literacies in coding and application design. Through my coding skills, I have produced a working final product. I have proven that I know how to plan a project effectively, and then follow that plan successfully. With this app, I have taken the abstract ideas and processes that I discovered while researching Ionic, and applied them in a practical manner that showcases my skills as a developer.ApplicationSharing LiteracyWhen I started this project the first thing I decided to implement was a sortable list. The first tutorial that I looked at had an example of an array hardcoded into the $scope that was presented in the view as an ionic-list (Simons, 2016). I started by implementing a similar list in my app. I chose to use professional wrestlers as objects for the list because they have easily sortable properties (height, weight and name). Each wrestler object was hardcoded into a wrestlers array in the listCtrl controller Fig 13. They are initialized as an element of $scope when the templates/list.html view is accessed. After the array is initialized it can be accessed by any view that has $scope as a dependency. However it is not accessible before templates/list.html has been accessed. In the case of my app, this implementation is perfectly fine but in a more advanced app I would implement this array in a service that initializes at startup or in a separate location (i.e. a server).The list is displayed using Ionic’s ion-list directive (Drifty, 2016). The ion-list uses ng-repeat to create a list of ion-items based on the source array provided in $scope (Google, 2016), (Drifty, 2016). Ion-items have a standard “avatar” class which includes a round picture on the left side of the item and any number of other objects (in my case one h1 and two p’s) on the right side. I altered the code in ionic.css to make the picture larger Fig 14. I added a sort button to the top of the page that creates an $ionicPopover object when clicked (Drifty, 2016). I included the code for the view of the popover in the same file as the sort button using an html script tag. It can also be defined in a separate file or even in the controller itself. I have only implemented a show method for this popover. The documentation recommends implementing close, remove and delete methods as well. However I did not find a use for any of these methods as the popover will become hidden automatically when it loses focus Fig 15. My next step was to add three buttons to the popover. These buttons were marked “sort by name”, “sort by height” and “sort by weight”. Each button had an ng-click event that called sortBy() on the ion-list (Google, 2016). I then created a $scope.sortBy(propertyName) function in the listCtrl controller. My version of this function is very similar to one of the examples given in the official AngularJS documentation (Google, 2016). The sortBy() function in Angular is completely self-contained and very easy to use. It takes only a string argument. If that string matches a property of the objects it is trying to sort, it will reorder the array from low to high based on that property Fig 16 - 18. I was surprised by how little work I actually had to put into sorting. Earlier this year I wrote a .net app that needed a sortable list, and that was a nightmare that took me several days. In this app, the first time I tested sorting it worked. Implementing sorting was the easiest part of this process. In most other technologies it would be the hardest.Professional SkillsThrough this project, I have proven that I have the necessary skills to be a software developer. By choosing to build in app in the Ionic framework when I had very little web or mobile development experience, I show that I have the imitative and the ability to step out of my comfort zone, to quickly learn new technologies and programming techniques, and to translate the knowledge and coding skills that I already possessed into a new development paradigm. I have shown that I have the ability to plan out a project and then actually finish that project on time. By writing this paper I show that I have the skills to communicate both with other professionals and with people outside my field. The most important thing that this project proves is my coding ability. My code is well organized, readable, resource efficient and fast. There are some things that this project has shown me that I still need to work on. Obviously I will need more time to master HTML, CSS, JavaScript, AngularJS and Ionic. I have only been working with them for about a month. I am happy with my progression, but I recognize that I still have a long way to go before I master these technologies. The only way to gain that mastery is through experience. In the future I need to keep working on projects like this one to continue to sharpen my skills. I also need to start thinking about ways that I can apply my skills to practical products. This app was meant to be a learning experience not a useful tool. I think that through this project I have progressed past this point and no longer need to focus exclusively on learning Ionic. I need to focus on applying my skills, not just learning new ones.The skills that I have demonstrated are highly sought after in the software development industry. Obviously, the ability to write good code is very important, but there are many more factors that go into a hiring decision. Companies want programmers with the initiative to try new things and look for ways to make their products better. They want developers who know how to plan a project. Having the ability to finish projects on time and deliver what you promised is an essential skill. Having the ability to communicate professionally and document code is incredibly important. A project can live or die based solely on the quality of its documentation. I have learned a lot though this project. I have learned to use three new programming languages (HTML, CSS and JavaScript) and two new frameworks (Ionic and AngularJS). I have learned about web application architecture and mobile UI design. I have learned how to better manage my time and stay focused on a project. I have become a better communicator and writer. Recently I read a blog post by Jeff Atwood (the co-founder of ) about how programmers could be split into two groups (Atwood, 2007). The twenty percent who really care about programming and have a desire to learn and improve themselves, and the complacent eighty percent who let their skills stagnate. While this is definitely an oversimplification, it is representative of software development culture. With this project I show that I belong to that twenty percent group. I am engaged, willing to learn, ready to face challenges and actively looking for ways to improve myself. I chose a deliberately hard topic because I wanted to maximize my learning potential. I could easily have just chosen to create a .net application. I already possess that skillset. It would have taken me about half the time to complete and saved me from a lot of late nights spent wading through forum posts full unfamiliar terminology and hard to grasp concepts. Instead, I chose the hard route. I am not complacent with my skills. When I see an opportunity to grow I take it. ActivityContextMy topic for this presentation will be the process of app development. I am approaching it as an informal live presentation that features audience interaction. I will be presenting my app running in a debug state on my laptop. I will be able to make changes to the app in real time. I plan to take suggestions from the audience and implement them in the app. For example, I could ask the audience for an image they would like to see in the app, then find that image online and embed it in the app. I am presenting this to show the process of programming. It shows that I am literate in programming, interacting with an audience and adapting high level concepts so that an unexperienced person can understand them.AudienceI will appeal to my classmates by making the presentation interactive and easy to understand. They all have smartphones and interact with mobile apps on a constant basis. Hopefully that interested in mobile apps will transfer to my presentation. I don’t expect them to have any prior knowledge. I will try to avoid doing anything complicated or referencing any advanced concepts. They should be able to understand simple things like changing the color of an object by changing a property or adding a new object.My purpose is to be informative. Most people have never seen the code behind an application, or if they have it has been presented in a needlessly complex way (for example, hacking scenes in movies). I want to show them some basic principles about how coding works and a few low level concepts. I don’t expect them to be able to replicate what I am doing, but they should gain at least a little bit of an understanding about how applications work. I will be successful if I can keep them engaged and interested in the presentation. Also they are literally grading me on it so I will have an exact measurement of how successful they thought I was.GenreMy presentation will take the form of a live coding demonstration. This format is common at software development conferences and during college lectures. I have selected this genre because I felt that it allowed me to show people with no programming experience some fundamental concepts about programming, without being too boring or complicated. Although it will not convey a lot of information it will convey it in an interesting way. It shows my literacy as a communicator and as a programmer.Materials- My laptop (has ionic, visual studio code, and chrome installed)- Backup files if I can’t connect to the internet.- A backup version of the application if something goes wrong- Pre-prepared back end logic for anything interactiveBibliographyApache Software Foundation. (2016). Documentation. Retrieved from source is targeted at hybrid app developers who are using Cordova. It documents the various features and elements of Cordova. It is presented as the official documentation of Cordova. I used this source to look up the capabilities of Cordova and the correct syntax for Cordova while I was developing my app.Atwood J. (2007). The Two Types of Programmers. Coding Horror. Retrieved from This source is a blog post targeted toward members of the software development community. It discusses the differences between dedicated and complacent programmers. I referenced it while discussing my professional skills, because I think that it accurately represents software development culture. Data & Object Factory. (2016). JavaScript Design Patterns. Factory Method. Retrieved from source is aimed at JavaScript developers. It is presented in a web article format. It describes how JavaScript factory functions work and how they can be implemented. I used it as a reference when defined factory functions in the glossary of this paper.Drifty Co. (2016). Ionic Documentation. Start Building with Ionic. Retrieved from This is the official documentation for the Ionic Framework. It’s audience is developers who want to learn about Ionic. The documentation contains an overview of the framework, a tutorial for beginners, subsections that explain how HTML, CSS and Javascript are used in ionic and a user forum. It is an all-encompassing guide to Ionic put together by the team that developed Ionic.Google. (2016). Chrome Platform. MVC Architecture. Retrieved from This source is aimed at developers who want to learn about developing in the Google Chrome browser. It explains the basic concepts behind MVC (Model View Controller) type Architectures. It is presented as official online documentation. I used this source while I was writing about Models, Views and Controllers in the glossary section of this paper.Google. (2016). Developer Guide. Guide to AngularJS Documentation. Retrieved from is the official documentation for AngularJS. It is aimed at web developers who used AngularJS. It is presented as official technical documentation. I frequently referred to this source while I was developing my application. I also used it when writing several entries in the glossary. (N.D.) Lesson 1: What is CSS? Retrieved from This tutorial is aimed at people who want to learn web development. It provides a definition of CSS, discusses the differences between HTML and CSS, and gives tutorial instructions. It is presented as an online tutorial article. I used it while writing the CSS entry in this paper’s glossary.Ionic. (2014). Popover:Nightly. Codepen. Retrieved from is a website that allows a user to share the code for a web application and run that application on the same page. Visitors to the page can mess around with the code and change it however they like. This site is aimed at primarily at people who want to share their projects and people learning web development. This specific Codepen demonstrates Ionic $IonicPopover objects.Kelhini, F. (2015, Sep 24) Understanding JavaScript Constructors. Retrieved from source is aimed at experienced developers who are familiar with JavaScript. It goes into detail explaining how constructors work. It is presented as an online article. I used this source while I was writing about constructors in the glossary.Lair R. (2016, Jun 7). Building Mobile Applications with the Ionic Framework. [YouTube]. Retrieved from source is a recording of a talk given at the 2016 Stir Trek software developers’ conference. I heard the talk in person when I attended the conference. It was aimed at web developers who wanted to get into mobile development. It gives a general overview of the Ionic framework along with a simple tutorial. This talk was the first time I heard about Ionic and it is what inspired me to do this project.Mozilla. (2016). Introduction to the DOM. Retrieved from This source is aimed at web developers. It provides a description of the DOM and gives a basic overview of how you can interface with the DOM. It is presented as an online article. I used this source to while writing about the DOM in the glossary section of this paper. Quora. (N.D.) Why does attempting to access the value property of an undefined referenceproduce a “cannot read property of undefined” error? Retrieved from source is a forum post asking about JavaScript error messages. It is aimed at two audiences. People who are knowledgeable and can answer the question and people like me who have the same question. The people who answer these questions are often (but not always) reliable. In this specific case Rick Waldron, the man who answered the question, has answered over 270 questions about JavaScript which indicates that he is a reliable source. Ross, T. (2016). DiscourseAnalysis. GitHub. Retrieved From This is the GitHub repository that contains the code for my application. It allows other developers to view and comment on my work. It is a code repository, which means that the code can either be downloaded as a .zip file by anyone or cloned to another GitHub user’s account. I am using it as both a way to share the work that I have done on my application and as a way to demonstrate my literacy in professional communication.Rouse, M. (2005). Front-end. Retrieved from This source is aimed at professional who need a concise, self-contained descirptions of the differences between front-end and back-end developers. It is presented as an online article. I used this source while writing about front end development in the glossary portion of this paper. Rouse, M. (2014). HTML5. Retrieved from This source is aimed at technical professionals who are looking for a concise, self-contained description of the HTML5 programming language. It is presented as an online article. I used this source while writing the HTML entry in this paper’s glossary.Rouse, M. Regrev, H. (2005). JavaScript. Retrieved from This source is aimed at developers who are looking for a concise description of JavaScript. It is presented as an online article. I used this source to write the JavaScript entry of the glossary.Rouse, M., Blackwell. K. (2005). software developer’s kit (SDK). Retrieved from This source is aimed at technical professionals who are looking for a concise, self-contained description of the term SDK. It is presented as an online article. I used this source while writing the SDK section in this paper’s glossary.Rouse, M., Bock, G., Luna, M. (2013). web development framework (WDF). Retrieved from This source is aimed at technical professionals who are looking for a concise, self-contained description of web development frameworks. Its purpose is to give a quick explanation of the concept of web development frameworks. It is presented as an online article. I used this source while writing the Web Development Framework section in this paper’s glossary.Simons, E. (2016). Mastering the Ionic Framework: Learn to Build & Deploy Native Speed HTML5 Based Apps. Thinkster Retrieved from HYPERLINK " tutorial" tutorial This online tutorial article teaches the basics of Ionic development. It is aimed at new Ionic users who are interested in discovering Ionic’s features. I followed used this tutorial as an introduction to Ionic.Simons, E. (2015). “Mastering Ionic” course code and markdown. GitHub Repository. This GitHub code repository contains the starter code for the “Mastering Ionic” tutorial app. It is meant to be used by people following that tutorial. It contains all of the file that will be used in the tutorial app and has several of the controllers and services already defined. I downloaded this code in order to build the tutorial app myself.Stackoverflow. (2015). How to display dropdown menu from an icon button in Ionic? Retrieved from source is a forum post asking a question a question about dropdown menus in ionic. It is aimed at two audiences. People who are knowledgeable and can answer the question and people like me who had the same question. Posts like these are very common and if they provide a working solution to a problem, they are considered valid sources. Thinkster. (2016). A better way to learn angularjs. Retrieved from framework-tutorialThis online tutorial article is meant to introduce the basic concepts of AngularJS. It is aimed at web developers who are interested in learning Angular JS. I used it as a reference as I was building Ionic applications.Tutorialpoint. (2016). Ionic – Javascript Popover. Retrieved from source is a tutorial on implementing Ionic $IonicPopover objects. It is aimed at people who are learning Ionic. It was helpful for to me because It showed me what I was doing wrong while trying to create an $IonicPopover.W3Schools. (2016). JavaScript Events. Retrieved from This is part of a tutorial aimed at new web developers. It explains how JavaScript events work and how they can be used in web applications. It is presented in an online tutorial article format. I used this source when I was writing about JavaScript events in the glossary section of this paper.W3Schools. (2016). JavaScript Functions. Retrieved from This is part of a tutorial aimed at new web developers. It explains how JavaScript functions work and how they can be used in web applications. It is presented in an online tutorial article format. I used this source when I was writing about JavaScript functions in the glossary section of this paper.GlossaryAngularJS - AngularJS is a framework that extends the capabilities of HTML in order to make development of dynamic web apps easier (Google, 2016).Array - An array is a sequentially ordered group of objects.Controller (AngularJS) - An AngularJS controller is a specific type of JavaScript constructor functions that augments the scope. It is often used to set the initial state of and add behaviors to the $scope object (Google, 2016).Controller (MVC) - The controller connects the model to the view. It updates the view when the model is changed. It uses events to allow the user to interact with the view and then updates the model to reflect the changes made to the view (Google, 2016).Cordova - Cordova is a development framework that allows web applications to run as native mobile applications in IOS and Android. It automatically creates a custom wrapper for a web app that acts as a hidden web browser. This allows users to run the applications without opening them up in chrome or safari. Most Cordova apps have similar performance to native applications (Apache Software Foundation, 2016).CSS - Cascading style sheets (CSS) is a style language that defines the layout and style of a HTML document. It is what allows a website to look pretty (, N.D.).Data binding - Automatic synchronization of data between the model and the view (Google, Angular Documentation, 2016).DOM (Document Object Model) – an object oriented version of a webpage that is created by the browser when the webpage is loaded. It connects html files to object oriented and scripting languages (aka JavaScript) (Google, 2016), (Mozilla, 2016).Event - An event is a something that happens to an application. This includes a user’s click, a movement of the mouse, a timer running out of time, something being successfully loaded and a message sent from some other online application (W3Schools, 2016).Factory - A factory is a specific type of function that can create different types of objects based on input from other parts of the code. It can be thought of as a more complex constructor function (Data and Object Factory, 2016).Front End Development - A web application is divided into two distinct parts, the front end and the back end. The front end is the part that the end user interacts with in a web browser. The back end describes processes that support the front end and are invisible to the end user. Front end development is focused on cosmetics and design. A front end developer’s job is to get an application to look and feel good (Rouse, 2005).Function - A block of code that performs a specific action and (often) returns an object. It can be called by other by other parts of the code (W3Schools, 2016).HTML5 - HTML5 is the fifth revision of Hypertext Markup Language. HTML, along with CSS and Javascript, has been the standard language for web development since the mid-nineties. It is used to define and organize the contents (textboxes, tables, pictures, buttons …) of a webpage and to change the appearance of the webpage. (Rouse, 2014)JavaScript - JavaScript is a script language that can be imbedded in an HTML page and then be interpreted by a web browser. JavaScript allows a web page to do more than just display information. It allows developers to make their web pages and web applications interactive (Rouse & Regrev 2005).JavaScript Constructor - A constructor is a specific type of function that creates an object using the “new” operator. JavaScript has built in constructors for specific types of objects like “Array”. Custom onstructors can be created to produce objects with specific properties and method. (Kelhini, 2015).Model (MVC) - An object or structure of objects that stores data for an application. It is oblivious to the controller and view (Google, 2016).MVC - Model View Controller Architecture. Most web applications conform to this structure (Google, 2016).$qProvider - $q is a service that allows functions to run asynchronously. It makes creates a promise then at some later point in time it returns that promise letting the application know that the asynchronous task has been completed. (Google, 2016)Scope - The scope is kind of like the DOM. It is faster and more efficient than the DOM. It is used to bypass the DOM for checking and triggering expressions. A scope can be nested with multiple layers of subscopes. (Google, 2016)SDK - A software development kit is a set of programs that allow a developers to create computer applications. A SDK will usually include an editor (a program that allows the developer to change code.), a compiler (a program that takes high level code and breaks it down into machine language code.) and a linker (a program that links different files together. Applications are usually written in many different files for organizational purposes.) (Rouse & Blackwell, 2005).Services - Angular services are JavaScript objects that are connected to contollers by dependency injection. They are lazily instantiated, meaning they are only initialized when they are needed (Google, 2016).Template - An Angular template is the view (see MVC) of the angular application. It is written in HTML and includes Angular specific elements (Google, 2016).View (MVC) - The view filters and formats the data contained in the model so that it can be displayed in a visually pleasing and useful way. It should be very easily modifiable (Google, 2016).Web Development Framework - A web development framework is a set of resources and tools that software developers use to construct an application. Usually they are created to eliminate redundant, base level work. For example, many mobile apps use similar menus. It would be inefficient to create a new menu from scratch every time one was implemented. A framework provides a solution by allowing the developer to implement a premade menu then allowing the developer to completely customize the menu. This speeds up development and generally makes life easier for developers. (Rouse, Bock, & Luna, 2013)AppendixFig 1Screenshot of the tutorial app that I built. It features a song that I added to the app.Fig 2Code from the tutorial app that shows my additions to the songs array.Fig 3 The new tab that I added to the tutorial app. It contains an animated gif of Broken Matt Hardy riding his lawnmower through Brother Nero’s pristine lawn. #FinalDeletion #LOLTNA #betterthanRAWFig 4Rough layout sketch of the app’s navigation system.Fig 5Rough layout sketch of the interaction page of the app.Fig 6Rough sketch of the app’s media page.Fig 7Rough Sketch of the apps list page.Fig 8Screenshot of the list page of my app before I started to implement sorting.Fig 9Screenshot of the app when I broke it trying to implement the sort menu.Fig 10Screenshot of the error messages that I received while implementing the sort menu.Fig 11Screenshot of DAApp when I got the sample $ionicPopover code to work.Fig 12Screenshot of the finished sort menu popup.Fig 13Screenshot showing the wrestlers array that holds the wrestler objects for the list.Fig 14Screenshot showing how ion-list has been implemented.Fig 15Screenshot showing the code for the view of the sort $ionicPopover menu.Fig 16Screenshot demonstrating that the list can be sorted by name.Fig 17Screenshot showing that the list can be sorted by height.Fig 18Screenshot showing that the list can be sorted by weight.Fig 19Screenshot of media page, featuring a linked picture.Fig 20Screenshot of media page, featuring a saved image and an animated gif.Fig 21Screenshot of media page, featuring an imbedded YouTube video.Fig 22Screenshot of interactivity page with the necessary HTML code.Fig 23Screenshot of interactivity page with necessary JavaScript Code.Fig 24Screenshot of interactivity page that demonstrates how the text can be changed by the user. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download