Create a Progressive Web App using Vue, Cosmic, and GraphQL

How to use the Spotify API to Build a Song Shuffle Blog

<p>We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> (public beta). We&#39;re excited to help teams build amazing modern products together with new serverless solutions.</p><p>In this short tutorial, I&#39;m going to show you how to get up and running with the <a href="https://github.com/cosmicjs/send-email-function" rel="noopener noreferrer" target="_blank">SendGrid Email Function</a> to send emails via SendGrid (to view more example functions login and go to <em>Your Bucket &gt; Settings &gt; Functions</em>).</p><h3><strong>Deploying the Function</strong></h3><p><strong>1. Install the function</strong><br>To install the SendGrid function, go to <em>Your Bucket &gt; Settings &gt; Functions</em>, find the SendGrid function, and click &quot;Install Function&quot;.</p><p><strong>2. Add keys, and deploy</strong><br>After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don&#39;t have them handy).</p><p>Go to your SendGrid account and find your API Secret Key located in <a href="https://app.sendgrid.com/settings/api_keys" rel="noopener noreferrer" target="_blank">Settings &gt; API Keys</a> (you may need to create a new one) and add this as the value to SENDGRID_API_KEY.</p><p>Once you have your keys added, click &quot;Deploy Function&quot; and in a minute your function will be deployed and ready for requests.</p><h3><strong>Code a Web Contact Form</strong></h3><p>Next, let&#39;s create a contact form to access the newly deployed endpoint. Follow these steps to install the <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">React Starter</a>:</p><pre>npm i -g cosmic-cli
cosmic init react-starter
cosmic develop</pre><p>Now go to your app codebase and go to the default page component located in <code>pages/default.js</code> and edit it to look like this:</p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js" class="embedly-card"></a></div><p><strong>Notice a couple things here:</strong></p><p>1. We&#39;ve added a <code>form</code> element to take the input for email, first name, and last name.<br>2. We&#39;ve added the <code>handleSubmit</code> method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint.</p><p><strong>And that&#39;s it!</strong> We&#39;ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing.</p><h3><strong>Benefits</strong></h3><p><strong>Less Code</strong><br>We didn&#39;t have to worry about building an API endpoint in our app to send the data to SendGrid.</p><p><strong>Less Config Hassles</strong><br>We don&#39;t have to worry about config hassles like possibly leaking secret keys client-side. We don&#39;t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable.</p><p><strong>Reusable</strong><br>We can use this endpoint in any other app that needs to send an email.</p><p>I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to <em>Your Bucket &gt; Settings &gt; Functions</em>). Let me know if you have any questions or comments. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.</p>

Sending Emails with the SendGrid Function

