February 2, 2018 Meeting

Onward with our multi-component Project!

Last week we decided on an overall purpose for our project. We will create a Web service and several different Clients to consume the service. Today, we will break into our teams to work on development of these components.

  • Review discuss overall project plan: role of Web Service and what each client component will do
  • Goals: set up your development environment; decide on pairs to work together on the coding; use a tutorial to develop a sample to familiarize yourselves with the use of the IDE (Integrated Development Environment) and learn a bit about the language

Web Service Team:

  • Get started developing the Web Service in C# using Visual Studio 2017 Community Edition
  • Visual Studio Community Edition 2017  free versions for Windows or MacOS
  • This is a nice tutorial for getting started with a sample Web Service and has versions for Mac and for Windows: Create a Web API Windows version  Create a Web API MacOS version
  • We will only be using the GET Request for our project, so you can focus on that when going through the above tutorial
  • Look at the sample POC (Proof of Concept) code from Robin’s GitHub for a Web Service calling the existing Weather Service and for the console app that calls the new Web Service. See the Web Services channel in Slack
  • Decide on what the REQUEST from the Client needs to look like and what your Web Service RESPONSE will look like. What is the JSON object structure?

Swift IOS Team:

  • Get started developing an app in XCODE using the Swift programming language that will consume the Web Service, i.e. send it a REQUEST and process the RESPONSE
  • XCode: Install XCode version 9 from the App Store; it may also require you to update your operating system. This can be a very slow process as we saw last week, so if your machine isn’t set up yet, we will just share the Macs that are ready and get the others started with the installation.
  • Get Sample Chapters of Book: Coding iPhone Apps for Kids: This is a very nice book for learning Swift. Try the free sample chapters! You can get the free sample from Amazon (Chapter 1 and part of Chapter 2) and you can get Chapter 3 for free from the Book’s Web Site at NoStarch Press:
  • Create a simple Hello World project to get familiar with the IDE; we can use the example in Chapter 1 of the book for this
  • Run your sample code on your phone!: Attach your iPhone or iPad to your development Mac using the USB cable while running your project in XCode. Chapter 1 of the book explains how to do this. One additional thing that may crop up that is not in the book is that you may get a message like this when you try to run the app “Codesign wants to access key ‘access’ in your keychain”. If this appears, you need to enter your Mac login id (not your Apple id).
  • For more practice and help using the XCode IDE and Swift, Apple has a good Swift Tutorial from Apple Developer Site
  • Design your UI (User Interface): decide what types of “widgets” should be on the screen. Should there be more than 1 screen?
  • Start building the initial iteration of the UI by adding elements to the story board

Other Teams?:

  • Last week we also discussed building additional Clients, including:
    • Web Page with JavaScript to call the Web Service
    • AppInventor: Web-based IDE with coding blocks for Android devices
    • C# Console Application: simple application build in Visual Studio to call the Web Service and display a result
  • If anyone wants to work on one of those teams we will help you get  started. Or we can circle back to those in a couple of weeks….

Web Service Overview: 

