Flutter Development 003

This slideshow requires JavaScript.

Today I set up the drawer in the Flutter app. The drawer is composed of 2 things: a hamburger menu button and a drawer with the list of options for the app.

Here’s the code I used to set up the drawer in the app:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainView()
    );
  }
}

class MainView extends StatelessWidget {

  static const String _title = 'Manoa Career Center';

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                child: Text(''),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text(
                  'View Employers',
                  style: TextStyle(fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  'View Fair Map',
                  style: TextStyle(fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  'Links',
                  style: TextStyle(fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  'SIGN IN',
                  style: TextStyle(fontSize: 12.0,
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  'SIGN UP',
                  style: TextStyle(fontSize: 12.0,
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  'RESET PASSWORD',
                  style: TextStyle(fontSize: 12.0,
                  ),
                ),
              ),
            ],
          ),
        ),
        body: HomePageWidget(),
      ),
    );
  }
}

class HomePageWidget extends StatefulWidget {
  HomePageWidget({Key key}) : super(key: key);

  @override
  _HomePageWidgetState createState() {
    return _HomePageWidgetState();
  }
}


class _HomePageWidgetState extends State {

  @override
  Widget build(BuildContext context) {

    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [

        ],
      ),
    );
  }
}

Contact me if you have any questions!

Advertisements

Flutter Development 002

Alright, today I’m getting the app started. I’ll first write out what I’m planning to achieve today. Then I’ll list out what I actually got done. I’ll include any problems that come up. And I will list out any solutions that I have come up with since the last blog post.

What I’m planning to achieve today

Today I am planning on setting up the bare bones project with the Flutter Create command. Once I’ve got that done, I’m planning on running the app on both platforms to take a photo to show that it’s working.

What I got done today

Today I set up the flutter app with flutter create. I opened up the project in Android Studio. I want to use IntelliJ IDEA to code the app but I believe my student license is going to run out so I might as well learn the ins and outs of Android Studio because it’s a free program.

I also created a repo for this project and uploaded it to Github.

Problems that came up

The setup process took about 10 seconds. I’ve created a few flutter apps before. So I know the basics. Things will start to ramp up as I start to investigate Flutter packages that I haven’t used before. Stay tuned for more problems, they are all but guaranteed in development 🙂

Solutions to problems that came up

During the course of this project I will be using a variety of resources. I will list them here as I come up with solutions to problems that come up.

Thanks for joining me on the second blog post on Flutter development. Read Part 1 if you’re interested in the goals of the project.

Flutter Development 001

 This weekend I delivered a talk on Building Cross-Platform apps with Flutter at the Hawaii iOS Developer Meetup. The talk went well and the audience seemed impressed. With the recent win of doing a great presentation, I’ve decided to blog the development of this Manoa Career Center app here in my blog.

I’ve already built the app in Swift. More than half the smartphone users are on Android. I need to make an app that works on Android. So I’ve decided to use Flutter to develop a single code base that creates a cross platform app.

This app will have 2 audiences: the students and the employers.

Here are the core features of the app:

  • Display a map of the ballroom to show where each employer is stationed.
  • Allow the student to set up a profile
  • Allow the employer to set up a profile
  • Allow the student and the employer to match-make easily. I am considering using QR codes so that usernames do not need to be searched for in the system.

Students and employers are the intended audience for the app:

The employers want to select candidates that are good for their business. Students want to find employers that will be a good fit for them when they graduate from college.

Here are the problems I am planning to solve with the creation of this app:

  • Get students to use the app to save the employers they are interested in talking to.
  • Make sending resumes to the employer as easy as possible.
  • Facilitate a way to get our department a home on the student and employer’s phones.

Do you have any questions about the development of this app? Contact me, I’d love to hear about it.

Debugging without the console is like flying blind

I’m mentoring a highschool student at Iolani High School in the Robotics department.

Read Part Two if you’re interested in learning how we hacked the Google Maps API.

They’re building an autonomous catamaran to take various readings in the canal to monitor the health of the water source.

The student that I’ve been mentoring was tasked with creating 2 front end webpages for the project.

The first page is meant to take all of the sensor readings and display them on a graph so that other users can visually work through the data.

The second page allows users to tell the catamaran where it needs to travel to next by feeding it a GPS coordinate.

In this blog post I’ll share how we trouble shot the first issue. Read the second part of this story if you’re interested in seeing how we hacked the Google Maps API to get it to do what we needed it to do.

We worked on creating the first page with Google App Scripts to get the data from the catamaran and to populate a spreadsheet. The student ran into some problems getting the Javascript to populate the spreadsheet and emailed me:

I am having problems passing an array from my html document to a function in google script document.
I attached images of my code, but if it would be easier to view another way please let me know.

In the html document, the getCoord function (lines 110-120) I am cycling through an array of markers. First, I’m checking to see if the markers are visible on the map, then use getPosition to push the coordinates of the marker into an array named coord. I think something is going wrong here, and the array is empty when it gets sent to the google script document in line 81.

