From d0289bc2c8011433b3ce5e7e05d6a10d652188ae Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <wenyu1999@hotmail.com>
Date: Tue, 28 Jun 2022 21:05:50 +0000
Subject: [PATCH 1/2] fix getting started guide for web

---
 app/views/docs/getting-started-for-web.phtml | 52 ++++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/app/views/docs/getting-started-for-web.phtml b/app/views/docs/getting-started-for-web.phtml
index abc774884..e90e44618 100644
--- a/app/views/docs/getting-started-for-web.phtml
+++ b/app/views/docs/getting-started-for-web.phtml
@@ -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()', 'me@example.com', 'password', 'Jane Doe')
+                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const account = new Account(client);
+
+// Register User
+account.create('unique()', 'me@example.com', '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,27 +99,30 @@ 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()', 'me@example.com', 'password', 'Jane Doe')
+account.create('unique()', 'me@example.com', 'password', 'Jane Doe')
         .then(response => {
             console.log(response);
         }, error => {
@@ -129,13 +130,12 @@ appwrite
         });
 
 // 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>

From f30d01becbedf75941f0760536f357104970f04b Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <wenyu1999@hotmail.com>
Date: Tue, 28 Jun 2022 21:09:04 +0000
Subject: [PATCH 2/2] missed a import code block

---
 app/views/docs/getting-started-for-web.phtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/docs/getting-started-for-web.phtml b/app/views/docs/getting-started-for-web.phtml
index e90e44618..39efb30c4 100644
--- a/app/views/docs/getting-started-for-web.phtml
+++ b/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>