In Client/Server architecture, the Web Service is the Server and the Clients can be one or more applications(Web sites, mobile app, console app, etc.) that send an HTTP REQUEST to the Web Service and receive an HTTP RESPONSE back from the Web Server. The Web Service provides an API (Application Programming Interface to receive the REQUESTS from a Client. The Client software must know the specifications for formatting and submitting the REQUEST. The Client software must parse the RESPONSE from the API call to get the data into a format that the Client can use. Our Web Service will return the data in JSON (JavaScript Object Notation).

More Resources:

Check out this tutorial for more on JSONW3C Schools JSON

Sample Code for various types of Clients calling the Weather Underground Service: Wunderground API Call Samples

Visual Studio C# Example of a Web API ClientCalling a Web API from a .NET Client

January 26, 2018 Meeting

Take a look at our updated “Why” Page

Check out the updated list of summer opportunities and more….

Planning Session for multi-faceted solution

Big Picture: At our last meeting we had an interesting discussion about the varied interests our Members have for experiencing different programming languages and types of development. So this week, as a group, we will create a “Grand Plan” for a larger scale solution to be composed of several small projects. These smaller projects may be built in different languages and/or platforms that will all tie together. The components can be developed by pair programming according to interest and experience: possibilities include C#, Java, JavaScript, Python, Swift, etc. Central to the solution will be a Web Service that can be called by multiple apps or Web Pages to return a result in JSON format (JavaScript Object Notation) that be used by the individual app or Web Page.

Tools: Depending on what components we decide to develop, we will identify which software tools are needed so that we can get everyone started on setting up their laptops as appropriate. Some of this configuration may need to be done later at home.

Setting up for iOS Development on a Mac with XCode/Swift:

Please bring your iPhones and/or iPads to the meeting along with their USB cables so we can connect it to the Mac to run Swift apps.

We will be coding in pairs or small groups so even if you don’t have your own Mac you will be able to do everything.

To Set Up a Mac:

  • You will need an Apple ID, which you probably have if you have ever downloaded anything from the App Store
  • You do not need a paid Apple Developer ID at this point; that will only be required if you want to put your apps in the store
  • From the App  Store download and install XCode

iOS Apps with Thunkable

We will take a deeper look at building apps with Thunkable, perhaps doing a simple prototype for part of the multi-project solution we are designing

January 12, 2018 Meeting

Mobile Application Development Starts this Month!

Join us as we learn to build applications for our phones and tablets. We will be taking a look at all this over the next couple of months:

Tonight we will build apps for iOS mobile using Thunkable!   So please bring your iPhone or iPad to the meeting.

First a little overview on Mobile App Building…

  • Programming Languages depend on whether you are building the app for an iOS device or an Android device
  • Native programming languages are the coding languages understood specifically by a target operating system
    • Swift or Objective-C for Native iOS apps: requires a Mac to build and test; Objective-C is very old and Swift is much more widely used now
    • Java for Native Android apps: can be developed on Windows or Mac
  • Cross-Platform programming builds apps that work on both Android and iOS devices and more
    • Xamarin provides developers with a full-featured IDE for building apps in C# that can run on Windows, iOS, and Android devices.  The coding can be done in Visual Studio for Windows or for Mac but the iOS apps do require connection to a Mac for building
  • Drag and Drop App Builders with coding blocks: Drag and drop UI components (buttons, images, text, etc.)  onto a mockup of the phone’s screen; then use the blocks editor to build your program’s code by drag and drop as well. Behind the scenes the blocks are compiled into the native code that is understood by the target device.
    • MIT App Inventor currently provides only Android builds but they are in the process of developing iOS capabilities too
    • Thunkable allows you to choose either iOS or Android coding environments and that is what we will use today to make our apps!

Now Let’s THUNK!

Install Thunkable Live on your iPhone or iPad: go to Apple’s App Store and get the Thunkable Live app. You will use this to test your Thunkable apps as you are developing them

Start up Thunkable:  Supported Browsers are Chrome, Firefox, and Safari. Go to Thunkable and get started by clicking the “Get your App Started” button; when prompted “I want to create apps for”  select iOS

Logging into Thunkable: use your Google account to register and sign in

We will do the five introductory tutorials together to get familiar with the interface and some of the functionality:

Thunkable Hour of Code Tutorials

Thunkable Documentation

Build and modify a Weather Forecast Application!

In the Thunkable Documentation click the Sample Apps link and find the Weather app. Click “Copy the app source code” to create a copy of the app in your own Thunkable iOS projects.

The weather app is an example of using a Web Service; we will look at this in more detail and together will figure out how to modify the app to show the weather in our own location and perhaps to display additional information.

 

 

 

December 8, 2017 Meeting

This evening we will meet back at our usual time and place: 25N Coworking at 5:45 PM.

Agenda:

Guest Speaker: Grace Haaf. Grace earned a PhD from Carnegie Mellon, has done extensive work in engineering and big data as well as owning her own company and recently participating in the Democratic primary process for the IL 6th Congressional District. We are looking forward to hearing her perspective on working in tech while being an active and engaged citizen in the political process.

Techie Table Talk:  Following Grace’s presentation, we’ll hang out around our Conference Table where our FVGCC Members can share thoughts on what we just heard or discuss other ideas and interests related to tech fields, women in tech, educational opportunities, projects we may work on, upcoming events, etc.

Slither Onward with Game Development — It’s time for the Snake Game!

  • Let’s Play! Fire up the code in our Chapter 6 code directory in Cloud 9 and try out the game to get a feel for how it works
  • Makey MakeyAdd a Makey Makey input device and get creative on how to connect to the game!
  • Get a glimpse of Object-Oriented coding:  We will take a brief look at how the game uses the concept of a class and an object that represents an instance of that class. 
    • Classes and Objects are the most important concepts in Object-oriented languages like C++, C#, and Java.

Class: a template representing some type; it has properties that hold values representing state and methods (aka functions) that invoke behaviors. Example: we can define a class Snake that has properties for size, body, skin, isAlive, and more. The properties may be given initial values within the class definition

But does JavaScript have real classes?: JavaScript didn’t have an actual “class” keyword and syntax until a 2015 specification which may not be implemented yet by all Browsers; see this MDN article on JavaScript classes

Constructor Function declaration conceptually implements a class: In the Snake program (written prior to the 2015 addition of “class” to JavaScript),  the Snake variable defined by a constructor function is conceptually a class

Constructor: a function used to create a new instance of the class; it may have parameters which are values passed to the function and used to set some initial values for the object. The Snake constructor starts like:

 var Snake = function(x, y, width, height, maxSize) {

Object: an instance of a class that can have its properties set and its methods invoked in code. For example, we create a Snake instance like this:   var snake = new Snake(0, 0, canvas.width, canvas.height, 1000);

December 1, 2017 Meeting

NOTE: Our December 1st meeting will be held at the St. Charles Public Library.  We will meet at the usual time 5:45PM to 7:45PM 

Agenda

  • Fix the Jelly Wobbly Gravity game! With the book’s original code, the character won’t move…the jellies are all dropping in the same line and splattering before hitting the floor…the character isn’t able to get sick from the jellies because the “collisions” have no effect. Let’s help The Dude enjoy (or not) his fill of jellies!
  • Make your own changes to any part of the game and/or to your site’s home page
    • We can do some changes as a group if there are suggestions and desire to do that
    • We can help each other with updates to individual pages

Resources

To copy the JavaScript file with all the bug fixes:

  • Go to the file on GitHub: Wobbly Jelly Gravity Corrected JavaScript
  • Click the “Raw” button when viewing the file
  • Right-click and select “save as” to save it to your machine
  • Upload the saved file to your project in Cloud9 and swap it for the “bad” JavaScript. Detailed instructions for doing that are in the debugging document in the below link

Detailed notes for the debugging exercise and concepts:

A working version of the game: Jelly Gravity

November 17, 2017 Meeting

Tonight’s meeting will be a feast of engaging presentations by:

  • Our first tech talk of the year!: Erin Maresko, who designed our FVGCC branding, will give us her insights on technical design
  • Our very own Hackathon team: Our members who participated very successfully in the Huskie Hackathon at Northern Illinois University will share their experiences and demo the results of their all-night programming efforts
  • Our very own instructor: Robin will give us a mini-version of her presentation for Fox Valley Computing Professionals on Cross Platform Mobile Development with Xamarin

November 3, 2017 Meeting

Dissect the Typography Game

We are looking forward to tonight’s meeting at 25N where we will be taking a deeper dive into the inner workings of the typography game.

Explore the answers to these questions and more:

  • What happens when the user enters the URL into the Browser? How does the Browser process the request? How does it integrate the styles in the CSS file and the code in the JavaScript file with the HTML elements on the page? 
  • How does clicking a button or pressing a key cause something to happen on the Web page? The keydown and click events!  What is an event listener? What is an event handler? What is a keycode? Reference: Keycode lookup
  • How do we define a single object that can represent either the player or the “bad guy” in the game? Define a function that is used as an object constructor; within the function define methods such as “move” and “setSpeed”.  Use the keyword “new” to create named instances of the class – “hero” and “enemy”. Use those named instances to control the players. Examples: hero.move()  or enemy.setSpeed(speed * 23)

Document: Notes for today’s activities

Updated Notes for Web Development

In case anyone missed a meeting or needs catching up, here are some technical notes on what we have done so far in our Web Development meetings. The documents also include more details on some of the concepts we are covering:

Week 1: Getting set up with Cloud9 and GitHub; cloning the code from a repository

Intro To Web With Cloud9/GitHub Notes

Week 2: Adding and editing files in a Cloud9 workspace; Git commands; pushing your Cloud9 code up to your GitHub Repository; publishing your site on GitHub

Web Week 2 Notes

Week 3: Languages of the Web: High level look at use of HTML, CSS, and JS. Web directory structure: organizing your files. Hands-on exercise: clean up the sample code for the “Chapter 3” project from the book, separating the JavaScript and CSS out of the index page. Brief look at Dev Tools and Debugging

Web Week 3 Notes

 

October 27, 2017 Meeting

We are looking forward to another fun meeting full of discoveries! Here’s some of what we are planning:

  • Help anyone get up to speed who hasn’t completed the GitHub and Cloud9 setup and basic Web pages from the previous 2 weeks; don’t worry if you weren’t able to attend those meetings
  • Notes about the Book and the source code
    • Sample code in our Repo has different chapter numbers than the chapters in the actual book, i.e., Chapter 3 code directory = Chapter 2 of book
    • the book focuses on  on what the HTML5 specification adds to the “older” specifications of HTML, CSS, and JS and assumes knowledge of basic HTML, CSS, JS, so we will review the basics of these 3 Web languages
  • Three Languages of the Web:
    • HTML: HyperText Markup Language – determines  structure of the page content -> the SKELETON
    • CSS: Cascading StyleSheets – determines appearance of the page, the presentation (colors, fonts, and much more) -> the SKIN
    • JS: JavaScript – determines actions on the page, the behavior. For example, what happens when you click a button, hover with the mouse, or when the page loads -> the MUSCLE
    • Remember that the W3 Schools Tutorials are an excellent resource for learning these languages and many other Web Development skills
  • Typical Web directory structure
    • Explore the folders for css, img, fonts, and js as in the Chapter 4 code folder
    • Look at the index.html page for Chapter 4’s code to see how the css and js files are linked to it
    • Compare to Chapter 3’s index.html (Typography Game, chapter 2 in book); note how the CSS is embedded between <style> tags in the <head> and the JavaScript is embedded between <script> tags just above the closing body tag
    • Group exercise: Separate out the CSS and JS from Chapter3/index.html into separate files and link them in the index.html page. It will help to have the code folding setting turned on in Cloud9 to make copying easier. Menu Cloud9 –> Preferences –> User Settings –> Code Editor
  • Debugging:
    • Debugging tools are used not only to find “bugs” in the code but to analyze running code to understand what is going on
    • Chrome Debugging Tutorial
    • For the Typography Game, let’s run through a brief debugging session to see what the code is doing, how to step through it, how to change a variable, as well as inspecting the HTML/CSS. Analyze how the game works and find something you would like to change
    • Small teams or individuals can work on each making a change to the code, change something in the CSS or the JS or the HTML, then look at it in the debugger

Huskie Hackathon at NIU November 4-5

We have an opportunity to participate in the Huskie Hackathon at Northern Illinois University on November 4-5!  As several members of the Fox Valley Girls Coding Club were enthusiastic and successful participants in the Chicago Hacks Hackathon last spring, the Huskie Hackathon should be an exciting and rewarding experience.

For more details and to sign up, please go to the Huskie Hackathon site.