<p>A primary benefit of managing content API-first is that your content is transformed into portable and scalable content objects, available via API endpoint to create workflows with the third-party applications that your team uses. We recently released the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>, which allows users to add Zapier to their Bucket to choose triggers that prompt an action in a third-party system. To demonstrate, I&#39;ve put together a couple of workflows connecting my Cosmic Content to Gmail, Google Sheets and Google Calendar.&nbsp;</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bf084660-b5ec-11e8-8f62-f9335c363962-1*TRRW9Wp_ZqD8MJ5gS_7c5w.gif" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><h4>Make a Cosmic Zap</h4><p><strong>I want to create three example workflows:&nbsp;</strong></p><table style="width: 100%;"><tbody><tr><td style="width: 50.0000%;">New Media Published</td><td style="width: 50.0000%;">Receive an email via Gmail</td></tr><tr><td style="width: 50.0000%;">New Author Published</td><td style="width: 50.0000%;">Add author info to Google Sheets</td></tr><tr><td style="width: 50.0000%;">New Appointment Drafted</td><td style="width: 50.0000%;">Add appointment to Google Calendar<br></td></tr></tbody></table><p><br></p><p>I want to automate these processes using the Cosmic Zapier Integration. To do so, go to the Cosmic <a href="https://cosmicjs.com/integrations" rel="noopener noreferrer" target="_blank">Integrations Page</a> and <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">add Zapier</a> to your Bucket.&nbsp;</p><p><br></p><p><strong>Choose a Trigger App: Search &quot;Cosmic&quot;&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e81cd9f0-b531-11e8-ab6d-bd28d4a01875-Screen Shot 2018-09-10 at 2.43.28 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><p><strong>Select your Cosmic Trigger</strong></p><h4><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/148ac0b0-b532-11e8-abe6-6dcac9f4e8c5-Screen Shot 2018-09-10 at 2.44.49 PM.png" style="width: 640px;" class="fr-fic fr-dib">&nbsp;</h4><h4><br></h4><p><strong>Media Updates</strong>: I chose &quot;<strong>New Media</strong>&quot; for my zap, and select the Bucket I want to received my updates to Gmail from. I connected my Gmail account and clarify who I want to receive the message, in what format and what pieces of content to include from the new Cosmic Media Objects being uploaded to my Bucket. Now when I add new Media to my Bucket, I get an automated email that includes the media file for my review.&nbsp;</p><p><br></p><p><strong>New Media Object Published</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f3811610-b529-11e8-ab6d-bd28d4a01875-Screen Shot 2018-09-10 at 1.46.59 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Media Object Email Notification</strong></p><p><strong><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ed7207c0-b529-11e8-a457-7fb018832f7b-Screen Shot 2018-09-10 at 1.46.45 PM.png" style="width: 100%;" class="fr-fic fr-dib"></strong></p><p><br></p><p><strong>New Author Updates</strong>: I chose &quot;<strong>New Object</strong>&quot; for my zap, and select the Bucket I want to receive my updates to Google Sheets from. I clarify within Zapier that I am looking to pull <strong>Published Object</strong> Types to update Google Sheets. I connect my Google Sheets account and clarify which spreadsheet and section I want to see updated when new Authors are published in the Cosmic system.&nbsp;</p><p><br></p><p><strong>New Author Published&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53076b50-b5ea-11e8-8f62-f9335c363962-Screen Shot 2018-09-11 at 12.44.10 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Author Added to Google Sheets&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/70331210-b5ea-11e8-8454-bd9b5d794116-Screen Shot 2018-09-10 at 4.41.43 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Appointment Updates:</strong> I chose &quot;<strong>New Object</strong>&quot; for my zap, and select the Bucket I want to receive my updates to Google Calendar from. I clarify within Zapier that I am looking to pull <strong>Draft Object</strong> Types to update Google Calendar, since my workflow calls for contributors drafting content for appointments that still need to be confirmed. Now when my Appointments Object Type is set to draft, it adds a Google Calendar appointment.&nbsp;</p><p><br></p><p><strong>New Appointment Drafted</strong></p><h4><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/82a89b30-b5eb-11e8-906a-53ab98ffc135-Screen Shot 2018-09-11 at 12.52.29 PM.png" style="width: 100%;" class="fr-fic fr-dib"></h4><p><br></p><p><strong>New Appointment Added to Google Calendar</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/949d02e0-b5eb-11e8-bb35-e53dd8bea0af-Screen Shot 2018-09-11 at 12.52.36 PM.png" style="width: 378px;" class="fr-fic fr-dib"></p><h3><br></h3><h3><img src="https://cosmic-s3.imgix.net/e1a004b0-b5ec-11e8-8f62-f9335c363962-ice_screenshot_20180911-130228.png" style="width: 698px;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion</h3><p>It&#39;s easy to automate hundreds of simple tasks using the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>. Once you&#39;ve connected your Cosmic Buckets to Zapier, you&#39;re able to create a variety of zaps that can speed up your team&#39;s time to market and ability to manage its various workflows seamlessly.&nbsp;</p><p>If you have any comments or questions about integrating your Cosmic Objects into workflows with other apps using Zapier, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Automating Content Workflows with Gmail, Google Sheets and Google Calendar

