Week 3

Refresher: Last week I set out to answer a few questions about Firebase, build a prototype, write more, and build a github.

Where am I now?

Great question, that. Where do I feel like I am? Wandering around, blind, in the woods of this utterly bewildering project. I had no idea how completely unprepared I was to do this until I started trying to do it and realized I didn’t even know what to google. That being said, this week actually didn’t go poorly. I’m just wondering a few things about the scope of this project (I’ll talk about that later).

So, the questions I wanted to answer last week were:

Can Firebase store images? If so, how?
How am I tagging the stories with a unique id? When does that happen?
How challenging is it to create a search bar? Is that something I can do AND make communicate with Firebase via JavaScript?
Is Firebase really the best database for a project like this? How does National Geographic do it? Or the Washington Post? Or any article based website?

And the answers are:

Firebase storage! It works with Google storage and I can make it work with this project too. I built a prototype, just to be sure. Integrating it into the main code of the project is a goal for next week.
The unique id is the story name. Because I am the only one that manages the backend, I think this’ll work (and Firebase will catch if I try to double up ids). The ids will be created as I feed the stories in to Firebase via their content management site. The unique id is the key to getting the story to pull up when I click the link. This is where the majority of my hours went this week, and I learned a lot of new things (thanks, Stack Overflow).
My instructor and I decided this should be a later sort of problem. But I did do a quick google, and it seems very possible.
Maybe not the best, but I can get it to work, which is what counts!

Beyond that, I did write more stories, found some facts, and have set up my github. I want to show off my Javascript for the home page and how calling the stories works. This was my first time working with two external JS files within the same project, but it is definitely the way to go.

Here is the JS for the home page:

	console.log("Main Firebase Check in action");

	var db = firebase.firestore();
	var stories = db.collection("stories");
	var storage = firebase.storage();

	// What needs to happen: 1. read in all story titles from Firebase
	// 2. Fill list on home page with story titles from firebase
	// 3. when you click on the story, recall story from firebase with that title.
	// 4. display that story in the story page.

	// this function will get all the story names from firebase
	// and put them in the list on the homepage, id = homeNEStories

	function displayStories(){
	// var listTitle = stories.where("title", "==", )
	db.collection("stories")
	.get()
	.then(function(querySnapshot){
	var title = "";
	var fillHome = $('#homeNEStories');
	var prettyList = "";
	querySnapshot.forEach(function(doc){
	console.log(doc.id, "=>", doc.data());
	title = doc.data().storyname;
	prettyList = "<li><a href='story.html#"+title+"'class='storyButton' id='"+title+"'>"+title+"</a></li>";
	fillHome.append(prettyList);
	});
	})
	.catch(function(error){
	console.log("you messed up.", error);
	});
	}


	$(document).ready(function(){
	displayStories();
	});

view raw

script.js

hosted with ❤ by GitHub

It doesn’t look crazy complicated, but let me tell you, figuring out the # thing on the link and that I needed all the rest of the code in the story.js file was an absolute nightmare.

Here is the story.js file:

	console.log("Story Firebase Check in action");

	var db = firebase.firestore();
	var stories = db.collection("stories");
	var storage = firebase.storage();
	var storyhere = $('.storyDiv');

	function pullStory(){
	var whichStory = window.location.hash;
	console.log(whichStory);
	whichStory = whichStory.replace(/[_\W]+/g, "");
	console.log(whichStory);

	// now we need to get the text from firebase.
	db.collection("stories").where("storyname", "==", whichStory)
	.get()
	.then(function(querySnapshot){
	querySnapshot.forEach(function(doc){
	// console.log("im in here");
	console.log(doc.data());
	var theStory = doc.data().storytext1;
	title = whichStory;
	var prettyP = "<h2>"+title+"</h2><p>"+theStory+"</p>";
	storyhere.html(prettyP);
	});
	})
	.catch(function(error){
	console.log("Whoops..", error);
	});
	};

	$(document).ready(function(){
	pullStory();
	});

view raw

story.js

hosted with ❤ by GitHub

Where do I want to be next week?

In contact with a lot more people, I guess. Mentor feedback round one is coming up fast, so I need to get in contact with Prof. Schall and my external mentor, Laurel with SuperHumane. I also need to edit and send my stories to the people who gave them to me to make sure that they are OK with what I’ve written. Part of that process is also asking them for images, so I don’t just have to lean on stock photos.

Next week, I also want to get the CSS wireframe on my homepage finished. I’m super not sold on the current headers for the sections in this project, so maybe fine tune on that. I will also be figuring out a way to connect the images to the particular stories and displaying them on the story pages.

That feels like more than way too much work, but the 50% mark is in three weeks (cue very loud internal scream), so I need to get cooking.

Oh also, note that I’m currently debating the value of the physical component of the project. It is really cool, however, I don’t know how feasible it is in the first way I imagined it. That being said, my instructor had a really good idea to just scale it back rather than completely giving up. So I think I’m going to think more along those lines than surrendering it. Also, scaling it back means that I could create more with less wood, which could be interesting. Stay posted on how this component of Yggdrasil changes.

Where am I now?

Where do I want to be next week?

Share this:

Related

Leave a comment Cancel reply