Previously, I passed the markers array to the google script document, but I don’t think getPosition works when it is not in the html document. In line 79, I tested getPosition in the html document and it does return the coordinates of the marker.
In the google script code, I want to input the coordinates into a google sheet. I’ve passed strings from the html document to the google script code which were successfully added to the google sheet. So, I think the syntax is correct.

Please email me if you know what may be going wrong or have any ideas about how to get around this.

I traced through the code and sent the following message back:

Thanks for sending over the code. I managed to find a few issues in the code and I’m happy to help.
The first issue is in index.html where you get the length of the markers array. You’re using markers.getLength(). Getting the length of an array in JavaScript is written as markers.length.
I found this error by using JavaScript’s console.log() function. Please let me know if you want some advice on how to use this debugging function to check on the state of variables in the web browser.
She took the feedback and did a lot more work than I thought she would be able to do.
Lesson learned: Debugging without the console is like flying blind.
That was it for the first page. In Part Two I’ll share a hilariously “hacky solution” we are using to determine if a GPS coordinate on water or land.

Takeaways from “State of Public and Private Blockchains” by C. Mohan

This past Friday, I attended a talk called “State of Public and Private Blockchains” by C. Mohan (one of the founding fathers of SQL). I learned a lot at this talk and I wanted post it to my blog before I forget some of the details.

  • Double spend issue comes up because transaction speeds are too slow
  • Cutting down on the number of transactions cuts down on the processing time of all transactions.
  • Define non-deterministic behavior
  • Bitcoin exchanges == banks
  • SAP thrived because they prepackaged the database solution so that SME didn’t have to write their own system.

Hawaii iOS Developer Meetup – Session 34

Adam Smith discussed “Architecture 101” with regards to building iOS apps during this week’s meetup. We develop apps and we tend to leave all the code in the View Controller class. This is not a good practice. Adam shared that each of our classes should ideally have a single responsibility (and therefore should only do one thing).

The single responsibility principle is a computer programming principle that states that every module or class should have responsibility over a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility. Robert C. Martin expresses the principle as, “A class should have only one reason to change.” – Wikipedia

So how does the SRP relate to iOS programming? Well Adam shared a simple app that he built that downloaded Game of Thrones data and images from the apple website. He had created a Table View that all the devs know well: TableViewControllerDelegate.

Any usage of TableViewDelegates requires certain TableView methods in order to fulfill the contract of the TableViewDelegates protocol. Through the course of his presentation Adam refactored the TableViewController so that it only took care of the aspects of being a view controller. He completely extracted the functionality of networking and TableViewControllerDelegate out of the ViewController.

When Adam puts together a talk, I like how he leaves in common mistakes so we can watch him take them out as he explains what and why he is doing what he is doing in the code. And he’s really approachable with questions.

During this meetup we also had 3 new Hawaii iOS Developers attend. I met Leo, Jerome, and Jordan. After the meetup I showed some apps that I had written the week before we ARKit. Looking forward to the next meetup where I will be discussing ARKit further.

Still thinking about the comment Chae made when I was discussing the shortcomings of ARKit (namely that you have to map the room before ARKit works). Chae added that ARKit is an attempt by Apple to make this technology easy to use. The real value of ARKit will come when it is successfully combined with other technologies like Machine Learning and Computer Vision.

If you’re interested in attending the next meetup, please RSVP!

Takeaways from Loko I’a Water Management Conference in Punalu’u

This slideshow requires JavaScript.

Over the past 3 days I participated in a Water Management Conference in Punalu’u. My job was to attend the conference and get feedback from participating Native Hawaiian Fishpond owners regarding what they need most in an app to monitor the tide, oxygen, and salinity of their fishponds.

Here are the findings with attributions regarding who said what:

Derek

  • Tide graph data needs to do in and out data.
  • Temperature reading is easy to get
  • Please add it to the app.
  • Uses Tide Graph tide app
  • Thinks about using other paid features
  • But has not made the jump.

Jim

  • Loading all that NOAA data in Pacioos makes the web app slow.
  • Told me about the Pacific Disaster Center (PDC) which is an international app for emergency managers
  • Wants to find student workers
  • Shared Career Fair in October

Robin

  • Grab the tide data.
  • Get the longitudinal data.
  • Then sell it as a conservation project.

Kaoru

  • Has experienced many problems using apps
  • One big gripe was that in using an app, photos needed to be taken inside the app and the app maker did not make adding photos from the photo library possible.
  • Had to take photo and assign GPS data to the photo
  • Had to upload GPS data by hand. Not ideal.
  • Check out the Liquid app (SeaGrant)
  • The app has to load and be FAST
  • Needs to look pretty and be easy to use.
  • MAKE THE APP SUPER READABLE
  • Need to have click-consistency in the app: Where you click should produce the same interaction every single time.
  • Differentiate between finger touch to comb over data and swipe to new graph with two fingers – differentiate based on how many fingers are used to do the gesture.
  • In order to do tide predictions we need at least 18.9 years of tide data. This is the scientific standard for data.
  • 2 years of data is not enough to do predictions.
  • We have 10 years of NOAA data on the Kaneohe buoy
  • Anomalies in tide data readings might be due to turbulence in the water flow
  • Send the app user a notification if the sensor is giving readings that it is being tampered with so we can go and check on it to make sure it hasn’t been moved or stolen.
  • 60 points of data “meaned” and we are still getting anomalous data.
  • Please smooth out the data.