<p>Cosmic makes it easy to manage content for your Vue.js applications. In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a><a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">&nbsp;</a>using the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>. Our game, &quot;Enter The Cosmos&quot;, is a turn-based, RPG style game built using Vue.js, Node.js and Cosmic. The game follows you as you fight off a fleet of space pirates to avenge your family. Install, deploy and edit every part of this video game app from your Cosmic Bucket Dashboard. 🔥&nbsp;</p><p><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Page</a><br><a href="https://cosmicjs.com/apps/vue-rpg-game/demo" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Demo</a><br><a href="https://github.com/cosmicjs/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Codebase</a><br><a href="https://cosmicjs.com/articles/how-to-create-an-rpg-adventure-game-using-vuejs-and-cosmic-js-jlftg080" rel="noopener noreferrer" target="_blank">How to Create an RPG Adventure Game using Vue.js and Cosmic</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/449b5ea0-b1da-11e8-b061-fb695ed9ca14-ezgif-4-ad44e8b966.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Cosmic enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team saves time in the process.&nbsp;</p><p><br></p><h3 name="9b20">QuickStart a Vue.js RPG Game in 3 Steps&nbsp;</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a>.</p><p name="4c02"><br></p><h3>Step 1: Create an Account</h3><p><a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank"><strong>Sign up</strong></a><strong>&nbsp;for Cosmic + Install the <strong><a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a></strong> + Create a New Bucket</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/79ef30b0-b1f6-11e8-a189-1b656bde317a-ice_screenshot_20180906-120102.png" style="width: 480px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Step 2 🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/60c1ca60-b1da-11e8-90ff-4de0ce9f20ab-ice_screenshot_20180905-110632.png" style="width: 497px;" class="fr-fic fr-dib"></p><p data-empty="true"><br></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/689f7e30-b1da-11e8-90ff-4de0ce9f20ab-ezgif-4-40cfcf2bf7.gif" style="width: 489px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><p><br></p><h3>Step 3: Content Management&nbsp;</h3><p>Manage content for your RPG game in three separate object types: Pages, Screen Assets and Sprites. Refer to the <a href="https://cosmicjs.com/articles/how-to-create-an-rpg-adventure-game-using-vuejs-and-cosmic-js-jlftg080" rel="noopener noreferrer" target="_blank">original tutorial</a> to see how the game&#39;s content models are chosen and implemented.&nbsp;</p><h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/adf2c5c0-b1f6-11e8-b1b7-bb5940048b74-ice_screenshot_20180906-120236.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building Vue.js apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

QuickStart a Vue.js RPG Game in 3 Steps

<p>Cosmic Community Member <a href="https://cosmicjs.com/reaganmcf" rel="noopener noreferrer" target="_blank">Reagan McFarland</a> just debuted the new Alexa Skill to add Objects to your Cosmic Bucket via voice. In this video, Cosmic co-founder <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> takes you on a quick tour of how to demo the <a href="https://github.com/cosmicjs/alexa-to-do" rel="noopener noreferrer" target="_blank">Alexa To Do app</a> from the Alexa developer console.</p><h3>TL;DR:</h3><p><a href="https://github.com/cosmicjs/alexa-to-do" rel="noopener noreferrer" target="_blank">Alexa To Do App Source Code</a><br><a href="https://www.amazon.com/ap/signin?clientContext=135-7726449-9221419&openid.return_to=https%3A%2F%2Fdeveloper.amazon.com%2Falexa%2Fconsole%2Fask&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=amzn_dante_us&openid.mode=checkid_setup&marketPlaceId=ATVPDKIKX0DER&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&pageId=alexa_blueprints&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.pape.max_auth_age=7200&siteState=clientContext%3D132-3064528-7336868%2CsourceUrl%3Dhttps%253A%252F%252Fdeveloper.amazon.com%252Falexa%252Fconsole%252Fask%2Csignature%3Dnull" rel="noopener noreferrer" target="_blank">Amazon Alexa Developer Console</a><br><a href="https://cosmicjs.com/articles/how-to-build-an-alexa-skill-to-add-objects-to-your-bucket-via-voice-jlbar04u" rel="noopener noreferrer" target="_blank">How to Build an Alexa Skill to add Objects to your Bucket via Voice</a><br><br></p><h3>Video: Alexa To Do App Demo</h3><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="https://www.youtube.com/embed/eef3N8V01bo?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span></p><h3><br></h3><h3><br></h3><h3>Conclusion</h3><p>We welcome suggestions and submissions for new open-source projects. If you&#39;d like to contribute and join our Community, or have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Video: Alexa To Do App Demo

