Mobile Development

Act 1

Basics and Views

Introduction. I am responsible for all the content for the next six weeks. My goal is to give you a crash course in mobile development. Dev can’t be taught, but it can be learned. Two ways to learn the content-- do the work and do nothing, or find something exciting and really learn the content.

Structure

  • Week 1- Introduction, Basics, Crash Course
  • Week 2, 3, 4- Projects, View, Controller, Model
  • Week 5- Backends

In Act 1- basics, theory and a quick overview of tools you’ll use when developing. Act 2 we move through an actual application from start to finish. In act 3 quickly talk about backend design and implement a simple backend that pairs with the app made in part 2.

Structure

  • Lectures
  • Tutorials
  • Dokuwiki
  • Piazza

We’re using a simple book. Its long, but very useful and actually isnt that long. Book is required, as the tutorials are taken directly from the book. After Act 1, we will post tutorials on Dokuwiki. All questions should be on Piazza. The book is not needed except for as reference after the first two weeks.

Structure (Meta)

“A lie-to-children is a simplified explanation of technical or complex subjects as a teaching method for children and laypeople, first described by science writers Jack Cohen and Ian Stewart. The word "children" should not be taken literally, but as encompassing anyone in the process of learning about a given topic regardless of age. It is itself a simplification of certain concepts in the philosophy of science” -Wikipedia, “Lie-to-Children”

Example- if a real mobile developer were here. Example of a child’s lie. We don’t have time to cover everything. If we did, the breadth of materials would be overwhelming and the scope would be dizzying. You will need to go out and find some of these things on your own.

A Little Advice

So you want to be a mobile developer?

Good- its a great field, will talk more about the field later! As said before, you have to find something you’re interested in-- 90% of the learning happens on the project. Never take a job you’re qualified for.

A Little Advice

So you don’t want to be a mobile developer?

Thats fine! You still need to learn what mobile development entails, as today mobile development has massively taken over the consumer development space. Stats example.

Overview of Mobile Development

payscale.com, 2015

Mobile developers are in high demand and are thus paid well. It also means there are a lot of poor mobile devs.

Overview of Mobile Development

Neilson, 2014 and comScore, 2014

Smartphones are huge. you can see the field is evenly split. More mobile users over smartphone users, and they use it more than their desktops.

Overview of Mobile Development

comScore, 2014

A study of how people access retail. Note that a majority of the use happens on mobile.

iOS and Android

  • Median init. Wage =~ 140k (with experience)
  • More profitable App Store

iOS vs Android

iOS vs Android

Meanwhile, 2 months after iOS7 launched, 80% of iOS devices are on lates version.

Overview of Mobile Development

Don’t be a fanboy*

*fanperson

Don't limit yourself. The market is large for both, and the reasons people tend to choose are not true. Don’t limit yourself. Give anecdote.

Theory

The broad strokes of Mobile Development- what goes where?

These are the things you’ll need and manipulate when making a mobile application. The tools, the words you’ll need to know, and the things you’ll interact with.

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

Here they are. Broadly speaking, these are the things you’ll need to interact with as you develop. These things are absolutely not unique to Andriod Development-- just the opposite.

Theory- IDE

  • Integrated Development Environment
    • Android- ADT+Eclipse or Android Studio
    • iOS- Xcode
  • Manages integration between all components of your projects

An IDE is the program that manages all of the other things on the list. We installed Eclipse on the lab computers, but we will try to use Android Studio. Its job is to manage your code, ensure all the things your program needs are in place, and finally runs all the programs and steps needed to take the components and make a completed application out of it.

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

Theory- SDK

  • SDK
  • Provides tools, frameworks, and libraries needed to create applications for a mobile device

An SDK is the set of tools needed to make your app as well as the software your application runs on. Rulebook analogy. Different SDKs are made for different versions of the platform. Currently on Android 5, newer SDKs allow you access to new features on a platform.

Theory- SDK

  • Frameworks
    • Define the platform on a software level
    • Bind the developer
  • iOS- Cocoa and Foundation
  • Android- Android

Part of the things an SDK provides you with is a set of Frameworks and Libraries. Similar, will talk about difference later. The Android and iOS Frameworks are an abstraction layer on the underlying system and ultimately the hardware.

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

Theory- Buildtools

  • Build Tools
    • Build automation involves scripting or automating the process of compiling computer source code into binary code” - Wikipedia
  • Optional* programs that automate compilation and dependencies
  • In mobile, covers a broader range of tools

The set of tools that manages the creation of your application from all the pieces listed above. Takes the constituents of the application and makes a packaged version.

Theory- Buildtools

  • Android- Gradle
  • iOS
    • LLVM and Clang
    • Cocoapods
  • Buildtools- compiler vs dependency manager