Carli

  • Be sure to put the sensor at 30cm from the water.
  • Allow scientists using the app to show the reading in ft and m.

Ke’eli’i

  • Wants to be able to compare his fishpond to other fishponds
  • What combination of salinity, oxygen, and tide flow worked best for other fishponds to grow limu, oysters, and fish?
  • We want easy access to the data.
  • Too many data points is not helpful.

Kehaulani (Mokauea Fishpond)

  • Want to be able to say that makaha1 is here at this GPS
  • Kids can make conclusions with their own eyes at the fishpond
  • Mokauea fishpond is an educational resource for kids age 8-12
  • We want them to get familiar with high/low tide dynamics
  • Currently using the app Tide Tracker
  • Tried out different ones
  • Likes Tide Tracker most
  • Needs to know when tide is lowest
  • This is best time to take kids out
  • Also best time to do work and pick limu
  • Also best time to build rock wall.
  • This requires the app to do tide predictions
  • Wants the kids to kilo – look with their eyes and learn
  • Need to be able to see the tide approaching
  • NOAA data cannot predict king tide for specific locations.
  • MOON PHASE IS HUGE
  • Mahina – Teach Hawaiian names for moon phases like the Hawaiian moon phase song
  • Visually showing the current moon phase is helpful in teaching moon phases to kids
  • Important to show sunset/sunrise times
  • Also important to show Moonrise/Moonset times
  • Make the app brighter.
  • Make the text size HUGE, hard to read for older people.
  • Show “minus tide” in clear clear clear visuals. Like show that part of the graph in a different color and make it stand out. This is the part that Kehaulani wants the most.
  • Minus tide is best time to go gather limu and move rocks.
  • Add step button feature to advance to next minute/hour/day
  • Maybe easier to use a single button with a fixed location
  • Having a sliding gauge might make it hard to get JUST THAT RIGHT LOCATION AND INFO
  • Landscape view is helpful
  • TOTALLY INTERESTED IN SEEING OTHER PEOPLE’S FISH POND DATA! THEN WE CAN SEE WHAT IS WORKING FOR THEM AND ADJUST OUR SALINITY, FLOWS, ETC TO MORE CLOSELY MATCH THEIR WORKING SETTINGS

Blake

  • Not all makahas have 2 gates
  • Get students stoked on science to get jobs to stay here on the island.

Judy

  • Feedback on the Loko I’a app
  • Scrolling readjusts the axis.
  • Forcing you to orient yourself every time you scroll to a different view.
  • Needs to port the app to Android
  • Interested in student workers to keep building out the Loko I’a app.

Carlo

  • If all fishpond owners have the same question, then we can build in force to solve that one issue.
  • In order to determine if they all have the same needs, they need to be able to compare longitudinal data, real-time data, and predictive data.

Brian

  • Salinity allows us to predict other things.
  • Photosynthesis only happens during the day and stops at night.

Then there are also unsorted thoughts that I overheard and jotted down on a piece of paper during the conference:

  • “Whatever data we can get, it all comes down to cost.”
  • Make the data useful for us. The goal is to provide accurate fishpond data.
  • Doing oyesters in a shallow pond is tough. We need an accurate assessment.
  • Make a big calendar that shows the contributions from everyone.
  • There are 7 makaha at He’eia Fishpond: 4 salt water and 3 fresh water. It’s important to name each makaha. Makaha 2 is called “Hihimanu.”
  • “It’s good to name things to give them life.”
  • We need time to work with the low tide.
  • Tidal lag is affected by moon phase.
  • We need to know where the water came from.
  • We need a quantity of parameters to determine the models.
  • Goal is to have a map and be able to see the parameters you want to see for all ponds.
  • We need a map to show all the fishponds.
  • Goal is to make the fishpond productive and we need to quicken the pace to learn that.
  • Important to integrate the moonphase because some fish orient themselves to the moon phases.
  • Make the app as user-friendly as possible.
  • The goal of the conference is to get sensors into the hands of people.
  • YSI and Seabird are very expensive sensors.
  • “There’s not much time between the tides to move rocks.”
  • The app should share, “This is exactly what we need and this is how we do it.”

Next Steps

I still have a few lingering questions such as: “What is the best way to allow users to select the attributes for each site? Tableview? Buttons to new view controllers? Still thinking on this one.

All in all a fantastic opportunity to learn more about the history and ancient practices of combining fresh and salt water to create brackish water to cultivate aquaculture to entice fish to grow big and strong. Email me if you have any questions!