<p>Thanks to all who attended our first webinar / AMA last week. There was some great engagement and questions that helped steer the screen-share webinar for users in the Cosmic Community as well as first-time visitors to the system. If you missed it, check out the video and be sure to attend our next one.&nbsp;</p><p><br></p><h3>Webinar Recap: Powering Modern Apps with Cosmic</h3><div class="fr-embedly " data-original-embed="<a href='https://youtu.be/NbbJAiW_Tnk' class='embedly-card'></a>"><a href="https://youtu.be/NbbJAiW_Tnk" class="embedly-card"></a></div><p><a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> covers the Cosmic Basics with resources like <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started</a>, the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> and Cosmic <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">Starters</a>.</p><p><br></p><h3>Conclusion</h3><p>Feel free to drop us a line if you&#39;d like to see an upcoming webinar covering a particular topic or use case. If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p><p><br></p>

Webinar Recap: Powering Modern Apps with Cosmic

<p>Cosmic is a great content management tool which gives you the ability to upload, access, and edit your data and media files easily. These properties make it a prime candidate to use when building web-based video games as they heavily incorporate a
large combination of media images, files, and data objects. In this tutorial, we&rsquo;ll go over how to make a simple role-playing adventure game built in Vue.JS whilst using Cosmic to manage our content.</p><h3>TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">RPG Game</a><br><a href="http://cosmic-game.cosmicapp.co" rel="noopener noreferrer" target="_blank">RPG Game Demo</a><br><a href="https://github.com/cosmicjs/vue-rpg-game">RPG Game Github</a></p><h3>Intro</h3><p>As there are many articles on this site to help you get started using Cosmic, this tutorial will assume you have a basic understanding of how Cosmic works. Refer to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started Guide</a>.&nbsp;</p><p>Integrating with third party applications is usually one of the most frustrating tasks of setting up a new a project. However, by making a few simple calls to Cosmic&rsquo;s API, we can retrieve our data very easily.</p><h3>Setting Up Your Project</h3><p>In this tutorial, we will use vue-cli to quickly get our project up and running. We can also easily install Cosmic using npm as well:</p><p><br></p><blockquote><p>$ npm install -g vue-cli</p><p>$ vue init webpack cosmic-game</p><p>$ cd cosmic-game</p><p>$ npm install --save vuex cosmicjs</p><p>$ npm install</p><p>$ npm run dev</p></blockquote><p><br></p><p>We will then edit /config/config.js to add our bucket and add our read and write keys for authorization:</p><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js" class="embedly-card"></a></div><p><br></p><h3>Uploading and Compartmentalizing our Game Assets using Cosmic</h3><p>To populate our game with its story, environment and characters, we will compartmentalize data in three buckets.</p><p>The first Bucket will be &ldquo;Story&rdquo;, and will contain anything related to the actual story and environment of the game. We can easily enter and edit story text, and add assets such as environment background images here. Notice how easily we can
use the Cosmic CMS to edit our data!</p><p>The next Bucket will be titled &ldquo;Hero&rdquo;. Here, as its name implies, we can add all the assets and metadata relating to the main character. This Bucket can contain all the hero&rsquo;s sprites (for example: animations for movement, actions, and
idling) as well metadata such as the hero&rsquo;s character stats.</p><p>The next and final Bucket will be &ldquo;Enemies&rdquo;, and as its name suggests will have all the enemies assets and character stats.</p><p>Being able to split up our RPG game into these three Buckets gives us a couple of unique advantages. Firstly, all assets are neatly filed away and are easily accessible. Secondly, the Cosmic CMS allows us to easily add and edit storylines, just as
easily as one would edit a blog post.</p><p><strong>&nbsp;</strong></p><h3>Accessing Data in our Game from Cosmic</h3><p>We can easily access our content from Cosmic using the Cosmic API, and populate them into three Vue.JS components which reflect the three Buckets we made for the story, hero, and enemies.</p><p>We can reference the following function in each of our components mounted calls, so that when the component loads our data from our Buckets is ready to use:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js" class="embedly-card"></a></div><p>Before our game starts, we can give our players exposition by pulling in the story from our &lsquo;Story&rsquo; Bucket. We can also use the story bucket to further set the scene by setting up the environment:</p><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js" class="embedly-card"></a></div><p>As you can see in the above snippet, we easily convert data hosted on Cosmic via REST API, and can store them for use in VueJS&rsquo;s data object.</p><p>Using the same approach, create hero.vue and enemy.vue components and load in their metadata from their respective buckets.</p><p>To make component to component dialogue easier (for example, an attack method in hero.vue affecting an enemies health), you can use state management via store, provided by Vuex &ndash; which we already installed earlier using NPM. Here is an example file
of how Vuex can use the data obtained from Cosmic to manage our store:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js" class="embedly-card"></a></div><p>Now that we have all our necessary game data loaded, we can populate our game! We can load in environment images as background images in our components, add hero and enemy sprites to their respective components, and use our newly created store to handle
our battle, leveling up, and other state change logic.</p><p>Here is some example code for your home screen menu, where you can see just how we populate and update data received from Cosmic:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js" class="embedly-card"></a></div><p><br></p><h3>Conclusion<strong>&nbsp;</strong></h3><p>Building a video game, whether in a browser or elsewhere, requires a whole lot of data management. In this tutorial, not only did we explore how easy it is to manage the data by separating it into three different Buckets &ndash; we also saw how quickly
and easily that same data can be accessed and modified. Furthermore, integration was exceptionally simple: all one had to do was run a bash command, and make sure environment keys were properly set up.</p><p>Cosmic is a lightweight, but powerful platform &ndash; and I hope this tutorial was able to properly display its many strengths.</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

