MIT GSL 2018 week 3 | thursday Meteor and App Ideation

Today’s Agenda Overview of Today’s Content Any ReactJS Questions? Lecture Topic Meteor App Ideation Activity Meteor To-Do tutorial Wrap-Up

Meteor Full-stack web development framework Includes everything you need to build a web application using only JavaScript Makes web development easy Resources https://stackoverflow.com/questions/tagged/meteor https://github.com/Urigo/awesome-meteor - community curated list of meteor packages and resources https://forums.meteor.com/ https://docs.meteor.com/ - for everything else

Meteor React (Front-End) Meteor (Data Layer) MongoDB (Database) Methods Containers MongoDB (Database)

https://meteor.com/install

Boilerplate code Never need to start from scratch. There is a lot of repetition in building a new meteor application Boilerplate code or boilerplate refers to sections of code that have to be included in many places with little or no alteration Checkout - https://github.com/AdamBrodzinski/meteor-react-boilerplate

Meteor and React

MongoDB Not a relational database In JSON type form Save key-value pair of documents that together make collections Collections can contain documents of different forms RDBMS MongoDB Table Collection Column Key Value Records / Rows Document / Object

MongoDB

MongoDB {_id: ObjectId(7df78ad8902c) title: 'MongoDB Overview', description: 'MongoDB is no sql database', by: 'tutorials point', url: 'http://www.tutorialspoint.com', tags: ['mongodb', 'database', 'NoSQL'], likes: 100, comments: [ { user:'user1', message: 'My first comment', dateCreated: new Date(2011,1,20,2,15), like: 0 }, { user:'user2', message: 'My second comments', dateCreated: new Date(2011,1,25,7,45), like: 5 } ]}

Benefits of MongoDB Structure of a single object is clear. No complex joins. Deep query-ability. MongoDB supports dynamic queries on documents using a document-based query language that's nearly as powerful as SQL. Ease of scale-out − MongoDB is easy to scale. Uses internal memory for storing the (windowed) working set, enabling faster access of data. Index on any attribute

Next Steps Install Meteor locally Follow simple-todo tutorial to get a basic understanding of how to build an application Follow the Guide for more detailed information

App Ideation

Time to start thinking about how you’ll implement your idea/solution to the problem you’ve identified!

First some high level questions What is it that you want your app to do? What type of customers will be using each part of the app? Will your app have more than one component? How will you make it appeal to your users? What problem does you app solve for your customer(s)? Keep coming back to this to make sure that your design decisions align with your primary goals

More detailed considerations What are the exact features you will need? What is the logic flow for a user/customer on your site/app? What type of data will you need? Read this: https://medium.com/ladies-storm-hackathons/how-we-built-our-first-full-stack-javascript-web-app-in-three-weeks-8a4668dbd67c

Who is your competition? We’re still not ready to start designing our own applications yet. First, we need to consider what is already out on the market. With your teams, do some research on what apps are already achieving your goal, to some extent. Now, consider: What are they doing well? (Read the Reviews!) Download the app yourself or lookup the site. What’s working and what’s not? How are you going to make yours better? If there are no similar apps to what you want to achieve, make sure you ask yourself is this idea actually feasible?

Weekend Homework Answer questions on these slides about what your app will do Initial draft of the type of data and information you app will need to keep track of Any technologies you’ll need in order to have a minimum viable product (ex. E-commerce checkout tool)? How will you divide labor? Who will code? Who will design the visual pages? Who will be testing the product?

Install Meteor and start tutorial