I'm struggling to build an app. Any advice (design, implementation, etc) appreciated

Design
1

Hello,

I’ve been struggling to build a small Ember app (mostly just for learning purposes) for some time now and I am about ready to give up - I just have not gotten that “ah-ha” moment like I was hoping for. As a result, I’m looking for any advice I can get on design/architecture and implementation. If this is not the place for this, I apologize. Perhaps someone would be willing to pair program or chat with me outside of this medium?

My concept for this app is to introduce different ways to brew coffee. There’s a list of brewing methods in which you can click a specific method. This takes you to a new page that introduces the brewing method (text), displays materials needed (text), shows a YouTube video of the steps to use this brew method and has a text version of the steps (text). A feature I’d like to add is allowing a user to enter their name & type of coffee into a form that updates a div on all pages of the site that says " ‘Name’ made a ‘Brew’ using ‘Type of Coffee’ ". It would be neat if this automatically changed when someone new submitted the form.

Here’s a link to current iteration of my code (most code also below).

Here are some things I can’t figure out/struggling with/need advice on architecture:

  • Where (and how) can I add a div that updates when a user enters data in a form (that is on /brews/brew)? I can push the record to a store, but it’s my understanding that this store is only accessible to this view - not any other page.
  • Is there anything you can see that doesn’t make sense? That could be refactored to be smarter? That I’m misusing?

Ok. Hope you are still with me. If you’ve made it this far, let me say thank you for getting this far!

Here is most of the code I’ve got:

App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();

// ROUTES
App.Router.map(function () {
    this.resource("brews");
    this.resource("brew", { path: "/brews/:brew_id" });
});    

App.IndexRoute = Ember.Route.extend({
    redirect: function () { this.transitionTo("brews"); }
});

App.BrewsRoute = Ember.Route.extend({
    model: function () { return this.store.find("brew"); }
});

App.BrewIndexRoute = Ember.Route.extend({
    model: function () { return this.modelFor("brew"); }
});

// OBJECTS
App.Person = Ember.Object.extend({
    name: "Anonymous",
    beans: "Unspecified",
    brew: "Unspecified"
});

// CONTROLLERS
App.BrewController = Ember.ObjectController.extend({
  actions: {
    submitPersonBrew: function () {
      var personName = this.get("personName"),
          personBeans = this.get("beans"),
          personBrew = this.get("brewName"),
          store = this.store;

        store.createRecord('PersonBrew', {
          name: personName,
          beans: personBeans,
          brew: personBrew
        });
    }
  }
});

App.Brew = DS.Model.extend({
  brewName: DS.attr("string"),
  brewIntroText: DS.attr("string"),
  brewVideo: DS.attr("string"),
  brewMaterials: DS.attr("raw"),
  brewSteps: DS.attr("raw")
});

App.Brew.FIXTURES = [
{
    id: "Chemex",
    brewName: "Chemex",
    brewIntroText: "Unchanged since the 1940s, the Chemex coffee maker is a relatively simple & inexpensive way to brew coffee that produces a clear cup.",
    brewVideo: "http://www.youtube.com/embed/3QMoAkb50QI",
    brewMaterials: [
      "material #1",
      "material #2" // etc
    ],
    brewSteps: [
      "Step #1",
      "Step #2" // etc
    ]
} //... etc. etc. for each brew method

That’s most of the app. Here are the relevant parts of the HTML:

<!-- Brews -->
  <script type="text/x-handlebars" data-template-name="brews">
    <div class="step step-one">
      <h2>Brews</h2>
      <p>Choose a brewing method below to start making a wonderful cup of coffee.</p>
        <ul>
          {{#each item in model}}
          <li>{{#linkTo "brew" item.brewName}}{{item.brewName}}{{/linkTo}}</li>
          {{/each}}
        </ul>
    </div>
  </script>

  <!-- Brew -->
  <script type="text/x-handlebars" data-template-name="brew">
    <div class="step step-two">
      <h2>{{brewName}}</h2>
      <p>{{brewIntroText}}</p><br />

      <iframe {{bind-attr src=brewVideo}} frameBorder="0" width="853" height="480" allowfullscreen></iframe>
      
      <h3>Step By Step</h3>

      <p>You&rsquo;ll need:</p>  
      <ul>
      {{#each material in brewMaterials}}
        <li>{{material}}
      {{/each}}
      </ul>

      <hr />

      <ol>
      {{#each step in brewSteps}}
        <li>{{step}}</li>
      {{/each}}
      </ol>

      <hr />
      <p>Did you make a cup using {{brewName}}? Let us know!</p>
      {{input type="text" value=personName placeholder="Your Name"}}<br />
      {{input type="text" value=beans placeholder="Type of Beans"}}<br />
      <button {{action submitPersonBrew}}>Submit Brew</button>
    </div>
  </script>

Thanks for taking the time to read this! Please let me know if I’ve mispoken or left anything relevant out.

2

Hi Damon, send me an email at tarasm@gmail.com. I’ll help you offline.

1 Like