How To Create An RPG Adventure Game using Vue.JS and Cosmic

<p>Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> using the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>. This single page website landing page is built using Node.js and a minimal theme from <a href="http://startbootstrap.com" rel="noopener noreferrer" target="_blank">Start Bootstrap</a>. &nbsp;Install, deploy and edit every part of this landing page website from your Cosmic Bucket Dashboard. 🔥&nbsp;</p><p><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a><br><a href="https://cosmicjs.com/apps/landing-page/demo" rel="noopener noreferrer" target="_blank">Boostrap Landing Page Demo</a><br><a href="https://github.com/cosmicjs/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page App Codebase</a><br><a href="https://github.com/cosmicjs/landing-page" rel="noopener noreferrer" target="_blank"></a><a href="https://cosmicjs.com/knowledge-base/bootstrap-cms" rel="noopener noreferrer" target="_blank">Bootstrap Knowledge Base</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/44ec5440-aac8-11e8-879a-fff9b7fe1331-ezgif-2-1efc198707.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Cosmic enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team saves time in the process.&nbsp;</p><p><br></p><h3 name="9b20">QuickStart a Bootstrap Landing Page using a Headless CMS</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a>.</p><h3><br></h3><h3>🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/be0d5a00-aac7-11e8-af82-5d4fe2f2426d-ice_screenshot_20180828-083401.png" style="width: 493px;" class="fr-fic fr-dib"></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/c6bb5620-aac7-11e8-a91c-c5910414b7c7-ezgif-2-61bea2c53b.gif" style="width: 497px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building Bootstrap apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Start building today