Modern Web Development Techniques

Meeting #2

July 22, 2014

OrganizerMark Santiago / @msantiago508

Modern Workflow Techniques

Part 2

"Let's make a (lame) App!"

Hi, I'm...

Topics Covered Last Month

  • Sketching out ideas
  • In Browser Design
  • Rapid Prototying Tools

    • Warning!!

    You might have heard about some of this!

     

    Oh, I'm bound to mess up along the way.

    What's On Today's Menu?

    We're cooking up an app

    Take an existing responsive website and ...

    App-a-tize it.

    More food puns to come...

    So why use an existing site?

    If it's responsive already why bother?

    And what's up with all the food puns?

    1. Time
    2. Good starting point
    3. Partiall Prepared

     

    Allows you to extend the functionality by leveraging the advantages of the devices themselves.

    Today's example:

    Resume/Portfolio Site

    Because the business card is dying, my friends.

     

     

    Much Like Paula Deen's Career.

    But When Things are useful they get...Used.

     

    Opinionated Hybrid app CSS framework and more

     

    Uses Angular 

    Finishes with Cordova/ Phonegap

     

    Let's Begin

    First, make sure you have npm installed then...

    npm install -g cordova ionic

    And prepare a directory

    mkdir ResumeApp && cd $_

     

     

    $ ionic start myApp blank,tabs,or sidemenu

    Now, Choose...

    I'll choose tabs...because

    $ionic start resumeApp tabs
    -resumeApp
	-bower.json
	-config.xml
	-gulpfile.js
	[+]hooks
	-ionic.project
	-package.json
	[+]platforms
	[+]plugins
	-README.md
	[+]scss
	[+]www

    Now, For Live Coding

     

    And there is so much more!

    ng-cordova

    New Angular plugin for Cordova to simplify how you access Cordova plugins and native features in your hybrid apps.

    http://ionicframework.com/blog/ng-cordova/

    Ionic Codepen:

    Great (editiable) code examples for the IONIC Framework. Fork it, play with it, then include it in your project!

    http://codepen.io/ionic/

    What we covered today:

    • Ways to build a hybrid app (briefly)
    • Starting an IONIC cordova project
    • Making baseline changes to house our content
    • Grabbing pre-defined content from our website/webapp
    • fine-tuning our styling for the (native) mobile experience
  • including the platforms we wish to deploy to
  • running in simulator for easy debugging
  • BUILDING
  • Where to change details like icons, project name, etc.
  • Deploying

    • What Was Missed

  • Testing
  • Version Control
  • Starting from Scratch

    • Thanks!

    New Location Starting August

    • Looking for Speakers.
    • Share ideas and suggestions please
    • Does anyone have a good Mojito Recipe?
     
    Mark Santiago/ @msantiago508

    WORKFLOW TECHNIQUES PART 2

    By Mark Santiago

    Made with Slides.com

    WORKFLOW TECHNIQUES PART 2

    Video also available. Check out the meetup Site for more information: http://wmwdt.github.io

    • 1,454

    More from Mark Santiago