We like AS partially because of Gradle. There are a number of reasons we like the program. Gradle not only builds the application, it also provides a config system and more importantly a dependency manager. Talk about what a dependency manager is (libraries and frameworks are next.)

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

Theory- Libraries and Frameworks

  • Things you should lean your applications on
  • DRY- Don't Repeat Yourself
  • Conventions

  • Useful Resources
    • Github and Google
    • Android Arsenal

Libraries and frameworks are a crutch in the same sense that your legs are a crutch. They are pieces of code that others have put together that do things so you don’t have to. Reduces complexity of your code and improves readability. You should keep your own “libraries” as you get more advanced. DRY is important. Frameworks vs Libraries, inversion of control.

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

The good stuff, and the stuff you actually do. But don’t worry about it, because...

Theory- Your Code

Coding is easy, you’ll be fine.

Pregnant pause.

Theory- Your Code

Actually, thats not true at all. Projects in software development are TERRIBLE. True stats (for budgets less than 15m) are around 64% in time.

Theory- Your Code

  • Coding is hard, the industry is young
  • We adopt Conventions and Processes to help
    • Conventions help fight off structural errors and improve understandability
    • Processes improve workflow, management, and planning

Problem: young industry. Compared to older industries, we’re abysmal because we’re still figuring out how to do it. To combat this, we use Conventions and Processes. Conventions are explicit rules that are implicitly followed. They make your code less error prone and more understandable. Processes are the ways in which go about actually making applications. Heard of Agile? Thats a developmental and management process. Processes deal with the ways we plan and execute. We will discuss more later.

Theory- Your Code, MVC

  • Convention- MVC
    • Model, View, Controller
    • A design pattern*
  • Uses a separation of concerns to separate code
  • iOS is strictly MVC, Android is not
  • Web frameworks popularized and commonly use MVC

Very important, “Vogue” convention. Not a convetion, not a design pattern, an architectural pattern. MVC is based around a separation of concerns-- what different objects are supposed to worry about. Can’t ignore it, both Android and iOS have some MVC and web frameworks have a LOT of MVC. There other other ways to do this, but MVC is the big one right now. Today we will discuss Views. Example- ask a student for their project (but wait for the next slides to demonstrate.)

Theory- Your Code, MVC

  • The model handles data
  • Classes created and named to represent individual objects in applications

Data objects. Generally stored somewhere, generally that somewhere is a database. This is called persistence. Example.

Theory- Your Code, MVC

  • The view presents information to the user
  • Renders models
  • In charge of presentation, the lowest level

All code relating to presentation. Mostly low level. You will not need to play with this code very much, but you will use the objects. Example.

Theory- Your Code, MVC

  • The controller manages model objects and interaction with the user
  • Administrative, highest level of control

Glue that binds views and models. A larger part of the work happens here.

Theory- Your Code, MVC

  • Business Logic
    • Domain Logic- details about the way your models should be manipulated (belongs in model)
    • Application Logic- details on how your application should run
  • Omitted from simple MVC paradigm

Things that don’t fit into MVC, usually called Business Logic. Domain logic is details about how model objects behave, when that information doesn’t belong in any one model. Application logic generally ends up in controllers, and defines specific configurations or the application, could be something like localization logic. This code generally shouldn’t dominate your applications, or you’re not doing MVC right.

Theory

  • IDE
  • SDK
  • Buildtools
  • Libraries and Frameworks
  • [your code here]
    • MVC
    • Business Logic
  • The Backend

Theory- Backend

  • Backend- a program running on a remote computer that applications can communicate with
    • A server
  • Exposes functionality to apps through an API
  • Focus of Act 3

The “Backend” is basically a program running somewhere, not on a mobile device. Your application communicates with this. Its more formally called a server. This server is a set of layers of software: computer, operating system, web server, and software. Its assumed that servers are secure, something that is not true of apps. A server exposes functionality though an API. Backend are commonly just referred to as APIs, which is an incorrect bastardization of the term. We will cover this later.

Projects

  • Package Name
  • [your code here]
  • SDK
  • Resources
  • Configuration

The last sections were the components you deal with in making applications. This section is the components of projects themselves.

Projects

  • A project is the basic unit for a mobile application in development
  • Projects contain all the data needed to create compiled applications
  • Managed by your IDE

The project is the collection of all the code and files needed to make your app. The IDE manages projects and keeps tracks of the things you don’t want to directly deal with-- big help.

Projects- Package Name

  • Package Name- unique identifier for your app

com.wisc.sampleapp

The name of your application. Conventionally in reverse domain name format.

