Merge pull request #212 from appwrite/fix-web-sdk-docs

Fix getting started guide for web

Author: eldadfux

app/views/docs/getting-started-for-web.phtml

@@ -46,7 +46,7 @@ $demos = $platform['demos'] ?? [];
 <p>When you're using a bundler (like <a href="http://browserify.org/" target="_blank" rel="noopener">Browserify</a> or <a href="https://webpack.js.org/" target="_blank" rel="noopener">Webpack</a>), import the Appwrite module when you need it:</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Appwrite } from 'appwrite';</code></pre>
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Account } from 'appwrite';</code></pre>
 </div>
 
 <h3><a href="/docs/getting-started-for-web#cdn" id="cdn">CDN</a></h3>
@@ -62,15 +62,13 @@ $demos = $platform['demos'] ?? [];
 <p>Initialize your SDK code with your project ID which can be found in your project settings page.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Init your Web SDK
-const appwrite = new Appwrite();
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const client = new Client();
 
-appwrite
-    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
-    .setProject('455x34dfkj') // Your project ID
-;
-
-</code></pre>
+// Init your Web SDK
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;</code></pre>
 </div>
 <!-- 
 <div class="notice calm margin-top-large margin-bottom-large">
@@ -84,15 +82,15 @@ appwrite
 <p>After your SDK configuration is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would use is found in the SDK documentation or in the API References section.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Register User
-appwrite
-    .account.create('unique()', '[email protected]', 'password', 'Jane Doe')
+                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const account = new Account(client);
+
+// Register User
+account.create('unique()', '[email protected]', 'password', 'Jane Doe')
         .then(response => {
             console.log(response);
         }, error => {
             console.log(error);
-        });
-</code></pre>
+        });</code></pre>
 </div>
 
 <h2><a href="/docs/getting-started-for-web#listenToChanges" id="listenToChanges">Listen to Changes</a></h2>
@@ -101,41 +99,43 @@ appwrite
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
                     <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Subscribe to files channel
-appwrite.subscribe('files', response => {
+client.subscribe('files', response => {
     if(response.events.includes('buckets.*.files.*.create')) {
         // Log when a new file is uploaded
         console.log(response.payload);
     }
-});
-</code></pre>
+});</code></pre>
 </div>
 
 <h2><a href="/docs/getting-started-for-web#fullExample" id="fullExample">Full Example</a></h2>
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Init your Web SDK
-const appwrite = new Appwrite();
+                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Account } from "appwrite";
+
+const client = new Client();
+
+// Init your Web SDK
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;
 
-appwrite
-    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
-    .setProject('455x34dfkj') // Your project ID
+const account = new Account(client);
 
 // Register User
-appwrite
-    .account.create('unique()', '[email protected]', 'password', 'Jane Doe')
+account.create('unique()', '[email protected]', 'password', 'Jane Doe')
         .then(response => {
             console.log(response);
         }, error => {
             console.log(error);
         });
 
 // Subscribe to files channel
-appwrite.subscribe('files', response => {
+client.subscribe('files', response => {
     if(response.events.includes('buckets.*.files.*.create')) {
         // Log when a new file is uploaded
         console.log(response.payload);
     }
-});
-</code></pre>
+});</code></pre>
 </div>
 
 <h2><a href="/docs/getting-started-for-web#demos" id="demos">Demos</a></h2>