Projects- Your Code

  • Your code is written, managed, and checked by the IDE
  • Managed by a version control system
    • Git and Github

Your code is a part of the project and is also managed by the IDE. The most important part of your code as the project is concerned is the Version Control system. Think about if all the people in your project could work on the project at the same time. Forks. Commits. Repos.

Projects- SDK

  • iOS- no real choice
  • Android
    • Android Fragmentation
    • Choosing Earlier Platforms

The choice of SDK changes how you will have to write your code based on the features exposed to it. Android is fragmented and you’ll have to user earlier versions. Give fragmentation example for iOS and Android.

Projects- Resources

  • Images, Data, and other files
  • Included and compiled with projects
  • iOS- Managed automatically
  • Android
    • /app/res
    • The Magical R file

Resources are all of the static assets of your application. Images, Data, View Layouts, etc. Talk about how R works.

Projects- Configuration

  • Compilation details and app permissions
  • Android
    • Application Manifest
    • XML
  • iOS
    • Managed automatically
    • Plists- Property Lists

All configuration is stored in files specifically for the purpose. It tells the operating system what your app can do and enables different features or functionality for your app.

Views

  • The presentation Layer
  • Low level- need to know how to use, not how to make

The meat of this lecture. The V in MVC. Low- tells the OS what pixels to draw. Normally used, generally not directly edited- except for using attributes/properties!

Views

  • Basic Views- one-time, framing and controls
    • Layout*, View
    • Button
    • Textview, Label
    • Textfield
    • ActivityIndicator

These are the basic views. They are more or less static in the sense that you put them there and they stay there. Explain the views listed.

Views

  • Core Views- dynamic counts, advanced content
    • Tableview
    • Collectionview
    • Graphics
    • Containers

The core views are where the interesting things in your app happen- because they are dynamic and are better suited for showing lots of Models.

Views- Layout

  • iOS- absolute positioning, Constraints
  • Android- layout to organize views
  • The View Hierarchy
    • Views can have Children (which are also views)
    • Children display themselves in relation to their parents

How views appear on the screen. Absolute positioning vs relative positioning. Layouts are used in Android. Hierarchy means that views have children and are nested.

Views- Layout

Examples of the layouts for Android. Linear Layouts organize views one by one. Relative layouts organize the views in relation to the parent and each other. Draw an example on the board.

Views- Attributes

  • View Configuration
    • Programmatic or Resource
  • iOS- Menu Controls
  • Android- XML Assignments

This is how you change how views appear on the screen. Explain XML a little bit- key-value pairs (dictionary.) Talk about Inflating- the OS reading the file and building the objects. iOS you don’t make views like this. You can also set values in the menus.

Views- References

  • Programmatic reference to a view at runtime
  • Not necessary
  • A variable that gives developer access to the view
  • Android
  • iOS- Outlets, created before compile time

References provide developers with a way to access their views programmatically. Discuss programmatic view manipulation. In Android, have to ask the view for a reference. In iOS, you just have the references, generally.

Views- Callbacks

  • A way of implementing delegation
  • Gives the object a target and methods to call when an event occurs
    • onButtonTouched
  • A delegate is the object called when something happens
  • A callback is the method on that object that is called

Delegation is important. It is a way to define the behavior of objects through another, arbitrary object. Callbacks are methods, delegates are objects. Give an example in class. Generality- views need to work no matter who is using them- delegation allows that.

Views- Building Views

  • iOS- drag and drop using Interface Builder
  • Android
    • Try the Visual Editor
    • Fallback to XML
    • Test, test test!

How do we actually build views? iOS uses IB. Very well done and easy to use. Android has a version like that, but it still needs some work-- you will generally have to go into XML files. These files are considered resources and are stored in the resource directory. Remember that resources are other files or data that your application needs to function.

Summary- Vocab

  • MVC
  • Libraries
  • Frameworks
  • Dependencies
  • DRY
  • Separation of Concerns
  • Delegation

Overview the vocab

Swift Intro

  • History: NeXT, Smalltalk, Objective-C, Swift
    • Sidenote: c and cpp natively supported
  • Objective-C: esoteric, verbose
  • Swift: just verbose
  • Resources
    • Apple’s Swift Book (free)
    • Lynda.com
    • Ray Wenderlich

Overview the vocab

Swift- Syntax

  • Boring Stuff (raywenderlich)
    • Another cheat sheet (codeinswift)
  • Closures (f**gswiftblocksyntax.com)
    • Asynchronous programming
    • Inline handling
  • Optionals
    • learnxinyminutes

Overview the vocab

Summary- Topics

  • Mobile Development Structure
  • Project Structure
  • MVC Theory
  • Views

Heres what we talked about.

Lecture 1 - Google Slides